Support for login + E2EE set up with QR (#9403)

* Support for login + E2EE set up with QR

* Whitespace

* Padding

* Refactor of fetch

* Whitespace

* CSS whitespace

* Add link to MSC3906

* Handle incorrect typing in MatrixClientPeg.get()

* Use unstable class name

* fix: use unstable class name

* Use default fetch client instead

* Update to revised function name

* Refactor device manager panel and make it work with new sessions manager

* Lint fix

* Add missing interstitials and update wording

* Linting

* i18n

* Lint

* Use sensible sdk config name for fallback server

* Improve error handling for QR code generation

* Refactor feature availability logic

* Hide device manager panel if no options available

* Put sign in with QR behind lab setting

* Reduce scope of PR to just showing code on existing device

* i18n updates

* Handle null features

* Testing for LoginWithQRSection

* Refactor to handle UIA

* Imports

* Reduce diff complexity

* Remove unnecessary change

* Remove unused styles

* Support UIA

* Tidy up

* i18n

* Remove additional unused parts of flow

* Add extra instruction when showing QR code

* Add getVersions to server mocks

* Use proper colours for theme support

* Test cases

* Lint

* Remove obsolete snapshot

* Don't override error if already set

* Remove unused var

* Update src/components/views/settings/devices/LoginWithQRSection.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update src/components/views/auth/LoginWithQR.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Update res/css/views/auth/_LoginWithQR.pcss

Co-authored-by: Kerry <kerrya@element.io>

* Use spacing variables

* Remove debug

* Style + docs

* preventDefault

* Names of tests

* Fixes for js-sdk refactor

* Update snapshots to match test names

* Refactor labs config to make deployment simpler

* i18n

* Unused imports

* Typo

* Stateless component

* Whitespace

* Use context not MatrixClientPeg

* Add missing context

* Type updates to match js-sdk

* Wrap click handlers in useCallback

* Update src/components/views/settings/DevicesPanel.tsx

Co-authored-by: Travis Ralston <travisr@matrix.org>

* Wait for DOM update instead of timeout

* Add missing snapshot update from last commit

* Remove void keyword in favour of then() clauses

* test main paths in LoginWithQR

Co-authored-by: Travis Ralston <travisr@matrix.org>
Co-authored-by: Kerry <kerrya@element.io>
This commit is contained in:
Hugh Nimmo-Smith 2022-10-19 13:31:20 +01:00 committed by GitHub
parent e946674df3
commit 3c3df11d32
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 1638 additions and 12 deletions

View file

@ -38,6 +38,9 @@ import InlineSpinner from "../../../elements/InlineSpinner";
import { PosthogAnalytics } from "../../../../../PosthogAnalytics";
import { showDialog as showAnalyticsLearnMoreDialog } from "../../../dialogs/AnalyticsLearnMoreDialog";
import { privateShouldBeEncrypted } from "../../../../../utils/rooms";
import LoginWithQR, { Mode } from '../../../auth/LoginWithQR';
import LoginWithQRSection from '../../devices/LoginWithQRSection';
import type { IServerVersions } from 'matrix-js-sdk/src/matrix';
interface IIgnoredUserProps {
userId: string;
@ -72,6 +75,8 @@ interface IState {
waitingUnignored: string[];
managingInvites: boolean;
invitedRoomIds: Set<string>;
showLoginWithQR: Mode | null;
versions?: IServerVersions;
}
export default class SecurityUserSettingsTab extends React.Component<IProps, IState> {
@ -88,6 +93,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
waitingUnignored: [],
managingInvites: false,
invitedRoomIds,
showLoginWithQR: null,
};
}
@ -102,6 +108,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
public componentDidMount(): void {
this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on(RoomEvent.MyMembership, this.onMyMembership);
MatrixClientPeg.get().getVersions().then(versions => this.setState({ versions }));
}
public componentWillUnmount(): void {
@ -251,6 +258,14 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
);
}
private onShowQRClicked = (): void => {
this.setState({ showLoginWithQR: Mode.Show });
};
private onLoginWithQRFinished = (): void => {
this.setState({ showLoginWithQR: null });
};
public render(): JSX.Element {
const secureBackup = (
<div className='mx_SettingsTab_section'>
@ -347,6 +362,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
}
const useNewSessionManager = SettingsStore.getValue("feature_new_device_manager");
const showQrCodeEnabled = SettingsStore.getValue("feature_qr_signin_reciprocate_show");
const devicesSection = useNewSessionManager
? null
: <>
@ -363,8 +379,20 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
</span>
<DevicesPanel />
</div>
{ showQrCodeEnabled ?
<LoginWithQRSection onShowQr={this.onShowQRClicked} versions={this.state.versions} />
: null
}
</>;
const client = MatrixClientPeg.get();
if (showQrCodeEnabled && this.state.showLoginWithQR) {
return <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
<LoginWithQR onFinished={this.onLoginWithQRFinished} mode={this.state.showLoginWithQR} client={client} />
</div>;
}
return (
<div className="mx_SettingsTab mx_SecurityUserSettingsTab">
{ warning }