Update strings for the verification dialog (#30880)

* Change 'Verify Session' to 'Start Verification'

* Update strings for the verification dialog

This completes the Element Web part of
https://github.com/element-hq/element-meta/issues/2898

* fixup! Update strings for the verification dialog

Remove separate _unsent string
This commit is contained in:
Andy Balaam
2025-09-29 12:58:54 +00:00
committed by GitHub
parent dd8612d76b
commit 1415354f2a
11 changed files with 109 additions and 134 deletions
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react";
import { VerificationPhase, VerificationRequestEvent, type VerificationRequest } from "matrix-js-sdk/src/crypto-api";
import { VerificationMethod } from "matrix-js-sdk/src/types";
import { type User } from "matrix-js-sdk/src/matrix";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -111,10 +112,27 @@ export default class VerificationRequestDialog extends React.Component<IProps, I
private dialogTitle(request?: VerificationRequest): string {
if (request?.isSelfVerification) {
if (request.phase === VerificationPhase.Cancelled) {
return _t("encryption|verification|verification_dialog_title_failed");
} else {
return _t("encryption|verification|verification_dialog_title_device");
switch (request.phase) {
case VerificationPhase.Ready:
return _t("encryption|verification|verification_dialog_title_choose");
case VerificationPhase.Done:
return _t("encryption|verification|verification_dialog_title_verified");
case VerificationPhase.Started:
switch (request.chosenMethod) {
case VerificationMethod.Reciprocate:
return _t("encryption|verification|verification_dialog_title_confirm_green_shield");
case VerificationMethod.Sas:
return _t("encryption|verification|verification_dialog_title_compare_emojis");
default:
return _t("encryption|verification|verification_dialog_title_device");
}
case VerificationPhase.Unsent:
case VerificationPhase.Requested:
return _t("encryption|verification|verification_dialog_title_start_on_other_device");
case VerificationPhase.Cancelled:
return _t("encryption|verification|verification_dialog_title_failed");
default:
return _t("encryption|verification|verification_dialog_title_device");
}
} else {
return _t("encryption|verification|verification_dialog_title_user");
@@ -43,7 +43,7 @@ const EncryptionInfo: React.FC<IProps> = ({
}: IProps) => {
let content: JSX.Element;
if (waitingForOtherParty && isSelfVerification) {
content = <div>{_t("encryption|verification|self_verification_hint")}</div>;
content = <div>{_t("encryption|verification|once_accepted_can_continue")}</div>;
} else if (waitingForOtherParty || waitingForNetwork) {
let text: string;
if (waitingForOtherParty) {
@@ -126,7 +126,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
) : null;
return (
<div>
{_t("encryption|verification|qr_or_sas_header")}
{_t("encryption|verification|verify_by_completing_one_of")}
<div className="mx_VerificationPanel_QRPhase_startOptions">
{qrBlockDialog}
{or}
@@ -224,7 +224,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
private renderQRReciprocatePhase(): JSX.Element {
const { member, request } = this.props;
const description = request.isSelfVerification
? _t("encryption|verification|qr_reciprocate_same_shield_device")
? _t("encryption|verification|qr_reciprocate_check_again_device")
: _t("encryption|verification|qr_reciprocate_same_shield_user", {
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
});
@@ -236,19 +236,18 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
<p>{description}</p>
<E2EIcon isUser={true} status={E2EStatus.Verified} size={128} hideTooltip={true} />
<div className="mx_VerificationPanel_reciprocateButtons">
<AccessibleButton
kind="danger"
disabled={this.state.reciprocateButtonClicked}
onClick={this.onReciprocateNoClick}
>
{_t("action|no")}
</AccessibleButton>
<AccessibleButton
kind="primary"
disabled={this.state.reciprocateButtonClicked}
onClick={this.onReciprocateYesClick}
>
{_t("action|yes")}
{_t("encryption|verification|qr_reciprocate_yes")}
</AccessibleButton>
<AccessibleButton
disabled={this.state.reciprocateButtonClicked}
onClick={this.onReciprocateNoClick}
>
{_t("encryption|verification|qr_reciprocate_no")}
</AccessibleButton>
</div>
</React.Fragment>
@@ -260,12 +259,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
</p>
);
}
return (
<div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">
<h3>{_t("encryption|verification|scan_qr")}</h3>
{body}
</div>
);
return <div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">{body}</div>;
}
private renderVerifiedPhase(): JSX.Element {
@@ -282,18 +276,7 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
let description: string;
if (request.isSelfVerification) {
const device = this.state.otherDeviceDetails;
if (!device) {
// This can happen if the device is logged out while we're still showing verification
// UI for it.
logger.warn("Verified device we don't know about: " + this.props.request.otherDeviceId);
description = _t("encryption|verification|successful_own_device");
} else {
description = _t("encryption|verification|successful_device", {
deviceName: device.displayName,
deviceId: device.deviceId,
});
}
description = _t("encryption|verification|now_you_can");
} else {
description = _t("encryption|verification|successful_user", {
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
@@ -313,35 +296,9 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
}
private renderCancelledPhase(): JSX.Element {
const { member, request } = this.props;
let startAgainInstruction: string;
if (request.isSelfVerification) {
startAgainInstruction = _t("encryption|verification|prompt_self");
} else {
startAgainInstruction = _t("encryption|verification|prompt_user");
}
let text: string;
if (request.cancellationCode === "m.timeout") {
text = _t("encryption|verification|timed_out") + ` ${startAgainInstruction}`;
} else if (request.cancellingUserId === request.otherUserId) {
if (request.isSelfVerification) {
text = _t("encryption|verification|cancelled_self");
} else {
text = _t("encryption|verification|cancelled_user", {
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
});
}
text = `${text} ${startAgainInstruction}`;
} else {
text = _t("encryption|verification|cancelled") + ` ${startAgainInstruction}`;
}
return (
<div className="mx_UserInfo_container">
<h3>{_t("common|verification_cancelled")}</h3>
<p>{text}</p>
<p>{_t("encryption|verification|cancelled_verification")}</p>
<AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
{_t("action|got_it")}
@@ -177,7 +177,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
detail={detail}
primaryLabel={
request.isSelfVerification || !request.roomId
? _t("encryption|verification|request_toast_accept")
? _t("encryption|verification|request_toast_start_verification")
: _t("encryption|verification|request_toast_accept_user")
}
onPrimaryClick={this.accept}
@@ -119,7 +119,7 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
</div>
);
sasCaption = this.props.isSelf
? _t("encryption|verification|sas_emoji_caption_self")
? _t("encryption|verification|confirm_the_emojis")
: _t("encryption|verification|sas_emoji_caption_user");
} else if (this.props.sas.decimal) {
const numberBlocks = this.props.sas.decimal.map((num, i) => <span key={i}>{num}</span>);