Merge pull request #731 from matrix-org/luke/warn-users-e2e-first-time

Warn users about using e2e for the first time

src/components/structures/RoomView.js

@@ -493,10 +493,39 @@ module.exports = React.createClass({
     // called when state.room is first initialised (either at initial load,
     // after a successful peek, or after we join the room).
     _onRoomLoaded: function(room) {
+        this._warnAboutEncryption(room);
         this._calculatePeekRules(room);
         this._updatePreviewUrlVisibility(room);
     },
 
+    _warnAboutEncryption: function (room) {
+        if (!MatrixClientPeg.get().isRoomEncrypted(room.roomId)) {
+            return;
+        }
+        let userHasUsedEncryption = false;
+        if (localStorage) {
+            userHasUsedEncryption = localStorage.getItem('mx_user_has_used_encryption');
+        }
+        if (!userHasUsedEncryption) {
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            Modal.createDialog(QuestionDialog, {
+                title: "Warning!",
+                hasCancelButton: false,
+                description: (
+                    <div>
+                        <p>End-to-end encryption is in beta and may not be reliable.</p>
+                        <p>You should <b>not</b> yet trust it to secure data.</p>
+                        <p>Devices will <b>not</b> yet be able to decrypt history from before they joined the room.</p>
+                        <p>Encrypted messages will not be visible on clients that do not yet implement encryption.</p>
+                    </div>
+                ),
+            });
+        }
+        if (localStorage) {
+            localStorage.setItem('mx_user_has_used_encryption', true);
+        }
+    },
+
     _calculatePeekRules: function(room) {
         var guestAccessEvent = room.currentState.getStateEvents("m.room.guest_access", "");
         if (guestAccessEvent && guestAccessEvent.getContent().guest_access === "can_join") {

src/components/views/dialogs/QuestionDialog.js

@@ -36,6 +36,7 @@ export default React.createClass({
             description: "",
             button: "OK",
             focus: true,
+            hasCancelButton: true,
         };
     },
 
@@ -49,6 +50,11 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const cancelButton = this.props.hasCancelButton ? (
+            <button onClick={this.onCancel}>
+                Cancel
+            </button>
+        ) : null;
         return (
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
                 onEnterPressed={ this.onOk }
@@ -61,10 +67,7 @@ export default React.createClass({
                     <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
                         {this.props.button}
                     </button>
-
-                    <button onClick={this.onCancel}>
-                        Cancel
-                    </button>
+                    {cancelButton}
                 </div>
             </BaseDialog>
         );