From d58c9fa7f66d33de0c8121252e9a20c9ff1ff002 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 15 Oct 2024 10:18:57 +0100 Subject: [PATCH] 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> --- .../user-menu.spec.ts/user-menu-linux.png | Bin 11653 -> 13408 bytes res/css/views/auth/_LoginWithQR.pcss | 18 +- src/components/structures/UserMenu.tsx | 61 +----- src/components/views/auth/LoginWithQRFlow.tsx | 22 +- .../settings/devices/LoginWithQRSection.tsx | 14 +- src/i18n/strings/en_EN.json | 5 +- .../devices/LoginWithQRSection-test.tsx | 6 +- .../LoginWithQRFlow-test.tsx.snap | 142 ++++++++++--- .../LoginWithQRSection-test.tsx.snap | 192 +++++++++++++++++- 9 files changed, 350 insertions(+), 110 deletions(-) diff --git a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png index f713a7dc9837302c80ea7d934de5681dd3fbfd34..e06fbbda1b1a0b2d21b791e5ed5ee434213c8a20 100644 GIT binary patch literal 13408 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 diff --git a/res/css/views/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss index c246388869..9d4744a389 100644 --- a/res/css/views/auth/_LoginWithQR.pcss +++ b/res/css/views/auth/_LoginWithQR.pcss @@ -11,6 +11,13 @@ Please see LICENSE files in the repository root for full details. margin-bottom: $spacing-16; } +.mx_LoginWithQRSection { + .mx_AccessibleButton_kind_primary + p { + color: var(--cpd-color-text-secondary); + margin-top: var(--cpd-space-2x); + } +} + .mx_LoginWithQRSection .mx_AccessibleButton svg { margin-right: $spacing-12; } @@ -135,9 +142,16 @@ Please see LICENSE files in the repository root for full details. padding: var(--cpd-space-3x); gap: 10px; - background-color: var(--cpd-color-bg-success-subtle); + background-color: var(--cpd-color-bg-subtle-secondary); svg { - color: var(--cpd-color-icon-success-primary); + color: var(--cpd-color-icon-secondary); + } + + &.mx_LoginWithQR_icon--success { + background-color: var(--cpd-color-bg-success-subtle); + svg { + color: var(--cpd-color-icon-success-primary); + } } &.mx_LoginWithQR_icon--critical { diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index ac6a8c8e0b..4bdb6e227b 100644 --- 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 { 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 { ); 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 { ); } - private checkQrLoginSupport = async (): Promise => { - 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 { ); } - let linkNewDeviceButton: JSX.Element | undefined; - if (this.state.showQrLogin) { - const extraProps: Omit< - React.ComponentProps, - "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 = ( - this.onSettingsOpen(e, UserTab.SessionManager, { showMsc4108QrCode: true })} - /> - ); - } + const linkNewDeviceButton = ( + this.onSettingsOpen(e, UserTab.SessionManager, { showMsc4108QrCode: true })} + /> + ); let primaryOptionList = ( diff --git a/src/components/views/auth/LoginWithQRFlow.tsx b/src/components/views/auth/LoginWithQRFlow.tsx index 72511f2ccb..645613dafe 100644 --- 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
- {success ? : } +
{title} diff --git a/src/components/views/settings/devices/LoginWithQRSection.tsx b/src/components/views/settings/devices/LoginWithQRSection.tsx index f776d69765..c5efb35efc 100644 --- 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 = ({ ? shouldShowQr(cli, !!isCrossSigningReady, oidcClientConfig, versions, wellKnown) : shouldShowQrLegacy(versions, wellKnown, capabilities); - // don't show anything if no method is available - if (!offerShowQr) { - return null; - } - return (

{_t("settings|sessions|sign_in_with_qr_description")}

- + {_t("settings|sessions|sign_in_with_qr_button")} + {!offerShowQr && {_t("settings|sessions|sign_in_with_qr_unsupported")}}
); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 77fecde80e..c86520236f 100644 --- 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" diff --git a/test/components/views/settings/devices/LoginWithQRSection-test.tsx b/test/components/views/settings/devices/LoginWithQRSection-test.tsx index 2a200ce3f8..6a5e043074 100644 --- a/test/components/views/settings/devices/LoginWithQRSection-test.tsx +++ b/test/components/views/settings/devices/LoginWithQRSection-test.tsx @@ -137,19 +137,19 @@ describe("", () => { test("no homeserver support", async () => { const { container } = render(getComponent({ versions: makeVersions({ "org.matrix.msc4108": false }) })); - expect(container.textContent).toBe(""); // show nothing + expect(container.textContent).toContain("Not supported by your account provider"); }); test("no support in crypto", async () => { client.getCrypto()!.exportSecretsBundle = undefined; const { container } = render(getComponent({ client })); - expect(container.textContent).toBe(""); // show nothing + expect(container.textContent).toContain("Not supported by your account provider"); }); test("failed to connect", async () => { fetchMock.catch(500); const { container } = render(getComponent({ client })); - expect(container.textContent).toBe(""); // show nothing + expect(container.textContent).toContain("Not supported by your account provider"); }); }); }); diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap index ec3bb4a690..9b6d83f4b6 100644 --- a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap @@ -14,7 +14,7 @@ exports[` errors renders authorization_expired 1`] = ` > errors renders check_code_mismatch 1`] = ` > errors renders device_already_exists 1`] = ` > errors renders device_not_found 1`] = ` > errors renders etag_missing 1`] = ` > errors renders expired 1`] = ` > errors renders expired 2`] = ` > errors renders homeserver_lacks_support 1`] = ` data-testid="login-with-qr" >
+ + +
+
+ Sessions + / + Link new device +
+
+
+
+ + +

- Something went wrong! + QR code not supported

- An unexpected error occurred. The request to connect your other device has been cancelled. + Your account provider doesn't support signing into a new device with a QR code.

errors renders homeserver_lacks_support 2`] = ` data-testid="login-with-qr" >
+ + +
+
+ Sessions + / + Link new device +
+
+
+
+ + +

- Something went wrong! + QR code not supported

- An unexpected error occurred. The request to connect your other device has been cancelled. + Your account provider doesn't support signing into a new device with a QR code.

errors renders insecure_channel_detected 1`] = ` > errors renders invalid_code 1`] = ` > errors renders other_device_already_signed_in 1`] = class="mx_LoginWithQR_main" >
errors renders other_device_not_signed_in 1`] = ` > errors renders rate_limited 1`] = ` > errors renders unexpected_message_received 1`] = ` > errors renders unknown 1`] = ` > errors renders unknown 2`] = ` > errors renders unsupported_algorithm 1`] = ` > errors renders unsupported_protocol 1`] = ` > errors renders unsupported_protocol 2`] = ` > errors renders user_cancelled 1`] = ` > errors renders user_cancelled 2`] = ` > errors renders user_declined 1`] = ` > errors renders user_declined 2`] = ` > MSC3906 should not render MSC3886 + get_login_token disabled 1`] = `
`; +exports[` MSC3906 should not render MSC3886 + get_login_token disabled 1`] = ` +
+
+
+

+ Link new device +

+
+
+
+

+ Use a QR code to sign in to another device and set up secure messaging. +

+
+ + + + + + Show QR code +
+

+ Not supported by your account provider +

+
+
+
+
+`; -exports[` MSC3906 should not render no support at all 1`] = `
`; +exports[` MSC3906 should not render no support at all 1`] = ` +
+
+
+

+ Link new device +

+
+
+
+

+ Use a QR code to sign in to another device and set up secure messaging. +

+
+ + + + + + Show QR code +
+

+ Not supported by your account provider +

+
+
+
+
+`; -exports[` MSC3906 should not render only get_login_token enabled 1`] = `
`; +exports[` MSC3906 should not render only get_login_token enabled 1`] = ` +
+
+
+

+ Link new device +

+
+
+
+

+ Use a QR code to sign in to another device and set up secure messaging. +

+
+ + + + + + Show QR code +
+

+ Not supported by your account provider +

+
+
+
+
+`; exports[` MSC3906 should render panel get_login_token + .well-known 1`] = `