mark messages with a black shield if the megolm session isn't trusted

res/css/views/rooms/_EventTile.scss

@@ -354,6 +354,11 @@ limitations under the License.
     opacity: 1;
 }
 
+.mx_EventTile_e2eIcon_unauthenticated {
+    background-image: url('$(res)/img/e2e/normal.svg');
+    opacity: 1;
+}
+
 .mx_EventTile_e2eIcon_hidden {
     display: none;
 }

src/components/views/rooms/E2EIcon.js

@@ -28,6 +28,7 @@ export const E2E_STATE = {
     WARNING: "warning",
     UNKNOWN: "unknown",
     NORMAL: "normal",
+    UNAUTHENTICATED: "unauthenticated",
 };
 
 const crossSigningUserTitles = {

src/components/views/rooms/EventTile.js

@@ -313,35 +313,52 @@ export default createReactClass({
             return;
         }
 
-        // If we directly trust the device, short-circuit here
-        const verified = await this.context.isEventSenderVerified(mxEvent);
-        if (verified) {
+        const encryptionInfo = this.context.getEventEncryptionInfo(mxEvent);
+        const senderId = mxEvent.getSender();
+        const userTrust = this.context.checkUserTrust(senderId);
+
+        if (encryptionInfo.mismatchedSender) {
+            // something definitely wrong is going on here
             this.setState({
-                verified: E2E_STATE.VERIFIED,
-            }, () => {
-                // Decryption may have caused a change in size
-                this.props.onHeightChanged();
-            });
+                verified: E2E_STATE.WARNING,
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
-        if (!this.context.checkUserTrust(mxEvent.getSender()).isCrossSigningVerified()) {
+        if (!userTrust.isCrossSigningVerified()) {
+            // user is not verified, so default to everything is normal
             this.setState({
                 verified: E2E_STATE.NORMAL,
-            }, this.props.onHeightChanged);
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
-        const eventSenderTrust = await this.context.checkEventSenderTrust(mxEvent);
+        const eventSenderTrust = this.context.checkDeviceTrust(
+            senderId, encryptionInfo.sender.deviceId,
+        );
         if (!eventSenderTrust) {
             this.setState({
                 verified: E2E_STATE.UNKNOWN,
-            }, this.props.onHeightChanged); // Decryption may have cause a change in size
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
+            return;
+        }
+
+        if (!eventSenderTrust.isVerified()) {
+            this.setState({
+                verified: E2E_STATE.WARNING,
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
+            return;
+        }
+
+        if (!encryptionInfo.authenticated) {
+            this.setState({
+                verified: E2E_STATE.UNAUTHENTICATED,
+            }, this.props.onHeightChanged); // Decryption may have caused a change in size
             return;
         }
 
         this.setState({
-            verified: eventSenderTrust.isVerified() ? E2E_STATE.VERIFIED : E2E_STATE.WARNING,
+            verified: E2E_STATE.VERIFIED,
         }, this.props.onHeightChanged); // Decryption may have caused a change in size
     },
 
@@ -526,6 +543,8 @@ export default createReactClass({
                 return; // no icon if we've not even cross-signed the user
             } else if (this.state.verified === E2E_STATE.VERIFIED) {
                 return; // no icon for verified
+            } else if (this.state.verified === E2E_STATE.UNAUTHENTICATED) {
+                return (<E2ePadlockUnauthenticated />);
             } else if (this.state.verified === E2E_STATE.UNKNOWN) {
                 return (<E2ePadlockUnknown />);
             } else {
@@ -976,6 +995,12 @@ function E2ePadlockUnknown(props) {
     );
 }
 
+function E2ePadlockUnauthenticated(props) {
+    return (
+        <E2ePadlock title={_t("The authenticity of this encrypted message can't be guaranteed on this device.")} icon="unauthenticated" {...props} />
+    );
+}
+
 class E2ePadlock extends React.Component {
     static propTypes = {
         icon: PropTypes.string.isRequired,

src/i18n/strings/en_EN.json

@@ -1023,6 +1023,7 @@
     "Encrypted by an unverified session": "Encrypted by an unverified session",
     "Unencrypted": "Unencrypted",
     "Encrypted by a deleted session": "Encrypted by a deleted session",
+    "The authenticity of this encrypted message can't be guaranteed on this device.": "The authenticity of this encrypted message can't be guaranteed on this device.",
     "Please select the destination room for this message": "Please select the destination room for this message",
     "Invite only": "Invite only",
     "Scroll to most recent messages": "Scroll to most recent messages",