PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #4342 from matrix-org/bwindels/selfverifux

Browse source 
Adjust copy & UX for self-verification
This commit is contained in:
Bruno Windels 2020-04-03 16:01:53 +00:00 committed by GitHub
commit 37781f2064
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 146 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
res/css/views/right_panel/_VerificationPanel.scss
View file

@ -75,6 +75,7 @@ limitations under the License.
margin-top: 10px;
margin-bottom: 10px;
align-items: stretch;
justify-content: center;
> .mx_VerificationPanel_QRPhase_betweenText {
width: 50px;
@ -90,10 +91,12 @@ limitations under the License.
border-radius: 10px;
flex: 1;
display: flex;
padding: 10px;
padding: 20px;
align-items: center;
flex-direction: column;
position: relative;
max-width: 310px;
justify-content: space-between;
canvas, .mx_VerificationPanel_QRPhase_noQR {
width: 220px !important;
@ -106,19 +109,15 @@ limitations under the License.
}
> p {
margin-top: 0;
font-weight: 700;
}
.mx_VerificationPanel_QRPhase_helpText {
font-size: $font-14px;
margin-top: 71px;
margin: 30px 0;
text-align: center;
}
.mx_AccessibleButton {
position: absolute;
bottom: 30px;
}
}
}

2
src/components/structures/MatrixChat.js
View file

