Merge pull request #4126 from matrix-org/bwindels/verifuifeedbackonlag

Improve UI feedback while waiting for network
This commit is contained in:
Bruno Windels 2020-02-25 17:08:06 +00:00 committed by GitHub
commit 17d55abed7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 38 additions and 16 deletions

View file

@ -62,8 +62,8 @@ export default class MKeyVerificationRequest extends React.Component {
const request = this.props.mxEvent.verificationRequest; const request = this.props.mxEvent.verificationRequest;
if (request) { if (request) {
try { try {
await request.accept();
this._openRequest(); this._openRequest();
await request.accept();
} catch (err) { } catch (err) {
console.error(err.message); console.error(err.message);
} }
@ -136,9 +136,9 @@ export default class MKeyVerificationRequest extends React.Component {
} else if (request.cancelled) { } else if (request.cancelled) {
stateLabel = this._cancelledLabel(request.cancellingUserId); stateLabel = this._cancelledLabel(request.cancellingUserId);
} else if (request.accepting) { } else if (request.accepting) {
stateLabel = _t("accepting …"); stateLabel = _t("Accepting …");
} else if (request.declining) { } else if (request.declining) {
stateLabel = _t("declining …"); stateLabel = _t("Declining …");
} }
stateNode = (<div className="mx_cryptoEvent_state">{stateLabel}</div>); stateNode = (<div className="mx_cryptoEvent_state">{stateLabel}</div>);
} }

View file

@ -28,12 +28,17 @@ export const PendingActionSpinner = ({text}) => {
</div>; </div>;
}; };
const EncryptionInfo = ({pending, member, onStartVerification}) => { const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStartVerification}) => {
let content; let content;
if (pending) { if (waitingForOtherParty || waitingForNetwork) {
const text = _t("Waiting for %(displayName)s to accept…", { let text;
if (waitingForOtherParty) {
text = _t("Waiting for %(displayName)s to accept…", {
displayName: member.displayName || member.name || member.userId, displayName: member.displayName || member.name || member.userId,
}); });
} else {
text = _t("Accepting…");
}
content = <PendingActionSpinner text={text} />; content = <PendingActionSpinner text={text} />;
} else { } else {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');

View file

@ -76,8 +76,13 @@ const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
}, [member.userId]); }, [member.userId]);
const requested = request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined); const requested = request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined);
const initiatedByMe = request && request.initiatedByMe;
if (!request || requested) { if (!request || requested) {
return <EncryptionInfo onStartVerification={onStartVerification} member={member} pending={requested} />; return <EncryptionInfo
onStartVerification={onStartVerification}
member={member}
waitingForOtherParty={requested && initiatedByMe}
waitingForNetwork={requested && !initiatedByMe} />;
} else { } else {
return ( return (
<VerificationPanel <VerificationPanel

View file

@ -78,7 +78,6 @@ export default class VerificationRequestToast extends React.PureComponent {
// no room id for to_device requests // no room id for to_device requests
const cli = MatrixClientPeg.get(); const cli = MatrixClientPeg.get();
try { try {
await request.accept();
if (request.channel.roomId) { if (request.channel.roomId) {
dis.dispatch({ dis.dispatch({
action: 'view_room', action: 'view_room',
@ -99,6 +98,7 @@ export default class VerificationRequestToast extends React.PureComponent {
verificationRequest: request, verificationRequest: request,
}, null, /* priority = */ false, /* static = */ true); }, null, /* priority = */ false, /* static = */ true);
} }
await request.accept();
} catch (err) { } catch (err) {
console.error(err.message); console.error(err.message);
} }

View file

@ -48,6 +48,11 @@ export default class VerificationShowSas extends React.Component {
this.props.onDone(); this.props.onDone();
}; };
onDontMatchClick = () => {
this.setState({ cancelling: true });
this.props.onCancel();
};
render() { render() {
let sasDisplay; let sasDisplay;
let sasCaption; let sasCaption;
@ -98,9 +103,14 @@ export default class VerificationShowSas extends React.Component {
} }
let confirm; let confirm;
if (this.state.pending || this.state.cancelling) {
let text;
if (this.state.pending) { if (this.state.pending) {
const {displayName} = this.props; const {displayName} = this.props;
const text = _t("Waiting for %(displayName)s to verify…", {displayName}); text = _t("Waiting for %(displayName)s to verify…", {displayName});
} else {
text = _t("Cancelling…");
}
confirm = <PendingActionSpinner text={text} />; confirm = <PendingActionSpinner text={text} />;
} else { } else {
// FIXME: stop using DialogButtons here once this component is only used in the right panel verification // FIXME: stop using DialogButtons here once this component is only used in the right panel verification
@ -109,7 +119,7 @@ export default class VerificationShowSas extends React.Component {
onPrimaryButtonClick={this.onMatchClick} onPrimaryButtonClick={this.onMatchClick}
primaryButtonClass="mx_UserInfo_wideButton" primaryButtonClass="mx_UserInfo_wideButton"
cancelButton={_t("They don't match")} cancelButton={_t("They don't match")}
onCancel={this.props.onCancel} onCancel={this.onDontMatchClick}
cancelButtonClass="mx_UserInfo_wideButton" cancelButtonClass="mx_UserInfo_wideButton"
/>; />;
} }

View file

@ -465,6 +465,7 @@
"Verify this user by confirming the following number appears on their 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.": "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.", "Unable to find a supported verification method.": "Unable to find a supported verification method.",
"Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…", "Waiting for %(displayName)s to verify…": "Waiting for %(displayName)s to verify…",
"Cancelling…": "Cancelling…",
"They match": "They match", "They match": "They match",
"They don't match": "They don't match", "They don't match": "They don't match",
"To be secure, do this in person or use a trusted way to communicate.": "To be secure, do this in person or use a trusted way to communicate.", "To be secure, do this in person or use a trusted way to communicate.": "To be secure, do this in person or use a trusted way to communicate.",
@ -1165,6 +1166,7 @@
"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.", "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.", "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 %(displayName)s to accept…": "Waiting for %(displayName)s to accept…", "Waiting for %(displayName)s to accept…": "Waiting for %(displayName)s to accept…",
"Accepting…": "Accepting…",
"Start Verification": "Start Verification", "Start Verification": "Start Verification",
"Messages in this room are end-to-end encrypted.": "Messages in this room are end-to-end encrypted.", "Messages in this room are end-to-end encrypted.": "Messages in this room are end-to-end encrypted.",
"Your messages are secured and only you and the recipient have the unique keys to unlock them.": "Your messages are secured and only you and the recipient have the unique keys to unlock them.", "Your messages are secured and only you and the recipient have the unique keys to unlock them.": "Your messages are secured and only you and the recipient have the unique keys to unlock them.",
@ -1248,8 +1250,8 @@
"You cancelled": "You cancelled", "You cancelled": "You cancelled",
"%(name)s declined": "%(name)s declined", "%(name)s declined": "%(name)s declined",
"%(name)s cancelled": "%(name)s cancelled", "%(name)s cancelled": "%(name)s cancelled",
"accepting …": "accepting …", "Accepting …": "Accepting …",
"declining …": "declining …", "Declining …": "Declining …",
"%(name)s wants to verify": "%(name)s wants to verify", "%(name)s wants to verify": "%(name)s wants to verify",
"You sent a verification request": "You sent a verification request", "You sent a verification request": "You sent a verification request",
"Error decrypting video": "Error decrypting video", "Error decrypting video": "Error decrypting video",