"Verify this device" redesign (#30596)

* add variant of ResetIdentityBody for when the user has no verif. methods

* no longer distinguish between the using having a passphrase or not

* use vertical stack of buttons via EncryptionCard

and update wording

* swap logic order to match rendering order

* use the same dialog when no verification options available

* make it agree with the design more

* allow signing out on initial login

* apply styling changes and remove duplicate elements

* fix and add tests

* add missing snapshot

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* use a boolean property to disable blurring instead of adding a class

* change string identifiers

* apply changes from review -- simplify logic

* change class name to avoid confusion

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Hubert Chathi
2025-09-12 14:37:14 -04:00
committed by GitHub
parent 1e0cdf7b14
commit 9ad239f87f
23 changed files with 583 additions and 208 deletions

View File

@@ -1081,10 +1081,10 @@ describe("<MatrixChat />", () => {
getComponent();
// Then we are asked to verify our device
await screen.findByRole("heading", { name: "Verify this device", level: 1 });
await screen.findByRole("heading", { name: "Confirm your identity", level: 2 });
// Sanity: we are not racing with another screen update, so this heading stays visible
await screen.findByRole("heading", { name: "Verify this device", level: 1 });
await screen.findByRole("heading", { name: "Confirm your identity", level: 2 });
});
it("should not open app after cancelling device verify if unskippable verification is on", async () => {
// See https://github.com/element-hq/element-web/issues/29230
@@ -1100,9 +1100,9 @@ describe("<MatrixChat />", () => {
// And MatrixChat is rendered
getComponent();
// When we click "Verify with another device"
await screen.findByRole("heading", { name: "Verify this device", level: 1 });
const verify = screen.getByRole("button", { name: "Verify with another device" });
// When we click "Use another device"
await screen.findByRole("heading", { name: "Confirm your identity", level: 2 });
const verify = screen.getByRole("button", { name: "Use another device" });
act(() => verify.click());
// And close the device verification dialog
@@ -1110,7 +1110,7 @@ describe("<MatrixChat />", () => {
act(() => closeButton.click());
// Then we are not allowed in - we are still being asked to verify
await screen.findByRole("heading", { name: "Verify this device", level: 1 });
await screen.findByRole("heading", { name: "Confirm your identity", level: 2 });
});
describe("when query params have a loginToken", () => {
@@ -1153,7 +1153,7 @@ describe("<MatrixChat />", () => {
);
// Then we are not allowed in - we are being asked to verify
await screen.findByRole("heading", { name: "Verify this device", level: 1 });
await screen.findByRole("heading", { name: "Confirm your identity", level: 2 });
});
});
@@ -1397,7 +1397,7 @@ describe("<MatrixChat />", () => {
await flushPromises();
// Complete security begin screen is rendered
expect(screen.getByText("Unable to verify this device")).toBeInTheDocument();
expect(screen.getByText("Confirm your identity")).toBeInTheDocument();
});
it("should setup e2e when server supports cross signing", async () => {