nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

"Verify this device" redesign (#30596)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/views/auth/AuthPage.tsx
View File

@@ -8,11 +8,22 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import classNames from "classnames";
import SdkConfig from "../../../SdkConfig";
import AuthFooter from "./AuthFooter";
export default class AuthPage extends React.PureComponent<React.PropsWithChildren> {
interface IProps {
/**
* Whether to add a blurred shadow around the modal.
*
* If the modal component provides its own shadow or blurring, this can be
* disabled. Defaults to `true`.
*/
addBlur?: boolean;
}
export default class AuthPage extends React.PureComponent<React.PropsWithChildren<IProps>> {
private static welcomeBackgroundUrl?: string;
// cache the url as a static to prevent it changing without refreshing
@@ -58,14 +69,26 @@ 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} />;
modalContentStyle.background = "rgba(255, 255, 255, 0.59)";
}
const modalClasses = classNames({
mx_AuthPage_modal: true,
mx_AuthPage_modal_withBlur: this.props.addBlur !== false,
});
return (
<div className="mx_AuthPage" style={pageStyle}>
<div className="mx_AuthPage_modal" style={modalStyle}>
<div className="mx_AuthPage_modalBlur" style={blurStyle} />
<div className={modalClasses} style={modalStyle}>
{modalBlur}
<div className="mx_AuthPage_modalContent" style={modalContentStyle}>
{this.props.children}
</div>

40
src/components/views/dialogs/security/SetupEncryptionDialog.tsx
View File

@@ -10,55 +10,19 @@ import React from "react";
import SetupEncryptionBody from "../../../structures/auth/SetupEncryptionBody";
import BaseDialog from "../BaseDialog";
import { _t } from "../../../../languageHandler";
import { SetupEncryptionStore, Phase } from "../../../../stores/SetupEncryptionStore";
function iconFromPhase(phase?: Phase): string {
if (phase === Phase.Done) {
// eslint-disable-next-line @typescript-eslint/no-require-imports
return require("../../../../../res/img/e2e/verified-deprecated.svg").default;
} else {
// eslint-disable-next-line @typescript-eslint/no-require-imports
return require("../../../../../res/img/e2e/warning-deprecated.svg").default;
}
}
interface IProps {
onFinished(): void;
}
interface IState {
icon: string;
}
export default class SetupEncryptionDialog extends React.Component<IProps, IState> {
private store: SetupEncryptionStore;
export default class SetupEncryptionDialog extends React.Component<IProps> {
public constructor(props: IProps) {
super(props);
this.store = SetupEncryptionStore.sharedInstance();
this.state = { icon: iconFromPhase(this.store.phase) };
}
public componentDidMount(): void {
this.store.on("update", this.onStoreUpdate);
}
public componentWillUnmount(): void {
this.store.removeListener("update", this.onStoreUpdate);
}
private onStoreUpdate = (): void => {
this.setState({ icon: iconFromPhase(this.store.phase) });
};
public render(): React.ReactNode {
return (
<BaseDialog
headerImage={this.state.icon}
onFinished={this.props.onFinished}
title={_t("encryption|verify_toast_title")}
>
<BaseDialog onFinished={this.props.onFinished} fixedWidth={false}>
<SetupEncryptionBody onFinished={this.props.onFinished} />
</BaseDialog>
);

8
src/components/views/settings/encryption/ResetIdentityBody.tsx
View File

@@ -48,8 +48,12 @@ interface ResetIdentityBodyProps {
* "forgot" is shown when the user chose 'Forgot recovery key?' during `SetupEncryptionToast`.
*
* "confirm" is shown when the user chose 'Reset all' during `SetupEncryptionBody`.
*
* "no_verification_method" is shown when the device is unverified and has no way of
* obtaining the existing keys, and hence the identity needs to be reset to have
* a cross-signed device.
*/
export type ResetIdentityBodyVariant = "compromised" | "forgot" | "sync_failed" | "confirm";
export type ResetIdentityBodyVariant = "compromised" | "forgot" | "sync_failed" | "confirm" | "no_verification_method";
/**
* User interface component allowing the user to reset their cryptographic identity.
@@ -124,5 +128,7 @@ function titleForVariant(variant: ResetIdentityBodyVariant): string {
return _t("settings|encryption|advanced|breadcrumb_title_sync_failed");
case "forgot":
return _t("settings|encryption|advanced|breadcrumb_title_forgot");
case "no_verification_method":
return _t("settings|encryption|advanced|breadcrumb_title_cant_confirm");
}
}