make UnknownDeviceDialog work again, other than the mess of vector-im/vector-web#3020

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,19 +55,20 @@ 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:
+                    Unknown devices:
                     <ul>{
                         Object.keys(this.props.devices).map(userId=>{
                             return <li key={ userId }>
                                 <p>{ userId }:</p>
-                                    <ul>
+                                <ul className="mx_UnknownDeviceDialog_deviceList">
                                 {
                                     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 }
+                                            { buttons }
+                                            { deviceId }<br/>
+                                            { device.getDisplayName() }
                                         </li>
                                     })
                                 }
@@ -74,7 +76,6 @@ module.exports = React.createClass({
                             </li>
                         })
                     }</ul>
-                    </p>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={ this.props.onFinished } autoFocus={ true }>

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