diff --git a/apps/web/playwright/e2e/crypto/toasts.spec.ts b/apps/web/playwright/e2e/crypto/toasts.spec.ts index 8311c7ceef..fb7a298be9 100644 --- a/apps/web/playwright/e2e/crypto/toasts.spec.ts +++ b/apps/web/playwright/e2e/crypto/toasts.spec.ts @@ -8,7 +8,7 @@ import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api"; import { test, expect } from "../../element-web-test"; -import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElementAndVerify } from "./utils"; +import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement, logIntoElementAndVerify } from "./utils"; import { type Bot } from "../../pages/bot"; test.describe("Key storage out of sync toast", () => { @@ -181,3 +181,35 @@ test.describe("'Turn on key storage' toast", () => { await toasts.assertNoToasts(); }); }); + +test.describe("Verify this device toast", () => { + test( + "The toast is displayed if we are not verified", + { tag: "@screenshot" }, + async ({ page, credentials, homeserver }) => { + // Ensure the user already has a device, and an encrypted toom, so + // we need to verify when we log in + const { botClient } = await createBot(page, homeserver, credentials, true); + await botClient.createRoom({ + initial_state: [ + { + type: "m.room.encryption", + state_key: "", + content: { algorithm: "m.megolm.v1.aes-sha2" }, + }, + ], + }); + + // Log in without verifying + await logIntoElement(page, credentials); + const authPage = page.locator(".mx_AuthPage"); + await authPage.getByRole("button", { name: "Skip verification for now" }).click(); + await authPage.getByRole("button", { name: "I'll verify later" }).click(); + await page.waitForSelector(".mx_MatrixChat"); + + await expect(page.getByRole("heading", { name: "Verify this device" })).toBeVisible(); + + await expect(page.locator(".mx_ToastContainer")).toMatchScreenshot("verify-this-device.png"); + }, + ); +}); diff --git a/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png b/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png new file mode 100644 index 0000000000..750b118686 Binary files /dev/null and b/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png differ diff --git a/apps/web/src/toasts/SetupEncryptionToast.tsx b/apps/web/src/toasts/SetupEncryptionToast.tsx index 9b150b7d77..5f75bd538a 100644 --- a/apps/web/src/toasts/SetupEncryptionToast.tsx +++ b/apps/web/src/toasts/SetupEncryptionToast.tsx @@ -124,12 +124,22 @@ const getSecondaryButtonLabel = (state: DeviceStateForToast): string => { } }; -const getDescription = (state: DeviceStateForToast): string => { +const getDescription = (state: DeviceStateForToast): string | React.ReactNode => { switch (state) { case "set_up_recovery": return _t("encryption|set_up_recovery_toast_description"); case "verify_this_session": - return _t("encryption|verify_toast_description"); + return _t("encryption|verify_toast_description", undefined, { + a: (sub) => ( + + {sub} + + ), + }); case "key_storage_out_of_sync": return _t("encryption|key_storage_out_of_sync_description"); case "turn_on_key_storage":