diff --git a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx index ec8cf31f30..822e9fd46b 100644 --- a/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx +++ b/src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx @@ -15,41 +15,27 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { createRef } from "react"; -import FileSaver from "file-saver"; -import { IPreparedKeyBackupVersion } from "matrix-js-sdk/src/crypto/backup"; +import React from "react"; import { logger } from "matrix-js-sdk/src/logger"; +import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup"; import { MatrixClientPeg } from "../../../../MatrixClientPeg"; -import { _t, _td } from "../../../../languageHandler"; +import { _t } from "../../../../languageHandler"; 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 BaseDialog from "../../../../components/views/dialogs/BaseDialog"; import DialogButtons from "../../../../components/views/elements/DialogButtons"; -import { IValidationResult } from "../../../../components/views/elements/Validation"; enum Phase { - Passphrase = "passphrase", - PassphraseConfirm = "passphrase_confirm", - ShowKey = "show_key", - KeepItSafe = "keep_it_safe", BackingUp = "backing_up", Done = "done", - OptOutConfirm = "opt_out_confirm", } -const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc. - interface IProps { onFinished(done?: boolean): void; } interface IState { - secureSecretStorage: boolean | null; phase: Phase; passPhrase: string; passPhraseValid: boolean; @@ -64,16 +50,11 @@ interface IState { * on the server. */ export default class CreateKeyBackupDialog extends React.PureComponent { - private keyBackupInfo: Pick; - private recoveryKeyNode = createRef(); - private passphraseField = createRef(); - public constructor(props: IProps) { super(props); this.state = { - secureSecretStorage: null, - phase: Phase.Passphrase, + phase: Phase.BackingUp, passPhrase: "", passPhraseValid: false, passPhraseConfirm: "", @@ -82,59 +63,22 @@ export default class CreateKeyBackupDialog extends React.PureComponent { - const cli = MatrixClientPeg.get(); - 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(); - } + public componentDidMount(): void { + 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 => { - const { secureSecretStorage } = this.state; this.setState({ - phase: Phase.BackingUp, error: undefined, }); - let info; + let info: IKeyBackupInfo | undefined; try { - if (secureSecretStorage) { - await accessSecretStorage(async (): Promise => { - info = await MatrixClientPeg.get().prepareKeyBackupVersion(null /* random key */, { - secureSecretStorage: true, - }); - info = await MatrixClientPeg.get().createKeyBackupVersion(info); + await accessSecretStorage(async (): Promise => { + info = await MatrixClientPeg.get().prepareKeyBackupVersion(null /* random key */, { + secureSecretStorage: true, }); - } else { - info = await MatrixClientPeg.get().createKeyBackupVersion(this.keyBackupInfo); - } + info = await MatrixClientPeg.get().createKeyBackupVersion(info); + }); await MatrixClientPeg.get().scheduleAllGroupSessionsForBackup(); this.setState({ phase: Phase.Done, @@ -145,7 +89,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent { - this.setState({ phase: Phase.Passphrase }); - }; - - private onSkipPassPhraseClick = async (): Promise => { - this.keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion(); - this.setState({ - copied: false, - downloaded: false, - phase: Phase.ShowKey, - }); - }; - - private onPassPhraseNextClick = async (e: React.FormEvent): Promise => { - 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 => { - 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): void => { - this.setState({ - passPhrase: e.target.value, - }); - }; - - private onPassPhraseConfirmChange = (e: React.ChangeEvent): void => { - this.setState({ - passPhraseConfirm: e.target.value, - }); - }; - - private renderPhasePassPhrase(): JSX.Element { - return ( -
-

- {_t( - "Warning: you should only set up key backup from a trusted computer.", - {}, - { b: (sub) => {sub} }, - )} -

-

- {_t( - "We'll store an encrypted copy of your keys on our server. " + - "Secure your backup with a Security Phrase.", - )} -

-

{_t("For maximum security, this should be different from your account password.")}

- -
-
- -
-
- - - -
- {_t("Advanced")} - - {_t("Set up with a Security Key")} - -
- - ); - } - - 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 = ( -
-
{matchText}
- - {changeText} - -
- ); - } - return ( -
-

{_t("Enter your Security Phrase a second time to confirm it.")}

-
-
-
- -
- {passPhraseMatch} -
-
- - - ); - } - - private renderPhaseShowKey(): JSX.Element { - return ( -
-

- {_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.", - )} -

-

{_t("Keep a copy of it somewhere secure, like a password manager or even a safe.")}

-
-
{_t("Your Security Key")}
-
-
- {this.keyBackupInfo.recovery_key} -
-
- - -
-
-
-
- ); - } - - private renderPhaseKeepItSafe(): JSX.Element { - let introText; - if (this.state.copied) { - introText = _t( - "Your Security Key has been copied to your clipboard, paste it to:", - {}, - { b: (s) => {s} }, - ); - } else if (this.state.downloaded) { - introText = _t("Your Security Key is in your Downloads folder.", {}, { b: (s) => {s} }); - } - return ( -
- {introText} -
    -
  • {_t("Print it and store it somewhere safe", {}, { b: (s) => {s} })}
    • -
  • {_t("Save it on a USB key or backup drive", {}, { b: (s) => {s} })}
    • -
  • {_t("Copy it to your personal cloud storage", {}, { b: (s) => {s} })}
    • -
- - - -
- ); - } - private renderBusyPhase(): JSX.Element { return (
@@ -422,35 +123,8 @@ export default class CreateKeyBackupDialog extends React.PureComponent - {_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.", - )} - - - -
- ); - } - private titleForPhase(phase: Phase): string { 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: return _t("Starting backup…"); case Phase.Done: @@ -476,27 +150,12 @@ export default class CreateKeyBackupDialog extends React.PureComponent
{content}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index a7b25faaa8..8991a6d4e9 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3600,37 +3600,14 @@ "Space Autocomplete": "Space Autocomplete", "Users": "Users", "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 copied to your clipboard, paste it to:": "Your Security Key has been copied to your clipboard, paste it to:", - "Your Security Key is in your Downloads folder.": "Your Security Key is in your Downloads folder.", - "Print it and store it somewhere safe": "Print it and store it somewhere safe", - "Save it on a USB key or backup drive": "Save it on a USB key or backup drive", - "Copy it to your personal cloud storage": "Copy it 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).", - "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…", "Success!": "Success!", "Create key backup": "Create key backup", "Unable to create key backup": "Unable to create key backup", "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.", + "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.", "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:", @@ -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.", "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.", + "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.", "%(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.", diff --git a/test/components/views/dialogs/security/CreateKeyBackupDialog-test.tsx b/test/components/views/dialogs/security/CreateKeyBackupDialog-test.tsx new file mode 100644 index 0000000000..e7a91f3715 --- /dev/null +++ b/test/components/views/dialogs/security/CreateKeyBackupDialog-test.tsx @@ -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(); + + // 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(); + + // 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(); + + 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); + }); +}); diff --git a/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap b/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap new file mode 100644 index 0000000000..655be7884d --- /dev/null +++ b/test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap @@ -0,0 +1,168 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CreateKeyBackupDialog should display the error message when backup creation failed 1`] = ` + +
+ +
+ +`; + +exports[`CreateKeyBackupDialog should display the spinner when creating backup 1`] = ` + +
+