feat(crypto settings): Add "Forgot recovery key?" button to encryptio…

…n tab
element-hq · Feb 5, 2025 · 73e59df · 73e59df
1 parent 4a381c2
commit 73e59df
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 13 deletions.
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
@@ -358,6 +358,7 @@
 @import "./views/settings/encryption/_AdvancedPanel.pcss";
 @import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
 @import "./views/settings/encryption/_EncryptionCard.pcss";
+@import "./views/settings/encryption/_RecoveryPanelOutOfSync.pcss";
 @import "./views/settings/encryption/_ResetIdentityPanel.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";

diff --git a/res/css/views/settings/encryption/_RecoveryPanelOutOfSync.pcss b/res/css/views/settings/encryption/_RecoveryPanelOutOfSync.pcss
@@ -0,0 +1,11 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_RecoveryPanelOutOfSync {
+    display: flex;
+    gap: var(--cpd-space-2x);
+}
diff --git a/src/components/views/settings/encryption/RecoveryPanelOutOfSync.tsx b/src/components/views/settings/encryption/RecoveryPanelOutOfSync.tsx
@@ -19,6 +19,10 @@ interface RecoveryPanelOutOfSyncProps {
      * Callback for when the user has finished entering their recovery key.
      */
     onFinish: () => void;
+    /**
+     * Callback for when the user clicks on the "Forgot recovery key?" button.
+     */
+    onForgotRecoveryKey: () => void;
 }
 
 /**
@@ -28,7 +32,7 @@ interface RecoveryPanelOutOfSyncProps {
  * It prompts the user to enter their recovery key so that the secrets can be loaded from 4S into
  * the client.
  */
-export function RecoveryPanelOutOfSync({ onFinish }: RecoveryPanelOutOfSyncProps): JSX.Element {
+export function RecoveryPanelOutOfSync({ onForgotRecoveryKey, onFinish }: RecoveryPanelOutOfSyncProps): JSX.Element {
     return (
         <SettingsSection
             legacy={false}
@@ -42,17 +46,22 @@ export function RecoveryPanelOutOfSync({ onFinish }: RecoveryPanelOutOfSyncProps
             }
             data-testid="recoveryPanel"
         >
-            <Button
-                size="sm"
-                kind="primary"
-                Icon={KeyIcon}
-                onClick={async () => {
-                    await accessSecretStorage();
-                    onFinish();
-                }}
-            >
-                {_t("settings|encryption|recovery|enter_recovery_key")}
-            </Button>
+            <div className="mx_RecoveryPanelOutOfSync">
+                <Button size="sm" kind="secondary" onClick={onForgotRecoveryKey}>
+                    {_t("settings|encryption|recovery|forgot_recovery_key")}
+                </Button>
+                <Button
+                    size="sm"
+                    kind="primary"
+                    Icon={KeyIcon}
+                    onClick={async () => {
+                        await accessSecretStorage();
+                        onFinish();
+                    }}
+                >
+                    {_t("settings|encryption|recovery|enter_recovery_key")}
+                </Button>
+            </div>
         </SettingsSection>
     );
 }
diff --git a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
@@ -71,7 +71,12 @@ export function EncryptionUserSettingsTab({ initialState = "loading" }: Encrypti
             content = <SetUpEncryptionPanel onFinish={checkEncryptionState} />;
             break;
         case "secrets_not_cached":
-            content = <RecoveryPanelOutOfSync onFinish={checkEncryptionState} />;
+            content = (
+                <RecoveryPanelOutOfSync
+                    onFinish={checkEncryptionState}
+                    onForgotRecoveryKey={() => setState("reset_identity_forgot")}
+                />
+            );
             break;
         case "main":
             content = (

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -2496,6 +2496,7 @@
                 "description": "Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.",
                 "enter_key_error": "The recovery key you entered is not correct.",
                 "enter_recovery_key": "Enter recovery key",
+                "forgot_recovery_key": "Forgot recovery key?",
                 "key_storage_warning": "Your key storage is out of sync. Click the button below to fix the problem.",
                 "save_key_description": "Do not share this with anyone!",
                 "save_key_title": "Recovery key",