update crypto state of the room in realtime when turned on

src/components/views/dialogs/EncryptedEventDialog.js

@@ -92,11 +92,11 @@ module.exports = React.createClass({
                             </tr>
                             <tr>
                                 <td>Sender device curve25519 olm key</td>
-                                <td><code>{ event.getWireContent().sender_key }</code></td>
+                                <td><code>{ event.getWireContent().sender_key || <i>none</i> }</code></td>
                             </tr>
                             <tr>
                                 <td>Algorithm</td>
-                                <td>{ event.getWireContent().algorithm }</td>
+                                <td>{ event.getWireContent().algorithm || <i>unencrypted</i> }</td>
                             </tr>
                         {
                             event.getContent().msgtype === 'm.bad.encrypted' ? (
@@ -108,7 +108,7 @@ module.exports = React.createClass({
                         }
                             <tr>
                                 <td>Session ID</td>
-                                <td><code>{ event.getWireContent().session_id }</code></td>
+                                <td><code>{ event.getWireContent().session_id || <i>none</i> }</code></td>
                             </tr>
                         </tbody>
                     </table>

src/components/views/rooms/EventTile.js

@@ -467,7 +467,12 @@ module.exports = React.createClass({
         );
 
         var e2e;
-        if (this.props.mxEvent.isEncrypted() || (e2eEnabled && this.props.eventSendStatus)) {
+        // cosmetic padlocks:
+        if ((e2eEnabled && this.props.eventSendStatus) || this.props.mxEvent.getType() === 'm.room.encryption') {
+            e2e = <img style={{ cursor: 'initial', marginLeft: '-1px' }} className="mx_EventTile_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" />;
+        }
+        // real padlocks
+        else if (this.props.mxEvent.isEncrypted() || (e2eEnabled && this.props.eventSendStatus)) {
             if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') {
                 e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
             }

src/components/views/rooms/MessageComposer.js

@@ -42,6 +42,7 @@ export default class MessageComposer extends React.Component {
         this.onToggleFormattingClicked = this.onToggleFormattingClicked.bind(this);
         this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
         this.onInputStateChanged = this.onInputStateChanged.bind(this);
+        this.onEvent = this.onEvent.bind(this);
 
         this.state = {
             autocompleteQuery: '',
@@ -57,6 +58,24 @@ export default class MessageComposer extends React.Component {
 
     }
 
+    componentDidMount() {
+        // N.B. using 'event' rather than 'RoomEvents' otherwise the crypto handler
+        // for 'event' fires *after* 'RoomEvent', and our room won't have yet been
+        // marked as encrypted.
+        // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
+        MatrixClientPeg.get().on("event", this.onEvent);
+    }
+
+    componentWillUnmount() {
+        MatrixClientPeg.get().removeListener("event", this.onEvent);
+    }
+
+    onEvent(event) {
+        if (event.getType() !== 'm.room.encryption') return;
+        if (event.getRoomId() !== this.props.room.roomId) return;
+        this.forceUpdate();
+    }
+
     onUploadClick(ev) {
         if (MatrixClientPeg.get().isGuest()) {
             let NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");