From 9b54d15fcd2395fe9b5465f630db3e1044c43664 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 26 Mar 2020 16:51:24 +0100
Subject: [PATCH] add cancel button to verification panel

---
 .../views/right_panel/_VerificationPanel.scss | 15 +++++++++
 .../views/right_panel/EncryptionPanel.js      | 32 ++++++++++++++-----
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 2a733d11a7..a717495e43 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -15,6 +15,21 @@ limitations under the License.
 */
 
 .mx_UserInfo {
+    .mx_EncryptionPanel_cancel {
+        mask: url('$(res)/img/feather-customised/cancel.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: cover;
+        width: 14px;
+        height: 14px;
+        background-color: $dialog-close-fg-color;
+        cursor: pointer;
+        position: absolute;
+        z-index: 100;
+        top: 14px;
+        right: 14px;
+    }
+
     .mx_VerificationPanel_verified_section .mx_E2EIcon {
         // Override general user info margin
         margin: 0 auto !important;
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 3a4aa2edc3..7ee9225a38 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -84,6 +84,18 @@ const EncryptionPanel = (props) => {
     }, [onClose, request]);
     useEventEmitter(request, "change", changeHandler);
 
+    const onCancel = useCallback(function() {
+        if (request) {
+            request.cancel();
+        }
+    }, [request]);
+
+    let cancelButton;
+    if (request && request.pending) {
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+        cancelButton = <AccessibleButton className="mx_EncryptionPanel_cancel" onClick={onCancel} title={_t('Cancel')}></AccessibleButton>;
+    }
+
     const onStartVerification = useCallback(async () => {
         setRequesting(true);
         const cli = MatrixClientPeg.get();
@@ -98,14 +110,18 @@ const EncryptionPanel = (props) => {
         (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
-        return <EncryptionInfo
-            isRoomEncrypted={isRoomEncrypted}
-            onStartVerification={onStartVerification}
-            member={member}
-            waitingForOtherParty={requested && initiatedByMe}
-            waitingForNetwork={requested && !initiatedByMe} />;
+        return <React.Fragment>
+            {cancelButton}
+            <EncryptionInfo
+                isRoomEncrypted={isRoomEncrypted}
+                onStartVerification={onStartVerification}
+                member={member}
+                waitingForOtherParty={requested && initiatedByMe}
+                waitingForNetwork={requested && !initiatedByMe} />
+        </React.Fragment>;
     } else {
-        return (
+        return <React.Fragment>
+            {cancelButton}
             <VerificationPanel
                 isRoomEncrypted={isRoomEncrypted}
                 layout={layout}
@@ -114,7 +130,7 @@ const EncryptionPanel = (props) => {
                 request={request}
                 key={request.channel.transactionId}
                 phase={phase} />
-        );
+        </React.Fragment>;
     }
 };
 EncryptionPanel.propTypes = {