Delegate to ResetIdentityDialog from SetupEncryptionBody

Author: andybalaam

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 {

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,17 @@ 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, {
+            onResetFinished: () => {
+                this.onDoneClick();
+            },
+            onCancelClick: () => {},
+            onFinished: () => {
+                close();
+                this.onResetBackClick();
+            },
+            variant: "confirm",
+        });
     };
 
     private onResetBackClick = (): void => {
@@ -157,7 +163,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 +252,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}`);

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",