From 1f65cfb7f69934a06161060e9a205742f47aa93a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 2 Apr 2020 13:00:45 +0200
Subject: [PATCH] polish design and disable buttons after click

---
 .../views/right_panel/_VerificationPanel.scss | 15 ++++++++++
 .../views/right_panel/VerificationPanel.js    | 28 ++++++++++++++++---
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index ba74d46eaf..3313e47c66 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -132,4 +132,19 @@ limitations under the License.
             float: right;
         }
     }
+
+    .mx_VerificationPanel_reciprocate_section {
+        .mx_FormButton {
+            margin: 0 10px;
+            padding: 10px;
+            flex: 1;
+        }
+
+        // show Yes/No buttons next to each other
+        .mx_VerificationPanel_reciprocateButtons {
+            display: flex;
+            flex-direction: row;
+        }
+    }
+
 }
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index e2dd1f0408..103497169f 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -144,6 +144,16 @@ export default class VerificationPanel extends React.PureComponent {
         </React.Fragment>;
     }
 
+    _onReciprocateYesClick = () => {
+        this.setState({reciprocateButtonClicked: true});
+        this.state.reciprocateQREvent.confirm();
+    };
+
+    _onReciprocateNoClick = () => {
+        this.setState({reciprocateButtonClicked: true});
+        this.state.reciprocateQREvent.cancel();
+    };
+
     renderQRReciprocatePhase() {
         const {member} = this.props;
         const FormButton = sdk.getComponent("elements.FormButton");
@@ -152,15 +162,25 @@ export default class VerificationPanel extends React.PureComponent {
         if (this.state.reciprocateQREvent) {
             // riot web doesn't support scanning yet, so assume here we're the client being scanned.
             body = <React.Fragment>
-                <p>{_t("Almost there! Is %(displayName)s show the same shield?", {
+                <p>{_t("Almost there! Is %(displayName)s showing the same shield?", {
                         displayName: member.displayName || member.name || member.userId,
                     })}</p>
                 <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
-                <FormButton label={_t("No")} kind="danger" onClick={this.state.reciprocateQREvent.cancel} />
-                <FormButton label={_t("Yes")} onClick={this.state.reciprocateQREvent.confirm} />
+                <div className="mx_VerificationPanel_reciprocateButtons">
+                    <FormButton
+                        label={_t("No")} kind="danger"
+                        disabled={this.state.reciprocateButtonClicked}
+                        onClick={this._onReciprocateNoClick}
+                    />
+                    <FormButton
+                        label={_t("Yes")}
+                        disabled={this.state.reciprocateButtonClicked}
+                        onClick={this._onReciprocateYesClick}
+                    />
+                </div>
             </React.Fragment>;
         } else {
-            body = <p><Spinner/></p>;
+            body = <p><Spinner /></p>;
         }
         return <div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">
             <h3>{_t("Verify by scanning")}</h3>