From d4b2f06a63a65e4897d6cbbb6a46df22be933b83 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 13 Jun 2018 13:51:04 +0100
Subject: [PATCH] fix message appears unencrypted while in flight

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/img/e2e-pending.svg                 | 12 ++++++++++++
 src/components/views/rooms/EventTile.js | 24 ++++++++++++++----------
 2 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 res/img/e2e-pending.svg

diff --git a/res/img/e2e-pending.svg b/res/img/e2e-pending.svg
new file mode 100644
index 0000000000..469611cc8d
--- /dev/null
+++ b/res/img/e2e-pending.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+<title>48BF5D32-306C-4B20-88EB-24B1F743CAC9</title>
+<desc>Created with sketchtool.</desc>
+<defs></defs>
+<g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.4">
+    <g id="typing-indicator" transform="translate(-301.000000, -172.000000)" fill="#76CFA6">
+        <path d="M309.666667,175.666667 C309.666667,173.633333 308.033333,172 306,172 C303.966667,172 302.333333,173.633333 302.333333,175.666667 L302.333333,176.666667 L301,176.666667 L301,184 L306,184 L311,184 L311,176.666667 L309.666667,176.666667 L309.666667,175.666667 Z M306,176.666667 L303.666667,176.666667 L303.666667,175.666667 C303.666667,174.366667 304.7,173.333333 306,173.333333 C307.3,173.333333 308.333333,174.366667 308.333333,175.666667 L308.333333,176.666667 L306,176.666667 L306,176.666667 Z" id="verified_icon"></path>
+    </g>
+</g>
+</svg>
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 589524bb9e..50fe0928b0 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -34,6 +34,7 @@ const ContextualMenu = require('../../structures/ContextualMenu');
 import dis from '../../../dispatcher';
 import {makeEventPermalink} from "../../../matrix-to";
 import SettingsStore from "../../../settings/SettingsStore";
+import {EventStatus} from 'matrix-js-sdk';
 
 const ObjectUtils = require('../../../ObjectUtils');
 
@@ -442,7 +443,6 @@ module.exports = withMatrixClient(React.createClass({
         const ev = this.props.mxEvent;
         const props = {onClick: this.onCryptoClicked};
 
-
         if (ev.getContent().msgtype === 'm.bad.encrypted') {
             return <E2ePadlockUndecryptable {...props} />;
         } else if (ev.isEncrypted()) {
@@ -451,15 +451,15 @@ module.exports = withMatrixClient(React.createClass({
             } else {
                 return <E2ePadlockUnverified {...props} />;
             }
-        } else {
-            // XXX: if the event is being encrypted (ie eventSendStatus ===
-            // encrypting), it might be nice to show something other than the
-            // open padlock?
-
-            // if the event is not encrypted, but it's an e2e room, show the
-            // open padlock
-            const e2eEnabled = this.props.matrixClient.isRoomEncrypted(ev.getRoomId());
-            if (e2eEnabled) {
+        } else if (this.props.matrixClient.isRoomEncrypted(ev.getRoomId())) {
+            // else if room is encrypted
+            // and event is being encrypted or is not_sent (Unknown Devices/Network Error)
+            if (ev.status === EventStatus.ENCRYPTING || ev.status === EventStatus.NOT_SENT) {
+                // XXX: if the event is being encrypted (ie eventSendStatus === encrypting),
+                // it might be nice to show something other than the open padlock?
+                return <E2ePadlockPending {...props} />;
+            } else {
+                // if the event is not encrypted, but it's an e2e room, show the open padlock
                 return <E2ePadlockUnencrypted {...props} />;
             }
         }
@@ -736,6 +736,10 @@ function E2ePadlockUndecryptable(props) {
     );
 }
 
+function E2ePadlockPending(props) {
+    return <E2ePadlock alt={_t('Encrypting')} src="img/e2e-pending.svg" width="10" height="12" {...props} />;
+}
+
 function E2ePadlockVerified(props) {
     return (
         <E2ePadlock alt={_t("Encrypted by a verified device")}