mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-16 05:04:57 +08:00
CreateKeyBackupDialog.tsx: Remove logic for servers which are not supporting cross-signing (#11076)
This commit is contained in:
Florian Duros
GitHub
parent
06fa49a9da
commit
77da949fd4
@ -15,41 +15,27 @@ See the License for the specific language governing permissions and
|
|||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { createRef } from "react";
|
import React from "react";
|
||||||
import FileSaver from "file-saver";
|
|
||||||
import { IPreparedKeyBackupVersion } from "matrix-js-sdk/src/crypto/backup";
|
|
||||||
import { logger } from "matrix-js-sdk/src/logger";
|
import { logger } from "matrix-js-sdk/src/logger";
|
||||||
|
import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
|
||||||
|
|
||||||
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
import { MatrixClientPeg } from "../../../../MatrixClientPeg";
|
||||||
import { _t, _td } from "../../../../languageHandler";
|
import { _t } from "../../../../languageHandler";
|
||||||
import { accessSecretStorage } from "../../../../SecurityManager";
|
import { accessSecretStorage } from "../../../../SecurityManager";
|
||||||
import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
|
|
||||||
import { copyNode } from "../../../../utils/strings";
|
|
||||||
import PassphraseField from "../../../../components/views/auth/PassphraseField";
|
|
||||||
import Field from "../../../../components/views/elements/Field";
|
|
||||||
import Spinner from "../../../../components/views/elements/Spinner";
|
import Spinner from "../../../../components/views/elements/Spinner";
|
||||||
import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
|
import BaseDialog from "../../../../components/views/dialogs/BaseDialog";
|
||||||
import DialogButtons from "../../../../components/views/elements/DialogButtons";
|
import DialogButtons from "../../../../components/views/elements/DialogButtons";
|
||||||
import { IValidationResult } from "../../../../components/views/elements/Validation";
|
|
||||||
|
|
||||||
enum Phase {
|
enum Phase {
|
||||||
Passphrase = "passphrase",
|
|
||||||
PassphraseConfirm = "passphrase_confirm",
|
|
||||||
ShowKey = "show_key",
|
|
||||||
KeepItSafe = "keep_it_safe",
|
|
||||||
BackingUp = "backing_up",
|
BackingUp = "backing_up",
|
||||||
Done = "done",
|
Done = "done",
|
||||||
OptOutConfirm = "opt_out_confirm",
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
|
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
onFinished(done?: boolean): void;
|
onFinished(done?: boolean): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IState {
|
interface IState {
|
||||||
secureSecretStorage: boolean | null;
|
|
||||||
phase: Phase;
|
phase: Phase;
|
||||||
passPhrase: string;
|
passPhrase: string;
|
||||||
passPhraseValid: boolean;
|
passPhraseValid: boolean;
|
||||||
@ -64,16 +50,11 @@ interface IState {
|
|||||||
* on the server.
|
* on the server.
|
||||||
*/
|
*/
|
||||||
export default class CreateKeyBackupDialog extends React.PureComponent<IProps, IState> {
|
export default class CreateKeyBackupDialog extends React.PureComponent<IProps, IState> {
|
||||||
private keyBackupInfo: Pick<IPreparedKeyBackupVersion, "recovery_key" | "algorithm" | "auth_data">;
|
|
||||||
private recoveryKeyNode = createRef<HTMLElement>();
|
|
||||||
private passphraseField = createRef<Field>();
|
|
||||||
|
|
||||||
public constructor(props: IProps) {
|
public constructor(props: IProps) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
secureSecretStorage: null,
|
phase: Phase.BackingUp,
|
||||||
phase: Phase.Passphrase,
|
|
||||||
passPhrase: "",
|
passPhrase: "",
|
||||||
passPhraseValid: false,
|
passPhraseValid: false,
|
||||||
passPhraseConfirm: "",
|
passPhraseConfirm: "",
|
||||||
@ -82,59 +63,22 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
public async componentDidMount(): Promise<void> {
|
public componentDidMount(): void {
|
||||||
const cli = MatrixClientPeg.get();
|
this.createBackup();
|
||||||
const secureSecretStorage = await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
|
|
||||||
this.setState({ secureSecretStorage });
|
|
||||||
|
|
||||||
// If we're using secret storage, skip ahead to the backing up step, as
|
|
||||||
// `accessSecretStorage` will handle passphrases as needed.
|
|
||||||
if (secureSecretStorage) {
|
|
||||||
this.setState({ phase: Phase.BackingUp });
|
|
||||||
this.createBackup();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private onCopyClick = (): void => {
|
|
||||||
const successful = copyNode(this.recoveryKeyNode.current);
|
|
||||||
if (successful) {
|
|
||||||
this.setState({
|
|
||||||
copied: true,
|
|
||||||
phase: Phase.KeepItSafe,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
private onDownloadClick = (): void => {
|
|
||||||
const blob = new Blob([this.keyBackupInfo.recovery_key], {
|
|
||||||
type: "text/plain;charset=us-ascii",
|
|
||||||
});
|
|
||||||
FileSaver.saveAs(blob, "security-key.txt");
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
downloaded: true,
|
|
||||||
phase: Phase.KeepItSafe,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private createBackup = async (): Promise<void> => {
|
private createBackup = async (): Promise<void> => {
|
||||||
const { secureSecretStorage } = this.state;
|
|
||||||
this.setState({
|
this.setState({
|
||||||
phase: Phase.BackingUp,
|
|
||||||
error: undefined,
|
error: undefined,
|
||||||
});
|
});
|
||||||
let info;
|
let info: IKeyBackupInfo | undefined;
|
||||||
try {
|
try {
|
||||||
if (secureSecretStorage) {
|
await accessSecretStorage(async (): Promise<void> => {
|
||||||
await accessSecretStorage(async (): Promise<void> => {
|
info = await MatrixClientPeg.get().prepareKeyBackupVersion(null /* random key */, {
|
||||||
info = await MatrixClientPeg.get().prepareKeyBackupVersion(null /* random key */, {
|
secureSecretStorage: true,
|
||||||
secureSecretStorage: true,
|
|
||||||
});
|
|
||||||
info = await MatrixClientPeg.get().createKeyBackupVersion(info);
|
|
||||||
});
|
});
|
||||||
} else {
|
info = await MatrixClientPeg.get().createKeyBackupVersion(info);
|
||||||
info = await MatrixClientPeg.get().createKeyBackupVersion(this.keyBackupInfo);
|
});
|
||||||
}
|
|
||||||
await MatrixClientPeg.get().scheduleAllGroupSessionsForBackup();
|
await MatrixClientPeg.get().scheduleAllGroupSessionsForBackup();
|
||||||
this.setState({
|
this.setState({
|
||||||
phase: Phase.Done,
|
phase: Phase.Done,
|
||||||
@ -145,7 +89,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
|
|||||||
// delete the version, disable backup, or do nothing? If we just
|
// delete the version, disable backup, or do nothing? If we just
|
||||||
// disable without deleting, we'll enable on next app reload since
|
// disable without deleting, we'll enable on next app reload since
|
||||||
// it is trusted.
|
// it is trusted.
|
||||||
if (info) {
|
if (info?.version) {
|
||||||
MatrixClientPeg.get().deleteKeyBackupVersion(info.version);
|
MatrixClientPeg.get().deleteKeyBackupVersion(info.version);
|
||||||
}
|
}
|
||||||
this.setState({
|
this.setState({
|
||||||
@ -162,249 +106,6 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
|
|||||||
this.props.onFinished(true);
|
this.props.onFinished(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
private onSetUpClick = (): void => {
|
|
||||||
this.setState({ phase: Phase.Passphrase });
|
|
||||||
};
|
|
||||||
|
|
||||||
private onSkipPassPhraseClick = async (): Promise<void> => {
|
|
||||||
this.keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion();
|
|
||||||
this.setState({
|
|
||||||
copied: false,
|
|
||||||
downloaded: false,
|
|
||||||
phase: Phase.ShowKey,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private onPassPhraseNextClick = async (e: React.FormEvent): Promise<void> => {
|
|
||||||
e.preventDefault();
|
|
||||||
if (!this.passphraseField.current) return; // unmounting
|
|
||||||
|
|
||||||
await this.passphraseField.current.validate({ allowEmpty: false });
|
|
||||||
if (!this.passphraseField.current.state.valid) {
|
|
||||||
this.passphraseField.current.focus();
|
|
||||||
this.passphraseField.current.validate({ allowEmpty: false, focused: true });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setState({ phase: Phase.PassphraseConfirm });
|
|
||||||
};
|
|
||||||
|
|
||||||
private onPassPhraseConfirmNextClick = async (e: React.FormEvent): Promise<void> => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (this.state.passPhrase !== this.state.passPhraseConfirm) return;
|
|
||||||
|
|
||||||
this.keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion(this.state.passPhrase);
|
|
||||||
this.setState({
|
|
||||||
copied: false,
|
|
||||||
downloaded: false,
|
|
||||||
phase: Phase.ShowKey,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private onSetAgainClick = (): void => {
|
|
||||||
this.setState({
|
|
||||||
passPhrase: "",
|
|
||||||
passPhraseValid: false,
|
|
||||||
passPhraseConfirm: "",
|
|
||||||
phase: Phase.Passphrase,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private onKeepItSafeBackClick = (): void => {
|
|
||||||
this.setState({
|
|
||||||
phase: Phase.ShowKey,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private onPassPhraseValidate = (result: IValidationResult): void => {
|
|
||||||
this.setState({
|
|
||||||
passPhraseValid: !!result.valid,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private onPassPhraseChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
|
||||||
this.setState({
|
|
||||||
passPhrase: e.target.value,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private onPassPhraseConfirmChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
|
||||||
this.setState({
|
|
||||||
passPhraseConfirm: e.target.value,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private renderPhasePassPhrase(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<form onSubmit={this.onPassPhraseNextClick}>
|
|
||||||
<p>
|
|
||||||
{_t(
|
|
||||||
"<b>Warning</b>: you should only set up key backup from a trusted computer.",
|
|
||||||
{},
|
|
||||||
{ b: (sub) => <b>{sub}</b> },
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
{_t(
|
|
||||||
"We'll store an encrypted copy of your keys on our server. " +
|
|
||||||
"Secure your backup with a Security Phrase.",
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<p>{_t("For maximum security, this should be different from your account password.")}</p>
|
|
||||||
|
|
||||||
<div className="mx_CreateKeyBackupDialog_primaryContainer">
|
|
||||||
<div className="mx_CreateKeyBackupDialog_passPhraseContainer">
|
|
||||||
<PassphraseField
|
|
||||||
className="mx_CreateKeyBackupDialog_passPhraseInput"
|
|
||||||
onChange={this.onPassPhraseChange}
|
|
||||||
minScore={PASSWORD_MIN_SCORE}
|
|
||||||
value={this.state.passPhrase}
|
|
||||||
onValidate={this.onPassPhraseValidate}
|
|
||||||
fieldRef={this.passphraseField}
|
|
||||||
autoFocus={true}
|
|
||||||
label={_td("Enter a Security Phrase")}
|
|
||||||
labelEnterPassword={_td("Enter a Security Phrase")}
|
|
||||||
labelStrongPassword={_td("Great! This Security Phrase looks strong enough.")}
|
|
||||||
labelAllowedButUnsafe={_td("Great! This Security Phrase looks strong enough.")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogButtons
|
|
||||||
primaryButton={_t("Next")}
|
|
||||||
onPrimaryButtonClick={this.onPassPhraseNextClick}
|
|
||||||
hasCancel={false}
|
|
||||||
disabled={!this.state.passPhraseValid}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>{_t("Advanced")}</summary>
|
|
||||||
<AccessibleButton kind="primary" onClick={this.onSkipPassPhraseClick}>
|
|
||||||
{_t("Set up with a Security Key")}
|
|
||||||
</AccessibleButton>
|
|
||||||
</details>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private renderPhasePassPhraseConfirm(): JSX.Element {
|
|
||||||
let matchText;
|
|
||||||
let changeText;
|
|
||||||
if (this.state.passPhraseConfirm === this.state.passPhrase) {
|
|
||||||
matchText = _t("That matches!");
|
|
||||||
changeText = _t("Use a different passphrase?");
|
|
||||||
} else if (!this.state.passPhrase.startsWith(this.state.passPhraseConfirm)) {
|
|
||||||
// only tell them they're wrong if they've actually gone wrong.
|
|
||||||
// Security conscious readers will note that if you left element-web unattended
|
|
||||||
// on this screen, this would make it easy for a malicious person to guess
|
|
||||||
// your passphrase one letter at a time, but they could get this faster by
|
|
||||||
// just opening the browser's developer tools and reading it.
|
|
||||||
// Note that not having typed anything at all will not hit this clause and
|
|
||||||
// fall through so empty box === no hint.
|
|
||||||
matchText = _t("That doesn't match.");
|
|
||||||
changeText = _t("Go back to set it again.");
|
|
||||||
}
|
|
||||||
|
|
||||||
let passPhraseMatch: JSX.Element | undefined;
|
|
||||||
if (matchText) {
|
|
||||||
passPhraseMatch = (
|
|
||||||
<div className="mx_CreateKeyBackupDialog_passPhraseMatch">
|
|
||||||
<div>{matchText}</div>
|
|
||||||
<AccessibleButton kind="link" onClick={this.onSetAgainClick}>
|
|
||||||
{changeText}
|
|
||||||
</AccessibleButton>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<form onSubmit={this.onPassPhraseConfirmNextClick}>
|
|
||||||
<p>{_t("Enter your Security Phrase a second time to confirm it.")}</p>
|
|
||||||
<div className="mx_CreateKeyBackupDialog_primaryContainer">
|
|
||||||
<div className="mx_CreateKeyBackupDialog_passPhraseContainer">
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
onChange={this.onPassPhraseConfirmChange}
|
|
||||||
value={this.state.passPhraseConfirm}
|
|
||||||
className="mx_CreateKeyBackupDialog_passPhraseInput"
|
|
||||||
placeholder={_t("Repeat your Security Phrase…")}
|
|
||||||
autoFocus={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{passPhraseMatch}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<DialogButtons
|
|
||||||
primaryButton={_t("Next")}
|
|
||||||
onPrimaryButtonClick={this.onPassPhraseConfirmNextClick}
|
|
||||||
hasCancel={false}
|
|
||||||
disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private renderPhaseShowKey(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
{_t(
|
|
||||||
"Your Security Key is a safety net - you can use it to restore " +
|
|
||||||
"access to your encrypted messages if you forget your Security Phrase.",
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<p>{_t("Keep a copy of it somewhere secure, like a password manager or even a safe.")}</p>
|
|
||||||
<div className="mx_CreateKeyBackupDialog_primaryContainer">
|
|
||||||
<div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">{_t("Your Security Key")}</div>
|
|
||||||
<div className="mx_CreateKeyBackupDialog_recoveryKeyContainer">
|
|
||||||
<div className="mx_CreateKeyBackupDialog_recoveryKey">
|
|
||||||
<code ref={this.recoveryKeyNode}>{this.keyBackupInfo.recovery_key}</code>
|
|
||||||
</div>
|
|
||||||
<div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
|
|
||||||
<button className="mx_Dialog_primary" onClick={this.onCopyClick}>
|
|
||||||
{_t("Copy")}
|
|
||||||
</button>
|
|
||||||
<button className="mx_Dialog_primary" onClick={this.onDownloadClick}>
|
|
||||||
{_t("Download")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private renderPhaseKeepItSafe(): JSX.Element {
|
|
||||||
let introText;
|
|
||||||
if (this.state.copied) {
|
|
||||||
introText = _t(
|
|
||||||
"Your Security Key has been <b>copied to your clipboard</b>, paste it to:",
|
|
||||||
{},
|
|
||||||
{ b: (s) => <b>{s}</b> },
|
|
||||||
);
|
|
||||||
} else if (this.state.downloaded) {
|
|
||||||
introText = _t("Your Security Key is in your <b>Downloads</b> folder.", {}, { b: (s) => <b>{s}</b> });
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{introText}
|
|
||||||
<ul>
|
|
||||||
<li>{_t("<b>Print it</b> and store it somewhere safe", {}, { b: (s) => <b>{s}</b> })}</li>
|
|
||||||
<li>{_t("<b>Save it</b> on a USB key or backup drive", {}, { b: (s) => <b>{s}</b> })}</li>
|
|
||||||
<li>{_t("<b>Copy it</b> to your personal cloud storage", {}, { b: (s) => <b>{s}</b> })}</li>
|
|
||||||
</ul>
|
|
||||||
<DialogButtons
|
|
||||||
primaryButton={_t("Continue")}
|
|
||||||
onPrimaryButtonClick={this.createBackup}
|
|
||||||
hasCancel={false}
|
|
||||||
>
|
|
||||||
<button onClick={this.onKeepItSafeBackClick}>{_t("Back")}</button>
|
|
||||||
</DialogButtons>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private renderBusyPhase(): JSX.Element {
|
private renderBusyPhase(): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -422,35 +123,8 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderPhaseOptOutConfirm(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{_t(
|
|
||||||
"Without setting up Secure Message Recovery, you won't be able to restore your " +
|
|
||||||
"encrypted message history if you log out or use another session.",
|
|
||||||
)}
|
|
||||||
<DialogButtons
|
|
||||||
primaryButton={_t("Set up Secure Message Recovery")}
|
|
||||||
onPrimaryButtonClick={this.onSetUpClick}
|
|
||||||
hasCancel={false}
|
|
||||||
>
|
|
||||||
<button onClick={this.onCancel}>I understand, continue without</button>
|
|
||||||
</DialogButtons>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private titleForPhase(phase: Phase): string {
|
private titleForPhase(phase: Phase): string {
|
||||||
switch (phase) {
|
switch (phase) {
|
||||||
case Phase.Passphrase:
|
|
||||||
return _t("Secure your backup with a Security Phrase");
|
|
||||||
case Phase.PassphraseConfirm:
|
|
||||||
return _t("Confirm your Security Phrase");
|
|
||||||
case Phase.OptOutConfirm:
|
|
||||||
return _t("Warning!");
|
|
||||||
case Phase.ShowKey:
|
|
||||||
case Phase.KeepItSafe:
|
|
||||||
return _t("Make a copy of your Security Key");
|
|
||||||
case Phase.BackingUp:
|
case Phase.BackingUp:
|
||||||
return _t("Starting backup…");
|
return _t("Starting backup…");
|
||||||
case Phase.Done:
|
case Phase.Done:
|
||||||
@ -476,27 +150,12 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
|
|||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
switch (this.state.phase) {
|
switch (this.state.phase) {
|
||||||
case Phase.Passphrase:
|
|
||||||
content = this.renderPhasePassPhrase();
|
|
||||||
break;
|
|
||||||
case Phase.PassphraseConfirm:
|
|
||||||
content = this.renderPhasePassPhraseConfirm();
|
|
||||||
break;
|
|
||||||
case Phase.ShowKey:
|
|
||||||
content = this.renderPhaseShowKey();
|
|
||||||
break;
|
|
||||||
case Phase.KeepItSafe:
|
|
||||||
content = this.renderPhaseKeepItSafe();
|
|
||||||
break;
|
|
||||||
case Phase.BackingUp:
|
case Phase.BackingUp:
|
||||||
content = this.renderBusyPhase();
|
content = this.renderBusyPhase();
|
||||||
break;
|
break;
|
||||||
case Phase.Done:
|
case Phase.Done:
|
||||||
content = this.renderPhaseDone();
|
content = this.renderPhaseDone();
|
||||||
break;
|
break;
|
||||||
case Phase.OptOutConfirm:
|
|
||||||
content = this.renderPhaseOptOutConfirm();
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -505,7 +164,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
|
|||||||
className="mx_CreateKeyBackupDialog"
|
className="mx_CreateKeyBackupDialog"
|
||||||
onFinished={this.props.onFinished}
|
onFinished={this.props.onFinished}
|
||||||
title={this.titleForPhase(this.state.phase)}
|
title={this.titleForPhase(this.state.phase)}
|
||||||
hasCancel={[Phase.Passphrase, Phase.Done].includes(this.state.phase)}
|
hasCancel={[Phase.Done].includes(this.state.phase)}
|
||||||
>
|
>
|
||||||
<div>{content}</div>
|
<div>{content}</div>
|
||||||
</BaseDialog>
|
</BaseDialog>
|
||||||
|
|||||||
@ -3600,37 +3600,14 @@
|
|||||||
"Space Autocomplete": "Space Autocomplete",
|
"Space Autocomplete": "Space Autocomplete",
|
||||||
"Users": "Users",
|
"Users": "Users",
|
||||||
"User Autocomplete": "User Autocomplete",
|
"User Autocomplete": "User Autocomplete",
|
||||||
"We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a Security Phrase.",
|
|
||||||
"For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
|
|
||||||
"Enter a Security Phrase": "Enter a Security Phrase",
|
|
||||||
"Great! This Security Phrase looks strong enough.": "Great! This Security Phrase looks strong enough.",
|
|
||||||
"Set up with a Security Key": "Set up with a Security Key",
|
|
||||||
"That matches!": "That matches!",
|
|
||||||
"Use a different passphrase?": "Use a different passphrase?",
|
|
||||||
"That doesn't match.": "That doesn't match.",
|
|
||||||
"Go back to set it again.": "Go back to set it again.",
|
|
||||||
"Enter your Security Phrase a second time to confirm it.": "Enter your Security Phrase a second time to confirm it.",
|
|
||||||
"Repeat your Security Phrase…": "Repeat your Security Phrase…",
|
|
||||||
"Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.": "Your Security Key is a safety net - you can use it to restore access to your encrypted messages if you forget your Security Phrase.",
|
|
||||||
"Keep a copy of it somewhere secure, like a password manager or even a safe.": "Keep a copy of it somewhere secure, like a password manager or even a safe.",
|
|
||||||
"Your Security Key": "Your Security Key",
|
|
||||||
"Your Security Key has been <b>copied to your clipboard</b>, paste it to:": "Your Security Key has been <b>copied to your clipboard</b>, paste it to:",
|
|
||||||
"Your Security Key is in your <b>Downloads</b> folder.": "Your Security Key is in your <b>Downloads</b> folder.",
|
|
||||||
"<b>Print it</b> and store it somewhere safe": "<b>Print it</b> and store it somewhere safe",
|
|
||||||
"<b>Save it</b> on a USB key or backup drive": "<b>Save it</b> on a USB key or backup drive",
|
|
||||||
"<b>Copy it</b> to your personal cloud storage": "<b>Copy it</b> to your personal cloud storage",
|
|
||||||
"Your keys are being backed up (the first backup could take a few minutes).": "Your keys are being backed up (the first backup could take a few minutes).",
|
"Your keys are being backed up (the first backup could take a few minutes).": "Your keys are being backed up (the first backup could take a few minutes).",
|
||||||
"Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.",
|
|
||||||
"Set up Secure Message Recovery": "Set up Secure Message Recovery",
|
|
||||||
"Secure your backup with a Security Phrase": "Secure your backup with a Security Phrase",
|
|
||||||
"Confirm your Security Phrase": "Confirm your Security Phrase",
|
|
||||||
"Make a copy of your Security Key": "Make a copy of your Security Key",
|
|
||||||
"Starting backup…": "Starting backup…",
|
"Starting backup…": "Starting backup…",
|
||||||
"Success!": "Success!",
|
"Success!": "Success!",
|
||||||
"Create key backup": "Create key backup",
|
"Create key backup": "Create key backup",
|
||||||
"Unable to create key backup": "Unable to create key backup",
|
"Unable to create key backup": "Unable to create key backup",
|
||||||
"Generate a Security Key": "Generate a Security Key",
|
"Generate a Security Key": "Generate a Security Key",
|
||||||
"We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.": "We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.",
|
"We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.": "We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.",
|
||||||
|
"Enter a Security Phrase": "Enter a Security Phrase",
|
||||||
"Use a secret phrase only you know, and optionally save a Security Key to use for backup.": "Use a secret phrase only you know, and optionally save a Security Key to use for backup.",
|
"Use a secret phrase only you know, and optionally save a Security Key to use for backup.": "Use a secret phrase only you know, and optionally save a Security Key to use for backup.",
|
||||||
"Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.": "Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.",
|
"Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.": "Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.",
|
||||||
"Enter your account password to confirm the upgrade:": "Enter your account password to confirm the upgrade:",
|
"Enter your account password to confirm the upgrade:": "Enter your account password to confirm the upgrade:",
|
||||||
@ -3639,6 +3616,13 @@
|
|||||||
"You'll need to authenticate with the server to confirm the upgrade.": "You'll need to authenticate with the server to confirm the upgrade.",
|
"You'll need to authenticate with the server to confirm the upgrade.": "You'll need to authenticate with the server to confirm the upgrade.",
|
||||||
"Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.",
|
"Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.",
|
||||||
"Enter a Security Phrase only you know, as it's used to safeguard your data. To be secure, you shouldn't re-use your account password.": "Enter a Security Phrase only you know, as it's used to safeguard your data. To be secure, you shouldn't re-use your account password.",
|
"Enter a Security Phrase only you know, as it's used to safeguard your data. To be secure, you shouldn't re-use your account password.": "Enter a Security Phrase only you know, as it's used to safeguard your data. To be secure, you shouldn't re-use your account password.",
|
||||||
|
"Great! This Security Phrase looks strong enough.": "Great! This Security Phrase looks strong enough.",
|
||||||
|
"That matches!": "That matches!",
|
||||||
|
"Use a different passphrase?": "Use a different passphrase?",
|
||||||
|
"That doesn't match.": "That doesn't match.",
|
||||||
|
"Go back to set it again.": "Go back to set it again.",
|
||||||
|
"Enter your Security Phrase a second time to confirm it.": "Enter your Security Phrase a second time to confirm it.",
|
||||||
|
"Confirm your Security Phrase": "Confirm your Security Phrase",
|
||||||
"Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.": "Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.",
|
"Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.": "Store your Security Key somewhere safe, like a password manager or a safe, as it's used to safeguard your encrypted data.",
|
||||||
"%(downloadButton)s or %(copyButton)s": "%(downloadButton)s or %(copyButton)s",
|
"%(downloadButton)s or %(copyButton)s": "%(downloadButton)s or %(copyButton)s",
|
||||||
"Your keys are now being backed up from this device.": "Your keys are now being backed up from this device.",
|
"Your keys are now being backed up from this device.": "Your keys are now being backed up from this device.",
|
||||||
|
|||||||
@ -0,0 +1,69 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { render, screen, waitFor } from "@testing-library/react";
|
||||||
|
import React from "react";
|
||||||
|
import { mocked } from "jest-mock";
|
||||||
|
|
||||||
|
import CreateKeyBackupDialog from "../../../../../src/async-components/views/dialogs/security/CreateKeyBackupDialog";
|
||||||
|
import { createTestClient } from "../../../../test-utils";
|
||||||
|
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
|
||||||
|
|
||||||
|
jest.mock("../../../../../src/SecurityManager", () => ({
|
||||||
|
accessSecretStorage: jest.fn().mockResolvedValue(undefined),
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe("CreateKeyBackupDialog", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
MatrixClientPeg.get = () => createTestClient();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should display the spinner when creating backup", () => {
|
||||||
|
const { asFragment } = render(<CreateKeyBackupDialog onFinished={jest.fn()} />);
|
||||||
|
|
||||||
|
// Check if the spinner is displayed
|
||||||
|
expect(screen.getByTestId("spinner")).toBeDefined();
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should display the error message when backup creation failed", async () => {
|
||||||
|
const matrixClient = createTestClient();
|
||||||
|
mocked(matrixClient.scheduleAllGroupSessionsForBackup).mockRejectedValue("my error");
|
||||||
|
MatrixClientPeg.get = () => matrixClient;
|
||||||
|
|
||||||
|
const { asFragment } = render(<CreateKeyBackupDialog onFinished={jest.fn()} />);
|
||||||
|
|
||||||
|
// Check if the error message is displayed
|
||||||
|
await waitFor(() => expect(screen.getByText("Unable to create key backup")).toBeDefined());
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should display the success dialog when the key backup is finished", async () => {
|
||||||
|
const onFinished = jest.fn();
|
||||||
|
const { asFragment } = render(<CreateKeyBackupDialog onFinished={onFinished} />);
|
||||||
|
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(
|
||||||
|
screen.getByText("Your keys are being backed up (the first backup could take a few minutes)."),
|
||||||
|
).toBeDefined(),
|
||||||
|
);
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
|
||||||
|
// Click on the OK button
|
||||||
|
screen.getByRole("button", { name: "OK" }).click();
|
||||||
|
expect(onFinished).toHaveBeenCalledWith(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`CreateKeyBackupDialog should display the error message when backup creation failed 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
data-focus-guard="true"
|
||||||
|
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-labelledby="mx_BaseDialog_title"
|
||||||
|
class="mx_CreateKeyBackupDialog mx_Dialog_fixedWidth"
|
||||||
|
data-focus-lock-disabled="false"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_Dialog_header"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="mx_Heading_h2 mx_Dialog_title"
|
||||||
|
id="mx_BaseDialog_title"
|
||||||
|
>
|
||||||
|
Starting backup…
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
Unable to create key backup
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="mx_Dialog_buttons"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mx_Dialog_buttons_row"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
data-testid="dialog-cancel-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="mx_Dialog_primary"
|
||||||
|
data-testid="dialog-primary-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
data-focus-guard="true"
|
||||||
|
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`CreateKeyBackupDialog should display the spinner when creating backup 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
data-focus-guard="true"
|
||||||
|
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-labelledby="mx_BaseDialog_title"
|
||||||
|
class="mx_CreateKeyBackupDialog mx_Dialog_fixedWidth"
|
||||||
|
data-focus-lock-disabled="false"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_Dialog_header"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="mx_Heading_h2 mx_Dialog_title"
|
||||||
|
id="mx_BaseDialog_title"
|
||||||
|
>
|
||||||
|
Starting backup…
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="mx_Spinner"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-label="Loading…"
|
||||||
|
class="mx_Spinner_icon"
|
||||||
|
data-testid="spinner"
|
||||||
|
role="progressbar"
|
||||||
|
style="width: 32px; height: 32px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
data-focus-guard="true"
|
||||||
|
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`CreateKeyBackupDialog should display the success dialog when the key backup is finished 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
data-focus-guard="true"
|
||||||
|
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-labelledby="mx_BaseDialog_title"
|
||||||
|
class="mx_CreateKeyBackupDialog mx_Dialog_fixedWidth"
|
||||||
|
data-focus-lock-disabled="false"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_Dialog_header mx_Dialog_headerWithCancel"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="mx_Heading_h2 mx_Dialog_title"
|
||||||
|
id="mx_BaseDialog_title"
|
||||||
|
>
|
||||||
|
Success!
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
aria-label="Close dialog"
|
||||||
|
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
Your keys are being backed up (the first backup could take a few minutes).
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="mx_Dialog_buttons"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mx_Dialog_buttons_row"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="mx_Dialog_primary"
|
||||||
|
data-testid="dialog-primary-button"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
OK
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
data-focus-guard="true"
|
||||||
|
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||||
|
tabindex="0"
|
||||||
|
/>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
@ -157,6 +157,7 @@ export function createTestClient(): MatrixClient {
|
|||||||
});
|
});
|
||||||
}),
|
}),
|
||||||
mxcUrlToHttp: (mxc: string) => `http://this.is.a.url/${mxc.substring(6)}`,
|
mxcUrlToHttp: (mxc: string) => `http://this.is.a.url/${mxc.substring(6)}`,
|
||||||
|
scheduleAllGroupSessionsForBackup: jest.fn().mockResolvedValue(undefined),
|
||||||
setAccountData: jest.fn(),
|
setAccountData: jest.fn(),
|
||||||
setRoomAccountData: jest.fn(),
|
setRoomAccountData: jest.fn(),
|
||||||
setRoomTopic: jest.fn(),
|
setRoomTopic: jest.fn(),
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user