Add Recovery section in the new user settings Encryption tab (#28673)

* Refine `SettingsSection` & `SettingsTab` * Add encryption tab * Add recovery section * Add device verification * Rename `Panel` into `State` * Update & add tests to user settings common * Add tests to `RecoveryPanel` * Add tests to `ChangeRecoveryKey` * Update CreateSecretStorageDialog-test snapshot * Add tests to `EncryptionUserSettingsTab` * Update existing screenshots of e2e tests * Add new encryption tab ownership to `@element-hq/element-crypto-web-reviewers` * Add e2e tests * Fix monospace font and add figma link to hardcoded value * Add unit to Icon * Improve e2e doc * Assert that the crypto module is defined * Add classname doc * Fix typo * Use `good` state instead of default * Rename `ChangeRecoveryKey.isSetupFlow` into `ChangeRecoveryKey.userHasKeyBackup` * Move `deleteCachedSecrets` fixture in `recovery.spec.ts` * Use one callback instead of two in `RecoveryPanel` * Fix docs and naming of `utils.createBot` * Fix typo in `RecoveryPanel` * Add more doc to the state of the `EncryptionUserSettingsTab` * Rename `verification_required` into `set_up_encryption` * Update test * ADd new license * Update comments and doc * Assert that `recoveryKey.encodedPrivateKey` is always defined * Add comments to explain how the secrets could be uncached * Use `matrixClient.secretStorage.getDefaultKeyId` instead of `matrixClient.getCrypto().checkKeyBackupAndEnable` to know if we need to set up a recovery key * Update existing screenshot to add encryption tab. * Update tests * Use new labels when changing the recovery key * Fix docs * Don't reset key backup when creating a recovery key * Fix doc
2026-11-04 19:10:51 +00:00 · 2025-01-15 13:44:20 +01:00
parent 03a1b48e1f
commit 13913ba8b2
53 changed files with 2931 additions and 49 deletions
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2024 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.
+ */
+
+import { Page } from "@playwright/test";
+import { GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
+
+import { ElementAppPage } from "../../../pages/ElementAppPage";
+import { test as base, expect } from "../../../element-web-test";
+export { expect };
+
+/**
+ * Set up for the encryption tab test
+ */
+export const test = base.extend<{
+    util: Helpers;
+}>({
+    util: async ({ page, app, bot }, use) => {
+        await use(new Helpers(page, app));
+    },
+});
+
+class Helpers {
+    constructor(
+        private page: Page,
+        private app: ElementAppPage,
+    ) {}
+
+    /**
+     * Open the encryption tab
+     */
+    openEncryptionTab() {
+        return this.app.settings.openUserSettings("Encryption");
+    }
+
+    /**
+     * Go through the device verification flow using the recovery key.
+     */
+    async verifyDevice(recoveryKey: GeneratedSecretStorageKey) {
+        // Select the security phrase
+        await this.page.getByRole("button", { name: "Verify with Security Key or Phrase" }).click();
+        await this.enterRecoveryKey(recoveryKey);
+        await this.page.getByRole("button", { name: "Done" }).click();
+    }
+
+    /**
+     * Fill the recovery key in the dialog
+     * @param recoveryKey
+     */
+    async enterRecoveryKey(recoveryKey: GeneratedSecretStorageKey) {
+        // Select to use recovery key
+        await this.page.getByRole("button", { name: "use your Security Key" }).click();
+
+        // Fill the recovery key
+        const dialog = this.page.locator(".mx_Dialog");
+        await dialog.getByRole("textbox").fill(recoveryKey.encodedPrivateKey);
+        await dialog.getByRole("button", { name: "Continue" }).click();
+    }
+
+    /**
+     * Get the encryption tab content
+     */
+    getEncryptionTabContent() {
+        return this.page.getByTestId("encryptionTab");
+    }
+
+    /**
+     * Set the default key id of the secret storage to `null`
+     */
+    async removeSecretStorageDefaultKeyId() {
+        const client = await this.app.client.prepareClient();
+        await client.evaluate(async (client) => {
+            await client.secretStorage.setDefaultKeyId(null);
+        });
+    }
+
+    /**
+     * Get the security key from the clipboard and fill in the input field
+     * Then click on the finish button
+     * @param title - The title of the dialog
+     * @param confirmButtonLabel - The label of the confirm button
+     * @param screenshot
+     */
+    async confirmRecoveryKey(title: string, confirmButtonLabel: string, screenshot: `${string}.png`) {
+        const dialog = this.getEncryptionTabContent();
+        await expect(dialog.getByText(title, { exact: true })).toBeVisible();
+        await expect(dialog).toMatchScreenshot(screenshot);
+
+        const handle = await this.page.evaluateHandle(() => navigator.clipboard.readText());
+        const clipboardContent = await handle.jsonValue();
+        await dialog.getByRole("textbox").fill(clipboardContent);
+        await dialog.getByRole("button", { name: confirmButtonLabel }).click();
+        await expect(dialog).toMatchScreenshot("default-recovery.png");
+    }
+}