From 9b7ab46a72e1388158649c0be62a0f66b80cd41f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 12 Sep 2016 23:42:24 +0100
Subject: [PATCH] dedicated dialog box for E2E messages

---
 src/component-index.js                        |  1 +
 src/components/views/dialogs/LogoutPrompt.js  |  5 ++
 src/components/views/rooms/EventTile.js       | 57 +------------------
 .../views/rooms/MemberDeviceInfo.js           | 40 ++++++++-----
 src/components/views/rooms/MessageComposer.js |  2 +-
 5 files changed, 35 insertions(+), 70 deletions(-)

diff --git a/src/component-index.js b/src/component-index.js
index 488b85670b..751332de1b 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -49,6 +49,7 @@ module.exports.components['views.create_room.Presets'] = require('./components/v
 module.exports.components['views.create_room.RoomAlias'] = require('./components/views/create_room/RoomAlias');
 module.exports.components['views.dialogs.ChatInviteDialog'] = require('./components/views/dialogs/ChatInviteDialog');
 module.exports.components['views.dialogs.DeactivateAccountDialog'] = require('./components/views/dialogs/DeactivateAccountDialog');
+module.exports.components['views.dialogs.EncryptedEventDialog'] = require('./components/views/dialogs/EncryptedEventDialog');
 module.exports.components['views.dialogs.ErrorDialog'] = require('./components/views/dialogs/ErrorDialog');
 module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/views/dialogs/LogoutPrompt');
 module.exports.components['views.dialogs.MultiInviteDialog'] = require('./components/views/dialogs/MultiInviteDialog');
diff --git a/src/components/views/dialogs/LogoutPrompt.js b/src/components/views/dialogs/LogoutPrompt.js
index 7c4ba18e82..c4bd7a0474 100644
--- a/src/components/views/dialogs/LogoutPrompt.js
+++ b/src/components/views/dialogs/LogoutPrompt.js
@@ -18,6 +18,11 @@ var dis = require("../../../dispatcher");
 
 module.exports = React.createClass({
     displayName: 'LogoutPrompt',
+
+    propTypes: {
+        onFinished: React.PropTypes.func,
+    },
+
     logOut: function() {
         dis.dispatch({action: 'logout'});
         if (this.props.onFinished) {
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 6a266b2f13..44f2050c51 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -363,62 +363,11 @@ module.exports = React.createClass({
     },
 
     onCryptoClicked: function(e) {
-        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        var EncryptedEventDialog = sdk.getComponent("dialogs.EncryptedEventDialog");
         var event = this.props.mxEvent;
 
-        // XXX: gutwrench - is there any reason not to expose this on MatrixClient itself?
-        var device = MatrixClientPeg.get()._crypto.getDeviceByIdentityKey(
-            event.getSender(),
-            event.getWireContent().algorithm,
-            event.getWireContent().sender_key
-        );
-
-        Modal.createDialog(ErrorDialog, {
-            title: "End-to-end encryption information",
-            description: (
-                <div>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td>Sent by</td>
-                                <td>{ event.getSender() }</td>
-                            </tr>
-                            <tr>
-                                <td>Sender device name</td>
-                                <td>{ device.getDisplayName() }</td>
-                            </tr>
-                            <tr>
-                                <td>Sender device ID</td>
-                                <td>{ device.deviceId }</td>
-                            </tr>
-                            <tr>
-                                <td>Sender device verification:</td>
-                                <td>{ MatrixClientPeg.get().isEventSenderVerified(event) ? "verified" : <b>NOT verified</b> }</td>
-                            </tr>
-                            <tr>
-                                <td>Sender device ed25519 fingerprint</td>
-                                <td>{ device.getFingerprint() }</td>
-                            </tr>
-                            <tr>
-                                <td>Sender device curve25519 identity key</td>
-                                <td>{ event.getWireContent().sender_key }</td>
-                            </tr>
-                            <tr>
-                                <td>Algorithm</td>
-                                <td>{ event.getWireContent().algorithm }</td>
-                            </tr>
-                        {
-                            event.getContent().msgtype === 'm.bad.encrypted' ? (
-                            <tr>
-                                <td>Decryption error</td>
-                                <td>{ event.getContent().body }</td>
-                            </tr>
-                            ) : ''
-                        }
-                        </tbody>
-                    </table>
-                </div>
-            )
+        Modal.createDialog(EncryptedEventDialog, {
+            event: event,
         });
     },
 
diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js
index 22bbdd2ce7..927cc90491 100644
--- a/src/components/views/rooms/MemberDeviceInfo.js
+++ b/src/components/views/rooms/MemberDeviceInfo.js
@@ -54,33 +54,33 @@ export default class MemberDeviceInfo extends React.Component {
         var indicator = null, blockButton = null, verifyButton = null;
         if (this.props.device.isBlocked()) {
             blockButton = (
-                <div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblock"
+                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblock"
                   onClick={this.onUnblockClick}>
                     Unblock
-                </div>
+                </button>
             );
         } else {
             blockButton = (
-                <div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_block"
+                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_block"
                   onClick={this.onBlockClick}>
                     Block
-                </div>
+                </button>
             );
         }
 
         if (this.props.device.isVerified()) {
             verifyButton = (
-                <div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
+                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
                   onClick={this.onUnverifyClick}>
                     Unverify
-                </div>
+                </button>
             );
         } else {
             verifyButton = (
-                <div className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
+                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
                   onClick={this.onVerifyClick}>
                     Verify
-                </div>
+                </button>
             );
         }
 
@@ -101,16 +101,25 @@ export default class MemberDeviceInfo extends React.Component {
 
         var deviceName = this.props.device.getDisplayName() || this.props.device.deviceId;
 
+        var info;
+        if (!this.props.hideInfo) {
+            info = (
+                <div>
+                    <div className="mx_MemberDeviceInfo_deviceId">{deviceName}</div>
+                    {indicator}
+                    <div className="mx_MemberDeviceInfo_deviceKey">
+                        {this.props.device.getFingerprint()}
+                    </div>
+                </div>
+            );
+        }
+
         // add the deviceId as a titletext to help with debugging
         return (
             <div className="mx_MemberDeviceInfo" title={this.props.device.deviceId}>
-                <div className="mx_MemberDeviceInfo_deviceId">{deviceName}</div>
-                {indicator}
-                <div className="mx_MemberDeviceInfo_deviceKey">
-                    {this.props.device.getFingerprint()}
-                </div>
-                {verifyButton}
-                {blockButton}
+                { info }
+                { verifyButton }
+                { blockButton }
             </div>
         );
     }
@@ -120,4 +129,5 @@ MemberDeviceInfo.displayName = 'MemberDeviceInfo';
 MemberDeviceInfo.propTypes = {
     userId: React.PropTypes.string.isRequired,
     device: React.PropTypes.object.isRequired,
+    hideInfo: React.PropTypes.bool,
 };
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 2f954b908b..ff5c7f5259 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -204,7 +204,7 @@ export default class MessageComposer extends React.Component {
         if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
             // FIXME: show a /!\ if there are untrusted devices in the room...
             controls.push(
-                <img className="mx_MessageComposer_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" alt="Encrypted room"/>
+                <img key="e2eIcon" className="mx_MessageComposer_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" alt="Encrypted room"/>
             );
         }