Apply prettier formatting
This commit is contained in:
Michael Weimann
parent
1cac306093
commit
526645c791
1576 changed files with 65385 additions and 62478 deletions
|
|
@ -15,15 +15,15 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import { debounce } from "lodash";
|
||||
import classNames from 'classnames';
|
||||
import React, { ChangeEvent, FormEvent } from 'react';
|
||||
import classNames from "classnames";
|
||||
import React, { ChangeEvent, FormEvent } from "react";
|
||||
import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/crypto/api";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { MatrixClientPeg } from '../../../../MatrixClientPeg';
|
||||
import Field from '../../elements/Field';
|
||||
import AccessibleButton from '../../elements/AccessibleButton';
|
||||
import { _t } from '../../../../languageHandler';
|
||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||
import Field from "../../elements/Field";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { IDialogProps } from "../IDialogProps";
|
||||
import { accessSecretStorage } from "../../../../SecurityManager";
|
||||
import Modal from "../../../../Modal";
|
||||
|
|
@ -42,7 +42,7 @@ const VALIDATION_THROTTLE_MS = 200;
|
|||
|
||||
interface IProps extends IDialogProps {
|
||||
keyInfo: ISecretStorageKeyInfo;
|
||||
checkPrivateKey: (k: {passphrase?: string, recoveryKey?: string}) => boolean;
|
||||
checkPrivateKey: (k: { passphrase?: string; recoveryKey?: string }) => boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
|
|
@ -71,7 +71,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
recoveryKeyCorrect: null,
|
||||
recoveryKeyFileError: null,
|
||||
forceRecoveryKey: false,
|
||||
passPhrase: '',
|
||||
passPhrase: "",
|
||||
keyMatches: null,
|
||||
resetting: false,
|
||||
};
|
||||
|
|
@ -95,7 +95,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
}, VALIDATION_THROTTLE_MS);
|
||||
|
||||
private async validateRecoveryKey() {
|
||||
if (this.state.recoveryKey === '') {
|
||||
if (this.state.recoveryKey === "") {
|
||||
this.setState({
|
||||
recoveryKeyValid: null,
|
||||
recoveryKeyCorrect: null,
|
||||
|
|
@ -106,9 +106,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
try {
|
||||
const cli = MatrixClientPeg.get();
|
||||
const decodedKey = cli.keyBackupKeyFromRecoveryKey(this.state.recoveryKey);
|
||||
const correct = await cli.checkSecretStorageKey(
|
||||
decodedKey, this.props.keyInfo,
|
||||
);
|
||||
const correct = await cli.checkSecretStorageKey(decodedKey, this.props.keyInfo);
|
||||
this.setState({
|
||||
recoveryKeyValid: true,
|
||||
recoveryKeyCorrect: correct,
|
||||
|
|
@ -165,7 +163,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
recoveryKeyFileError: true,
|
||||
recoveryKeyCorrect: false,
|
||||
recoveryKeyValid: false,
|
||||
recoveryKey: '',
|
||||
recoveryKey: "",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -264,28 +262,32 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
} else if (this.state.recoveryKeyValid) {
|
||||
return _t("Wrong Security Key");
|
||||
} else if (this.state.recoveryKeyValid === null) {
|
||||
return '';
|
||||
return "";
|
||||
} else {
|
||||
return _t("Invalid Security Key");
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const hasPassphrase = (
|
||||
const hasPassphrase =
|
||||
this.props.keyInfo &&
|
||||
this.props.keyInfo.passphrase &&
|
||||
this.props.keyInfo.passphrase.salt &&
|
||||
this.props.keyInfo.passphrase.iterations
|
||||
);
|
||||
this.props.keyInfo.passphrase.iterations;
|
||||
|
||||
const resetButton = (
|
||||
<div className="mx_AccessSecretStorageDialog_reset">
|
||||
{ _t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
|
||||
a: (sub) => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onResetAllClick}
|
||||
className="mx_AccessSecretStorageDialog_reset_link">{ sub }</AccessibleButton>,
|
||||
}) }
|
||||
{_t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
|
||||
a: (sub) => (
|
||||
<AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onResetAllClick}
|
||||
className="mx_AccessSecretStorageDialog_reset_link"
|
||||
>
|
||||
{sub}
|
||||
</AccessibleButton>
|
||||
),
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -294,149 +296,162 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
|
|||
let titleClass;
|
||||
if (this.state.resetting) {
|
||||
title = _t("Reset everything");
|
||||
titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_resetBadge'];
|
||||
content = <div>
|
||||
<p>{ _t("Only do this if you have no other device to complete verification with.") }</p>
|
||||
<p>{ _t("If you reset everything, you will restart with no trusted sessions, no trusted users, and "
|
||||
+ "might not be able to see past messages.") }</p>
|
||||
<DialogButtons
|
||||
primaryButton={_t('Reset')}
|
||||
onPrimaryButtonClick={this.onConfirmResetAllClick}
|
||||
hasCancel={true}
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
primaryButtonClass="danger"
|
||||
/>
|
||||
</div>;
|
||||
titleClass = ["mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_resetBadge"];
|
||||
content = (
|
||||
<div>
|
||||
<p>{_t("Only do this if you have no other device to complete verification with.")}</p>
|
||||
<p>
|
||||
{_t(
|
||||
"If you reset everything, you will restart with no trusted sessions, no trusted users, and " +
|
||||
"might not be able to see past messages.",
|
||||
)}
|
||||
</p>
|
||||
<DialogButtons
|
||||
primaryButton={_t("Reset")}
|
||||
onPrimaryButtonClick={this.onConfirmResetAllClick}
|
||||
hasCancel={true}
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
primaryButtonClass="danger"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (hasPassphrase && !this.state.forceRecoveryKey) {
|
||||
title = _t("Security Phrase");
|
||||
titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle'];
|
||||
titleClass = ["mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle"];
|
||||
|
||||
let keyStatus;
|
||||
if (this.state.keyMatches === false) {
|
||||
keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
|
||||
{ "\uD83D\uDC4E " }{ _t(
|
||||
"Unable to access secret storage. " +
|
||||
"Please verify that you entered the correct Security Phrase.",
|
||||
) }
|
||||
</div>;
|
||||
keyStatus = (
|
||||
<div className="mx_AccessSecretStorageDialog_keyStatus">
|
||||
{"\uD83D\uDC4E "}
|
||||
{_t(
|
||||
"Unable to access secret storage. " +
|
||||
"Please verify that you entered the correct Security Phrase.",
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus" />;
|
||||
}
|
||||
|
||||
content = <div>
|
||||
<p>{ _t(
|
||||
"Enter your Security Phrase or <button>use your Security Key</button> to continue.", {},
|
||||
{
|
||||
button: s => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onUseRecoveryKeyClick}
|
||||
>
|
||||
{ s }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
) }</p>
|
||||
content = (
|
||||
<div>
|
||||
<p>
|
||||
{_t(
|
||||
"Enter your Security Phrase or <button>use your Security Key</button> to continue.",
|
||||
{},
|
||||
{
|
||||
button: (s) => (
|
||||
<AccessibleButton kind="link_inline" onClick={this.onUseRecoveryKeyClick}>
|
||||
{s}
|
||||
</AccessibleButton>
|
||||
),
|
||||
},
|
||||
)}
|
||||
</p>
|
||||
|
||||
<form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
|
||||
<Field
|
||||
id="mx_passPhraseInput"
|
||||
className="mx_AccessSecretStorageDialog_passPhraseInput"
|
||||
type="password"
|
||||
label={_t("Security Phrase")}
|
||||
value={this.state.passPhrase}
|
||||
onChange={this.onPassPhraseChange}
|
||||
autoFocus={true}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
{ keyStatus }
|
||||
<DialogButtons
|
||||
primaryButton={_t('Continue')}
|
||||
onPrimaryButtonClick={this.onPassPhraseNext}
|
||||
hasCancel={true}
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
primaryDisabled={this.state.passPhrase.length === 0}
|
||||
additive={resetButton}
|
||||
/>
|
||||
</form>
|
||||
</div>;
|
||||
<form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this.onPassPhraseNext}>
|
||||
<Field
|
||||
id="mx_passPhraseInput"
|
||||
className="mx_AccessSecretStorageDialog_passPhraseInput"
|
||||
type="password"
|
||||
label={_t("Security Phrase")}
|
||||
value={this.state.passPhrase}
|
||||
onChange={this.onPassPhraseChange}
|
||||
autoFocus={true}
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
{keyStatus}
|
||||
<DialogButtons
|
||||
primaryButton={_t("Continue")}
|
||||
onPrimaryButtonClick={this.onPassPhraseNext}
|
||||
hasCancel={true}
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
primaryDisabled={this.state.passPhrase.length === 0}
|
||||
additive={resetButton}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
title = _t("Security Key");
|
||||
titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle'];
|
||||
titleClass = ["mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle"];
|
||||
|
||||
const feedbackClasses = classNames({
|
||||
'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
|
||||
'mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid': this.state.recoveryKeyCorrect === true,
|
||||
'mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid': this.state.recoveryKeyCorrect === false,
|
||||
"mx_AccessSecretStorageDialog_recoveryKeyFeedback": true,
|
||||
"mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid": this.state.recoveryKeyCorrect === true,
|
||||
"mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid": this.state.recoveryKeyCorrect === false,
|
||||
});
|
||||
const recoveryKeyFeedback = <div className={feedbackClasses}>
|
||||
{ this.getKeyValidationText() }
|
||||
</div>;
|
||||
const recoveryKeyFeedback = <div className={feedbackClasses}>{this.getKeyValidationText()}</div>;
|
||||
|
||||
content = <div>
|
||||
<p>{ _t("Use your Security Key to continue.") }</p>
|
||||
content = (
|
||||
<div>
|
||||
<p>{_t("Use your Security Key to continue.")}</p>
|
||||
|
||||
<form
|
||||
className="mx_AccessSecretStorageDialog_primaryContainer"
|
||||
onSubmit={this.onRecoveryKeyNext}
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
>
|
||||
<div className="mx_AccessSecretStorageDialog_recoveryKeyEntry">
|
||||
<div className="mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput">
|
||||
<Field
|
||||
type="password"
|
||||
id="mx_securityKey"
|
||||
label={_t('Security Key')}
|
||||
value={this.state.recoveryKey}
|
||||
onChange={this.onRecoveryKeyChange}
|
||||
forceValidity={this.state.recoveryKeyCorrect}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<form
|
||||
className="mx_AccessSecretStorageDialog_primaryContainer"
|
||||
onSubmit={this.onRecoveryKeyNext}
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
>
|
||||
<div className="mx_AccessSecretStorageDialog_recoveryKeyEntry">
|
||||
<div className="mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput">
|
||||
<Field
|
||||
type="password"
|
||||
id="mx_securityKey"
|
||||
label={_t("Security Key")}
|
||||
value={this.state.recoveryKey}
|
||||
onChange={this.onRecoveryKeyChange}
|
||||
forceValidity={this.state.recoveryKeyCorrect}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">
|
||||
{_t("%(securityKey)s or %(recoveryFile)s", {
|
||||
recoveryFile: "",
|
||||
securityKey: "",
|
||||
})}
|
||||
</span>
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
|
||||
ref={this.fileUpload}
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={this.onRecoveryKeyFileChange}
|
||||
/>
|
||||
<AccessibleButton kind="primary" onClick={this.onRecoveryKeyFileUploadClick}>
|
||||
{_t("Upload")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>
|
||||
<span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">
|
||||
{ _t("%(securityKey)s or %(recoveryFile)s", {
|
||||
recoveryFile: "",
|
||||
securityKey: "",
|
||||
}) }
|
||||
</span>
|
||||
<div>
|
||||
<input type="file"
|
||||
className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
|
||||
ref={this.fileUpload}
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={this.onRecoveryKeyFileChange}
|
||||
/>
|
||||
<AccessibleButton kind="primary" onClick={this.onRecoveryKeyFileUploadClick}>
|
||||
{ _t("Upload") }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>
|
||||
{ recoveryKeyFeedback }
|
||||
<DialogButtons
|
||||
primaryButton={_t('Continue')}
|
||||
onPrimaryButtonClick={this.onRecoveryKeyNext}
|
||||
hasCancel={true}
|
||||
cancelButton={_t("Go Back")}
|
||||
cancelButtonClass='danger'
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
primaryDisabled={!this.state.recoveryKeyValid}
|
||||
additive={resetButton}
|
||||
/>
|
||||
</form>
|
||||
</div>;
|
||||
{recoveryKeyFeedback}
|
||||
<DialogButtons
|
||||
primaryButton={_t("Continue")}
|
||||
onPrimaryButtonClick={this.onRecoveryKeyNext}
|
||||
hasCancel={true}
|
||||
cancelButton={_t("Go Back")}
|
||||
cancelButtonClass="danger"
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
primaryDisabled={!this.state.recoveryKeyValid}
|
||||
additive={resetButton}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseDialog className='mx_AccessSecretStorageDialog'
|
||||
<BaseDialog
|
||||
className="mx_AccessSecretStorageDialog"
|
||||
onFinished={this.props.onFinished}
|
||||
title={title}
|
||||
titleClass={titleClass}
|
||||
>
|
||||
<div>
|
||||
{ content }
|
||||
</div>
|
||||
<div>{content}</div>
|
||||
</BaseDialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import BaseDialog from "../BaseDialog";
|
||||
|
|
@ -36,19 +36,19 @@ export default class ConfirmDestroyCrossSigningDialog extends React.Component<IP
|
|||
render() {
|
||||
return (
|
||||
<BaseDialog
|
||||
className='mx_ConfirmDestroyCrossSigningDialog'
|
||||
className="mx_ConfirmDestroyCrossSigningDialog"
|
||||
hasCancel={true}
|
||||
onFinished={this.props.onFinished}
|
||||
title={_t("Destroy cross-signing keys?")}
|
||||
>
|
||||
<div className='mx_ConfirmDestroyCrossSigningDialog_content'>
|
||||
<div className="mx_ConfirmDestroyCrossSigningDialog_content">
|
||||
<p>
|
||||
{ _t(
|
||||
{_t(
|
||||
"Deleting cross-signing keys is permanent. " +
|
||||
"Anyone you have verified with will see security alerts. " +
|
||||
"You almost certainly don't want to do this, unless " +
|
||||
"you've lost every device you can cross-sign from.",
|
||||
) }
|
||||
"Anyone you have verified with will see security alerts. " +
|
||||
"You almost certainly don't want to do this, unless " +
|
||||
"you've lost every device you can cross-sign from.",
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<DialogButtons
|
||||
|
|
|
|||
|
|
@ -15,18 +15,18 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { CrossSigningKeys } from 'matrix-js-sdk/src/client';
|
||||
import React from "react";
|
||||
import { CrossSigningKeys } from "matrix-js-sdk/src/client";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { MatrixClientPeg } from '../../../../MatrixClientPeg';
|
||||
import { _t } from '../../../../languageHandler';
|
||||
import Modal from '../../../../Modal';
|
||||
import { SSOAuthEntry } from '../../auth/InteractiveAuthEntryComponents';
|
||||
import DialogButtons from '../../elements/DialogButtons';
|
||||
import BaseDialog from '../BaseDialog';
|
||||
import Spinner from '../../elements/Spinner';
|
||||
import InteractiveAuthDialog from '../InteractiveAuthDialog';
|
||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import Modal from "../../../../Modal";
|
||||
import { SSOAuthEntry } from "../../auth/InteractiveAuthEntryComponents";
|
||||
import DialogButtons from "../../elements/DialogButtons";
|
||||
import BaseDialog from "../BaseDialog";
|
||||
import Spinner from "../../elements/Spinner";
|
||||
import InteractiveAuthDialog from "../InteractiveAuthDialog";
|
||||
|
||||
interface IProps {
|
||||
accountPassword?: string;
|
||||
|
|
@ -82,8 +82,8 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
|
|||
logger.log("uploadDeviceSigningKeys advertised no flows!");
|
||||
return;
|
||||
}
|
||||
const canUploadKeysWithPasswordOnly = error.data.flows.some(f => {
|
||||
return f.stages.length === 1 && f.stages[0] === 'm.login.password';
|
||||
const canUploadKeysWithPasswordOnly = error.data.flows.some((f) => {
|
||||
return f.stages.length === 1 && f.stages[0] === "m.login.password";
|
||||
});
|
||||
this.setState({
|
||||
canUploadKeysWithPasswordOnly,
|
||||
|
|
@ -94,9 +94,9 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
|
|||
private doBootstrapUIAuth = async (makeRequest: (authData: any) => Promise<{}>): Promise<void> => {
|
||||
if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
|
||||
await makeRequest({
|
||||
type: 'm.login.password',
|
||||
type: "m.login.password",
|
||||
identifier: {
|
||||
type: 'm.id.user',
|
||||
type: "m.id.user",
|
||||
user: MatrixClientPeg.get().getUserId(),
|
||||
},
|
||||
// TODO: Remove `user` once servers support proper UIA
|
||||
|
|
@ -170,31 +170,35 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
|
|||
render() {
|
||||
let content;
|
||||
if (this.state.error) {
|
||||
content = <div>
|
||||
<p>{ _t("Unable to set up keys") }</p>
|
||||
<div className="mx_Dialog_buttons">
|
||||
<DialogButtons primaryButton={_t('Retry')}
|
||||
onPrimaryButtonClick={this.bootstrapCrossSigning}
|
||||
onCancel={this.onCancel}
|
||||
/>
|
||||
content = (
|
||||
<div>
|
||||
<p>{_t("Unable to set up keys")}</p>
|
||||
<div className="mx_Dialog_buttons">
|
||||
<DialogButtons
|
||||
primaryButton={_t("Retry")}
|
||||
onPrimaryButtonClick={this.bootstrapCrossSigning}
|
||||
onCancel={this.onCancel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
);
|
||||
} else {
|
||||
content = <div>
|
||||
<Spinner />
|
||||
</div>;
|
||||
content = (
|
||||
<div>
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseDialog className="mx_CreateCrossSigningDialog"
|
||||
<BaseDialog
|
||||
className="mx_CreateCrossSigningDialog"
|
||||
onFinished={this.props.onFinished}
|
||||
title={_t("Setting up keys")}
|
||||
hasCancel={false}
|
||||
fixedWidth={false}
|
||||
>
|
||||
<div>
|
||||
{ content }
|
||||
</div>
|
||||
<div>{content}</div>
|
||||
</BaseDialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,17 +15,17 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
import React from "react";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/client";
|
||||
import { IKeyBackupInfo, IKeyBackupRestoreResult } from "matrix-js-sdk/src/crypto/keybackup";
|
||||
import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/crypto/api";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { MatrixClientPeg } from '../../../../MatrixClientPeg';
|
||||
import { _t } from '../../../../languageHandler';
|
||||
import { accessSecretStorage } from '../../../../SecurityManager';
|
||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { accessSecretStorage } from "../../../../SecurityManager";
|
||||
import { IDialogProps } from "../IDialogProps";
|
||||
import Spinner from '../../elements/Spinner';
|
||||
import Spinner from "../../elements/Spinner";
|
||||
import DialogButtons from "../../elements/DialogButtons";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
import BaseDialog from "../BaseDialog";
|
||||
|
|
@ -33,14 +33,13 @@ import BaseDialog from "../BaseDialog";
|
|||
enum RestoreType {
|
||||
Passphrase = "passphrase",
|
||||
RecoveryKey = "recovery_key",
|
||||
SecretStorage = "secret_storage"
|
||||
SecretStorage = "secret_storage",
|
||||
}
|
||||
|
||||
enum ProgressState {
|
||||
PreFetch = "prefetch",
|
||||
Fetch = "fetch",
|
||||
LoadKeys = "load_keys",
|
||||
|
||||
}
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
|
|
@ -94,7 +93,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
recoverInfo: null,
|
||||
recoveryKeyValid: false,
|
||||
forceRecoveryKey: false,
|
||||
passPhrase: '',
|
||||
passPhrase: "",
|
||||
restoreType: null,
|
||||
progress: { stage: ProgressState.PreFetch },
|
||||
};
|
||||
|
|
@ -146,12 +145,16 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
// We do still restore the key backup: we must ensure that the key backup key
|
||||
// is the right one and restoring it is currently the only way we can do this.
|
||||
const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
|
||||
this.state.passPhrase, undefined, undefined, this.state.backupInfo,
|
||||
this.state.passPhrase,
|
||||
undefined,
|
||||
undefined,
|
||||
this.state.backupInfo,
|
||||
{ progressCallback: this.progressCallback },
|
||||
);
|
||||
if (this.props.keyCallback) {
|
||||
const key = await MatrixClientPeg.get().keyBackupKeyFromPassword(
|
||||
this.state.passPhrase, this.state.backupInfo,
|
||||
this.state.passPhrase,
|
||||
this.state.backupInfo,
|
||||
);
|
||||
this.props.keyCallback(key);
|
||||
}
|
||||
|
|
@ -183,7 +186,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
});
|
||||
try {
|
||||
const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
|
||||
this.state.recoveryKey, undefined, undefined, this.state.backupInfo,
|
||||
this.state.recoveryKey,
|
||||
undefined,
|
||||
undefined,
|
||||
this.state.backupInfo,
|
||||
{ progressCallback: this.progressCallback },
|
||||
);
|
||||
if (this.props.keyCallback) {
|
||||
|
|
@ -223,7 +229,9 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
// `accessSecretStorage` may prompt for storage access as needed.
|
||||
await accessSecretStorage(async () => {
|
||||
await MatrixClientPeg.get().restoreKeyBackupWithSecretStorage(
|
||||
this.state.backupInfo, undefined, undefined,
|
||||
this.state.backupInfo,
|
||||
undefined,
|
||||
undefined,
|
||||
{ progressCallback: this.progressCallback },
|
||||
);
|
||||
});
|
||||
|
|
@ -243,8 +251,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
if (!backupInfo) return false;
|
||||
try {
|
||||
const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithCache(
|
||||
undefined, /* targetRoomId */
|
||||
undefined, /* targetSessionId */
|
||||
undefined /* targetRoomId */,
|
||||
undefined /* targetSessionId */,
|
||||
backupInfo,
|
||||
{ progressCallback: this.progressCallback },
|
||||
);
|
||||
|
|
@ -301,12 +309,11 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
const backupHasPassphrase = (
|
||||
const backupHasPassphrase =
|
||||
this.state.backupInfo &&
|
||||
this.state.backupInfo.auth_data &&
|
||||
this.state.backupInfo.auth_data.private_key_salt &&
|
||||
this.state.backupInfo.auth_data.private_key_iterations
|
||||
);
|
||||
this.state.backupInfo.auth_data.private_key_iterations;
|
||||
|
||||
let content;
|
||||
let title;
|
||||
|
|
@ -321,10 +328,12 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
} else if (this.state.progress.stage === ProgressState.PreFetch) {
|
||||
details = _t("Fetching keys from server...");
|
||||
}
|
||||
content = <div>
|
||||
<div>{ details }</div>
|
||||
<Spinner />
|
||||
</div>;
|
||||
content = (
|
||||
<div>
|
||||
<div>{details}</div>
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
} else if (this.state.loadError) {
|
||||
title = _t("Error");
|
||||
content = _t("Unable to load backup status");
|
||||
|
|
@ -332,20 +341,28 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
if (this.state.restoreError.errcode === MatrixClient.RESTORE_BACKUP_ERROR_BAD_KEY) {
|
||||
if (this.state.restoreType === RestoreType.RecoveryKey) {
|
||||
title = _t("Security Key mismatch");
|
||||
content = <div>
|
||||
<p>{ _t(
|
||||
"Backup could not be decrypted with this Security Key: " +
|
||||
"please verify that you entered the correct Security Key.",
|
||||
) }</p>
|
||||
</div>;
|
||||
content = (
|
||||
<div>
|
||||
<p>
|
||||
{_t(
|
||||
"Backup could not be decrypted with this Security Key: " +
|
||||
"please verify that you entered the correct Security Key.",
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
title = _t("Incorrect Security Phrase");
|
||||
content = <div>
|
||||
<p>{ _t(
|
||||
"Backup could not be decrypted with this Security Phrase: " +
|
||||
"please verify that you entered the correct Security Phrase.",
|
||||
) }</p>
|
||||
</div>;
|
||||
content = (
|
||||
<div>
|
||||
<p>
|
||||
{_t(
|
||||
"Backup could not be decrypted with this Security Phrase: " +
|
||||
"please verify that you entered the correct Security Phrase.",
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
title = _t("Error");
|
||||
|
|
@ -358,69 +375,85 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
title = _t("Keys restored");
|
||||
let failedToDecrypt;
|
||||
if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
|
||||
failedToDecrypt = <p>{ _t(
|
||||
"Failed to decrypt %(failedCount)s sessions!",
|
||||
{ failedCount: this.state.recoverInfo.total - this.state.recoverInfo.imported },
|
||||
) }</p>;
|
||||
failedToDecrypt = (
|
||||
<p>
|
||||
{_t("Failed to decrypt %(failedCount)s sessions!", {
|
||||
failedCount: this.state.recoverInfo.total - this.state.recoverInfo.imported,
|
||||
})}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
content = <div>
|
||||
<p>{ _t("Successfully restored %(sessionCount)s keys", { sessionCount: this.state.recoverInfo.imported }) }</p>
|
||||
{ failedToDecrypt }
|
||||
<DialogButtons primaryButton={_t('OK')}
|
||||
onPrimaryButtonClick={this.onDone}
|
||||
hasCancel={false}
|
||||
focus={true}
|
||||
/>
|
||||
</div>;
|
||||
content = (
|
||||
<div>
|
||||
<p>
|
||||
{_t("Successfully restored %(sessionCount)s keys", {
|
||||
sessionCount: this.state.recoverInfo.imported,
|
||||
})}
|
||||
</p>
|
||||
{failedToDecrypt}
|
||||
<DialogButtons
|
||||
primaryButton={_t("OK")}
|
||||
onPrimaryButtonClick={this.onDone}
|
||||
hasCancel={false}
|
||||
focus={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (backupHasPassphrase && !this.state.forceRecoveryKey) {
|
||||
title = _t("Enter Security Phrase");
|
||||
content = <div>
|
||||
<p>{ _t(
|
||||
"<b>Warning</b>: you should only set up key backup " +
|
||||
"from a trusted computer.", {},
|
||||
{ b: sub => <b>{ sub }</b> },
|
||||
) }</p>
|
||||
<p>{ _t(
|
||||
"Access your secure message history and set up secure " +
|
||||
"messaging by entering your Security Phrase.",
|
||||
) }</p>
|
||||
content = (
|
||||
<div>
|
||||
<p>
|
||||
{_t(
|
||||
"<b>Warning</b>: you should only set up key backup " + "from a trusted computer.",
|
||||
{},
|
||||
{ b: (sub) => <b>{sub}</b> },
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{_t(
|
||||
"Access your secure message history and set up secure " +
|
||||
"messaging by entering your Security Phrase.",
|
||||
)}
|
||||
</p>
|
||||
|
||||
<form className="mx_RestoreKeyBackupDialog_primaryContainer">
|
||||
<input type="password"
|
||||
className="mx_RestoreKeyBackupDialog_passPhraseInput"
|
||||
onChange={this.onPassPhraseChange}
|
||||
value={this.state.passPhrase}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<DialogButtons
|
||||
primaryButton={_t('Next')}
|
||||
onPrimaryButtonClick={this.onPassPhraseNext}
|
||||
primaryIsSubmit={true}
|
||||
hasCancel={true}
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
/>
|
||||
</form>
|
||||
{ _t(
|
||||
"If you've forgotten your Security Phrase you can "+
|
||||
"<button1>use your Security Key</button1> or " +
|
||||
"<button2>set up new recovery options</button2>",
|
||||
{},
|
||||
{
|
||||
button1: s => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onUseRecoveryKeyClick}
|
||||
>
|
||||
{ s }
|
||||
</AccessibleButton>,
|
||||
button2: s => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onResetRecoveryClick}
|
||||
>
|
||||
{ s }
|
||||
</AccessibleButton>,
|
||||
}) }
|
||||
</div>;
|
||||
<form className="mx_RestoreKeyBackupDialog_primaryContainer">
|
||||
<input
|
||||
type="password"
|
||||
className="mx_RestoreKeyBackupDialog_passPhraseInput"
|
||||
onChange={this.onPassPhraseChange}
|
||||
value={this.state.passPhrase}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<DialogButtons
|
||||
primaryButton={_t("Next")}
|
||||
onPrimaryButtonClick={this.onPassPhraseNext}
|
||||
primaryIsSubmit={true}
|
||||
hasCancel={true}
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
/>
|
||||
</form>
|
||||
{_t(
|
||||
"If you've forgotten your Security Phrase you can " +
|
||||
"<button1>use your Security Key</button1> or " +
|
||||
"<button2>set up new recovery options</button2>",
|
||||
{},
|
||||
{
|
||||
button1: (s) => (
|
||||
<AccessibleButton kind="link_inline" onClick={this.onUseRecoveryKeyClick}>
|
||||
{s}
|
||||
</AccessibleButton>
|
||||
),
|
||||
button2: (s) => (
|
||||
<AccessibleButton kind="link_inline" onClick={this.onResetRecoveryClick}>
|
||||
{s}
|
||||
</AccessibleButton>
|
||||
),
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
title = _t("Enter Security Key");
|
||||
|
||||
|
|
@ -428,65 +461,73 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
|
|||
if (this.state.recoveryKey.length === 0) {
|
||||
keyStatus = <div className="mx_RestoreKeyBackupDialog_keyStatus" />;
|
||||
} else if (this.state.recoveryKeyValid) {
|
||||
keyStatus = <div className="mx_RestoreKeyBackupDialog_keyStatus">
|
||||
{ "\uD83D\uDC4D " }{ _t("This looks like a valid Security Key!") }
|
||||
</div>;
|
||||
keyStatus = (
|
||||
<div className="mx_RestoreKeyBackupDialog_keyStatus">
|
||||
{"\uD83D\uDC4D "}
|
||||
{_t("This looks like a valid Security Key!")}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
keyStatus = <div className="mx_RestoreKeyBackupDialog_keyStatus">
|
||||
{ "\uD83D\uDC4E " }{ _t("Not a valid Security Key") }
|
||||
</div>;
|
||||
keyStatus = (
|
||||
<div className="mx_RestoreKeyBackupDialog_keyStatus">
|
||||
{"\uD83D\uDC4E "}
|
||||
{_t("Not a valid Security Key")}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
content = <div>
|
||||
<p>{ _t(
|
||||
"<b>Warning</b>: You should only set up key backup " +
|
||||
"from a trusted computer.", {},
|
||||
{ b: sub => <b>{ sub }</b> },
|
||||
) }</p>
|
||||
<p>{ _t(
|
||||
"Access your secure message history and set up secure " +
|
||||
"messaging by entering your Security Key.",
|
||||
) }</p>
|
||||
content = (
|
||||
<div>
|
||||
<p>
|
||||
{_t(
|
||||
"<b>Warning</b>: You should only set up key backup " + "from a trusted computer.",
|
||||
{},
|
||||
{ b: (sub) => <b>{sub}</b> },
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{_t(
|
||||
"Access your secure message history and set up secure " +
|
||||
"messaging by entering your Security Key.",
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="mx_RestoreKeyBackupDialog_primaryContainer">
|
||||
<input className="mx_RestoreKeyBackupDialog_recoveryKeyInput"
|
||||
onChange={this.onRecoveryKeyChange}
|
||||
value={this.state.recoveryKey}
|
||||
autoFocus={true}
|
||||
/>
|
||||
{ keyStatus }
|
||||
<DialogButtons primaryButton={_t('Next')}
|
||||
onPrimaryButtonClick={this.onRecoveryKeyNext}
|
||||
hasCancel={true}
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
primaryDisabled={!this.state.recoveryKeyValid}
|
||||
/>
|
||||
<div className="mx_RestoreKeyBackupDialog_primaryContainer">
|
||||
<input
|
||||
className="mx_RestoreKeyBackupDialog_recoveryKeyInput"
|
||||
onChange={this.onRecoveryKeyChange}
|
||||
value={this.state.recoveryKey}
|
||||
autoFocus={true}
|
||||
/>
|
||||
{keyStatus}
|
||||
<DialogButtons
|
||||
primaryButton={_t("Next")}
|
||||
onPrimaryButtonClick={this.onRecoveryKeyNext}
|
||||
hasCancel={true}
|
||||
onCancel={this.onCancel}
|
||||
focus={false}
|
||||
primaryDisabled={!this.state.recoveryKeyValid}
|
||||
/>
|
||||
</div>
|
||||
{_t(
|
||||
"If you've forgotten your Security Key you can " +
|
||||
"<button>set up new recovery options</button>",
|
||||
{},
|
||||
{
|
||||
button: (s) => (
|
||||
<AccessibleButton kind="link_inline" onClick={this.onResetRecoveryClick}>
|
||||
{s}
|
||||
</AccessibleButton>
|
||||
),
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
{ _t(
|
||||
"If you've forgotten your Security Key you can "+
|
||||
"<button>set up new recovery options</button>",
|
||||
{},
|
||||
{
|
||||
button: s => <AccessibleButton
|
||||
kind="link_inline"
|
||||
onClick={this.onResetRecoveryClick}
|
||||
>
|
||||
{ s }
|
||||
</AccessibleButton>,
|
||||
},
|
||||
) }
|
||||
</div>;
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseDialog className='mx_RestoreKeyBackupDialog'
|
||||
onFinished={this.props.onFinished}
|
||||
title={title}
|
||||
>
|
||||
<div className='mx_RestoreKeyBackupDialog_content'>
|
||||
{ content }
|
||||
</div>
|
||||
<BaseDialog className="mx_RestoreKeyBackupDialog" onFinished={this.props.onFinished} title={title}>
|
||||
<div className="mx_RestoreKeyBackupDialog_content">{content}</div>
|
||||
</BaseDialog>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
import SetupEncryptionBody from '../../../structures/auth/SetupEncryptionBody';
|
||||
import BaseDialog from '../BaseDialog';
|
||||
import { _t } from '../../../../languageHandler';
|
||||
import { SetupEncryptionStore, Phase } from '../../../../stores/SetupEncryptionStore';
|
||||
import SetupEncryptionBody from "../../../structures/auth/SetupEncryptionBody";
|
||||
import BaseDialog from "../BaseDialog";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import { SetupEncryptionStore, Phase } from "../../../../stores/SetupEncryptionStore";
|
||||
import { IDialogProps } from "../IDialogProps";
|
||||
|
||||
function iconFromPhase(phase: Phase) {
|
||||
|
|
@ -58,12 +58,14 @@ export default class SetupEncryptionDialog extends React.Component<IProps, IStat
|
|||
};
|
||||
|
||||
public render() {
|
||||
return <BaseDialog
|
||||
headerImage={this.state.icon}
|
||||
onFinished={this.props.onFinished}
|
||||
title={_t("Verify this session")}
|
||||
>
|
||||
<SetupEncryptionBody onFinished={this.props.onFinished} />
|
||||
</BaseDialog>;
|
||||
return (
|
||||
<BaseDialog
|
||||
headerImage={this.state.icon}
|
||||
onFinished={this.props.onFinished}
|
||||
title={_t("Verify this session")}
|
||||
>
|
||||
<SetupEncryptionBody onFinished={this.props.onFinished} />
|
||||
</BaseDialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue