very barebones support for warning users when rooms contain unknown devices

src/Resend.js

@@ -16,17 +16,26 @@ limitations under the License.
 
 var MatrixClientPeg = require('./MatrixClientPeg');
 var dis = require('./dispatcher');
+var sdk = require('./index');
+var Modal = require('./Modal');
 
 module.exports = {
     resend: function(event) {
         MatrixClientPeg.get().resendEvent(
             event, MatrixClientPeg.get().getRoom(event.getRoomId())
-        ).done(function() {
+        ).done(function(res) {
             dis.dispatch({
                 action: 'message_sent',
                 event: event
             });
-        }, function() {
+        }, function(err) {
+            if (err.name === "UnknownDeviceError") {
+                var UnknownDeviceDialog = sdk.getComponent("dialogs.UnknownDeviceDialog");
+                Modal.createDialog(UnknownDeviceDialog, {
+                    devices: err.devices
+                });
+            }
+
             dis.dispatch({
                 action: 'message_send_failed',
                 event: event

src/component-index.js

@@ -89,6 +89,8 @@ import views$dialogs$SetDisplayNameDialog from './components/views/dialogs/SetDi
 views$dialogs$SetDisplayNameDialog && (module.exports.components['views.dialogs.SetDisplayNameDialog'] = views$dialogs$SetDisplayNameDialog);
 import views$dialogs$TextInputDialog from './components/views/dialogs/TextInputDialog';
 views$dialogs$TextInputDialog && (module.exports.components['views.dialogs.TextInputDialog'] = views$dialogs$TextInputDialog);
+import views$dialogs$UnknownDeviceDialog from './components/views/dialogs/UnknownDeviceDialog';
+views$dialogs$UnknownDeviceDialog && (module.exports.components['views.dialogs.UnknownDeviceDialog'] = views$dialogs$UnknownDeviceDialog);
 import views$elements$AddressSelector from './components/views/elements/AddressSelector';
 views$elements$AddressSelector && (module.exports.components['views.elements.AddressSelector'] = views$elements$AddressSelector);
 import views$elements$AddressTile from './components/views/elements/AddressTile';

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -0,0 +1,73 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require("react");
+var sdk = require('../../../index');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+
+module.exports = React.createClass({
+    displayName: 'UnknownEventDialog',
+
+    propTypes: {
+        devices: React.PropTypes.object.isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    onKeyDown: function(e) {
+        if (e.keyCode === 27) { // escape
+            e.stopPropagation();
+            e.preventDefault();
+            this.props.onFinished(false);
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="mx_UnknownDeviceDialog" onKeyDown={ this.onKeyDown }>
+                <div className="mx_Dialog_title">
+                    Room contains unknown devices
+                </div>
+                <div className="mx_Dialog_content">
+                    <h4>This room contains unknown devices which have not been verified.</h4>
+                    <h4>We strongly recommend you verify them before continuing.</h4>
+                    <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=>{
+                                            return <li key={ deviceId }>
+                                                { deviceId } ( { this.props.devices[userId][deviceId].getDisplayName() } )
+                                            </li>
+                                        })
+                                    }
+                                    </ul>
+                                </li>
+                            })
+                        }</ul>
+                    </p>
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button className="mx_Dialog_primary" onClick={ this.props.onFinished } autoFocus={ true }>
+                        OK
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/rooms/MessageComposerInput.js

@@ -553,11 +553,17 @@ export default class MessageComposerInput extends React.Component {
             sendMessagePromise = sendTextFn.call(this.client, this.props.room.roomId, contentText);
         }
 
-        sendMessagePromise.then(() => {
+        sendMessagePromise.then((res) => {
             dis.dispatch({
                 action: 'message_sent',
             });
-        }, () => {
+        }, (err) => {
+            if (err.name === "UnknownDeviceError") {
+                var UnknownDeviceDialog = sdk.getComponent("dialogs.UnknownDeviceDialog");
+                Modal.createDialog(UnknownDeviceDialog, {
+                    devices: err.devices
+                });
+            }
             dis.dispatch({
                 action: 'message_send_failed',
             });

src/components/views/rooms/MessageComposerInputOld.js

@@ -337,11 +337,18 @@ module.exports = React.createClass({
                 MatrixClientPeg.get().sendTextMessage(this.props.room.roomId, contentText);
         }
 
-        sendMessagePromise.done(function() {
+        sendMessagePromise.done(function(res) {
             dis.dispatch({
                 action: 'message_sent'
             });
-        }, function() {
+        }, function(err) {
+            if (err.name === "UnknownDeviceError") {
+                var UnknownDeviceDialog = sdk.getComponent("dialogs.UnknownDeviceDialog");
+                Modal.createDialog(UnknownDeviceDialog, {
+                    devices: err.devices
+                });
+            }
+
             dis.dispatch({
                 action: 'message_send_failed'
             });

src/components/views/rooms/SimpleRoomHeader.js

@@ -44,7 +44,7 @@ module.exports = React.createClass({
 
         var cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>;
+            cancelButton = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" className="mx_filterFlipColor" width="18" height="18" alt="Cancel"/> </div>;
         }
 
         var showRhsButton;