From 54ede8be4d3f79229f38d5684e22d534c5e3d8c4 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 6 Dec 2024 11:51:34 +0100 Subject: [PATCH] Can change recovery key in encryption tab --- res/css/_common.pcss | 22 +- res/css/_components.pcss | 3 + .../encryption/_ChangeRecoveryKey.pcss | 73 ++++++ .../settings/encryption/_EncryptionCard.pcss | 33 +++ .../settings/encryption/_RecoveryPanel.pcss | 22 ++ res/css/views/settings/tabs/_SettingsTab.pcss | 2 +- .../settings/encryption/ChangeRecoveryKey.tsx | 218 ++++++++++++++++++ .../settings/encryption/EncryptionCard.tsx | 35 +++ .../settings/encryption/RecoveryPanel.tsx | 118 ++++++++++ .../tabs/user/EncryptionUserSettingsTab.tsx | 19 +- src/i18n/strings/en_EN.json | 16 ++ 11 files changed, 551 insertions(+), 10 deletions(-) create mode 100644 res/css/views/settings/encryption/_ChangeRecoveryKey.pcss create mode 100644 res/css/views/settings/encryption/_EncryptionCard.pcss create mode 100644 res/css/views/settings/encryption/_RecoveryPanel.pcss create mode 100644 src/components/views/settings/encryption/ChangeRecoveryKey.tsx create mode 100644 src/components/views/settings/encryption/EncryptionCard.tsx create mode 100644 src/components/views/settings/encryption/RecoveryPanel.tsx diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 74328af39b2..9964ec8e508 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -596,7 +596,9 @@ legend { .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not( .mx_UserProfileSettings button - ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button), + ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not( + .mx_EncryptionUserSettingsTab button + ), .mx_Dialog input[type="submit"], .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton), .mx_Dialog_buttons input[type="submit"] { @@ -616,8 +618,8 @@ legend { .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not( .mx_UserProfileSettings button - ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not( - .mx_ShareDialog button + ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not( + .mx_EncryptionUserSettingsTab button ):last-child { margin-right: 0px; } @@ -625,7 +627,9 @@ legend { .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not( .mx_UserProfileSettings button - ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus, + ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not( + .mx_EncryptionUserSettingsTab button + ):focus, .mx_Dialog input[type="submit"]:focus, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus, .mx_Dialog_buttons input[type="submit"]:focus { @@ -637,7 +641,9 @@ legend { .mx_Dialog_buttons button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not( .mx_UserProfileSettings button - ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button), + ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not( + .mx_EncryptionUserSettingsTab button + ), .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary { color: var(--cpd-color-text-on-solid-primary); background-color: var(--cpd-color-bg-action-primary-rest); @@ -650,7 +656,7 @@ legend { .mx_Dialog_buttons button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not( .mx_ThemeChoicePanel_CustomTheme button - ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button), + ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(.mx_EncryptionUserSettingsTab button), .mx_Dialog_buttons input[type="submit"].danger { background-color: var(--cpd-color-bg-critical-primary); border: solid 1px var(--cpd-color-bg-critical-primary); @@ -666,7 +672,9 @@ legend { .mx_Dialog button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not( .mx_UserProfileSettings button - ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled, + ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not( + .mx_EncryptionUserSettingsTab button + ):disabled, .mx_Dialog input[type="submit"]:disabled, .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled, .mx_Dialog_buttons input[type="submit"]:disabled { diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 7426f407990..b424c1e3c1a 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -351,6 +351,9 @@ @import "./views/settings/_ThemeChoicePanel.pcss"; @import "./views/settings/_UpdateCheckButton.pcss"; @import "./views/settings/_UserProfileSettings.pcss"; +@import "./views/settings/encryption/_ChangeRecoveryKey.pcss"; +@import "./views/settings/encryption/_RecoveryPanel.pcss"; +@import "./views/settings/encryption/_EncryptionCard.pcss"; @import "./views/settings/tabs/_SettingsBanner.pcss"; @import "./views/settings/tabs/_SettingsIndent.pcss"; @import "./views/settings/tabs/_SettingsSection.pcss"; diff --git a/res/css/views/settings/encryption/_ChangeRecoveryKey.pcss b/res/css/views/settings/encryption/_ChangeRecoveryKey.pcss new file mode 100644 index 00000000000..2e1f6ff414e --- /dev/null +++ b/res/css/views/settings/encryption/_ChangeRecoveryKey.pcss @@ -0,0 +1,73 @@ +/* + * Copyright 2024 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only + * Please see LICENSE files in the repository root for full details. + */ + +.mx_ChangeRecoveryKey_Form { + display: flex; + flex-direction: column; + gap: var(--cpd-space-8x); + + .mx_ChangeRecoveryKey_footer { + display: flex; + flex-direction: column; + gap: var(--cpd-space-4x); + justify-content: center; + } +} + +.mx_ChangeRecoveryKey_KeyPanel { + display: flex; + flex-direction: column; + gap: var(--cpd-space-8x); + + .mx_ChangeRecoveryKey_KeyPanel_content { + display: grid; + grid-template: + "header button" auto + "content button" auto; + + column-gap: var(--cpd-space-3x); + row-gap: var(--cpd-space-1x); + align-items: center; + + > span { + grid-area: header; + } + + > div { + grid-area: content; + display: flex; + flex-direction: column; + gap: var(--cpd-space-2x); + color: var(--cpd-color-text-secondary); + + .mx_ChangeRecoveryKey_KeyPanel_key { + border-radius: var(--cpd-space-2x); + padding: var(--cpd-space-3x) var(--cpd-space-4x); + background-color: var(--cpd-color-bg-subtle-secondary); + } + } + + > button { + margin: 0 var(--cpd-space-1x); + grid-area: button; + color: var(--cpd-color-icon-secondary-alpha); + } + } +} + +.mx_ChangeRecoveryKey_KeyForm { + display: flex; + flex-direction: column; + gap: var(--cpd-space-8x); +} + +.mx_ChangeRecoveryKey_footer { + display: flex; + flex-direction: column; + gap: var(--cpd-space-4x); + justify-content: center; +} diff --git a/res/css/views/settings/encryption/_EncryptionCard.pcss b/res/css/views/settings/encryption/_EncryptionCard.pcss new file mode 100644 index 00000000000..605ab49b43c --- /dev/null +++ b/res/css/views/settings/encryption/_EncryptionCard.pcss @@ -0,0 +1,33 @@ +/* + * Copyright 2024 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only + * Please see LICENSE files in the repository root for full details. + */ + +.mx_EncryptionCard { + display: flex; + flex-direction: column; + gap: var(--cpd-space-8x); + padding: var(--cpd-space-10x); + border-radius: var(--cpd-space-4x); + /* From figma */ + box-shadow: 0 1.2px 2.4px 0 rgba(27, 29, 34, 0.15); + border: 1px solid var(--cpd-color-gray-400); + + .mx_EncryptionCard_header { + display: flex; + flex-direction: column; + gap: var(--cpd-space-4x); + align-items: center; + + > h2 { + margin: 0; + } + + > span { + color: var(--cpd-color-text-secondary); + text-align: center; + } + } +} diff --git a/res/css/views/settings/encryption/_RecoveryPanel.pcss b/res/css/views/settings/encryption/_RecoveryPanel.pcss new file mode 100644 index 00000000000..0ecc51187d4 --- /dev/null +++ b/res/css/views/settings/encryption/_RecoveryPanel.pcss @@ -0,0 +1,22 @@ +/* + * Copyright 2024 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only + * Please see LICENSE files in the repository root for full details. + */ + +.mx_RecoveryPanel { + .mx_RecoveryPanel_Subheader { + display: flex; + flex-direction: column; + gap: var(--cpd-space-2x); + + > span { + display: flex; + align-items: center; + gap: var(--cpd-space-2x); + font: var(--cpd-font-body-sm-medium); + color: var(--cpd-color-text-success-primary); + } + } +} diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss index 43a5a8fd104..d394524dc32 100644 --- a/res/css/views/settings/tabs/_SettingsTab.pcss +++ b/res/css/views/settings/tabs/_SettingsTab.pcss @@ -14,7 +14,7 @@ Please see LICENSE files in the repository root for full details. color: $links; } - form { + form:not(.mx_EncryptionUserSettingsTab form) { display: flex; flex-direction: column; gap: $spacing-8; diff --git a/src/components/views/settings/encryption/ChangeRecoveryKey.tsx b/src/components/views/settings/encryption/ChangeRecoveryKey.tsx new file mode 100644 index 00000000000..16d1d5d6154 --- /dev/null +++ b/src/components/views/settings/encryption/ChangeRecoveryKey.tsx @@ -0,0 +1,218 @@ +/* + * Copyright 2024 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only + * Please see LICENSE files in the repository root for full details. + */ + +import React, { FormEventHandler, JSX, MouseEventHandler, useState } from "react"; +import { + Breadcrumb, + IconButton, + Button, + Root, + TextControl, + Field, + Label, + ErrorMessage, + Text, +} from "@vector-im/compound-web"; +import CopyIcon from "@vector-im/compound-design-tokens/assets/web/icons/copy"; +import { logger } from "matrix-js-sdk/src/logger"; + +import { _t } from "../../../../languageHandler.tsx"; +import { EncryptionCard } from "./EncryptionCard.tsx"; +import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx"; +import { useAsyncMemo } from "../../../../hooks/useAsyncMemo.ts"; +import { copyPlaintext } from "../../../../utils/strings.ts"; +import { withSecretStorageKeyCache } from "../../../../SecurityManager.ts"; +/** + * The possible states of the change recovery key view. + * - `initial`: A new recovery key is generated and displayed to the user. + * - `confirm`: The user must confirm the new recovery key by entering it. + */ +type State = "initial" | "confirm"; + +interface ChangeRecoveryKeyProps { + /** + * Called when the recovery key is successfully changed. + */ + onFinish: () => void; + /** + * Called when the cancel button is clicked or when we go back in the breadcrumbs. + */ + onCancelClick: () => void; +} + +export function ChangeRecoveryKey({ onFinish, onCancelClick }: ChangeRecoveryKeyProps): JSX.Element { + const matrixClient = useMatrixClientContext(); + + const [state, setState] = useState("initial"); + const isInitial = state === "initial"; + + const recoveryKey = useAsyncMemo(() => { + const crypto = matrixClient.getCrypto(); + if (!crypto) return Promise.resolve(undefined); + + return crypto.createRecoveryKeyFromPassphrase(); + }, []); + + return ( + <> + + + {recoveryKey?.encodedPrivateKey && ( + <> + {isInitial ? ( + setState("confirm")} + onCancelClick={onCancelClick} + /> + ) : ( + { + const crypto = matrixClient.getCrypto(); + if (!crypto) return onFinish(); + + try { + // We need to enable the cache to avoid to prompt the user to enter the new key + // when we will try to access the secret storage during the bootstrap + await withSecretStorageKeyCache(() => + crypto.bootstrapSecretStorage({ + setupNewSecretStorage: true, + createSecretStorageKey: async () => recoveryKey, + }), + ); + onFinish(); + } catch (e) { + logger.error("Failed to bootstrap secret storage", e); + } + }} + /> + )} + + )} + + + ); +} + +interface KeyPanelProps { + /** + * Called when the confirm button is clicked. + */ + onConfirmClick: MouseEventHandler; + /** + * Called when the cancel button is clicked. + */ + onCancelClick: MouseEventHandler; + /** + * The recovery key to display. + */ + recoveryKey: string; +} + +/** + * The panel to display the recovery key. + */ +function KeyPanel({ recoveryKey, onConfirmClick, onCancelClick }: KeyPanelProps): JSX.Element { + return ( +
+
+ + {_t("settings|encryption|recovery|change_recovery_key_content_title")} + +
+ + {recoveryKey} + + + {_t("settings|encryption|recovery|change_recovery_key_content_description")} + +
+ copyPlaintext(recoveryKey)}> + + +
+
+ + +
+
+ ); +} + +interface KeyFormProps { + /** + * Called when the cancel button is clicked. + */ + onCancelClick: MouseEventHandler; + /** + * Called when the form is submitted. + */ + onSubmit: FormEventHandler; + /** + * The recovery key to confirm. + */ + recoveryKey: string; +} + +function KeyForm({ onCancelClick, onSubmit, recoveryKey }: KeyFormProps): JSX.Element { + // Undefined by default, as the key is not filled yet + const [isKeyValid, setIsKeyValid] = useState(); + const isKeyInvalidAndFilled = isKeyValid === false; + + return ( + { + evt.preventDefault(); + onSubmit(evt); + }} + onChange={async (evt) => { + evt.preventDefault(); + evt.stopPropagation(); + + // We don't have any file in the form, we can cast it as string safely + const filledKey = new FormData(evt.currentTarget).get("recoveryKey") as string | ""; + setIsKeyValid(filledKey.trim() === recoveryKey); + }} + > + + + + + {isKeyInvalidAndFilled && ( + {_t("settings|encryption|recovery|change_recovery_key_content_error")} + )} + +
+ + +
+ + ); +} diff --git a/src/components/views/settings/encryption/EncryptionCard.tsx b/src/components/views/settings/encryption/EncryptionCard.tsx new file mode 100644 index 00000000000..b816a6d6bf5 --- /dev/null +++ b/src/components/views/settings/encryption/EncryptionCard.tsx @@ -0,0 +1,35 @@ +/* + * Copyright 2024 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only + * Please see LICENSE files in the repository root for full details. + */ + +import React, { JSX, PropsWithChildren } from "react"; +import { BigIcon, Heading } from "@vector-im/compound-web"; +import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid"; + +interface EncryptionCardProps { + title: string; + description: string; +} + +/** + * A styled card for encryption settings. + */ +export function EncryptionCard({ title, description, children }: PropsWithChildren): JSX.Element { + return ( +
+
+ + + + + {title} + + {description} +
+ {children} +
+ ); +} diff --git a/src/components/views/settings/encryption/RecoveryPanel.tsx b/src/components/views/settings/encryption/RecoveryPanel.tsx new file mode 100644 index 00000000000..13691fd6559 --- /dev/null +++ b/src/components/views/settings/encryption/RecoveryPanel.tsx @@ -0,0 +1,118 @@ +/* + * Copyright 2024 New Vector Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only + * Please see LICENSE files in the repository root for full details. + */ + +import React, { JSX, MouseEventHandler, useEffect, useState } from "react"; +import { Button, InlineSpinner } from "@vector-im/compound-web"; +import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key"; +import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid"; + +import { SettingsSection } from "../shared/SettingsSection"; +import { _t } from "../../../../languageHandler"; +import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext"; +import { SettingsHeader } from "../SettingsHeader"; + +type State = "loading" | "missing_backup" | "secrets_not_cached" | "good"; + +interface RecoveryPanelProps { + /** + * Callback for when the user clicks the button to change their recovery key. + */ + onChangingRecoveryKeyClick: MouseEventHandler; +} + +/** + * This component allows the user to set up or change their recovery key. + */ +export function RecoveryPanel({ onChangingRecoveryKeyClick }: RecoveryPanelProps): JSX.Element { + const [state, setState] = useState("loading"); + const isGood = state === "good"; + const isMissingBackup = state === "missing_backup"; + const areSecretsNotCached = state === "secrets_not_cached"; + const hasError = isMissingBackup || areSecretsNotCached; + + const matrixClient = useMatrixClientContext(); + + useEffect(() => { + const check = async (): Promise => { + const crypto = matrixClient.getCrypto(); + if (!crypto) return; + + const hasBackup = (await crypto.getKeyBackupInfo()) && (await crypto.getSessionBackupPrivateKey()); + if (!hasBackup) return setState("missing_backup"); + + const cachedSecrets = (await crypto.getCrossSigningStatus()).privateKeysCachedLocally; + const secretsOk = cachedSecrets.masterKey && cachedSecrets.selfSigningKey && cachedSecrets.userSigningKey; + if (!secretsOk) return setState("secrets_not_cached"); + + setState("good"); + }; + check(); + }, [matrixClient]); + + let content: JSX.Element; + switch (state) { + case "loading": + content = ; + break; + case "missing_backup": + content = ( + + ); + break; + case "secrets_not_cached": + content = ( + + ); + break; + default: + content = ( + + ); + } + + return ( + } + subHeading={} + className="mx_RecoveryPanel" + > + {content} + + ); +} + +/** + * The subheader for the recovery panel. + */ +interface SubheaderProps { + /** + * Whether the user has a recovery key. + * If null, the recovery key is still fetching. + */ + hasRecoveryKey: boolean | null; +} + +function Subheader({ hasRecoveryKey }: SubheaderProps): JSX.Element { + if (!hasRecoveryKey) return <>{_t("settings|encryption|recovery|description")}; + + return ( +
+ {_t("settings|encryption|recovery|description")} + + + {_t("settings|encryption|recovery|key_active")} + +
+ ); +} diff --git a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx index 7964f2641ae..9fd9d7d8158 100644 --- a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx @@ -5,10 +5,25 @@ * Please see LICENSE files in the repository root for full details. */ -import React, { JSX } from "react"; +import React, { JSX, useState } from "react"; import SettingsTab from "../SettingsTab"; +import { RecoveryPanel } from "../../encryption/RecoveryPanel"; +import { ChangeRecoveryKey } from "../../encryption/ChangeRecoveryKey.tsx"; + +type Panel = "main" | "change_recovery_key" | "set_recovery_key"; export function EncryptionUserSettingsTab(): JSX.Element { - return ; + const [panel, setPanel] = useState("main"); + const displayChangeRecoveryKey = panel === "change_recovery_key"; + const displayMain = panel === "main"; + + return ( + + {displayChangeRecoveryKey && ( + setPanel("main")} onFinish={() => setPanel("main")} /> + )} + {displayMain && setPanel("change_recovery_key")} />} + + ); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index ffdbddb6df8..14063d1dc01 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2464,6 +2464,22 @@ "enable_markdown_description": "Start messages with /plain to send without markdown.", "encryption": { "dialog_title": "Settings: Encryption", + "recovery": { + "change_recovery_key": "Change recovery key", + "change_recovery_key_content_description": "Do not share this with anyone!", + "change_recovery_key_content_error": "The recovery key you entered is not correct.", + "change_recovery_key_content_title": "Recovery key", + "change_recovery_key_description": "Get a new recovery key if you've lost your existing one. After changing your recovery key, your old one will no longer work.", + "change_recovery_key_description_confirm": "Enter the recovery key shown on the previous screen to finish setting up recovery.", + "change_recovery_key_finish": "Finish set up", + "change_recovery_key_title": "Change recovery key?", + "change_recovery_key_title_confirm": "Enter your recovery key to confirm", + "confirm_recovery_key": "Confirm recovery key", + "description": "Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.", + "key_active": "Recovery key active", + "set_up_recovery": "Set up recovery", + "title": "Recovery" + }, "title": "Encryption" }, "general": {