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>
2022-10-19 13:31:20 +01:00 · 2022-10-19 13:31:20 +01:00 · 3c3df11d32
commit 3c3df11d32
parent e946674df3
23 changed files with 1638 additions and 12 deletions
--- a/src/components/views/settings/devices/LoginWithQRSection.tsx
+++ b/src/components/views/settings/devices/LoginWithQRSection.tsx
@ -0,0 +1,63 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import type { IServerVersions } from 'matrix-js-sdk/src/matrix';
+import { _t } from '../../../../languageHandler';
+import AccessibleButton from '../../elements/AccessibleButton';
+import SettingsSubsection from '../shared/SettingsSubsection';
+import SettingsStore from '../../../../settings/SettingsStore';
+
+interface IProps {
+    onShowQr: () => void;
+    versions: IServerVersions;
+}
+
+export default class LoginWithQRSection extends React.Component<IProps> {
+    public constructor(props: IProps) {
+        super(props);
+    }
+
+    public render(): JSX.Element {
+        const msc3882Supported = !!this.props.versions?.unstable_features?.['org.matrix.msc3882'];
+        const msc3886Supported = !!this.props.versions?.unstable_features?.['org.matrix.msc3886'];
+
+        // Needs to be enabled as a feature + server support MSC3886 or have a default rendezvous server configured:
+        const offerShowQr = SettingsStore.getValue("feature_qr_signin_reciprocate_show") &&
+            msc3882Supported && msc3886Supported;  // We don't support configuration of a fallback at the moment so we just check the MSCs
+
+        // don't show anything if no method is available
+        if (!offerShowQr) {
+            return null;
+        }
+
+        return <SettingsSubsection
+            heading={_t('Sign in with QR code')}
+        >
+            <div className="mx_LoginWithQRSection">
+                <p className="mx_SettingsTab_subsectionText">{
+                    _t("You can use this device to sign in a new device with a QR code. You will need to " +
+                    "scan the QR code shown on this device with your device that's signed out.")
+                }</p>
+                <AccessibleButton
+                    onClick={this.props.onShowQr}
+                    kind="primary"
+                >{ _t("Show QR code") }</AccessibleButton>
+            </div>
+        </SettingsSubsection>;
+    }
+}