Merge pull request #2557 from matrix-org/bwindels/e2eicons

Add e2e icon to room header/composer/member info, more ...

res/css/_components.scss

@@ -107,6 +107,7 @@
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";
 @import "./views/rooms/_AuxPanel.scss";
+@import "./views/rooms/_E2EIcon.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";

res/css/structures/_RoomStatusBar.scss

@@ -121,7 +121,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_connectionLostBar img {
     padding-left: 10px;
-    padding-right: 22px;
+    padding-right: 10px;
     vertical-align: middle;
     float: left;
 }

res/css/views/rooms/_E2EIcon.scss

@@ -0,0 +1,33 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_E2EIcon {
+    width: 25px;
+    height: 25px;
+    mask-repeat: no-repeat;
+    mask-position: center 0;
+    margin: 0 9px;
+}
+
+.mx_E2EIcon_verified {
+    mask-image: url('$(res)/img/feather-icons/e2e/lock-verified.svg');
+    background-color: $accent-color;
+}
+
+.mx_E2EIcon_warning {
+    mask-image: url('$(res)/img/feather-icons/e2e/lock-warning.svg');
+    background-color: $warning-color;
+}

res/css/views/rooms/_EventTile.scss

@@ -281,9 +281,24 @@ limitations under the License.
 .mx_EventTile_e2eIcon {
     display: block;
     position: absolute;
-    top: 9px;
+    top: 8px;
     left: 46px;
+    width: 15px;
+    height: 15px;
     cursor: pointer;
+    mask-size: 14px;
+    mask-repeat: no-repeat;
+    mask-position: 0;
+}
+
+.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
+    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    background-color: $warning-color;
+}
+
+.mx_EventTile_e2eIcon_unencrypted {
+    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    background-color: $composer-e2e-icon-color;
 }
 
 .mx_EventTile_e2eIcon_hidden {

res/css/views/rooms/_MemberDeviceInfo.scss

@@ -20,6 +20,25 @@ limitations under the License.
     align-items: start;
 }
 
+.mx_MemberDeviceInfo_icon {
+    margin-top: 4px;
+    width: 12px;
+    height: 12px;
+    mask-repeat: no-repeat;
+}
+.mx_MemberDeviceInfo_icon_blacklisted {
+    mask-image: url('$(res)/img/feather-icons/e2e/blacklisted.svg');
+    background-color: $warning-color;
+}
+.mx_MemberDeviceInfo_icon_verified {
+    mask-image: url('$(res)/img/feather-icons/e2e/verified.svg');
+    background-color: $accent-color;
+}
+.mx_MemberDeviceInfo_icon_unverified {
+    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    background-color: $warning-color;
+}
+
 .mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
     display: flex;
     flex-direction: column;

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;

res/css/views/rooms/_MessageComposer.scss

@@ -23,6 +23,10 @@ limitations under the License.
     padding-left: 84px;
 }
 
+.mx_MessageComposer_wrapper.mx_MessageComposer_hasE2EIcon {
+    padding-left: 109px;
+}
+
 .mx_MessageComposer_replaced_wrapper {
     margin-left: auto;
     margin-right: auto;
@@ -71,9 +75,10 @@ limitations under the License.
     width: 100%;
 }
 
-.mx_MessageComposer_e2eIcon {
+.mx_MessageComposer_e2eIcon.mx_E2EIcon {
     position: absolute;
     left: 60px;
+    background-color: $composer-e2e-icon-color;
 }
 
 .mx_MessageComposer_noperm_error {

res/themes/dharma/css/_dharma.scss

@@ -142,6 +142,8 @@ $roomheader-addroom-color: #91A1C0;
 $roomtopic-color: #9fa9ba;
 $eventtile-meta-color: $roomtopic-color;
 
+$composer-e2e-icon-color: #c9ced6;
+
 // ********************
 
 $roomtile-name-color: #61708b;

res/themes/light/css/_base.scss

@@ -134,6 +134,9 @@ $roomheader-color: $primary-fg-color;
 $roomheader-addroom-color: $primary-bg-color;
 $roomtopic-color: $settings-grey-fg-color;
 $eventtile-meta-color: $roomtopic-color;
+
+$composer-e2e-icon-color: #c9ced6;
+
 // ********************
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);

src/components/structures/RoomStatusBar.js

@@ -290,7 +290,7 @@ module.exports = React.createClass({
         }
 
         return <div className="mx_RoomStatusBar_connectionLostBar">
-            <img src={require("../../../res/img/warning.svg")} width="24" height="23" title={_t("Warning")} alt="" />
+            <img src={require("../../../res/img/feather-icons/e2e/warning.svg")} width="24" height="24" title={_t("Warning")} alt="" />
             <div>
                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                     { title }
@@ -309,7 +309,7 @@ module.exports = React.createClass({
         if (this._shouldShowConnectionError()) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src={require("../../../res/img/warning.svg")} width="24" height="23" title="/!\ " alt="/!\ " />
+                    <img src={require("../../../res/img/feather-icons/e2e/warning.svg")} width="24" height="24" title="/!\ " alt="/!\ " />
                     <div>
                         <div className="mx_RoomStatusBar_connectionLostBar_title">
                             { _t('Connectivity to the server has been lost.') }

src/components/structures/RoomView.js

@@ -168,6 +168,7 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
         MatrixClientPeg.get().on("accountData", this.onAccountData);
         MatrixClientPeg.get().on("crypto.keyBackupStatus", this.onKeyBackupStatus);
+        MatrixClientPeg.get().on("deviceVerificationChanged", this.onDeviceVerificationChanged);
         this._fetchMediaConfig();
         // Start listening for RoomViewStore updates
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
@@ -457,6 +458,7 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
             MatrixClientPeg.get().removeListener("crypto.keyBackupStatus", this.onKeyBackupStatus);
+            MatrixClientPeg.get().removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
         }
 
         window.removeEventListener('beforeunload', this.onPageUnload);
@@ -589,6 +591,10 @@ module.exports = React.createClass({
             this._updatePreviewUrlVisibility(room);
         }
 
+        if (ev.getType() === "m.room.encryption") {
+            this._updateE2EStatus(room);
+        }
+
         // ignore anything but real-time updates at the end of the room:
         // updates from pagination will happen when the paginate completes.
         if (toStartOfTimeline || !data || !data.liveEvent) return;
@@ -642,6 +648,7 @@ module.exports = React.createClass({
         this._updatePreviewUrlVisibility(room);
         this._loadMembersIfJoined(room);
         this._calculateRecommendedVersion(room);
+        this._updateE2EStatus(room);
     },
 
     _calculateRecommendedVersion: async function(room) {
@@ -733,6 +740,23 @@ module.exports = React.createClass({
         });
     },
 
+    onDeviceVerificationChanged: function(userId, device) {
+        const room = this.state.room;
+        if (!room.currentState.getMember(userId)) {
+            return;
+        }
+        this._updateE2EStatus(room);
+    },
+
+    _updateE2EStatus: function(room) {
+        if (!MatrixClientPeg.get().isRoomEncrypted(room.roomId)) {
+            return;
+        }
+        room.hasUnverifiedDevices().then((hasUnverifiedDevices) => {
+            this.setState({e2eStatus: hasUnverifiedDevices ? "warning" : "verified"});
+        });
+    },
+
     updateTint: function() {
         const room = this.state.room;
         if (!room) return;
@@ -1575,6 +1599,7 @@ module.exports = React.createClass({
                             room={this.state.room}
                             oobData={this.props.oobData}
                             collapsedRhs={this.props.collapsedRhs}
+                            e2eStatus={this.state.e2eStatus}
                         />
                         <div className="mx_RoomView_body">
                             <div className="mx_RoomView_auxPanel">
@@ -1622,6 +1647,7 @@ module.exports = React.createClass({
                             ref="header"
                             room={this.state.room}
                             collapsedRhs={this.props.collapsedRhs}
+                            e2eStatus={this.state.e2eStatus}
                         />
                         <div className="mx_RoomView_body">
                             <div className="mx_RoomView_auxPanel">
@@ -1767,6 +1793,7 @@ module.exports = React.createClass({
                     disabled={this.props.disabled}
                     showApps={this.state.showApps}
                     uploadAllowed={this.isFileUploadAllowed}
+                    e2eStatus={this.state.e2eStatus}
                 />;
         }
 
@@ -1917,6 +1944,7 @@ module.exports = React.createClass({
                     onCancelClick={(aux && !hideCancel) ? this.onCancelClick : null}
                     onForgetClick={(myMembership === "leave") ? this.onForgetClick : null}
                     onLeaveClick={(myMembership === "join") ? this.onLeaveClick : null}
+                    e2eStatus={this.state.e2eStatus}
                 />
                 <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
                     <div className={fadableSectionClasses}>

src/components/views/rooms/E2EIcon.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import classNames from 'classnames';
+import { _t } from '../../../languageHandler';
+
+export default function(props) {
+    const isWarning = props.status === "warning";
+    const isVerified = props.status === "verified";
+    const e2eIconClasses = classNames({
+        mx_E2EIcon: true,
+        mx_E2EIcon_warning: isWarning,
+        mx_E2EIcon_verified: isVerified,
+    }, props.className);
+    let e2eTitle;
+    if (isWarning) {
+        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 = 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} />);
+}