From 7bc3fc86961bf11e1840ff5f9978c17dc7eb03d7 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 22 Jan 2017 01:28:43 +0100
Subject: [PATCH] make UnknownDeviceDialog work again, other than the mess of
 vector-im/vector-web#3020

---
 src/components/structures/UserSettings.js     |  2 +-
 .../views/dialogs/UnknownDeviceDialog.js      | 49 ++++++++++---------
 .../views/elements/DeviceVerifyButtons.js     |  4 +-
 .../views/rooms/MessageComposerInput.js       |  3 +-
 .../views/rooms/MessageComposerInputOld.js    |  3 +-
 src/components/views/rooms/RoomSettings.js    |  2 +-
 6 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 1dd30b679c..00219e3bb2 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -60,7 +60,7 @@ const SETTINGS_LABELS = [
 const CRYPTO_SETTINGS_LABELS = [
     {
         id: 'blacklistUnverifiedDevices',
-        label: 'Never send encrypted messages to unverified devices',
+        label: 'Never send encrypted messages to unverified devices from this device',
     },
     // XXX: this is here for documentation; the actual setting is managed via RoomSettings
     // {
diff --git a/src/components/views/dialogs/UnknownDeviceDialog.js b/src/components/views/dialogs/UnknownDeviceDialog.js
index a2e7bd13fb..656f831ba1 100644
--- a/src/components/views/dialogs/UnknownDeviceDialog.js
+++ b/src/components/views/dialogs/UnknownDeviceDialog.js
@@ -36,14 +36,15 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
         var client = MatrixClientPeg.get();
-        var blacklistUnverified = (client.getGlobalBlacklistUnverifiedDevices() || room.getBlacklistUnverifiedDevices());
+        var blacklistUnverified = client.getGlobalBlacklistUnverifiedDevices() || this.props.room.getBlacklistUnverifiedDevices();
         var warning;
         if (blacklistUnverified) {
-            warning = <h4>You are currently blacklisting unverified devices; to send messages to these devices you must verify them.<h4>;
+            warning = <h4>You are currently blacklisting unverified devices; to send messages to these devices you must verify them.</h4>
         }
         else {
-            warning = <h4>We strongly recommend you verify them before continuing.</h4>;
+            warning = <h4>We strongly recommend you verify them before continuing.</h4>
         }
 
         return (
@@ -54,27 +55,27 @@ module.exports = React.createClass({
                 <div className="mx_Dialog_content">
                     <h4>This room contains unknown devices which have not been verified.</h4>
                     { warning }
-                    <p>Unknown devices:
-                        <ul>{
-                            Object.keys(this.props.devices).map(userId=>{
-                                return <li key={ userId }>
-                                    <p>{ userId }:</p>
-                                    <ul>
-                                    {
-                                        Object.keys(this.props.devices[userId]).map(deviceId=>{
-                                            var DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
-                                            var device = this.props.devices[userId][deviceId];
-                                            var buttons = <DeviceVerifyButtons device={ device } userId={ userId } />
-                                            return <li key={ deviceId }>
-                                                { deviceId } ( { device.getDisplayName() } ) { buttons }
-                                            </li>
-                                        })
-                                    }
-                                    </ul>
-                                </li>
-                            })
-                        }</ul>
-                    </p>
+                    Unknown devices:
+                    <ul>{
+                        Object.keys(this.props.devices).map(userId=>{
+                            return <li key={ userId }>
+                                <p>{ userId }:</p>
+                                <ul className="mx_UnknownDeviceDialog_deviceList">
+                                {
+                                    Object.keys(this.props.devices[userId]).map(deviceId=>{
+                                        var device = this.props.devices[userId][deviceId];
+                                        var buttons = <DeviceVerifyButtons device={ device } userId={ userId } />
+                                        return <li key={ deviceId }>
+                                            { buttons }
+                                            { deviceId }<br/>
+                                            { device.getDisplayName() }
+                                        </li>
+                                    })
+                                }
+                                </ul>
+                            </li>
+                        })
+                    }</ul>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={ this.props.onFinished } autoFocus={ true }>
diff --git a/src/components/views/elements/DeviceVerifyButtons.js b/src/components/views/elements/DeviceVerifyButtons.js
index da3975e4db..aeb93e866c 100644
--- a/src/components/views/elements/DeviceVerifyButtons.js
+++ b/src/components/views/elements/DeviceVerifyButtons.js
@@ -42,8 +42,8 @@ export default React.createClass({
                     <div className="mx_UserSettings_cryptoSection">
                         <ul>
                             <li><label>Device name:</label> <span>{ this.props.device.getDisplayName() }</span></li>
-                            <li><label>Device ID:</label>             <span><code>{ this.props.device.deviceId}</code></span></li>
-                            <li><label>Device key:</label>            <span><code><b>{ this.props.device.getFingerprint() }</b></code></span></li>
+                            <li><label>Device ID:</label>   <span><code>{ this.props.device.deviceId}</code></span></li>
+                            <li><label>Device key:</label>  <span><code><b>{ this.props.device.getFingerprint() }</b></code></span></li>
                         </ul>
                     </div>
                     <p>
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 54e4894adf..605b64a6c9 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -553,6 +553,7 @@ export default class MessageComposerInput extends React.Component {
             sendMessagePromise = sendTextFn.call(this.client, this.props.room.roomId, contentText);
         }
 
+        var self = this;
         sendMessagePromise.then((res) => {
             dis.dispatch({
                 action: 'message_sent',
@@ -562,7 +563,7 @@ export default class MessageComposerInput extends React.Component {
                 var UnknownDeviceDialog = sdk.getComponent("dialogs.UnknownDeviceDialog");
                 Modal.createDialog(UnknownDeviceDialog, {
                     devices: err.devices,
-                    room: this.props.room,
+                    room: self.props.room,
                 });
             }
             dis.dispatch({
diff --git a/src/components/views/rooms/MessageComposerInputOld.js b/src/components/views/rooms/MessageComposerInputOld.js
index 7fd3e0b427..736646638a 100644
--- a/src/components/views/rooms/MessageComposerInputOld.js
+++ b/src/components/views/rooms/MessageComposerInputOld.js
@@ -337,6 +337,7 @@ module.exports = React.createClass({
                 MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText);
         }
 
+        var self = this;
         sendMessagePromise.done(function(res) {
             dis.dispatch({
                 action: 'message_sent'
@@ -346,7 +347,7 @@ module.exports = React.createClass({
                 var UnknownDeviceDialog = sdk.getComponent("dialogs.UnknownDeviceDialog");
                 Modal.createDialog(UnknownDeviceDialog, {
                     devices: err.devices,
-                    room: this.props.room,
+                    room: self.props.room,
                 });
             }
 
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index 548809e9ad..c6d57b7fb8 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -512,7 +512,7 @@ module.exports = React.createClass({
                 <input type="checkbox" ref="blacklistUnverified"
                        defaultChecked={ isGlobalBlacklistUnverified || isRoomBlacklistUnverified }
                        disabled={ isGlobalBlacklistUnverified || (this.refs.encrypt && !this.refs.encrypt.checked) }/>
-                Never send encrypted messages to unverified devices in this room.
+                Never send encrypted messages to unverified devices in this room from this device.
             </label>;
 
         if (!isEncrypted &&