Skip to content

"Verify this device" redesign #30596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Sep 12, 2025
Merged

"Verify this device" redesign #30596

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0fdc4d2
add variant of ResetIdentityBody for when the user has no verif. methods
uhoreg Aug 27, 2025
63dce71
no longer distinguish between the using having a passphrase or not
uhoreg Aug 27, 2025
b101488
use vertical stack of buttons via EncryptionCard
uhoreg Aug 27, 2025
91250c4
swap logic order to match rendering order
uhoreg Aug 27, 2025
9d9060f
use the same dialog when no verification options available
uhoreg Aug 27, 2025
a7a34a0
make it agree with the design more
uhoreg Aug 27, 2025
d145fa4
allow signing out on initial login
uhoreg Aug 27, 2025
fcf3b1f
apply styling changes and remove duplicate elements
uhoreg Aug 27, 2025
c032ed2
fix and add tests
uhoreg Aug 27, 2025
4eb27b3
Merge branch 'develop' into verify_device_redesign
uhoreg Aug 28, 2025
a2e32aa
add missing snapshot
uhoreg Aug 28, 2025
52a474c
Apply suggestions from code review
uhoreg Sep 3, 2025
2ab8cad
Merge branch 'develop' into verify_device_redesign
uhoreg Sep 4, 2025
1d34e2a
use a boolean property to disable blurring instead of adding a class
uhoreg Sep 4, 2025
8212149
change string identifiers
uhoreg Sep 4, 2025
b1d650e
Merge branch 'develop' into verify_device_redesign
uhoreg Sep 11, 2025
ce42a8d
apply changes from review -- simplify logic
uhoreg Sep 11, 2025
6ad4321
change class name to avoid confusion
uhoreg Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions res/css/views/auth/_AuthPage.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ Please see LICENSE files in the repository root for full details.
display: flex;
margin: 100px auto auto;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color;

@media only screen and (max-height: 768px) {
Expand All @@ -30,9 +29,8 @@ Please see LICENSE files in the repository root for full details.
margin-top: 0;
}

/* Extra class to indicate that the component is providing its own blurring/shadow,
* so we don't apply ours */
&.mx_AuthPage_modal_noBlur {
box-shadow: none;
/* Apply a blurred shadow around the modal */
&.mx_AuthPage_modal_blur {
Copy link
Member

@richvdh richvdh Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this name feels too close to the already-existing (and different) mx_AuthPage_modalBlur

That's why I suggested mx_AuthPage_modal_withBlur, but feel free to come up with something else.

Copy link
Member Author

@uhoreg uhoreg Sep 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. I've changed it to your suggestion

box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
}
}
8 changes: 4 additions & 4 deletions src/components/views/auth/AuthPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,20 +69,20 @@ export default class AuthPage extends React.PureComponent<React.PropsWithChildre
const modalContentStyle: React.CSSProperties = {
display: "flex",
zIndex: 1,
background: "rgba(255, 255, 255, 0.59)",
borderRadius: "8px",
};

let modalBlur;
if (this.props.addBlur !== false) {
// Blur out the background: add a `div` which covers the content behind the modal,
// and blurs it out, and make the modal's background semitransparent.
modalBlur = <div className="mx_AuthPage_modalBlur" style={blurStyle} />;
} else {
delete modalContentStyle.background;
modalContentStyle.background = "rgba(255, 255, 255, 0.59)";
}

const modalClasses = classNames({
mx_AuthPage_modal: true,
mx_AuthPage_modal_noBlur: this.props.addBlur === false,
mx_AuthPage_modal_blur: this.props.addBlur !== false,
});

return (
Expand Down
8 changes: 4 additions & 4 deletions test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
class="mx_AuthPage"
>
<div
class="mx_AuthPage_modal"
class="mx_AuthPage_modal mx_AuthPage_modal_blur"
style="position: relative;"
>
<div
Expand All @@ -122,7 +122,7 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
/>
<div
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; background: rgba(255, 255, 255, 0.59); border-radius: 8px;"
style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
>
<div
class="mx_Welcome"
Expand Down Expand Up @@ -231,7 +231,7 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
class="mx_AuthPage"
>
<div
class="mx_AuthPage_modal"
class="mx_AuthPage_modal mx_AuthPage_modal_blur"
style="position: relative;"
>
<div
Expand All @@ -240,7 +240,7 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
/>
<div
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; background: rgba(255, 255, 255, 0.59); border-radius: 8px;"
style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
>
<div
class="mx_AuthHeader"
Expand Down
4 changes: 2 additions & 2 deletions test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
class="mx_AuthPage"
>
<div
class="mx_AuthPage_modal mx_AuthPage_modal_noBlur"
class="mx_AuthPage_modal"
style="position: relative;"
>
<div
Expand Down Expand Up @@ -172,7 +172,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
class="mx_AuthPage"
>
<div
class="mx_AuthPage_modal mx_AuthPage_modal_noBlur"
class="mx_AuthPage_modal"
style="position: relative;"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions test/unit-tests/components/views/auth/__snapshots__/AuthPage-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`<AuthPage /> should match snapshot 1`] = `
class="mx_AuthPage"
>
<div
class="mx_AuthPage_modal"
class="mx_AuthPage_modal mx_AuthPage_modal_blur"
style="position: relative;"
>
<div
Expand All @@ -15,7 +15,7 @@ exports[`<AuthPage /> should match snapshot 1`] = `
/>
<div
class="mx_AuthPage_modalContent"
style="display: flex; z-index: 1; background: rgba(255, 255, 255, 0.59); border-radius: 8px;"
style="display: flex; z-index: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.59);"
/>
</div>
<footer
Expand Down
Loading