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>
This commit is contained in:
Michael Telatynski
@@ -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": {
|
||||
|
||||
Reference in New Issue
Block a user