Merge pull request #462 from matrix-org/matthew/e2e

First wave of E2E Visuals

src/components/structures/MessagePanel.js

@@ -346,6 +346,7 @@ module.exports = React.createClass({
             continuation = true;
         }
 
+/*
         // Work out if this is still a continuation, as we are now showing commands
         // and /me messages with their own little avatar. The case of a change of
         // event type (commands) is handled above, but we need to handle the /me
@@ -357,6 +358,7 @@ module.exports = React.createClass({
                 && prevEvent.getContent().msgtype === 'm.emote') {
             continuation = false;
         }
+*/
 
         // local echoes have a fake date, which could even be yesterday. Treat them
         // as 'today' for the date separators.

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 &&
+        if (this.props.mxEvent.getSender() === MatrixClientPeg.get().credentials.userId)
-            this.props.mxEvent.sender.userId === MatrixClientPeg.get().credentials.userId)
         {
             return false;
         }
@@ -375,7 +374,7 @@ module.exports = React.createClass({
 
         // Info messages are basically information about commands processed on a
         // room, or emote messages
-        var isInfoMessage = (msgtype === 'm.emote' || eventType !== 'm.room.message');
+        var isInfoMessage = (eventType !== 'm.room.message');
 
         var EventTileType = sdk.getComponent(eventTileTypes[eventType]);
         // This shouldn't happen: the caller should check we support this type
@@ -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(
+            mx_EventTile_encrypting: this.props.eventSendStatus == 'encrypting',
-                this.props.eventSendStatus
+            mx_EventTile_sending: isSending,
-            ) !== -1,
             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();
 
@@ -412,7 +414,7 @@ module.exports = React.createClass({
             avatarSize = 24;
             needsSenderProfile = true;
         } else if (isInfoMessage) {
-            // a small avatar, with no sender profile, for emotes and
+            // a small avatar, with no sender profile, for
             // joins/parts/etc
             avatarSize = 14;
             needsSenderProfile = false;
@@ -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.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
+            }
+            else if (this.state.verified == true) {
+                e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-verified.svg" 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.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Encrypted by an unverified device!"/>;
+            }
+            else {
+                e2e = <img className="mx_EventTile_e2eIcon" src="img/e2e-unencrypted.svg" 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}

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.svg" width="10" height="12" alt="Encrypted room"/>
+            );
+        }
+
         var callButton, videoCallButton, hangupButton;
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =

test/test-utils.js

@@ -39,6 +39,7 @@ export function stubClient() {
         loginFlows: sinon.stub(),
         on: sinon.stub(),
         removeListener: sinon.stub(),
+        isRoomEncrypted: sinon.stub().returns(false),
 
         paginateEventTimeline: sinon.stub().returns(q()),
         sendReadReceipt: sinon.stub().returns(q()),