Always show link new device flow even if unsupported (#147)

* Always show link new device flow even if unsupported Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-10-15 10:18:57 +01:00
parent 51a5cf64c8
commit d58c9fa7f6
9 changed files with 350 additions and 110 deletions
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React, { createRef, ReactNode } from "react";
-import { discoverAndValidateOIDCIssuerWellKnown, Room } from "matrix-js-sdk/src/matrix";
+import { Room } from "matrix-js-sdk/src/matrix";

 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import defaultDispatcher from "../../dispatcher/dispatcher";
@@ -44,8 +44,6 @@ import { Icon as LiveIcon } from "../../../res/img/compound/live-8px.svg";
 import { VoiceBroadcastRecording, VoiceBroadcastRecordingsStoreEvent } from "../../voice-broadcast";
 import { SDKContext } from "../../contexts/SDKContext";
 import { shouldShowFeedback } from "../../utils/Feedback";
-import { shouldShowQr } from "../views/settings/devices/LoginWithQRSection";
-import { Features } from "../../settings/Settings";

 interface IProps {
    isPanelCollapsed: boolean;
@@ -60,8 +58,6 @@ interface IState {
    isHighContrast: boolean;
    selectedSpace?: Room | null;
    showLiveAvatarAddon: boolean;
-    showQrLogin: boolean;
-    supportsQrLogin: boolean;
 }

 const toRightOf = (rect: PartialDOMRect): MenuProps => {
@@ -98,8 +94,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
            isHighContrast: this.isUserOnHighContrastTheme(),
            selectedSpace: SpaceStore.instance.activeSpaceRoom,
            showLiveAvatarAddon: this.context.voiceBroadcastRecordingsStore.hasCurrent(),
-            showQrLogin: false,
-            supportsQrLogin: false,
        };

        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
@@ -123,7 +117,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
        );
        this.dispatcherRef = defaultDispatcher.register(this.onAction);
        this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
-        this.checkQrLoginSupport();
    }

    public componentWillUnmount(): void {
@@ -138,29 +131,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
        );
    }

