imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

6
src/components/views/messages/MKeyVerificationRequest.js
View file

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

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

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

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

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

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

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

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

@ -48,6 +48,11 @@ export default class VerificationShowSas extends React.Component {
this.props.onDone();
};
onDontMatchClick = () => {
this.setState({ cancelling: true });
this.props.onCancel();
};
render() {
let sasDisplay;
let sasCaption;
@ -98,9 +103,14 @@ export default class VerificationShowSas extends React.Component {
}
let confirm;
if (this.state.pending) {
const {displayName} = this.props;
const text = _t("Waiting for %(displayName)s to verify…", {displayName});
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});
} else {
text = _t("Cancelling…");
}
confirm = <PendingActionSpinner text={text} />;
} else {
// 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}
primaryButtonClass="mx_UserInfo_wideButton"
cancelButton={_t("They don't match")}
onCancel={this.props.onCancel}
onCancel={this.onDontMatchClick}
cancelButtonClass="mx_UserInfo_wideButton"
/>;
}