From ea4d97fa73b17a1ebe6dfda4acfbf760da089341 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Fri, 31 Jan 2020 15:04:44 +0000
Subject: [PATCH] Hack in a layout option

---
 .../structures/auth/CompleteSecurity.js       |  1 +
 .../views/dialogs/DeviceVerifyOwnDialog.js    |  1 +
 .../views/right_panel/EncryptionPanel.js      |  4 ++-
 .../views/right_panel/VerificationPanel.js    | 29 +++++++++++++++++++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js
index 18000be68e..1443db0613 100644
--- a/src/components/structures/auth/CompleteSecurity.js
+++ b/src/components/structures/auth/CompleteSecurity.js
@@ -140,6 +140,7 @@ export default class CompleteSecurity extends React.Component {
         if (this.state.verificationRequest) {
             const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
             body = <EncryptionPanel
+                layout="dialog"
                 verificationRequest={this.state.verificationRequest}
                 onClose={this.props.onFinished}
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
diff --git a/src/components/views/dialogs/DeviceVerifyOwnDialog.js b/src/components/views/dialogs/DeviceVerifyOwnDialog.js
index ca562062a8..4a75cc16ec 100644
--- a/src/components/views/dialogs/DeviceVerifyOwnDialog.js
+++ b/src/components/views/dialogs/DeviceVerifyOwnDialog.js
@@ -28,6 +28,7 @@ export default class DeviceVerifyOwnDialog extends React.Component {
     render() {
         const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
         return <EncryptionPanel
+            layout="dialog"
             verificationRequest={this.props.verificationRequest}
             onClose={this.props.onFinished}
             member={MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId)}
diff --git a/src/components/views/right_panel/EncryptionPanel.js b/src/components/views/right_panel/EncryptionPanel.js
index 2b3196f4c1..2e9365fca3 100644
--- a/src/components/views/right_panel/EncryptionPanel.js
+++ b/src/components/views/right_panel/EncryptionPanel.js
@@ -30,7 +30,7 @@ import {_t} from "../../../languageHandler";
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
-const EncryptionPanel = ({verificationRequest, member, onClose}) => {
+const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
     const [request, setRequest] = useState(verificationRequest);
     useEffect(() => {
         setRequest(verificationRequest);
@@ -77,6 +77,7 @@ const EncryptionPanel = ({verificationRequest, member, onClose}) => {
     } else {
         return (
             <VerificationPanel
+                layout={layout}
                 onClose={onClose}
                 member={member}
                 request={request}
@@ -89,6 +90,7 @@ EncryptionPanel.propTypes = {
     member: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired,
     verificationRequest: PropTypes.object,
+    layout: PropTypes.string,
 };
 
 export default EncryptionPanel;
diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js
index ad1aaf598c..b007b6b54c 100644
--- a/src/components/views/right_panel/VerificationPanel.js
+++ b/src/components/views/right_panel/VerificationPanel.js
@@ -31,9 +31,11 @@ import {
     PHASE_CANCELLED, VerificationRequest,
 } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import Spinner from "../elements/Spinner";
+import AccessibleButton from "../elements/AccessibleButton";
 
 export default class VerificationPanel extends React.PureComponent {
     static propTypes = {
+        layout: PropTypes.string,
         request: PropTypes.object.isRequired,
         member: PropTypes.object.isRequired,
         phase: PropTypes.oneOf([
@@ -69,6 +71,33 @@ export default class VerificationPanel extends React.PureComponent {
         const {member} = this.props;
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
+        if (this.props.layout === 'dialog') {
+            // HACK: This is a terrible idea.
+            let qrCode = <div className='mx_VerificationQREmojiOptions_noQR'><Spinner /></div>;
+            if (this.state.qrCodeProps) {
+                qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
+            }
+            return (
+                <div>
+                    {_t("Verify this session by completing one of the following:")}
+                    <div className='mx_IncomingSasDialog_startOptions'>
+                        <div className='mx_IncomingSasDialog_startOption'>
+                            <p>{_t("Scan this unique code")}</p>
+                            {qrCode}
+                        </div>
+                        <div className='mx_IncomingSasDialog_betweenText'>{_t("or")}</div>
+                        <div className='mx_IncomingSasDialog_startOption'>
+                            <p>{_t("Compare unique emoji")}</p>
+                            <span className='mx_IncomingSasDialog_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
+                            <AccessibleButton onClick={this._startSAS} kind='primary'>
+                                {_t("Start")}
+                            </AccessibleButton>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
         let button;
         if (pending) {
             button = <Spinner />;