enki/blap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Apply new design and display logic to logout confirmation dialog (#33426)

Browse Source 
* apply new design to logout dialog

* factor out check for other verified devices

* only show recovery warning when user has no other verified devices

* fix playwright tests

* tweak style to better match design

* another playwright test fix

* fix playwright

* Look for the remove button within the dialog

* Use testid to locate 'Remove this device' button

* move rendering to sub-components, rather than embedded functions

* use <Type> element

* use <Text> for the <a> element

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
This commit is contained in:
Hubert Chathi
2026-06-01 23:08:18 -04:00
committed by GitHub
parent 178e909dea
commit 2bd5224dbe
17 changed files with 771 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/e2e/crypto/logout.spec.ts
+7 -4
View File
@@ -30,7 +30,7 @@ test.describe("Logout tests", () => {
const currentDialogLocator = page.locator(".mx_Dialog");
await expect(
currentDialogLocator.getByRole("heading", { name: "You'll lose access to your encrypted messages" }),
currentDialogLocator.getByRole("heading", { name: "You're about to lose access to your encrypted chats" }),
).toBeVisible();
});
@@ -51,7 +51,7 @@ test.describe("Logout tests", () => {
await expect(currentDialogLocator.getByText("Are you sure you want to Remove this device?")).toBeVisible();
});
test("Logout directly if the user has no room keys", async ({ page, app }) => {
test("Ask to set up recovery on logout even if not in encrypted room", async ({ page, app }) => {
await createRoom(page, "Clear room", false);
await sendMessageInCurrentRoom(page, "Hello public world!");
@@ -60,7 +60,10 @@ test.describe("Logout tests", () => {
await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
await page.getByRole("button", { name: "Remove this device", exact: true }).click();
// Should have logged out directly
await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
const currentDialogLocator = page.locator(".mx_Dialog");
await expect(
currentDialogLocator.getByRole("heading", { name: "You're about to lose access to your encrypted chats" }),
).toBeVisible();
});
});
apps/web/playwright/e2e/crypto/utils.ts
+2 -2
View File
@@ -248,7 +248,7 @@ export async function logIntoElementAndVerify(page: Page, credentials: Credentia
* Click the "sign out" option in Element, and wait for the welcome page to load
*
* @param page - Playwright `Page` object.
* @param discardKeys - if true, expect a "You'll lose access to your encrypted messages" dialog, and dismiss it.
* @param discardKeys - if true, expect a "You're about to lose access to your encrypted chats" dialog, and dismiss it.
*/
export async function logOutOfElement(page: Page, discardKeys: boolean = false) {
await page.getByRole("button", { name: "User menu" }).click();
@@ -256,7 +256,7 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
await page.getByRole("button", { name: "Remove this device" }).click();
if (discardKeys) {
await page.getByRole("button", { name: "I don't want my encrypted messages" }).click();
await page.getByRole("button", { name: "Remove this device anyway" }).click();
} else {
await page.locator(".mx_Dialog .mx_QuestionDialog").getByRole("button", { name: "Remove this device" }).click();
}
apps/web/playwright/e2e/login/login-consent.spec.ts
+1
View File
@@ -342,6 +342,7 @@ test.describe("Login", () => {
await page.waitForTimeout(2000);
await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
await page.getByRole("button", { name: "Remove this device" }).click();
await page.getByRole("button", { name: "Remove this device anyway" }).click();
await expect(page).toHaveURL(/\/#\/welcome$/);
});
});
apps/web/playwright/e2e/login/logout_redirect_url.spec.ts
+1
View File
@@ -30,6 +30,7 @@ test.describe("logout with logout_redirect_url", () => {
await page.waitForTimeout(2000);
await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
await page.getByRole("button", { name: "Remove this device" }).click();
await page.getByRole("button", { name: "Remove this device anyway" }).click();
await expect(page).toHaveURL(/\/decoder-ring\/$/);
});
apps/web/playwright/e2e/oidc/oidc-native.spec.ts
+9
View File
@@ -76,6 +76,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
const locator = await app.settings.openUserMenu();
await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
await page.getByRole("button", { name: "Remove this device", exact: true }).click();
await page.getByRole("button", { name: "Remove this device anyway" }).click();
await revokeAccessTokenPromise;
await revokeRefreshTokenPromise;
});
@@ -124,6 +125,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
await page.waitForTimeout(2000);
await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
await page.getByRole("button", { name: "Remove this device" }).click();
await page.getByRole("button", { name: "Remove this device anyway" }).click();
await expect(page).toHaveURL(/\/#\/welcome$/);
// Log in again
@@ -158,6 +160,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
await page.waitForTimeout(2000);
await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
await page.getByRole("button", { name: "Remove this device" }).click();
await page.getByRole("button", { name: "Remove this device anyway" }).click();
await expect(page).toHaveURL(/\/#\/welcome$/);
// Log in again
@@ -209,6 +212,12 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
.getByRole("menuitem", { name: "All settings" })
.click();
await page.getByRole("button", { name: "Remove this device" }).click();
// Since we have another device, it only shows a normal logout
// confirmation dialog, rather than prompting the user to set up
// recovery. Use the test ID to find this button to avoid
// ambiguity between the dialog button and the one in Settings.
await page.getByTestId("dialog-primary-button").click();
await expect(page).toHaveURL(/\/#\/welcome$/);
// Log in again