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>
This commit is contained in:
Michael Telatynski
GitHub
parent
51a5cf64c8
commit
d58c9fa7f6
9 changed files with 350 additions and 110 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue