From ce655c7f50388d467eced08266e73779675d5359 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 15 Sep 2016 02:44:55 +0100
Subject: [PATCH] improve device info

---
 .../views/dialogs/EncryptedEventDialog.js     | 14 +++--
 src/components/views/rooms/EventTile.js       |  4 +-
 .../views/rooms/MemberDeviceInfo.js           | 53 +++++++++++--------
 3 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/src/components/views/dialogs/EncryptedEventDialog.js b/src/components/views/dialogs/EncryptedEventDialog.js
index e422c57536..d84376cc26 100644
--- a/src/components/views/dialogs/EncryptedEventDialog.js
+++ b/src/components/views/dialogs/EncryptedEventDialog.js
@@ -76,23 +76,23 @@ module.exports = React.createClass({
                             </tr>
                             <tr>
                                 <td>Sender device name</td>
-                                <td>{ device.getDisplayName() }</td>
+                                <td>{ device ? device.getDisplayName() : <i>unknown device</i>}</td>
                             </tr>
                             <tr>
                                 <td>Sender device ID</td>
-                                <td>{ device.deviceId }</td>
+                                <td>{ device ? <code>{ device.deviceId }</code> : <i>unknown device</i>}</td>
                             </tr>
                             <tr>
-                                <td>Sender device verification:</td>
+                                <td>Sender device verification</td>
                                 <td>{ MatrixClientPeg.get().isEventSenderVerified(event) ? "verified" : <b>NOT verified</b> }</td>
                             </tr>
                             <tr>
                                 <td>Sender device ed25519 identity key</td>
-                                <td>{ device.getFingerprint() }</td>
+                                <td>{ device ? <code>{device.getFingerprint()}</code> : <i>unknown device</i>}</td>
                             </tr>
                             <tr>
                                 <td>Sender device curve25519 olm key</td>
-                                <td>{ event.getWireContent().sender_key }</td>
+                                <td><code>{ event.getWireContent().sender_key }</code></td>
                             </tr>
                             <tr>
                                 <td>Algorithm</td>
@@ -106,6 +106,10 @@ module.exports = React.createClass({
                             </tr>
                             ) : ''
                         }
+                            <tr>
+                                <td>Session ID</td>
+                                <td><code>{ event.getWireContent().session_id }</code></td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 346a1b7c99..1efd46b94f 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -471,10 +471,10 @@ module.exports = React.createClass({
                 e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
             }
             else if (this.state.verified == true || (e2eEnabled && this.props.eventSendStatus)) {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" alt="Encrypted by a verified device"/>;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-verified.svg" width="10" height="12"/>;
             }
             else {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Encrypted by an unverified device!"/>;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }}/>;
             }
         }
         else if (e2eEnabled) {
diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js
index 27bafa86cd..fac4c4c507 100644
--- a/src/components/views/rooms/MemberDeviceInfo.js
+++ b/src/components/views/rooms/MemberDeviceInfo.js
@@ -87,6 +87,10 @@ export default class MemberDeviceInfo extends React.Component {
     }
 
     render() {
+        if (!this.props.device) {
+            return <div className="mx_MemberDeviceInfo"/>;
+        }
+
         var indicator = null, blockButton = null, verifyButton = null;
         if (this.props.device.isBlocked()) {
             blockButton = (
@@ -120,36 +124,39 @@ export default class MemberDeviceInfo extends React.Component {
             );
         }
 
-        if (this.props.device.isBlocked()) {
-            indicator = (
-                <div className="mx_MemberDeviceInfo_blocked">Blocked</div>
-            );
-        } else if (this.props.device.isVerified()) {
-            indicator = (
-                    <div className="mx_MemberDeviceInfo_verified">Verified</div>
-            );
-
-        } else {
-            indicator = (
-                <div className="mx_MemberDeviceInfo_unverified">Unverified</div>
-            );
-        }
-
-        var deviceName = this.props.device.getDisplayName() || this.props.device.deviceId;
-
-        var info;
         if (!this.props.hideInfo) {
-            info = (
-                <div className="mx_MemberDeviceInfo_deviceInfo">
-                    <div className="mx_MemberDeviceInfo_deviceId">{deviceName}</div>
-                    {indicator}
+            if (this.props.device.isBlocked()) {
+                indicator = (
+                    <div className="mx_MemberDeviceInfo_blocked">
+                        <img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt="Blocked"/>
+                    </div>
+                );
+            } else if (this.props.device.isVerified()) {
+                indicator = (
+                    <div className="mx_MemberDeviceInfo_verified">
+                        <img src="img/e2e-verified.svg" width="10" height="12" alt="Verified"/>
+                    </div>
+                );
+            } else {
+                indicator = (
+                    <div className="mx_MemberDeviceInfo_unverified">
+                        <img src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Unverified"/>
+                    </div>
+                );
+            }
+
+            var deviceName = this.props.device.getDisplayName() || this.props.device.deviceId;
+
+            var info = (
+                <div className="mx_MemberDeviceInfo_deviceInfo" title={this.props.device.deviceId}>
+                    <div className="mx_MemberDeviceInfo_deviceId">{deviceName}{indicator}</div>
                 </div>
             );
         }
 
         // add the deviceId as a titletext to help with debugging
         return (
-            <div className="mx_MemberDeviceInfo" title={this.props.device.deviceId}>
+            <div className="mx_MemberDeviceInfo">
                 { info }
                 { verifyButton }
                 { blockButton }