@ -1521,7 +1521,7 @@ export default createReactClass({
} else if (request.pending) {
ToastStore.sharedInstance().addOrReplaceToast({
key: 'verifreq_' + request.channel.transactionId,
title: _t("Verification Request"),
title: request.isSelfVerification ? _t("Self-verification request") : _t("Verification Request"),
icon: "verification",
props: {request},
component: sdk.getComponent("toasts.VerificationRequestToast"),

17
src/components/views/dialogs/VerificationRequestDialog.js
View file

@ -30,16 +30,29 @@ export default class VerificationRequestDialog extends React.Component {
constructor(...args) {
super(...args);
this.onFinished = this.onFinished.bind(this);
this.state = {};
if (this.props.verificationRequest) {
this.state.verificationRequest = this.props.verificationRequest;
} else if (this.props.verificationRequestPromise) {
this.props.verificationRequestPromise.then(r => {
this.setState({verificationRequest: r});
});
}
}
render() {
const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
const request = this.state.verificationRequest;
const otherUserId = request && request.otherUserId;
const member = this.props.member ||
MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId);
otherUserId && MatrixClientPeg.get().getUser(otherUserId);
const title = request && request.isSelfVerification ?
_t("Verify this session") : _t("Verification Request");
return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
contentId="mx_Dialog_content"
title={_t("Verification Request")}
title={title}
hasCancel={true}
>
<EncryptionPanel

24
src/components/views/right_panel/EncryptionInfo.js
View file

@ -28,14 +28,26 @@ export const PendingActionSpinner = ({text}) => {
</div>;
};
const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStartVerification, isRoomEncrypted}) => {
const EncryptionInfo = ({
waitingForOtherParty,
waitingForNetwork,
member,
onStartVerification,
isRoomEncrypted,
inDialog,
isSelfVerification,
}) => {
let content;
if (waitingForOtherParty || waitingForNetwork) {
let text;
if (waitingForOtherParty) {
text = _t("Waiting for %(displayName)s to accept…", {
displayName: member.displayName || member.name || member.userId,
});
if (isSelfVerification) {
text = _t("Waiting for you to accept on your other session…");
} else {
text = _t("Waiting for %(displayName)s to accept…", {
displayName: member.displayName || member.name || member.userId,
});
}
} else {
text = _t("Accepting…");
}
@ -66,6 +78,10 @@ const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStar
);
}
if (inDialog) {
return content;
}
return <React.Fragment>
<div className="mx_UserInfo_container">
<h3>{_t("Encryption")}</h3>

17
src/components/views/right_panel/EncryptionPanel.js
View file

@ -22,6 +22,7 @@ import VerificationPanel from "./VerificationPanel";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import {ensureDMExists} from "../../../createRoom";
import {useEventEmitter} from "../../../hooks/useEventEmitter";
import {useAsyncMemo} from "../../../hooks/useAsyncMemo";
import Modal from "../../../Modal";
import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
import * as sdk from "../../../index";
@ -45,6 +46,12 @@ const EncryptionPanel = (props) => {
}
}, [verificationRequest]);
const deviceId = request && request.channel.deviceId;
const device = useAsyncMemo(() => {
const cli = MatrixClientPeg.get();
return cli.getStoredDevice(cli.getUserId(), deviceId);
}, [deviceId]);
useEffect(() => {
async function awaitPromise() {
setRequesting(true);
@ -112,6 +119,9 @@ const EncryptionPanel = (props) => {
const requested =
(!request && isRequesting) ||
(request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
const isSelfVerification = request ?
request.isSelfVerification :
member.userId === MatrixClientPeg.get().getUserId();
if (!request || requested) {
const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
return (<React.Fragment>
@ -120,8 +130,10 @@ const EncryptionPanel = (props) => {
isRoomEncrypted={isRoomEncrypted}
onStartVerification={onStartVerification}
member={member}
isSelfVerification={isSelfVerification}
waitingForOtherParty={requested && initiatedByMe}
waitingForNetwork={requested && !initiatedByMe} />
waitingForNetwork={requested && !initiatedByMe}
inDialog={inDialog} />
</React.Fragment>);
} else {
return (<React.Fragment>
@ -134,7 +146,8 @@ const EncryptionPanel = (props) => {
request={request}
key={request.channel.transactionId}
inDialog={inDialog}
phase={phase} />
phase={phase}
device={device} />
</React.Fragment>);
}
};

61
src/components/views/right_panel/VerificationPanel.js
View file

@ -18,7 +18,6 @@ import React from "react";
import PropTypes from "prop-types";
import * as sdk from '../../../index';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {verificationMethods} from 'matrix-js-sdk/src/crypto';
import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
@ -155,12 +154,8 @@ export default class VerificationPanel extends React.PureComponent {
this.state.reciprocateQREvent.cancel();
};
get _isSelfVerification() {
return this.props.request.otherUserId === MatrixClientPeg.get().getUserId();
}
renderQRReciprocatePhase() {
const {member} = this.props;
const {member, request} = this.props;
let Button;
// a bit of a hack, but the FormButton should only be used in the right panel
// they should probably just be the same component with a css class applied to it?
@ -169,7 +164,7 @@ export default class VerificationPanel extends React.PureComponent {
} else {
Button = sdk.getComponent("elements.FormButton");
}
const description = this._isSelfVerification ?
const description = request.isSelfVerification ?
_t("Almost there! Is your other session showing the same shield?") :
_t("Almost there! Is %(displayName)s showing the same shield?", {
displayName: member.displayName || member.name || member.userId,
@ -204,25 +199,33 @@ export default class VerificationPanel extends React.PureComponent {
}
renderVerifiedPhase() {
const {member} = this.props;
const {member, request} = this.props;
let text;
if (this.props.isRoomEncrypted) {
text = _t("Verify all users in a room to ensure it's secure.");
} else {
text = _t("In encrypted rooms, verify all users to ensure it’s secure.");
if (!request.isSelfVerification) {
if (this.props.isRoomEncrypted) {
text = _t("Verify all users in a room to ensure it's secure.");
} else {
text = _t("In encrypted rooms, verify all users to ensure it’s secure.");
}
}
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const description = request.isSelfVerification ?
_t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
deviceName: this.props.device.getDisplayName(),
deviceId: this.props.device.deviceId,
}):
_t("You've successfully verified %(displayName)s!", {
displayName: member.displayName || member.name || member.userId,
});
return (
<div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
<h3>{_t("Verified")}</h3>
<p>{_t("You've successfully verified %(displayName)s!", {
displayName: member.displayName || member.name || member.userId,
})}</p>
<p>{description}</p>
<E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
<p>{ text }</p>
{ text ? <p>{ text }</p> : null }
<AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
{_t("Got it")}
</AccessibleButton>
@ -235,15 +238,27 @@ export default class VerificationPanel extends React.PureComponent {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
let startAgainInstruction;
if (request.isSelfVerification) {
startAgainInstruction = _t("Start verification again from the notification.");
} else {
startAgainInstruction = _t("Start verification again from their profile.");
}
let text;
if (request.cancellationCode === "m.timeout") {
text = _t("Verification timed out. Start verification again from their profile.");
text = _t("Verification timed out.") + ` ${startAgainInstruction}`;
} else if (request.cancellingUserId === request.otherUserId) {
text = _t("%(displayName)s cancelled verification. Start verification again from their profile.", {
displayName: member.displayName || member.name || member.userId,
});
if (request.isSelfVerification) {
text = _t("You cancelled verification on your other session.");
} else {
text = _t("%(displayName)s cancelled verification.", {
displayName: member.displayName || member.name || member.userId,
});
}
text = `${text} ${startAgainInstruction}`;
} else {
text = _t("You cancelled verification. Start verification again from their profile.");
text = _t("You cancelled verification.") + ` ${startAgainInstruction}`;
}
return (
@ -279,6 +294,8 @@ export default class VerificationPanel extends React.PureComponent {
onCancel={this._onSasMismatchesClick}
onDone={this._onSasMatchesClick}
inDialog={this.props.inDialog}
isSelf={request.isSelfVerification}
device={this.props.device}
/> : <Spinner />;
return <div className="mx_UserInfo_container">
<h3>{_t("Compare emoji")}</h3>

35
src/components/views/toasts/VerificationRequestToast.js
View file

@ -31,7 +31,7 @@ export default class VerificationRequestToast extends React.PureComponent {
this.state = {counter: Math.ceil(props.request.timeout / 1000)};
}
componentDidMount() {
async componentDidMount() {
const {request} = this.props;
if (request.timeout && request.timeout > 0) {
this._intervalHandle = setInterval(() => {
@ -48,6 +48,11 @@ export default class VerificationRequestToast extends React.PureComponent {
// As a quick & dirty fix, check the toast is still relevant when it mounts (this prevents
// a toast hanging around after logging in if you did a verification as part of login).
this._checkRequestIsPending();
if (request.isSelfVerification) {
const cli = MatrixClientPeg.get();
this.setState({device: await cli.getStoredDevice(cli.getUserId(), request.channel.deviceId)});
}
}
componentWillUnmount() {
@ -107,15 +112,25 @@ export default class VerificationRequestToast extends React.PureComponent {
render() {
const FormButton = sdk.getComponent("elements.FormButton");
const {request} = this.props;
const userId = request.otherUserId;
const roomId = request.channel.roomId;
let nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId;
// for legacy to_device verification requests
if (nameLabel === userId) {
const client = MatrixClientPeg.get();
const user = client.getUser(userId);
if (user && user.displayName) {
nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
let nameLabel;
if (request.isSelfVerification) {
if (this.state.device) {
nameLabel = _t("From %(deviceName)s (%(deviceId)s)", {
deviceName: this.state.device.getDisplayName(),
deviceId: this.state.device.deviceId,
});
}
} else {
const userId = request.otherUserId;
const roomId = request.channel.roomId;
nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId;
// for legacy to_device verification requests
if (nameLabel === userId) {
const client = MatrixClientPeg.get();
const user = client.getUser(userId);
if (user && user.displayName) {
nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
}
}
}
const declineLabel = this.state.counter == 0 ?

15
src/components/views/verification/VerificationShowSas.js
View file

@ -75,7 +75,7 @@ export default class VerificationShowSas extends React.Component {
</div>;
sasCaption = this.props.isSelf ?
_t(
"Confirm the emoji below are displayed on both devices, in the same order:",
"Confirm the emoji below are displayed on both sessions, in the same order:",
):
_t(
"Verify this user by confirming the following emoji appear on their screen.",
@ -89,7 +89,7 @@ export default class VerificationShowSas extends React.Component {
</div>;
sasCaption = this.props.isSelf ?
_t(
"Verify this device by confirming the following number appears on its screen.",
"Verify this session by confirming the following number appears on its screen.",
):
_t(
"Verify this user by confirming the following number appears on their screen.",
@ -107,8 +107,15 @@ export default class VerificationShowSas extends React.Component {
if (this.state.pending || this.state.cancelling) {
let text;
if (this.state.pending) {
const {displayName} = this.props;
text = _t("Waiting for %(displayName)s to verify…", {displayName});
if (this.props.isSelf) {
text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
deviceName: this.props.device.getDisplayName(),
deviceId: this.props.device.deviceId,
});
} else {
const {displayName} = this.props;
text = _t("Waiting for %(displayName)s to verify…", {displayName});
}
} else {
text = _t("Cancelling…");
}

20
src/i18n/strings/en_EN.json
View file

@ -478,11 +478,12 @@
"Compare unique emoji": "Compare unique emoji",
"Compare a unique set of emoji if you don't have a camera on either device": "Compare a unique set of emoji if you don't have a camera on either device",
"Start": "Start",
"Confirm the emoji below are displayed on both devices, in the same order:": "Confirm the emoji below are displayed on both devices, in the same order:",
"Confirm the emoji below are displayed on both sessions, in the same order:": "Confirm the emoji below are displayed on both sessions, in the same order:",
"Verify this user by confirming the following emoji appear on their screen.": "Verify this user by confirming the following emoji appear on their screen.",
"Verify this device by confirming the following number appears on its screen.": "Verify this device by confirming the following number appears on its screen.",
"Verify this session by confirming the following number appears on its screen.": "Verify this session by confirming the following number appears on its screen.",
"Verify this user by confirming the following number appears on their screen.": "Verify this user by confirming the following number appears on their screen.",
"Unable to find a supported verification method.": "Unable to find a supported verification method.",
"Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…": "Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…",
"Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…",
"Cancelling…": "Cancelling…",
"They match": "They match",
@ -559,6 +560,7 @@
"Verify": "Verify",
"Later": "Later",
"Review": "Review",
"From %(deviceName)s (%(deviceId)s)": "From %(deviceName)s (%(deviceId)s)",
"Decline (%(counter)s)": "Decline (%(counter)s)",
"Accept <policyLink /> to continue:": "Accept <policyLink /> to continue:",
"Upload": "Upload",
@ -1212,6 +1214,7 @@
"URL previews are disabled by default for participants in this room.": "URL previews are disabled by default for participants in this room.",
"In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.": "In encrypted rooms, like this one, URL previews are disabled by default to ensure that your homeserver (where the previews are generated) cannot gather information about links you see in this room.",
"When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.",
"Waiting for you to accept on your other session…": "Waiting for you to accept on your other session…",
"Waiting for %(displayName)s to accept…": "Waiting for %(displayName)s to accept…",
"Accepting…": "Accepting…",
"Start Verification": "Start Verification",
@ -1258,12 +1261,16 @@
"Yes": "Yes",
"Verify all users in a room to ensure it's secure.": "Verify all users in a room to ensure it's secure.",
"In encrypted rooms, verify all users to ensure it’s secure.": "In encrypted rooms, verify all users to ensure it’s secure.",
"Verified": "Verified",
"You've successfully verified %(deviceName)s (%(deviceId)s)!": "You've successfully verified %(deviceName)s (%(deviceId)s)!",
"You've successfully verified %(displayName)s!": "You've successfully verified %(displayName)s!",
"Verified": "Verified",
"Got it": "Got it",
"Verification timed out. Start verification again from their profile.": "Verification timed out. Start verification again from their profile.",
"%(displayName)s cancelled verification. Start verification again from their profile.": "%(displayName)s cancelled verification. Start verification again from their profile.",
"You cancelled verification. Start verification again from their profile.": "You cancelled verification. Start verification again from their profile.",
"Start verification again from the notification.": "Start verification again from the notification.",
"Start verification again from their profile.": "Start verification again from their profile.",
"Verification timed out.": "Verification timed out.",
"You cancelled verification on your other session.": "You cancelled verification on your other session.",
"%(displayName)s cancelled verification.": "%(displayName)s cancelled verification.",
"You cancelled verification.": "You cancelled verification.",
"Verification cancelled": "Verification cancelled",
"Compare emoji": "Compare emoji",
"Sunday": "Sunday",
@ -1963,6 +1970,7 @@
"Review terms and conditions": "Review terms and conditions",
"Old cryptography data detected": "Old cryptography data detected",
"Data from an older version of Riot has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.": "Data from an older version of Riot has been detected. This will have caused end-to-end cryptography to malfunction in the older version. End-to-end encrypted messages exchanged recently whilst using the older version may not be decryptable in this version. This may also cause messages exchanged with this version to fail. If you experience problems, log out and back in again. To retain message history, export and re-import your keys.",
"Self-verification request": "Self-verification request",
"Logout": "Logout",
"%(creator)s created and configured the room.": "%(creator)s created and configured the room.",
"Your Communities": "Your Communities",