UnknownDeviceDialog: get devices from SDK

rather than having to have the error message passed in.

This is in preparation for not having the dialog pop up straight
away when a message isn't sent so we don't have to keep the error
object knocking around somewhere.

src/UnknownDeviceErrorHandler.js

@@ -25,7 +25,6 @@ const onAction = function(payload) {
         const UnknownDeviceDialog = sdk.getComponent('dialogs.UnknownDeviceDialog');
         isDialogOpen = true;
         Modal.createTrackedDialog('Unknown Device Error', '', UnknownDeviceDialog, {
-            devices: payload.err.devices,
             room: payload.room,
             onFinished: (r) => {
                 isDialogOpen = false;

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -48,8 +48,9 @@ function UserUnknownDeviceList(props) {
     const {userId, userDevices} = props;
 
     const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
-       <DeviceListEntry key={deviceId} userId={userId}
+        <DeviceListEntry key={deviceId} userId={userId}
-           device={userDevices[deviceId]} />,
+            device={userDevices[deviceId]}
+        />,
     );
 
     return (
@@ -92,26 +93,52 @@ export default React.createClass({
     propTypes: {
         room: React.PropTypes.object.isRequired,
 
-        // map from userid -> deviceid -> deviceinfo
-        devices: React.PropTypes.object.isRequired,
         onFinished: React.PropTypes.func.isRequired,
     },
 
-    componentDidMount: function() {
+    componentWillMount: function() {
-        // Given we've now shown the user the unknown device, it is no longer
+        const roomMembers = this.props.room.getJoinedMembers().map((m) => {
-        // unknown to them. Therefore mark it as 'known'.
+            return m.userId;
-        Object.keys(this.props.devices).forEach((userId) => {
-            Object.keys(this.props.devices[userId]).map((deviceId) => {
-                MatrixClientPeg.get().setDeviceKnown(userId, deviceId, true);
-            });
         });
 
-        // XXX: temporary logging to try to diagnose
+        this.setState({
-        // https://github.com/vector-im/riot-web/issues/3148
+            // map from userid -> deviceid -> deviceinfo
-        console.log('Opening UnknownDeviceDialog');
+            devices: null,
+        });
+        MatrixClientPeg.get().downloadKeys(roomMembers, false).then((devices) => {
+            const unknownDevices = {};
+            // This is all devices in this room, so find the unknown ones.
+            Object.keys(devices).forEach((userId) => {
+                Object.keys(devices[userId]).map((deviceId) => {
+                    const device = devices[userId][deviceId];
+
+                    if (device.isUnverified() && !device.isKnown()) {
+                        if (unknownDevices[userId] === undefined) {
+                            unknownDevices[userId] = {};
+                        }
+                        unknownDevices[userId][deviceId] = device;
+                    }
+
+                    // Given we've now shown the user the unknown device, it is no longer
+                    // unknown to them. Therefore mark it as 'known'.
+                    if (!device.isKnown()) {
+                        MatrixClientPeg.get().setDeviceKnown(userId, deviceId, true);
+                    }
+                });
+            });
+
+            this.setState({
+                devices: unknownDevices,
+            });
+        });
     },
 
     render: function() {
+        if (this.state.devices === null) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
+
         const client = MatrixClientPeg.get();
         const blacklistUnverified = client.getGlobalBlacklistUnverifiedDevices() ||
               this.props.room.getBlacklistUnverifiedDevices();
@@ -154,7 +181,7 @@ export default React.createClass({
                     { warning }
                     { _t("Unknown devices") }:
 
-                    <UnknownDeviceList devices={this.props.devices} />
+                    <UnknownDeviceList devices={this.state.devices} />
                 </GeminiScrollbar>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" autoFocus={true}