-    private checkQrLoginSupport = async (): Promise<void> => {
-        if (!this.context.client || !SettingsStore.getValue(Features.OidcNativeFlow)) return;
-
-        const { issuer } = await this.context.client.getAuthIssuer().catch(() => ({ issuer: undefined }));
-        if (issuer) {
-            const [oidcClientConfig, versions, wellKnown, isCrossSigningReady] = await Promise.all([
-                discoverAndValidateOIDCIssuerWellKnown(issuer),
-                this.context.client.getVersions(),
-                this.context.client.waitForClientWellKnown(),
-                this.context.client.getCrypto()?.isCrossSigningReady(),
-            ]);
-
-            const supportsQrLogin = shouldShowQr(
-                this.context.client,
-                !!isCrossSigningReady,
-                oidcClientConfig,
-                versions,
-                wellKnown,
-            );
-            this.setState({ supportsQrLogin, showQrLogin: true });
-        }
-    };
-
    private isUserOnDarkTheme(): boolean {
        if (SettingsStore.getValue("use_system_theme")) {
            return window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -363,28 +333,13 @@ export default class UserMenu extends React.Component<IProps, IState> {
            );
        }

-        let linkNewDeviceButton: JSX.Element | undefined;
-        if (this.state.showQrLogin) {
-            const extraProps: Omit<
-                React.ComponentProps<typeof IconizedContextMenuOption>,
-                "iconClassname" | "label" | "onClick"
-            > = {};
-            if (!this.state.supportsQrLogin) {
-                extraProps.disabled = true;
-                extraProps.title = _t("user_menu|link_new_device_not_supported");
-                extraProps.caption = _t("user_menu|link_new_device_not_supported_caption");
-                extraProps.placement = "right";
-            }
-
-            linkNewDeviceButton = (
-                <IconizedContextMenuOption
-                    {...extraProps}
-                    iconClassName="mx_UserMenu_iconQr"
-                    label={_t("user_menu|link_new_device")}
-                    onClick={(e) => this.onSettingsOpen(e, UserTab.SessionManager, { showMsc4108QrCode: true })}
-                />
-            );
-        }
+        const linkNewDeviceButton = (
+            <IconizedContextMenuOption
+                iconClassName="mx_UserMenu_iconQr"
+                label={_t("user_menu|link_new_device")}
+                onClick={(e) => this.onSettingsOpen(e, UserTab.SessionManager, { showMsc4108QrCode: true })}
+            />
+        );

        let primaryOptionList = (
            <IconizedContextMenuOptionList>
--- a/src/components/views/auth/LoginWithQRFlow.tsx
+++ b/src/components/views/auth/LoginWithQRFlow.tsx
@@ -17,6 +17,7 @@ import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/i
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
 import { Heading, MFAInput, Text } from "@vector-im/compound-web";
 import classNames from "classnames";
+import { QrCodeIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -94,7 +95,10 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P

        switch (this.props.phase) {
            case Phase.Error: {
-                let success = false;
+                backButton = false;
+
+                let Icon = ErrorIcon;
+                let success: boolean | null = false;
                let title: string | undefined;
                let message: ReactNode | undefined;

@@ -138,6 +142,7 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P

                    case ClientRendezvousFailureReason.OtherDeviceAlreadySignedIn:
                        success = true;
+                        Icon = CheckCircleSolidIcon;
                        title = _t("auth|qr_code_login|error_other_device_already_signed_in_title");
                        message = _t("auth|qr_code_login|error_other_device_already_signed_in");
                        break;
@@ -157,6 +162,15 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P
                        message = _t("auth|qr_code_login|error_etag_missing");
                        break;

+                    case LegacyRendezvousFailureReason.HomeserverLacksSupport:
+                    case ClientRendezvousFailureReason.HomeserverLacksSupport:
+                        success = null;
+                        Icon = QrCodeIcon;
+                        backButton = true;
+                        title = _t("auth|qr_code_login|unsupported_heading");
+                        message = _t("auth|qr_code_login|unsupported_explainer");
+                        break;
+
                    case MSC4108FailureReason.DeviceAlreadyExists:
                    case MSC4108FailureReason.DeviceNotFound:
                    case MSC4108FailureReason.UnexpectedMessageReceived:
@@ -168,15 +182,15 @@ export default class LoginWithQRFlow extends React.Component<XOR<Props, MSC3906P
                        break;
                }
                className = "mx_LoginWithQR_error";
-                backButton = false;
                main = (
                    <>
                        <div
                            className={classNames("mx_LoginWithQR_icon", {
-                                "mx_LoginWithQR_icon--critical": !success,
+                                "mx_LoginWithQR_icon--critical": success === false,
+                                "mx_LoginWithQR_icon--success": success === true,
                            })}
                        >
-                            {success ? <CheckCircleSolidIcon width="32px" /> : <ErrorIcon width="32px" />}
+                            <Icon width="32px" height="32px" />
                        </div>
                        <Heading as="h1" size="sm" weight="semibold">
                            {title}
--- a/src/components/views/settings/devices/LoginWithQRSection.tsx
+++ b/src/components/views/settings/devices/LoginWithQRSection.tsx
@@ -18,12 +18,11 @@ import {
    DEVICE_CODE_SCOPE,
 } from "matrix-js-sdk/src/matrix";
 import QrCodeIcon from "@vector-im/compound-design-tokens/assets/web/icons/qr-code";
+import { Text } from "@vector-im/compound-web";

 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../elements/AccessibleButton";
 import SettingsSubsection from "../shared/SettingsSubsection";
-import SettingsStore from "../../../../settings/SettingsStore";
-import { Features } from "../../../../settings/Settings";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";

 interface IProps {
@@ -64,9 +63,8 @@ export function shouldShowQr(
        oidcClientConfig?.metadata?.grant_types_supported.includes(DEVICE_CODE_SCOPE);

    return (
-        deviceAuthorizationGrantSupported &&
+        !!deviceAuthorizationGrantSupported &&
        msc4108Supported &&
-        SettingsStore.getValue(Features.OidcNativeFlow) &&
        !!cli.getCrypto()?.exportSecretsBundle &&
        isCrossSigningReady
    );
@@ -85,19 +83,15 @@ const LoginWithQRSection: React.FC<IProps> = ({
        ? shouldShowQr(cli, !!isCrossSigningReady, oidcClientConfig, versions, wellKnown)
        : shouldShowQrLegacy(versions, wellKnown, capabilities);

-    // don't show anything if no method is available
-    if (!offerShowQr) {
-        return null;
-    }
-
    return (
        <SettingsSubsection heading={_t("settings|sessions|sign_in_with_qr")}>
            <div className="mx_LoginWithQRSection">
                <p className="mx_SettingsTab_subsectionText">{_t("settings|sessions|sign_in_with_qr_description")}</p>
-                <AccessibleButton onClick={onShowQr} kind="primary">
+                <AccessibleButton onClick={onShowQr} kind="primary" disabled={!offerShowQr}>
                    <QrCodeIcon height={20} width={20} />
                    {_t("settings|sessions|sign_in_with_qr_button")}
                </AccessibleButton>
+                {!offerShowQr && <Text size="sm">{_t("settings|sessions|sign_in_with_qr_unsupported")}</Text>}
            </div>
        </SettingsSubsection>
    );
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -283,6 +283,8 @@
            "security_code_prompt": "If asked, enter the code below on your other device.",
            "select_qr_code": "Select \"%(scanQRCode)s\"",
            "sign_in_new_device": "Sign in new device",
+            "unsupported_explainer": "Your account provider doesn't support signing into a new device with a QR code.",
+            "unsupported_heading": "QR code not supported",
            "waiting_for_device": "Waiting for device to sign in"
        },
        "register_action": "Create Account",
@@ -2855,6 +2857,7 @@
            "sign_in_with_qr": "Link new device",
            "sign_in_with_qr_button": "Show QR code",
            "sign_in_with_qr_description": "Use a QR code to sign in to another device and set up secure messaging.",
+            "sign_in_with_qr_unsupported": "Not supported by your account provider",
            "sign_out": "Sign out of this session",
            "sign_out_all_other_sessions": "Sign out of all other sessions (%(otherSessionsCount)s)",
            "sign_out_confirm_description": {
@@ -3829,8 +3832,6 @@
    },
    "user_menu": {
        "link_new_device": "Link new device",
-        "link_new_device_not_supported": "Not supported",
-        "link_new_device_not_supported_caption": "You need to sign in manually",
        "settings": "All settings",
        "switch_theme_dark": "Switch to dark mode",
        "switch_theme_light": "Switch to light mode"