Delegate to ResetIdentityDialog from SetupEncryptionBody

andybalaam · andybalaam · commit 8f0073eb3a22 · 2025-04-11T16:12:10.000+01:00
diff --git a/playwright/e2e/crypto/dehydration.spec.ts b/playwright/e2e/crypto/dehydration.spec.ts
@@ -35,14 +35,20 @@ test.describe("Dehydration", () => {
 
         await app.closeDialog();
 
-        // Verify the device by resetting the key
+        // Reset the key
         const settings = await app.settings.openUserSettings("Encryption");
         await settings.getByRole("button", { name: "Verify this device" }).click();
         await page.getByRole("button", { name: "Proceed with reset" }).click();
         await page.getByRole("button", { name: "Continue" }).click();
-        await page.getByRole("button", { name: "Copy" }).click();
+
+        // Set up recovery
+        await page.getByRole("button", { name: "Set up recovery" }).click();
+        await page.getByRole("button", { name: "Continue" }).click();
+        const recoveryKey = await page.getByTestId("recoveryKey").innerText();
         await page.getByRole("button", { name: "Continue" }).click();
-        await page.getByRole("button", { name: "Done" }).click();
+        await page.getByRole("textbox").fill(recoveryKey);
+        await page.getByRole("button", { name: "Finish set up" }).click();
+        await page.getByRole("button", { name: "Close" }).click();
 
         await expectDehydratedDeviceEnabled(app);
 
diff --git a/src/components/structures/auth/CompleteSecurity.tsx b/src/components/structures/auth/CompleteSecurity.tsx
@@ -75,12 +75,9 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
         } else if (phase === Phase.ConfirmSkip) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("common|are_you_sure");
-        } else if (phase === Phase.Busy) {
+        } else if (phase === Phase.Busy || phase === Phase.ConfirmReset) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("encryption|verification|after_new_login|verify_this_device");
-        } else if (phase === Phase.ConfirmReset) {
-            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
-            title = _t("encryption|verification|after_new_login|reset_confirmation");
         } else if (phase === Phase.Finished) {
             // SetupEncryptionBody will take care of calling onFinished, we don't need to do anything
         } else {
diff --git a/src/components/structures/auth/SetupEncryptionBody.tsx b/src/components/structures/auth/SetupEncryptionBody.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -19,6 +19,7 @@ import { SetupEncryptionStore, Phase } from "../../../stores/SetupEncryptionStor
 import EncryptionPanel from "../../views/right_panel/EncryptionPanel";
 import AccessibleButton, { type ButtonEvent } from "../../views/elements/AccessibleButton";
 import Spinner from "../../views/elements/Spinner";
+import { ResetIdentityDialog } from "../../views/dialogs/ResetIdentityDialog";
 
 function keyHasPassphrase(keyInfo: SecretStorageKeyDescription): boolean {
     return Boolean(keyInfo.passphrase && keyInfo.passphrase.salt && keyInfo.passphrase.iterations);
@@ -114,12 +115,18 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
         ev.preventDefault();
         const store = SetupEncryptionStore.sharedInstance();
         store.reset();
-    };
-
-    private onResetConfirmClick = (): void => {
-        this.props.onFinished();
-        const store = SetupEncryptionStore.sharedInstance();
-        store.resetConfirm();
+        Modal.createDialog(ResetIdentityDialog, {
+            onReset: () => {
+                // The user completed the reset process - close this dialog
+                this.props.onFinished();
+                this.onDoneClick();
+            },
+            onFinished: () => {
+                // The user cancelled the reset dialog or click away - go back a step
+                this.onResetBackClick();
+            },
+            variant: "confirm",
+        });
     };
 
     private onResetBackClick = (): void => {
@@ -157,7 +164,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                         <p>{_t("encryption|verification|no_key_or_device")}</p>
 
                         <div className="mx_CompleteSecurity_actionRow">
-                            <AccessibleButton kind="primary" onClick={this.onResetConfirmClick}>
+                            <AccessibleButton kind="primary" onClick={this.onResetClick}>
                                 {_t("encryption|verification|reset_proceed_prompt")}
                             </AccessibleButton>
                         </div>
@@ -246,23 +253,7 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                     </div>
                 </div>
             );
-        } else if (phase === Phase.ConfirmReset) {
-            return (
-                <div>
-                    <p>{_t("encryption|verification|verify_reset_warning_1")}</p>
-                    <p>{_t("encryption|verification|verify_reset_warning_2")}</p>
-
-                    <div className="mx_CompleteSecurity_actionRow">
-                        <AccessibleButton kind="danger_outline" onClick={this.onResetConfirmClick}>
-                            {_t("encryption|verification|reset_proceed_prompt")}
-                        </AccessibleButton>
-                        <AccessibleButton kind="primary" onClick={this.onResetBackClick}>
-                            {_t("action|go_back")}
-                        </AccessibleButton>
-                    </div>
-                </div>
-            );
-        } else if (phase === Phase.Busy || phase === Phase.Loading) {
+        } else if (phase === Phase.Busy || phase === Phase.Loading || phase == Phase.ConfirmReset) {
             return <Spinner />;
         } else {
             logger.log(`SetupEncryptionBody: Unknown phase ${phase}`);
diff --git a/src/components/views/dialogs/ResetIdentityDialog.tsx b/src/components/views/dialogs/ResetIdentityDialog.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type MouseEventHandler } from "react";
+import React, { type JSX, type MouseEventHandler } from "react";
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -16,14 +16,11 @@ interface ResetIdentityDialogProps {
      * Called when the dialog closes.
      */
     onFinished: () => void;
+
     /**
-     * Called when the identity is reset.
-     */
-    onResetFinished: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Called when the cancel button is clicked.
+     * Called when the identity is reset (before onFinished is called).
      */
-    onCancelClick: () => void;
+    onReset: MouseEventHandler<HTMLButtonElement>;
 
     /**
      * Which variant of this dialog to show.
@@ -34,28 +31,19 @@ interface ResetIdentityDialogProps {
 /**
  * The dialog for resetting the identity of the current user.
  */
-export function ResetIdentityDialog({
-    onFinished,
-    onCancelClick,
-    onResetFinished,
-    variant,
-}: ResetIdentityDialogProps): JSX.Element {
+export function ResetIdentityDialog({ onFinished, onReset, variant }: ResetIdentityDialogProps): JSX.Element {
     const matrixClient = MatrixClientPeg.safeGet();
 
     // Wrappers for ResetIdentityBody's callbacks so that onFinish gets called
     // whenever the reset is done, whether by completing successfully, or by
     // being cancelled
     const onResetWrapper: MouseEventHandler<HTMLButtonElement> = (...args) => {
+        onReset(...args);
         onFinished();
-        onResetFinished(...args);
-    };
-    const onCancelWrapper: () => void = () => {
-        onFinished();
-        onCancelClick();
     };
     return (
         <MatrixClientContext.Provider value={matrixClient}>
-            <ResetIdentityBody onFinish={onResetWrapper} onCancelClick={onCancelWrapper} variant={variant} />
+            <ResetIdentityBody onReset={onResetWrapper} onCancelClick={onFinished} variant={variant} />
         </MatrixClientContext.Provider>
     );
 }
diff --git a/src/components/views/settings/encryption/ResetIdentityBody.tsx b/src/components/views/settings/encryption/ResetIdentityBody.tsx
@@ -22,7 +22,8 @@ interface ResetIdentityBodyProps {
     /**
      * Called when the identity is reset.
      */
-    onFinish: MouseEventHandler<HTMLButtonElement>;
+    onReset: MouseEventHandler<HTMLButtonElement>;
+
     /**
      * Called when the cancel button is clicked.
      */
@@ -53,7 +54,7 @@ export type ResetIdentityBodyVariant = "compromised" | "forgot" | "sync_failed"
  *
  * Used by {@link ResetIdentityPanel}.
  */
-export function ResetIdentityBody({ onCancelClick, onFinish, variant }: ResetIdentityBodyProps): JSX.Element {
+export function ResetIdentityBody({ onCancelClick, onReset, variant }: ResetIdentityBodyProps): JSX.Element {
     const matrixClient = useMatrixClientContext();
 
     // After the user clicks "Continue", we disable the button so it can't be
@@ -85,7 +86,7 @@ export function ResetIdentityBody({ onCancelClick, onFinish, variant }: ResetIde
                         await matrixClient
                             .getCrypto()
                             ?.resetEncryption((makeRequest) => uiAuthCallback(matrixClient, makeRequest));
-                        onFinish(evt);
+                        onReset(evt);
                     }}
                 >
                     {inProgress ? (
diff --git a/src/components/views/settings/encryption/ResetIdentityPanel.tsx b/src/components/views/settings/encryption/ResetIdentityPanel.tsx
@@ -15,7 +15,8 @@ interface ResetIdentityPanelProps {
     /**
      * Called when the identity is reset.
      */
-    onFinish: MouseEventHandler<HTMLButtonElement>;
+    onReset: MouseEventHandler<HTMLButtonElement>;
+
     /**
      * Called when the cancel button is clicked or when we go back in the breadcrumbs.
      */
@@ -32,7 +33,7 @@ interface ResetIdentityPanelProps {
  *
  * A thin wrapper around {@link ResetIdentityBody}, just adding breadcrumbs.
  */
-export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetIdentityPanelProps): JSX.Element {
+export function ResetIdentityPanel({ onCancelClick, onReset, variant }: ResetIdentityPanelProps): JSX.Element {
     return (
         <>
             <Breadcrumb
@@ -41,7 +42,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                 pages={[_t("settings|encryption|title"), _t("settings|encryption|advanced|breadcrumb_page")]}
                 onPageClick={onCancelClick}
             />
-            <ResetIdentityBody onFinish={onFinish} onCancelClick={onCancelClick} variant={variant} />
+            <ResetIdentityBody onReset={onReset} onCancelClick={onCancelClick} variant={variant} />
         </>
     );
 }
diff --git a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
@@ -128,7 +128,7 @@ export function EncryptionUserSettingsTab({ initialState = "loading" }: Props):
                 <ResetIdentityPanel
                     variant={findResetVariant(state)}
                     onCancelClick={checkEncryptionState}
-                    onFinish={checkEncryptionState}
+                    onReset={checkEncryptionState}
                 />
             );
             break;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -992,7 +992,6 @@
             "accepting": "Accepting…",
             "after_new_login": {
                 "device_verified": "Device verified",
-                "reset_confirmation": "Really reset verification keys?",
                 "skip_verification": "Skip verification for now",
                 "unable_to_verify": "Unable to verify this device",
                 "verify_this_device": "Verify this device"
@@ -1063,8 +1062,6 @@
             "verify_emoji_prompt": "Verify by comparing unique emoji.",
             "verify_emoji_prompt_qr": "If you can't scan the code above, verify by comparing unique emoji.",
             "verify_later": "I'll verify later",
-            "verify_reset_warning_1": "Resetting your verification keys cannot be undone. After resetting, you won't have access to old encrypted messages, and any friends who have previously verified you will see security warnings until you re-verify with them.",
-            "verify_reset_warning_2": "Please only proceed if you're sure you've lost all of your other devices and your Recovery Key.",
             "verify_using_device": "Verify with another device",
             "verify_using_key": "Verify with Recovery Key",
             "verify_using_key_or_phrase": "Verify with Recovery Key or Phrase",
diff --git a/test/unit-tests/components/views/settings/encryption/ResetIdentityPanel-test.tsx b/test/unit-tests/components/views/settings/encryption/ResetIdentityPanel-test.tsx
@@ -24,9 +24,9 @@ describe("<ResetIdentityPanel />", () => {
     it("should reset the encryption when the continue button is clicked", async () => {
         const user = userEvent.setup();
 
-        const onFinish = jest.fn();
+        const onReset = jest.fn();
         const { asFragment } = render(
-            <ResetIdentityPanel variant="compromised" onFinish={onFinish} onCancelClick={jest.fn()} />,
+            <ResetIdentityPanel variant="compromised" onReset={onReset} onCancelClick={jest.fn()} />,
             withClientContextRenderOptions(matrixClient),
         );
         expect(asFragment()).toMatchSnapshot();
@@ -43,22 +43,22 @@ describe("<ResetIdentityPanel />", () => {
         await sleep(0);
 
         expect(matrixClient.getCrypto()!.resetEncryption).toHaveBeenCalled();
-        expect(onFinish).toHaveBeenCalled();
+        expect(onReset).toHaveBeenCalled();
     });
 
     it("should display the 'forgot recovery key' variant correctly", async () => {
-        const onFinish = jest.fn();
+        const onReset = jest.fn();
         const { asFragment } = render(
-            <ResetIdentityPanel variant="forgot" onFinish={onFinish} onCancelClick={jest.fn()} />,
+            <ResetIdentityPanel variant="forgot" onReset={onReset} onCancelClick={jest.fn()} />,
             withClientContextRenderOptions(matrixClient),
         );
         expect(asFragment()).toMatchSnapshot();
     });
 
     it("should display the 'sync failed' variant correctly", async () => {
-        const onFinish = jest.fn();
+        const onReset = jest.fn();
         const { asFragment } = render(
-            <ResetIdentityPanel variant="sync_failed" onFinish={onFinish} onCancelClick={jest.fn()} />,
+            <ResetIdentityPanel variant="sync_failed" onReset={onReset} onCancelClick={jest.fn()} />,
             withClientContextRenderOptions(matrixClient),
         );
         expect(asFragment()).toMatchSnapshot();
