From 8bda0bb095437d53bb2dfb42371042708e52a1de Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 15 Sep 2016 01:55:51 +0100
Subject: [PATCH] basic verification UI

---
 src/components/structures/UserSettings.js     | 14 ++++--
 .../views/rooms/MemberDeviceInfo.js           | 47 ++++++++++++++++---
 src/components/views/settings/DevicesPanel.js |  5 ++
 .../views/settings/DevicesPanelEntry.js       |  7 ++-
 4 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index fadb97705b..22ac7c7c72 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -72,6 +72,7 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             avatarUrl: null,
+            myDevice: null,
             threePids: [],
             phase: "UserSettings.LOADING", // LOADING, DISPLAY
             email_add_pending: false,
@@ -342,14 +343,17 @@ module.exports = React.createClass({
 
         var client = MatrixClientPeg.get();
         var deviceId = client.deviceId;
-        var olmKey = client.getDeviceEd25519Key() || "<not supported>";
+        var identityKey = client.getDeviceEd25519Key() || "<not supported>";
+
+        var myDevice = client.getStoredDevicesForUser(MatrixClientPeg.get().credentials.userId)[0];
         return (
             <div>
                 <h3>Cryptography</h3>
-                <div className="mx_UserSettings_section">
+                <div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
                     <ul>
-                        <li>Device ID: {deviceId}</li>
-                        <li>Device key: {olmKey}</li>
+                        <li><label>Device name:</label> <span>{ myDevice.getDisplayName() }</span></li>
+                        <li><label>Device ID:</label>   <span><code>{deviceId}</code></span></li>
+                        <li><label>Device key:</label>  <span><code><b>{identityKey}</b></code></span></li>
                     </ul>
                 </div>
             </div>
@@ -364,7 +368,7 @@ module.exports = React.createClass({
         return (
             <div>
                 <h3>Devices</h3>
-                <DevicesPanel className="mx_UserSettings_section" />
+                <DevicesPanel className="mx_UserSettings_section"/>
             </div>
         );
     },
diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js
index 927cc90491..27bafa86cd 100644
--- a/src/components/views/rooms/MemberDeviceInfo.js
+++ b/src/components/views/rooms/MemberDeviceInfo.js
@@ -16,6 +16,8 @@ limitations under the License.
 
 import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
+import Modal from '../../../Modal';
 
 export default class MemberDeviceInfo extends React.Component {
     constructor(props) {
@@ -27,9 +29,43 @@ export default class MemberDeviceInfo extends React.Component {
     }
 
     onVerifyClick() {
-        MatrixClientPeg.get().setDeviceVerified(
-            this.props.userId, this.props.device.deviceId, true
-        );
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        Modal.createDialog(QuestionDialog, {
+            title: "Verify device",
+            description: (
+                <div>
+                    <p>
+                        To verify that this device can be trusted, please contact its
+                        owner using some other means (e.g. in person or a phone call)
+                        and ask them whether the key they see in their User Settings
+                        for this device matches the key below:
+                    </p>
+                    <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>
+                        </ul>
+                    </div>
+                    <p>
+                        If it matches, press the verify button below.
+                        If it doesn't, then someone else is intercepting this device
+                        and you probably want to press the block button instead.
+                    </p>
+                    <p>
+                        In future this verification process will be more sophisticated.
+                    </p>
+                </div>
+            ),
+            button: "I verify that the keys match",
+            onFinished: confirm=>{
+                if (confirm) {
+                    MatrixClientPeg.get().setDeviceVerified(
+                        this.props.userId, this.props.device.deviceId, true
+                    );
+                }
+            },
+        });
     }
 
     onUnverifyClick() {
@@ -104,12 +140,9 @@ export default class MemberDeviceInfo extends React.Component {
         var info;
         if (!this.props.hideInfo) {
             info = (
-                <div>
+                <div className="mx_MemberDeviceInfo_deviceInfo">
                     <div className="mx_MemberDeviceInfo_deviceId">{deviceName}</div>
                     {indicator}
-                    <div className="mx_MemberDeviceInfo_deviceKey">
-                        {this.props.device.getFingerprint()}
-                    </div>
                 </div>
             );
         }
diff --git a/src/components/views/settings/DevicesPanel.js b/src/components/views/settings/DevicesPanel.js
index 2914b0789d..f48d4bec85 100644
--- a/src/components/views/settings/DevicesPanel.js
+++ b/src/components/views/settings/DevicesPanel.js
@@ -137,3 +137,8 @@ export default class DevicesPanel extends React.Component {
         );
     }
 }
+
+DevicesPanel.displayName = 'MemberDeviceInfo';
+DevicesPanel.propTypes = {
+    className: React.PropTypes.string,
+};
diff --git a/src/components/views/settings/DevicesPanelEntry.js b/src/components/views/settings/DevicesPanelEntry.js
index 8e8351de43..16345edcce 100644
--- a/src/components/views/settings/DevicesPanelEntry.js
+++ b/src/components/views/settings/DevicesPanelEntry.js
@@ -107,8 +107,13 @@ export default class DevicesPanelEntry extends React.Component {
             );
         }
 
+        var myDeviceClass = '';
+        if (device.device_id === MatrixClientPeg.get().getDeviceId()) {
+            myDeviceClass = " mx_DevicesPanel_myDevice";
+        }
+
         return (
-            <div className="mx_DevicesPanel_device">
+            <div className={ "mx_DevicesPanel_device" + myDeviceClass }>
                 <div className="mx_DevicesPanel_deviceId">
                     {device.device_id}
                 </div>