dedicated dialog box for E2E messages

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');

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) {

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?
+        Modal.createDialog(EncryptedEventDialog, {
-        var device = MatrixClientPeg.get()._crypto.getDeviceByIdentityKey(
+            event: event,
-            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>
-            )
         });
     },
 

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,14 +101,23 @@ export default class MemberDeviceInfo extends React.Component {
 
         var deviceName = this.props.device.getDisplayName() || this.props.device.deviceId;
 
-        // add the deviceId as a titletext to help with debugging
+        var info;
-        return (
+        if (!this.props.hideInfo) {
-            <div className="mx_MemberDeviceInfo" title={this.props.device.deviceId}>
+            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}>
+                { 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,
 };

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"/>
             );
         }