mirror of
https://github.com/element-hq/element-web
synced 2024-11-21 16:55:34 +03:00
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
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -137,19 +137,19 @@ describe("<LoginWithQRSection />", () => {
|
|||
|
||||
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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ exports[`<LoginWithQRFlow /> errors renders authorization_expired 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -56,7 +56,7 @@ exports[`<LoginWithQRFlow /> errors renders check_code_mismatch 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -98,7 +98,7 @@ exports[`<LoginWithQRFlow /> errors renders device_already_exists 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -140,7 +140,7 @@ exports[`<LoginWithQRFlow /> errors renders device_not_found 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -182,7 +182,7 @@ exports[`<LoginWithQRFlow /> errors renders etag_missing 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -224,7 +224,7 @@ exports[`<LoginWithQRFlow /> errors renders expired 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -266,7 +266,7 @@ exports[`<LoginWithQRFlow /> errors renders expired 2`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -301,32 +301,70 @@ exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 1`] = `
|
|||
data-testid="login-with-qr"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
class="mx_LoginWithQR_heading"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
|
||||
aria-label="Back"
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_breadcrumbs"
|
||||
>
|
||||
Sessions
|
||||
/
|
||||
Link new device
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_icon"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
|
||||
clip-rule="evenodd"
|
||||
d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M15 16v-3h-2v3h2Z"
|
||||
/>
|
||||
<path
|
||||
d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
>
|
||||
Something went wrong!
|
||||
QR code not supported
|
||||
</h1>
|
||||
<p
|
||||
data-testid="cancellation-message"
|
||||
>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -343,32 +381,70 @@ exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 2`] = `
|
|||
data-testid="login-with-qr"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
class="mx_LoginWithQR_heading"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
|
||||
aria-label="Back"
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_breadcrumbs"
|
||||
>
|
||||
Sessions
|
||||
/
|
||||
Link new device
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_icon"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
|
||||
clip-rule="evenodd"
|
||||
d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M15 16v-3h-2v3h2Z"
|
||||
/>
|
||||
<path
|
||||
d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
>
|
||||
Something went wrong!
|
||||
QR code not supported
|
||||
</h1>
|
||||
<p
|
||||
data-testid="cancellation-message"
|
||||
>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -392,7 +468,7 @@ exports[`<LoginWithQRFlow /> errors renders insecure_channel_detected 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -447,7 +523,7 @@ exports[`<LoginWithQRFlow /> errors renders invalid_code 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -485,11 +561,11 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
|
|||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_icon"
|
||||
class="mx_LoginWithQR_icon mx_LoginWithQR_icon--success"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -531,7 +607,7 @@ exports[`<LoginWithQRFlow /> errors renders other_device_not_signed_in 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -573,7 +649,7 @@ exports[`<LoginWithQRFlow /> errors renders rate_limited 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -615,7 +691,7 @@ exports[`<LoginWithQRFlow /> errors renders unexpected_message_received 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -657,7 +733,7 @@ exports[`<LoginWithQRFlow /> errors renders unknown 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -699,7 +775,7 @@ exports[`<LoginWithQRFlow /> errors renders unknown 2`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -741,7 +817,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_algorithm 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -783,7 +859,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_protocol 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -825,7 +901,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_protocol 2`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -867,7 +943,7 @@ exports[`<LoginWithQRFlow /> errors renders user_cancelled 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -909,7 +985,7 @@ exports[`<LoginWithQRFlow /> errors renders user_cancelled 2`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -951,7 +1027,7 @@ exports[`<LoginWithQRFlow /> errors renders user_declined 1`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -993,7 +1069,7 @@ exports[`<LoginWithQRFlow /> errors renders user_declined 2`] = `
|
|||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
height="32px"
|
||||
viewBox="0 0 24 24"
|
||||
width="32px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,196 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<LoginWithQRSection /> MSC3906 should not render MSC3886 + get_login_token disabled 1`] = `<div />`;
|
||||
exports[`<LoginWithQRSection /> MSC3906 should not render MSC3886 + get_login_token disabled 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsectionHeading"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Link new device
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQRSection"
|
||||
>
|
||||
<p
|
||||
class="mx_SettingsTab_subsectionText"
|
||||
>
|
||||
Use a QR code to sign in to another device and set up secure messaging.
|
||||
</p>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
|
||||
disabled=""
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M15 16v-3h-2v3h2Z"
|
||||
/>
|
||||
<path
|
||||
d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
|
||||
/>
|
||||
</svg>
|
||||
Show QR code
|
||||
</div>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
|
||||
>
|
||||
Not supported by your account provider
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<LoginWithQRSection /> MSC3906 should not render no support at all 1`] = `<div />`;
|
||||
exports[`<LoginWithQRSection /> MSC3906 should not render no support at all 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsectionHeading"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Link new device
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQRSection"
|
||||
>
|
||||
<p
|
||||
class="mx_SettingsTab_subsectionText"
|
||||
>
|
||||
Use a QR code to sign in to another device and set up secure messaging.
|
||||
</p>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
|
||||
disabled=""
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M15 16v-3h-2v3h2Z"
|
||||
/>
|
||||
<path
|
||||
d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
|
||||
/>
|
||||
</svg>
|
||||
Show QR code
|
||||
</div>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
|
||||
>
|
||||
Not supported by your account provider
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<LoginWithQRSection /> MSC3906 should not render only get_login_token enabled 1`] = `<div />`;
|
||||
exports[`<LoginWithQRSection /> MSC3906 should not render only get_login_token enabled 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSubsectionHeading"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Link new device
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<div
|
||||
class="mx_LoginWithQRSection"
|
||||
>
|
||||
<p
|
||||
class="mx_SettingsTab_subsectionText"
|
||||
>
|
||||
Use a QR code to sign in to another device and set up secure messaging.
|
||||
</p>
|
||||
<div
|
||||
aria-disabled="true"
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
|
||||
disabled=""
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 5V5h4v4H5Zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 5v-4h4v4H5Zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6Zm1 2v4h4V5h-4Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M15 16v-3h-2v3h2Z"
|
||||
/>
|
||||
<path
|
||||
d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2v3Z"
|
||||
/>
|
||||
</svg>
|
||||
Show QR code
|
||||
</div>
|
||||
<p
|
||||
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40"
|
||||
>
|
||||
Not supported by your account provider
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<LoginWithQRSection /> MSC3906 should render panel get_login_token + .well-known 1`] = `
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue