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