From 3a1159ce12779ca389296bd12125708d9080dd6d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 12 Sep 2016 01:37:51 +0100
Subject: [PATCH] e2e look & feel

---
 src/components/views/rooms/EventTile.js       | 34 ++++++++++++++-----
 src/components/views/rooms/MessageComposer.js |  7 ++++
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 702cf94a68..07981be141 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -248,8 +248,7 @@ module.exports = React.createClass({
         if (!actions || !actions.tweaks) { return false; }
 
         // don't show self-highlights from another of our clients
-        if (this.props.mxEvent.sender &&
-            this.props.mxEvent.sender.userId === MatrixClientPeg.get().credentials.userId)
+        if (this.props.mxEvent.getSender() === MatrixClientPeg.get().credentials.userId)
         {
             return false;
         }
@@ -384,21 +383,24 @@ module.exports = React.createClass({
             throw new Error("Event type not supported");
         }
 
+        var e2eEnabled = MatrixClientPeg.get().isRoomEncrypted(this.props.mxEvent.getRoomId());
+        var isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
+
         var classes = classNames({
             mx_EventTile: true,
             mx_EventTile_info: isInfoMessage,
-            mx_EventTile_sending: ['sending', 'queued'].indexOf(
-                this.props.eventSendStatus
-            ) !== -1,
+            mx_EventTile_encrypting: this.props.eventSendStatus == 'encrypting',
+            mx_EventTile_sending: isSending,
             mx_EventTile_notSent: this.props.eventSendStatus == 'not_sent',
-            mx_EventTile_highlight: this.props.tileShape === 'notif' ? false : this.shouldHighlight(),
+            mx_EventTile_highlight: this.props.tileShape == 'notif' ? false : this.shouldHighlight(),
             mx_EventTile_selected: this.props.isSelectedEvent,
             mx_EventTile_continuation: this.props.tileShape ? '' : this.props.continuation,
             mx_EventTile_last: this.props.last,
             mx_EventTile_contextual: this.props.contextual,
             menu: this.state.menu,
-            mx_EventTile_verified: this.state.verified == true,
+            mx_EventTile_verified: this.state.verified == true || (e2eEnabled && isSending),
             mx_EventTile_unverified: this.state.verified == false,
+            mx_EventTile_bad: this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted',
         });
         var permalink = "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId();
 
@@ -447,13 +449,28 @@ module.exports = React.createClass({
             else {
                 sender = <SenderProfile mxEvent={this.props.mxEvent} />;
             }
-
         }
 
         var editButton = (
             <img className="mx_EventTile_editButton" src="img/icon_context_message.svg" width="19" height="19" alt="Options" title="Options" onClick={this.onEditClicked} />
         );
 
+        var e2e;
+        if (e2eEnabled) {
+            if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') {
+                e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-blocked.png" width="12" height="12"/>;
+            }
+            else if (this.state.verified == true) {
+                e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-verified.png" width="10" height="12" alt="Encrypted by a verified device"/>;
+            }
+            else if (this.state.verified == false) {
+                e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-warning.png" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Encrypted by an unverified device!"/>;
+            }
+            else {
+                e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-unencrypted.png" width="12" height="12"/>;
+            }
+        }
+
         if (this.props.tileShape === "notif") {
             var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
 
@@ -515,6 +532,7 @@ module.exports = React.createClass({
                         <a href={ permalink }>
                             <MessageTimestamp ts={this.props.mxEvent.getTs()} />
                         </a>
+                        { e2e }
                         <EventTileType ref="tile"
                             mxEvent={this.props.mxEvent}
                             highlights={this.props.highlights}
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 4eb7801e13..2255b39289 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -201,6 +201,13 @@ export default class MessageComposer extends React.Component {
             </div>
         );
 
+        if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
+            // FIXME: show a /!\ if there are untrusted devices in the room...
+            controls.push(
+                <img className="mx_MessageComposer_e2eIcon" src="img/e2e-verified.png" width="10" height="12" alt="Encrypted room"/>
+            );
+        }
+
         var callButton, videoCallButton, hangupButton;
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =