Add Recovery section in the new user settings Encryption tab

playwright/e2e/crypto/device-verification.spec.ts

@@ -30,7 +30,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
 
     test.beforeEach(async ({ page, homeserver, credentials }) => {
         const res = await createBot(page, homeserver, credentials);
-        aliceBotClient = res.aliceBotClient;
+        aliceBotClient = res.botClient;
         expectedBackupVersion = res.expectedBackupVersion;
     });
 

playwright/e2e/crypto/utils.ts

@@ -24,7 +24,7 @@ import { ElementAppPage } from "../../pages/ElementAppPage";
 import { Bot } from "../../pages/bot";
 
 /**
- * Create a new device for the Alice user.
+ * Create a bot client and wait for the key backup to be ready.
  * This function will wait for the key backup to be ready.
  * @param page - the page to use
  * @param homeserver - the homeserver to use
@@ -34,21 +34,21 @@ export async function createBot(
     page: Page,
     homeserver: HomeserverInstance,
     credentials: Credentials,
-): Promise<{ aliceBotClient: Bot; recoveryKey: GeneratedSecretStorageKey; expectedBackupVersion: string }> {
+): Promise<{ botClient: Bot; recoveryKey: GeneratedSecretStorageKey; expectedBackupVersion: string }> {
     // Visit the login page of the app, to load the matrix sdk
     await page.goto("/#/login");
 
     // wait for the page to load
     await page.waitForSelector(".mx_AuthPage", { timeout: 30000 });
 
-    // Create a new device for alice
-    const aliceBotClient = new Bot(page, homeserver, {
+    // Create a new bot client
+    const botClient = new Bot(page, homeserver, {
         bootstrapCrossSigning: true,
         bootstrapSecretStorage: true,
     });
-    aliceBotClient.setCredentials(credentials);
+    botClient.setCredentials(credentials);
     // Backup is prepared in the background. Poll until it is ready.
-    const botClientHandle = await aliceBotClient.prepareClient();
+    const botClientHandle = await botClient.prepareClient();
     let expectedBackupVersion: string;
     await expect
         .poll(async () => {
@@ -59,9 +59,9 @@ export async function createBot(
         })
         .not.toBe(null);
 
-    const recoveryKey = await aliceBotClient.getRecoveryKey();
+    const recoveryKey = await botClient.getRecoveryKey();
 
-    return { aliceBotClient, recoveryKey, expectedBackupVersion };
+    return { botClient, recoveryKey, expectedBackupVersion };
 }
 
 /**

playwright/e2e/settings/encryption-user-tab/index.ts

@@ -1,7 +1,7 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 
@@ -94,25 +94,4 @@ class Helpers {
         await dialog.getByRole("button", { name: "Finish set up" }).click();
         await expect(dialog).toMatchScreenshot("default-recovery.png");
     }
-
-    /**
-     * Remove the cached secrets from the indexedDB
-     */
-    async deleteCachedSecrets() {
-        await this.page.evaluate(async () => {
-            const removeCachedSecrets = new Promise((resolve) => {
-                const request = window.indexedDB.open("matrix-js-sdk::matrix-sdk-crypto");
-                request.onsuccess = async (event: Event & { target: { result: IDBDatabase } }) => {
-                    const db = event.target.result;
-                    const request = db.transaction("core", "readwrite").objectStore("core").delete("private_identity");
-                    request.onsuccess = () => {
-                        db.close();
-                        resolve(undefined);
-                    };
-                };
-            });
-            await removeCachedSecrets;
-        });
-        await this.page.reload();
-    }
 }

playwright/e2e/settings/encryption-user-tab/recovery.spec.ts

@@ -1,11 +1,12 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 
 import { GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
+import { Page } from "@playwright/test";
 
 import { test, expect } from ".";
 import {
@@ -80,7 +81,7 @@ test.describe("Recovery section in Encryption tab", () => {
         await verifySession(app, "new passphrase");
         await util.deleteKeyBackup(expectedBackupVersion);
 
-        // The key backup is deleted and the user needs to set up it
+        // The key backup is deleted and the user needs to set it up
         const dialog = await util.openEncryptionTab();
         const setupButton = dialog.getByRole("button", { name: "Set up recovery" });
         await expect(setupButton).toBeVisible();
@@ -114,7 +115,7 @@ test.describe("Recovery section in Encryption tab", () => {
         async ({ page, app, util }) => {
             await verifySession(app, "new passphrase");
             // We need to delete the cached secrets
-            await util.deleteCachedSecrets();
+            await deleteCachedSecrets(page);
 
             await util.openEncryptionTab();
             // We ask the user to enter the recovery key
@@ -138,3 +139,25 @@ test.describe("Recovery section in Encryption tab", () => {
         },
     );
 });
+
+/**
+ * Remove the cached secrets from the indexedDB
+ * This is a workaround to simulate the case where the secrets are not cached.
+ */
+async function deleteCachedSecrets(page: Page) {
+    await page.evaluate(async () => {
+        const removeCachedSecrets = new Promise((resolve) => {
+            const request = window.indexedDB.open("matrix-js-sdk::matrix-sdk-crypto");
+            request.onsuccess = async (event: Event & { target: { result: IDBDatabase } }) => {
+                const db = event.target.result;
+                const request = db.transaction("core", "readwrite").objectStore("core").delete("private_identity");
+                request.onsuccess = () => {
+                    db.close();
+                    resolve(undefined);
+                };
+            };
+        });
+        await removeCachedSecrets;
+    });
+    await page.reload();
+}

res/css/views/settings/_SettingsHeader.pcss

@@ -1,7 +1,7 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 

res/css/views/settings/_SettingsSubheader.pcss

@@ -1,7 +1,7 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 

res/css/views/settings/encryption/_ChangeRecoveryKey.pcss

@@ -1,7 +1,7 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 

res/css/views/settings/encryption/_EncryptionCard.pcss

@@ -1,7 +1,7 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 

src/components/views/settings/SettingsHeader.tsx

@@ -1,7 +1,7 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 

src/components/views/settings/SettingsSubheader.tsx

@@ -1,7 +1,7 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 

src/components/views/settings/encryption/ChangeRecoveryKey.tsx

@@ -31,17 +31,17 @@ import { withSecretStorageKeyCache } from "../../../../SecurityManager";
  * The possible states of the component.
  * - `inform_user`: The user is informed about the recovery key.
  * - `save_key_setup_flow`: The user is asked to save the new recovery key during the setup flow.
- * - `save_key_change_flow`: The user is asked to save the new recovery key during the chang key flow.
+ * - `save_key_change_flow`: The user is asked to save the new recovery key during the change key flow.
  * - `confirm`: The user is asked to confirm the new recovery key.
  */
 type State = "inform_user" | "save_key_setup_flow" | "save_key_change_flow" | "confirm";
 
 interface ChangeRecoveryKeyProps {
     /**
-     * If true, the component will display the flow to set up a new recovery key.
-     * If false, the component will display the flow to change the recovery key.
+     * If true, the component will display the flow to change the recovery key.
+     * If false,the component will display the flow to set up a new recovery key.
      */
-    isSetupFlow: boolean;
+    userHasKeyBackup: boolean;
     /**
      * Called when the recovery key is successfully changed.
      */
@@ -56,22 +56,16 @@ interface ChangeRecoveryKeyProps {
  * A component to set up or change the recovery key.
  */
 export function ChangeRecoveryKey({
-    isSetupFlow,
+    userHasKeyBackup,
     onFinish,
     onCancelClick,
 }: ChangeRecoveryKeyProps): JSX.Element | null {
     const matrixClient = useMatrixClientContext();
 
-    const [state, setState] = useState<State>(isSetupFlow ? "inform_user" : "save_key_change_flow");
+    const [state, setState] = useState<State>(userHasKeyBackup ? "save_key_change_flow" : "inform_user");
 
     // We create a new recovery key, the recovery key will be displayed to the user
-    const recoveryKey = useAsyncMemo(() => {
-        const crypto = matrixClient.getCrypto();
-        if (!crypto) return Promise.resolve(undefined);
-
-        return crypto.createRecoveryKeyFromPassphrase();
-    }, []);
-
+    const recoveryKey = useAsyncMemo(() => matrixClient.getCrypto()!.createRecoveryKeyFromPassphrase(), []);
     if (!recoveryKey?.encodedPrivateKey) return null;
 
     let content: JSX.Element;
@@ -108,7 +102,7 @@ export function ChangeRecoveryKey({
                             // when we will try to access the secret storage during the bootstrap
                             await withSecretStorageKeyCache(() =>
                                 crypto.bootstrapSecretStorage({
-                                    setupNewKeyBackup: isSetupFlow,
+                                    setupNewKeyBackup: !userHasKeyBackup,
                                     setupNewSecretStorage: true,
                                     createSecretStorageKey: async () => recoveryKey,
                                 }),
@@ -124,9 +118,9 @@ export function ChangeRecoveryKey({
 
     const pages = [
         _t("settings|encryption|title"),
-        isSetupFlow
-            ? _t("settings|encryption|recovery|set_up_recovery")
-            : _t("settings|encryption|recovery|change_recovery_key"),
+        userHasKeyBackup
+            ? _t("settings|encryption|recovery|change_recovery_key")
+            : _t("settings|encryption|recovery|set_up_recovery"),
     ];
     const labels = getLabels(state);
 

src/components/views/settings/encryption/RecoveryPanel.tsx

@@ -1,11 +1,11 @@
 /*
  * Copyright 2024 New Vector Ltd.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 
-import React, { JSX, MouseEventHandler, useCallback, useEffect, useState } from "react";
+import React, { JSX, useCallback, useEffect, useState } from "react";
 import { Button, InlineSpinner } from "@vector-im/compound-web";
 import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
 
@@ -27,27 +27,22 @@ type State = "loading" | "missing_backup" | "secrets_not_cached" | "good";
 
 interface RecoveryPanelProps {
     /**
-     * Callback for when the user clicks the button to set up their recovery key.
+     * Callback for when the user wants to set up or change their recovery key.
      */
-    onSetUpRecoveryClick: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Callback for when the user clicks the button to change their recovery key.
-     */
-    onChangingRecoveryKeyClick: MouseEventHandler<HTMLButtonElement>;
+    onChangeRecoveryKeyClick: (setupNewKey: boolean) => void;
 }
 
 /**
  * This component allows the user to set up or change their recovery key.
  */
-export function RecoveryPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick }: RecoveryPanelProps): JSX.Element {
+export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps): JSX.Element {
     const [state, setState] = useState<State>("loading");
     const isMissingBackup = state === "missing_backup";
 
     const matrixClient = useMatrixClientContext();
 
     const checkEncryption = useCallback(async () => {
-        const crypto = matrixClient.getCrypto();
-        if (!crypto) return;
+        const crypto = matrixClient.getCrypto()!;
 
         // Check if the user has a backup
         const hasBackup = Boolean(await crypto.checkKeyBackupAndEnable());
@@ -72,7 +67,7 @@ export function RecoveryPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick
             break;
         case "missing_backup":
             content = (
-                <Button size="sm" kind="primary" Icon={KeyIcon} onClick={onSetUpRecoveryClick}>
+                <Button size="sm" kind="primary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(true)}>
                     {_t("settings|encryption|recovery|set_up_recovery")}
                 </Button>
             );
@@ -89,9 +84,9 @@ export function RecoveryPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick
                 </Button>
             );
             break;
-        default:
+        case "good":
             content = (
-                <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={onChangingRecoveryKeyClick}>
+                <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
                     {_t("settings|encryption|recovery|change_recovery_key")}
                 </Button>
             );
@@ -121,7 +116,7 @@ interface SubheaderProps {
  * The subheader for the recovery panel.
  */
 function Subheader({ state }: SubheaderProps): JSX.Element {
-    // If we the secrets are not cached, we display a warning message.
+    // If the secrets are not cached, we display a warning message.
     if (state !== "secrets_not_cached") return <>{_t("settings|encryption|recovery|description")}</>;
 
     return (

src/components/views/settings/tabs/SettingsTab.tsx

@@ -10,6 +10,10 @@ import classNames from "classnames";
 
 export interface SettingsTabProps extends HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    /**
+     * Added to the root div
+     */
+    className?: string;
 }
 
 /**