Merge pull request #4000 from matrix-org/foldleft/12038-copy

Update copy when the user verifies their own devices
This commit is contained in:
Zoe 2020-01-31 09:57:52 +00:00 committed by GitHub
commit 585a38cd45
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 18 deletions

View file

@ -233,6 +233,7 @@ export default class DeviceVerifyDialog extends React.Component {
sas={this._showSasEvent.sas}
onCancel={this._onCancelClick}
onDone={this._onSasMatchesClick}
isSelf={MatrixClientPeg.get().getUserId() === this.props.userId}
/>;
}

View file

@ -121,6 +121,8 @@ export default class IncomingSasDialog extends React.Component {
const Spinner = sdk.getComponent("views.elements.Spinner");
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
const isSelf = this.props.verifier.userId == MatrixClientPeg.get().getUserId();
let profile;
if (this.state.opponentProfile) {
profile = <div className="mx_IncomingSasDialog_opponentProfile">
@ -148,20 +150,36 @@ export default class IncomingSasDialog extends React.Component {
profile = <Spinner />;
}
const userDetailText = [
<p key="p1">{_t(
"Verify this user to mark them as trusted. " +
"Trusting users gives you extra peace of mind when using " +
"end-to-end encrypted messages.",
)}</p>,
<p key="p2">{_t(
// NB. Below wording adjusted to singular 'session' until we have
// cross-signing
"Verifying this user will mark their session as trusted, and " +
"also mark your session as trusted to them.",
)}</p>,
];
const selfDetailText = [
<p key="p1">{_t(
"Verify this device to mark it as trusted. " +
"Trusting this device gives you and other users extra peace of mind when using " +
"end-to-end encrypted messages.",
)}</p>,
<p key="p2">{_t(
"Verifying this device will mark it as trusted, and users who have verified with " +
"you will trust this device.",
)}</p>,
];
return (
<div>
{profile}
<p>{_t(
"Verify this user to mark them as trusted. " +
"Trusting users gives you extra peace of mind when using " +
"end-to-end encrypted messages.",
)}</p>
<p>{_t(
// NB. Below wording adjusted to singular 'session' until we have
// cross-signing
"Verifying this user will mark their session as trusted, and " +
"also mark your session as trusted to them.",
)}</p>
{isSelf ? selfDetailText : userDetailText}
<DialogButtons
primaryButton={_t('Continue')}
hasCancel={true}
@ -178,6 +196,7 @@ export default class IncomingSasDialog extends React.Component {
sas={this._showSasEvent.sas}
onCancel={this._onCancelClick}
onDone={this._onSasMatchesClick}
isSelf={this.props.verifier.userId == MatrixClientPeg.get().getUserId()}
/>;
}

View file

@ -32,6 +32,7 @@ export default class VerificationShowSas extends React.Component {
onDone: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
sas: PropTypes.object.isRequired,
isSelf: PropTypes.bool,
};
constructor(props) {
@ -66,9 +67,13 @@ export default class VerificationShowSas extends React.Component {
<div className="mx_VerificationShowSas_emojiSas_break" />
{emojiBlocks.slice(4)}
</div>;
sasCaption = _t(
"Verify this user by confirming the following emoji appear on their screen.",
);
sasCaption = this.props.isSelf ?
_t(
"Confirm the emoji below are displayed on both devices, in the same order:",
):
_t(
"Verify this user by confirming the following emoji appear on their screen.",
);
} else if (this.props.sas.decimal) {
const numberBlocks = this.props.sas.decimal.map((num, i) => <span key={i}>
{num}
@ -76,9 +81,13 @@ export default class VerificationShowSas extends React.Component {
sasDisplay = <div className="mx_VerificationShowSas_decimalSas">
{numberBlocks}
</div>;
sasCaption = _t(
"Verify this user by confirming the following number appears on their screen.",
);
sasCaption = this.props.isSelf ?
_t(
"Verify this device by confirming the following number appears on its screen.",
):
_t(
"Verify this user by confirming the following number appears on their screen.",
);
} else {
return <div>
{_t("Unable to find a supported verification method.")}
@ -108,7 +117,9 @@ export default class VerificationShowSas extends React.Component {
return <div className="mx_VerificationShowSas">
<p>{sasCaption}</p>
{sasDisplay}
<p>{_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
<p>{this.props.isSelf ?
"":
_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
{confirm}
</div>;
}