Add Forgot recovery key? button to encryption tab (#29202)

* feat(crypto settings): add "Forgot  recovery key?" button to encryption tab

* test(crypto settings): add tests for `RecoveryPanelOutOfSync`

* test(crypto settings): update encryption tab test

* test(crypto settings): update and add e2e test

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>
     );
 }

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 = (

src/i18n/strings/en_EN.json

@@ -2496,7 +2496,8 @@
                 "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",
-                "key_storage_warning": "Your key storage is out of sync. Click the button below to fix the problem.",
+                "forgot_recovery_key": "Forgot recovery key?",
+                "key_storage_warning": "Your key storage is out of sync. Click one of the buttons below to fix the problem.",
                 "save_key_description": "Do not share this with anyone!",
                 "save_key_title": "Recovery key",
                 "set_up_recovery": "Set up recovery",