diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index a114c998b8b..46b8fc932d9 100644
--- 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
new file mode 100644
index 00000000000..fc6ba7d9593
--- /dev/null
+++ 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
index 7b5bea56234..a5d47100d6f 100644
--- 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 (
-
+
+
+
+
);
}
diff --git a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
index f164342e27d..0b4b27e9d07 100644
--- 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 = ;
break;
case "secrets_not_cached":
- content = ;
+ content = (
+ setState("reset_identity_forgot")}
+ />
+ );
break;
case "main":
content = (
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3896d05e885..ad33d093b7c 100644
--- 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",