make UnknownDeviceDialog work again, other than the mess of element-hq/element-web#3020

Author: ara4n

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

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 }>

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>

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

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,
                 });
             }
 

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 &&