Iterate styles around Link new device via QR (#12356)
* Rearrange user settings tab order to move Sessions up to 2nd Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate copy & iconography on Settings > Sessions > Link new device Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate design of Scan QR code screen Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak styles Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests and snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests and snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/28217/head
Michael Telatynski
GitHub
parent
64806d0490
commit
56d7911897
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
|
@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_LoginWithQRSection .mx_AccessibleButton {
|
||||
.mx_LoginWithQRSection p {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-16;
|
||||
}
|
||||
|
||||
.mx_LoginWithQRSection .mx_AccessibleButton svg {
|
||||
margin-right: $spacing-12;
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +74,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_QRCode {
|
||||
padding: $spacing-12 $spacing-40;
|
||||
margin: $spacing-28 0;
|
||||
}
|
||||
|
||||
|
|
@ -89,7 +93,7 @@ limitations under the License.
|
|||
|
||||
.mx_LoginWithQR_centreTitle {
|
||||
h1 {
|
||||
text-align: centre;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -141,14 +145,28 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_heading {
|
||||
display: flex;
|
||||
gap: $spacing-12;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_BackButton {
|
||||
height: $spacing-12;
|
||||
margin-bottom: $spacing-24;
|
||||
height: $spacing-28;
|
||||
border-radius: $spacing-28;
|
||||
padding: $spacing-4;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
svg {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_breadcrumbs {
|
||||
font-size: $font-13px;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -156,7 +174,6 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_QRCode {
|
||||
border: 1px solid $quinary-content;
|
||||
border-radius: $spacing-8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -16,16 +16,15 @@ limitations under the License.
|
|||
|
||||
import React from "react";
|
||||
import { RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous";
|
||||
import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import QRCode from "../elements/QRCode";
|
||||
import Spinner from "../elements/Spinner";
|
||||
import { Icon as BackButtonIcon } from "../../../../res/img/element-icons/back.svg";
|
||||
import { Icon as DevicesIcon } from "../../../../res/img/element-icons/devices.svg";
|
||||
import { Icon as WarningBadge } from "../../../../res/img/element-icons/warning-badge.svg";
|
||||
import { Icon as InfoIcon } from "../../../../res/img/element-icons/i.svg";
|
||||
import { Click, FailureReason, LoginWithQRFailureReason, Phase } from "./LoginWithQR";
|
||||
import SdkConfig from "../../../SdkConfig";
|
||||
|
||||
interface IProps {
|
||||
phase: Phase;
|
||||
|
|
@ -70,8 +69,6 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
};
|
||||
|
||||
public render(): React.ReactNode {
|
||||
let title = "";
|
||||
let titleIcon: JSX.Element | undefined;
|
||||
let main: JSX.Element | undefined;
|
||||
let buttons: JSX.Element | undefined;
|
||||
let backButton = true;
|
||||
|
|
@ -115,9 +112,7 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
cancellationMessage = _t("auth|qr_code_login|error_request_cancelled");
|
||||
break;
|
||||
}
|
||||
title = _t("timeline|m.call.invite|failed_connection");
|
||||
centreTitle = true;
|
||||
titleIcon = <WarningBadge className="error" />;
|
||||
backButton = false;
|
||||
main = <p data-testid="cancellation-message">{cancellationMessage}</p>;
|
||||
buttons = (
|
||||
|
|
@ -134,8 +129,6 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
);
|
||||
break;
|
||||
case Phase.Connected:
|
||||
title = _t("auth|qr_code_login|devices_connected");
|
||||
titleIcon = <DevicesIcon className="normal" />;
|
||||
backButton = false;
|
||||
main = (
|
||||
<>
|
||||
|
|
@ -170,7 +163,6 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
);
|
||||
break;
|
||||
case Phase.ShowingQR:
|
||||
title = _t("settings|sessions|sign_in_with_qr");
|
||||
if (this.props.code) {
|
||||
const code = (
|
||||
<div className="mx_LoginWithQR_qrWrapper">
|
||||
|
|
@ -182,17 +174,22 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
);
|
||||
main = (
|
||||
<>
|
||||
<p>{_t("auth|qr_code_login|scan_code_instruction")}</p>
|
||||
<h1>{_t("auth|qr_code_login|scan_code_instruction")}</h1>
|
||||
{code}
|
||||
<ol>
|
||||
<li>{_t("auth|qr_code_login|start_at_sign_in_screen")}</li>
|
||||
<li>
|
||||
{_t("auth|qr_code_login|select_qr_code", {
|
||||
scanQRCode: _t("auth|qr_code_login|scan_qr_code"),
|
||||
{_t("auth|qr_code_login|open_element_other_device", {
|
||||
brand: SdkConfig.get().brand,
|
||||
})}
|
||||
</li>
|
||||
<li>{_t("auth|qr_code_login|review_and_approve")}</li>
|
||||
<li>
|
||||
{_t("auth|qr_code_login|select_qr_code", {
|
||||
scanQRCode: <b>{_t("auth|qr_code_login|scan_qr_code")}</b>,
|
||||
})}
|
||||
</li>
|
||||
<li>{_t("auth|qr_code_login|point_the_camera")}</li>
|
||||
<li>{_t("auth|qr_code_login|follow_remaining_instructions")}</li>
|
||||
</ol>
|
||||
{code}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
|
|
@ -212,7 +209,6 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
buttons = this.cancelButton();
|
||||
break;
|
||||
case Phase.Verifying:
|
||||
title = _t("common|success");
|
||||
centreTitle = true;
|
||||
main = this.simpleSpinner(_t("auth|qr_code_login|completing_setup"));
|
||||
break;
|
||||
|
|
@ -222,19 +218,20 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
|
|||
<div data-testid="login-with-qr" className="mx_LoginWithQR">
|
||||
<div className={centreTitle ? "mx_LoginWithQR_centreTitle" : ""}>
|
||||
{backButton ? (
|
||||
<AccessibleButton
|
||||
data-testid="back-button"
|
||||
className="mx_LoginWithQR_BackButton"
|
||||
onClick={this.handleClick(Click.Back)}
|
||||
title="Back"
|
||||
>
|
||||
<BackButtonIcon />
|
||||
</AccessibleButton>
|
||||
<div className="mx_LoginWithQR_heading">
|
||||
<AccessibleButton
|
||||
data-testid="back-button"
|
||||
className="mx_LoginWithQR_BackButton"
|
||||
onClick={this.handleClick(Click.Back)}
|
||||
title="Back"
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
</AccessibleButton>
|
||||
<div className="mx_LoginWithQR_breadcrumbs">
|
||||
{_t("settings|sessions|title")} / {_t("settings|sessions|sign_in_with_qr")}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<h1>
|
||||
{titleIcon}
|
||||
{title}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="mx_LoginWithQR_main">{main}</div>
|
||||
<div className="mx_LoginWithQR_buttons">{buttons}</div>
|
||||
|
|
|
|||
|
|
@ -84,6 +84,16 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
|
|||
"UserSettingsGeneral",
|
||||
),
|
||||
);
|
||||
tabs.push(
|
||||
new Tab(
|
||||
UserTab.SessionManager,
|
||||
_td("settings|sessions|title"),
|
||||
"mx_UserSettingsDialog_sessionsIcon",
|
||||
<SessionManagerTab />,
|
||||
// don't track with posthog while under construction
|
||||
undefined,
|
||||
),
|
||||
);
|
||||
tabs.push(
|
||||
new Tab(
|
||||
UserTab.Appearance,
|
||||
|
|
@ -151,16 +161,6 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
|
|||
"UserSettingsSecurityPrivacy",
|
||||
),
|
||||
);
|
||||
tabs.push(
|
||||
new Tab(
|
||||
UserTab.SessionManager,
|
||||
_td("settings|sessions|title"),
|
||||
"mx_UserSettingsDialog_sessionsIcon",
|
||||
<SessionManagerTab />,
|
||||
// don't track with posthog while under construction
|
||||
undefined,
|
||||
),
|
||||
);
|
||||
// Show the Labs tab if enabled or if there are any active betas
|
||||
if (showLabsFlags() || SettingsStore.getFeatureSettingNames().some((k) => SettingsStore.getBetaInfo(k))) {
|
||||
tabs.push(
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import {
|
|||
Capabilities,
|
||||
IClientWellKnown,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { Icon as QrCodeIcon } from "@vector-im/compound-design-tokens/icons/qr-code.svg";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import AccessibleButton from "../../elements/AccessibleButton";
|
||||
|
|
@ -62,6 +63,7 @@ export default class LoginWithQRSection extends React.Component<IProps> {
|
|||
{_t("settings|sessions|sign_in_with_qr_description")}
|
||||
</p>
|
||||
<AccessibleButton onClick={this.props.onShowQr} kind="primary">
|
||||
<QrCodeIcon height={20} width={20} />
|
||||
{_t("settings|sessions|sign_in_with_qr_button")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -249,7 +249,6 @@
|
|||
"completing_setup": "Completing set up of your new device",
|
||||
"confirm_code_match": "Check that the code below matches with your other device:",
|
||||
"connecting": "Connecting…",
|
||||
"devices_connected": "Devices connected",
|
||||
"error_device_already_signed_in": "The other device is already signed in.",
|
||||
"error_device_not_signed_in": "The other device isn't signed in.",
|
||||
"error_device_unsupported": "Linking with this device is not supported.",
|
||||
|
|
@ -260,12 +259,13 @@
|
|||
"error_request_cancelled": "The request was cancelled.",
|
||||
"error_request_declined": "The request was declined on the other device.",
|
||||
"error_unexpected": "An unexpected error occurred.",
|
||||
"review_and_approve": "Review and approve the sign in",
|
||||
"scan_code_instruction": "Scan the QR code below with your device that's signed out.",
|
||||
"follow_remaining_instructions": "Follow the remaining instructions to verify your other device",
|
||||
"open_element_other_device": "Open %(brand)s on your other device",
|
||||
"point_the_camera": "Point the camera at the QR code shown here",
|
||||
"scan_code_instruction": "Scan the QR code with another device",
|
||||
"scan_qr_code": "Scan QR code",
|
||||
"select_qr_code": "Select '%(scanQRCode)s'",
|
||||
"select_qr_code": "Select \"%(scanQRCode)s\"",
|
||||
"sign_in_new_device": "Sign in new device",
|
||||
"start_at_sign_in_screen": "Start at the sign in screen",
|
||||
"waiting_for_device": "Waiting for device to sign in"
|
||||
},
|
||||
"register_action": "Create Account",
|
||||
|
|
@ -2800,9 +2800,9 @@
|
|||
"security_recommendations_description": "Improve your account security by following these recommendations.",
|
||||
"session_id": "Session ID",
|
||||
"show_details": "Show details",
|
||||
"sign_in_with_qr": "Sign in with QR code",
|
||||
"sign_in_with_qr": "Link new device",
|
||||
"sign_in_with_qr_button": "Show QR code",
|
||||
"sign_in_with_qr_description": "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.",
|
||||
"sign_in_with_qr_description": "Use a QR code to sign in to another device and set up secure messaging.",
|
||||
"sign_out": "Sign out of this session",
|
||||
"sign_out_all_other_sessions": "Sign out of all other sessions (%(otherSessionsCount)s)",
|
||||
"sign_out_confirm_description": {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,24 @@ NodeList [
|
|||
General
|
||||
</span>
|
||||
</li>,
|
||||
<li
|
||||
aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_TabbedView_tabLabel"
|
||||
data-testid="settings-tab-USER_SESSION_MANAGER_TAB"
|
||||
role="tab"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_sessionsIcon"
|
||||
/>
|
||||
<span
|
||||
class="mx_TabbedView_tabLabel_text"
|
||||
id="mx_tabpanel_USER_SESSION_MANAGER_TAB_label"
|
||||
>
|
||||
Sessions
|
||||
</span>
|
||||
</li>,
|
||||
<li
|
||||
aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"
|
||||
aria-selected="false"
|
||||
|
|
@ -128,24 +146,6 @@ NodeList [
|
|||
Security & Privacy
|
||||
</span>
|
||||
</li>,
|
||||
<li
|
||||
aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"
|
||||
aria-selected="false"
|
||||
class="mx_AccessibleButton mx_TabbedView_tabLabel"
|
||||
data-testid="settings-tab-USER_SESSION_MANAGER_TAB"
|
||||
role="tab"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
class="mx_TabbedView_maskedIcon mx_UserSettingsDialog_sessionsIcon"
|
||||
/>
|
||||
<span
|
||||
class="mx_TabbedView_tabLabel_text"
|
||||
id="mx_tabpanel_USER_SESSION_MANAGER_TAB_label"
|
||||
>
|
||||
Sessions
|
||||
</span>
|
||||
</li>,
|
||||
<li
|
||||
aria-controls="mx_tabpanel_USER_LABS_TAB"
|
||||
aria-selected="false"
|
||||
|
|
|
|||
|
|
@ -8,14 +8,7 @@ exports[`<LoginWithQRFlow /> errors renders data_mismatch 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -57,14 +50,7 @@ exports[`<LoginWithQRFlow /> errors renders expired 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -106,14 +92,7 @@ exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -155,14 +134,7 @@ exports[`<LoginWithQRFlow /> errors renders invalid_code 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -204,14 +176,7 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -253,14 +218,7 @@ exports[`<LoginWithQRFlow /> errors renders other_device_not_signed_in 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -302,14 +260,7 @@ exports[`<LoginWithQRFlow /> errors renders rate_limited 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -351,14 +302,7 @@ exports[`<LoginWithQRFlow /> errors renders unknown 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -400,14 +344,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_algorithm 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -449,14 +386,7 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_transport 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -498,14 +428,7 @@ exports[`<LoginWithQRFlow /> errors renders user_cancelled 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -547,14 +470,7 @@ exports[`<LoginWithQRFlow /> errors renders user_declined 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="error"
|
||||
/>
|
||||
Connection failed
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -598,35 +514,32 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
|
|||
class=""
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
class="mx_LoginWithQR_heading"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_breadcrumbs"
|
||||
>
|
||||
Sessions
|
||||
/
|
||||
Link new device
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
Sign in with QR code
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
<p>
|
||||
Scan the QR code below with your device that's signed out.
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
Start at the sign in screen
|
||||
</li>
|
||||
<li>
|
||||
Select 'Scan QR code'
|
||||
</li>
|
||||
<li>
|
||||
Review and approve the sign in
|
||||
</li>
|
||||
</ol>
|
||||
<h1>
|
||||
Scan the QR code with another device
|
||||
</h1>
|
||||
<div
|
||||
class="mx_LoginWithQR_qrWrapper"
|
||||
>
|
||||
|
|
@ -640,6 +553,26 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ol>
|
||||
<li>
|
||||
Open Element on your other device
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
Select "
|
||||
<b>
|
||||
Scan QR code
|
||||
</b>
|
||||
"
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
Point the camera at the QR code shown here
|
||||
</li>
|
||||
<li>
|
||||
Follow the remaining instructions to verify your other device
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_buttons"
|
||||
|
|
@ -656,14 +589,7 @@ exports[`<LoginWithQRFlow /> renders code when connected 1`] = `
|
|||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<h1>
|
||||
<div
|
||||
class="normal"
|
||||
/>
|
||||
Devices connected
|
||||
</h1>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
>
|
||||
|
|
@ -720,17 +646,25 @@ exports[`<LoginWithQRFlow /> renders spinner while connecting 1`] = `
|
|||
class=""
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
class="mx_LoginWithQR_heading"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_breadcrumbs"
|
||||
>
|
||||
Sessions
|
||||
/
|
||||
Link new device
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
|
|
@ -782,17 +716,25 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
|
|||
class=""
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
class="mx_LoginWithQR_heading"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_breadcrumbs"
|
||||
>
|
||||
Sessions
|
||||
/
|
||||
Link new device
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
|
|
@ -832,17 +774,25 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
|
|||
class=""
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
class="mx_LoginWithQR_heading"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_breadcrumbs"
|
||||
>
|
||||
Sessions
|
||||
/
|
||||
Link new device
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
|
|
@ -894,17 +844,25 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
|
|||
class="mx_LoginWithQR_centreTitle"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
class="mx_LoginWithQR_heading"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_breadcrumbs"
|
||||
>
|
||||
Sessions
|
||||
/
|
||||
Link new device
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
Success
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
|
|
@ -947,17 +905,25 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
|
|||
class=""
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
class="mx_LoginWithQR_heading"
|
||||
>
|
||||
<div />
|
||||
<div
|
||||
class="mx_AccessibleButton mx_LoginWithQR_BackButton"
|
||||
data-testid="back-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Back"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_breadcrumbs"
|
||||
>
|
||||
Sessions
|
||||
/
|
||||
Link new device
|
||||
</div>
|
||||
</div>
|
||||
<h1>
|
||||
Sign in with QR code
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="mx_LoginWithQR_main"
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ exports[`<LoginWithQRSection /> should render panel get_login_token + .well-know
|
|||
<h3
|
||||
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Sign in with QR code
|
||||
Link new device
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -29,13 +29,17 @@ exports[`<LoginWithQRSection /> should render panel get_login_token + .well-know
|
|||
<p
|
||||
class="mx_SettingsTab_subsectionText"
|
||||
>
|
||||
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.
|
||||
Use a QR code to sign in to another device and set up secure messaging.
|
||||
</p>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
Show QR code
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,7 +59,7 @@ exports[`<LoginWithQRSection /> should render panel get_login_token + MSC3886 1`
|
|||
<h3
|
||||
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
|
||||
>
|
||||
Sign in with QR code
|
||||
Link new device
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -67,13 +71,17 @@ exports[`<LoginWithQRSection /> should render panel get_login_token + MSC3886 1`
|
|||
<p
|
||||
class="mx_SettingsTab_subsectionText"
|
||||
>
|
||||
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.
|
||||
Use a QR code to sign in to another device and set up secure messaging.
|
||||
</p>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
height="20"
|
||||
width="20"
|
||||
/>
|
||||
Show QR code
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1534,7 +1534,8 @@ describe("<SessionManagerTab />", () => {
|
|||
// wait for versions call to settle
|
||||
await flushPromises();
|
||||
|
||||
expect(getByText("Sign in with QR code")).toBeTruthy();
|
||||
expect(getByText("Link new device")).toBeTruthy();
|
||||
expect(getByText("Show QR code")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("enters qr code login section when show QR code button clicked", async () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue