Merge pull request #4072 from matrix-org/bwindels/localecho2

Use local echo in VerificationRequest for accepting/declining a verification request

src/components/views/messages/MKeyVerificationRequest.js

@@ -59,7 +59,6 @@ export default class MKeyVerificationRequest extends React.Component {
     };
 
     _onAcceptClicked = async () => {
-        this.setState({acceptOrCancelClicked: true});
         const request = this.props.mxEvent.verificationRequest;
         if (request) {
             try {
@@ -72,7 +71,6 @@ export default class MKeyVerificationRequest extends React.Component {
     };
 
     _onRejectClicked = async () => {
-        this.setState({acceptOrCancelClicked: true});
         const request = this.props.mxEvent.verificationRequest;
         if (request) {
             try {
@@ -96,10 +94,20 @@ export default class MKeyVerificationRequest extends React.Component {
     _cancelledLabel(userId) {
         const client = MatrixClientPeg.get();
         const myUserId = client.getUserId();
+        const {cancellationCode} = this.props.mxEvent.verificationRequest;
+        const declined = cancellationCode === "m.user";
         if (userId === myUserId) {
-            return _t("You cancelled");
+            if (declined) {
+                return _t("You declined");
+            } else {
+                return _t("You cancelled");
+            }
         } else {
-            return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+            if (declined) {
+                return _t("%(name)s declined", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+            } else {
+                return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+            }
         }
     }
 
@@ -118,15 +126,19 @@ export default class MKeyVerificationRequest extends React.Component {
         let subtitle;
         let stateNode;
 
-        const accepted = request.ready || request.started || request.done;
-        if (accepted || request.cancelled) {
+        if (!request.canAccept) {
             let stateLabel;
+            const accepted = request.ready || request.started || request.done;
             if (accepted) {
                 stateLabel = (<AccessibleButton onClick={this._openRequest}>
                     {this._acceptedLabel(request.receivingUserId)}
                 </AccessibleButton>);
-            } else {
+            } else if (request.cancelled) {
                 stateLabel = this._cancelledLabel(request.cancellingUserId);
+            } else if (request.accepting) {
+                stateLabel = _t("accepting …");
+            } else if (request.declining) {
+                stateLabel = _t("declining …");
             }
             stateNode = (<div className="mx_cryptoEvent_state">{stateLabel}</div>);
         }
@@ -137,11 +149,10 @@ export default class MKeyVerificationRequest extends React.Component {
                 _t("%(name)s wants to verify", {name})}</div>);
             subtitle = (<div className="mx_cryptoEvent_subtitle">{
                 userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId())}</div>);
-            if (request.requested && !request.observeOnly) {
-                const disabled = this.state.acceptOrCancelClicked;
+            if (request.canAccept) {
                 stateNode = (<div className="mx_cryptoEvent_buttons">
-                    <FormButton disabled={disabled} kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
-                    <FormButton disabled={disabled} onClick={this._onAcceptClicked} label={_t("Accept")} />
+                    <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
+                    <FormButton onClick={this._onAcceptClicked} label={_t("Accept")} />
                 </div>);
             }
         } else { // request sent by us

src/components/views/toasts/VerificationRequestToast.js

@@ -58,7 +58,7 @@ export default class VerificationRequestToast extends React.PureComponent {
 
     _checkRequestIsPending = () => {
         const {request} = this.props;
-        if (request.ready || request.done || request.cancelled || request.observeOnly) {
+        if (!request.canAccept) {
             ToastStore.sharedInstance().dismissToast(this.props.toastKey);
         }
     };

src/i18n/strings/en_EN.json

@@ -1240,8 +1240,12 @@
     "%(name)s cancelled verifying": "%(name)s cancelled verifying",
     "You accepted": "You accepted",
     "%(name)s accepted": "%(name)s accepted",
+    "You declined": "You declined",
     "You cancelled": "You cancelled",
+    "%(name)s declined": "%(name)s declined",
     "%(name)s cancelled": "%(name)s cancelled",
+    "accepting …": "accepting …",
+    "declining …": "declining …",
     "%(name)s wants to verify": "%(name)s wants to verify",
     "You sent a verification request": "You sent a verification request",
     "Error decrypting video": "Error decrypting video",