Factor out showing UnknownDeviceDialog

So we can re-use it for calls that fail due to unknwon devices

src/components/structures/RoomStatusBar.js

@@ -23,8 +23,7 @@ import WhoIsTyping from '../../WhoIsTyping';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import MemberAvatar from '../views/avatars/MemberAvatar';
 import Resend from '../../Resend';
-import Modal from '../../Modal';
+import { getUnknownDevicesForRoom, showUnknownDeviceDialogForMessages } from '../../cryptodevices';
-import { getUnknownDevicesForRoom } from '../../cryptodevices';
 
 const HIDE_DEBOUNCE_MS = 10000;
 const STATUS_BAR_HIDDEN = 0;
@@ -158,15 +157,7 @@ module.exports = React.createClass({
     },
 
     _onShowDevicesClick: function() {
-        getUnknownDevicesForRoom(MatrixClientPeg.get(), this.props.room).then((unknownDevices) => {
+        showUnknownDeviceDialogForMessages(MatrixClientPeg.get(), this.props.room);
-            if (this._unmounted) return;
-
-            const UnknownDeviceDialog = sdk.getComponent('dialogs.UnknownDeviceDialog');
-            Modal.createTrackedDialog('Unknown Device Dialog', '', UnknownDeviceDialog, {
-                room: this.props.room,
-                devices: unknownDevices,
-            }, 'mx_Dialog_unknownDevice');
-        });
     },
 
     onRoomLocalEchoUpdated: function(event, room, oldEventId, oldStatus) {
@@ -414,7 +405,6 @@ module.exports = React.createClass({
         return null;
     },
 
-
     render: function() {
         const content = this._getContent();
         const indicator = this._getIndicator(this.state.usersTyping.length > 0);

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import GeminiScrollbar from 'react-gemini-scrollbar';
@@ -39,10 +40,10 @@ function DeviceListEntry(props) {
 }
 
 DeviceListEntry.propTypes = {
-    userId: React.PropTypes.string.isRequired,
+    userId: PropTypes.string.isRequired,
 
     // deviceinfo
-    device: React.PropTypes.object.isRequired,
+    device: PropTypes.object.isRequired,
 };
 
 
@@ -62,10 +63,10 @@ function UserUnknownDeviceList(props) {
 }
 
 UserUnknownDeviceList.propTypes = {
-    userId: React.PropTypes.string.isRequired,
+    userId: PropTypes.string.isRequired,
 
     // map from deviceid -> deviceinfo
-    userDevices: React.PropTypes.object.isRequired,
+    userDevices: PropTypes.object.isRequired,
 };
 
 
@@ -84,7 +85,7 @@ function UnknownDeviceList(props) {
 
 UnknownDeviceList.propTypes = {
     // map from userid -> deviceid -> deviceinfo
-    devices: React.PropTypes.object.isRequired,
+    devices: PropTypes.object.isRequired,
 };
 
 
@@ -92,22 +93,12 @@ export default React.createClass({
     displayName: 'UnknownDeviceDialog',
 
     propTypes: {
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
 
         // map from userid -> deviceid -> deviceinfo
-        devices: React.PropTypes.object.isRequired,
+        devices: PropTypes.object.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
-    },
+        sendAnywayButton: PropTypes.node,
-
-    _onSendAnywayClicked: function() {
-        // Mark the devices as known so messages get encrypted to them
-        Object.keys(this.props.devices).forEach((userId) => {
-            Object.keys(this.props.devices[userId]).map((deviceId) => {
-                MatrixClientPeg.get().setDeviceKnown(userId, deviceId, true);
-            });
-        });
-        this.props.onFinished();
-        Resend.resendUnsentEvents(this.props.room);
     },
 
     _onDismissClicked: function() {
@@ -115,7 +106,7 @@ export default React.createClass({
     },
 
     render: function() {
-        if (this.state.devices === null) {
+        if (this.props.devices === null) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return <Spinner />;
         }
@@ -156,9 +147,7 @@ export default React.createClass({
                     <UnknownDeviceList devices={this.props.devices} />
                 </GeminiScrollbar>
                 <div className="mx_Dialog_buttons">
-                    <button onClick={this._onSendAnywayClicked}>
+                    {this.props.sendAnywayButton}
-                        { _t("Send anyway") }
-                    </button>
                     <button className="mx_Dialog_primary" autoFocus={true}
                         onClick={this._onDismissClicked}
                     >

src/cryptodevices.js

@@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import Resend from './Resend';
+import sdk from './index';
+import Modal from './Modal';
+import { _t } from './languageHandler';
+
 export function getUnknownDevicesForRoom(matrixClient, room) {
     const roomMembers = room.getJoinedMembers().map((m) => {
         return m.userId;
@@ -37,3 +42,30 @@ export function getUnknownDevicesForRoom(matrixClient, room) {
     });
 }
 
+export function showUnknownDeviceDialogForMessages(matrixClient, room) {
+    getUnknownDevicesForRoom(matrixClient, room).then((unknownDevices) => {
+        const onSendAnywayClicked = () => {
+            markAllDevicesKnown(matrixClient, unknownDevices);
+            Resend.resendUnsentEvents(room);
+        };
+
+        const UnknownDeviceDialog = sdk.getComponent('dialogs.UnknownDeviceDialog');
+        Modal.createTrackedDialog('Unknown Device Dialog', '', UnknownDeviceDialog, {
+            room: room,
+            devices: unknownDevices,
+            sendAnywayButton:(
+                <button onClick={onSendAnywayClicked}>
+                    { _t("Send anyway") }
+                </button>
+            ),
+        }, 'mx_Dialog_unknownDevice');
+    });
+}
+
+function markAllDevicesKnown(matrixClient, devices) {
+    Object.keys(devices).forEach((userId) => {
+        Object.keys(devices[userId]).map((deviceId) => {
+            matrixClient.setDeviceKnown(userId, deviceId, true);
+        });
+    });
+}