From 21fe2663944ddb142a4366ba473944aade7b809e Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Fri, 1 Feb 2019 17:08:09 +0100
Subject: [PATCH] add icon to member info to indicate all devices of a user are
 trusted

---
 res/css/views/rooms/_MemberInfo.scss     |  4 ++++
 src/components/views/rooms/E2EIcon.js    |  8 ++++++--
 src/components/views/rooms/MemberInfo.js | 19 +++++++++++++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index 99771fece0..707c186518 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/res/css/views/rooms/_MemberInfo.scss
@@ -26,6 +26,10 @@ limitations under the License.
     display: flex;
 }
 
+.mx_MemberInfo_name > .mx_E2EIcon {
+    margin-left: 0;
+}
+
 .mx_MemberInfo_cancel {
     height: 16px;
     padding: 10px 15px;
diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js
index 9be3efa450..30891e84b7 100644
--- a/src/components/views/rooms/E2EIcon.js
+++ b/src/components/views/rooms/E2EIcon.js
@@ -27,9 +27,13 @@ export default function(props) {
     }, props.className);
     let e2eTitle;
     if (isWarning) {
-        e2eTitle = _t("Some devices in this encrypted room are not trusted");
+        e2eTitle = props.isUser ?
+            _t("Some devices for this user are not trusted") :
+            _t("Some devices in this encrypted room are not trusted");
     } else if (isVerified) {
-        e2eTitle = _t("All devices in this encrypted room are trusted");
+        e2eTitle = props.isUser ?
+            _t("All devices for this user are trusted") :
+            _t("All devices in this encrypted room are trusted");
     }
     return (<div className={e2eIconClasses} title={e2eTitle} />);
 }
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 9859861870..5df0da7491 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -43,6 +43,7 @@ import RoomViewStore from '../../../stores/RoomViewStore';
 import SdkConfig from '../../../SdkConfig';
 import MultiInviter from "../../../utils/MultiInviter";
 import SettingsStore from "../../../settings/SettingsStore";
+import E2EIcon from "./E2EIcon";
 
 module.exports = withMatrixClient(React.createClass({
     displayName: 'MemberInfo',
@@ -153,11 +154,19 @@ module.exports = withMatrixClient(React.createClass({
             // Promise.resolve to handle transition from static result to promise; can be removed
             // in future
             Promise.resolve(this.props.matrixClient.getStoredDevicesForUser(userId)).then((devices) => {
-                this.setState({devices: devices});
+                this.setState({
+                    devices: devices,
+                    e2eStatus: this._getE2EStatus(devices),
+                });
             });
         }
     },
 
+    _getE2EStatus: function(devices) {
+        const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
+        return hasUnverifiedDevice ? "warning" : "verified";
+    },
+
     onRoom: function(room) {
         this.forceUpdate();
     },
@@ -234,8 +243,13 @@ module.exports = withMatrixClient(React.createClass({
                 // we got cancelled - presumably a different user now
                 return;
             }
+
             self._disambiguateDevices(devices);
-            self.setState({devicesLoading: false, devices: devices});
+            self.setState({
+                devicesLoading: false,
+                devices: devices,
+                e2eStatus: self._getE2EStatus(devices),
+            });
         }, function(err) {
             console.log("Error downloading devices", err);
             self.setState({devicesLoading: false});
@@ -965,6 +979,7 @@ module.exports = withMatrixClient(React.createClass({
                         <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
                             <img src={require("../../../../res/img/minimise.svg")} width="10" height="16" className="mx_filterFlipColor" alt={_t('Close')} />
                         </AccessibleButton>
+                        { this.state.e2eStatus ? <E2EIcon status={this.state.e2eStatus} isUser={true} /> : undefined }
                         <EmojiText element="h2">{ memberName }</EmojiText>
                     </div>
                     { avatarElement }