Nest key verification inside conflict dialogs

// FREEBIE
2016-03-23 12:33:50 -07:00 · 2016-03-23 12:33:50 -07:00 · 6fe9c3f964
commit 6fe9c3f964
parent c4fcbd8cbe
8 changed files with 123 additions and 122 deletions
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@ -22,16 +22,18 @@
      }
    },
    "acceptNewKey": {
-      "message": "Accept new key"
+      "message": "Accept",
+      "description": "Label for a button to accept a new identity key"
    },
    "verify": {
      "message": "Verify"
    },
    "newIdentity": {
-      "message": "New Identity"
+      "message": "New Identity",
+      "description": "Header for a key change dialog"
    },
    "identityChanged": {
-      "message": "This contact's identity key has changed. This could either mean that someone is trying to intercept your communication, or this contact simply re-installed Signal and now has a new identity key."
+      "message": "This contact is using a new Signal identity. This could either mean that someone is trying to intercept your communication, or this contact simply re-installed Signal. You may wish to verify their new identity."
    },
    "outgoingKeyConflict": {
      "message": "This contact's identity key has changed. Click to process and display."
@ -242,5 +244,13 @@
    "messageNotSent": {
        "message": "Message not sent.",
        "description": "Informational label, appears on messages that failed to send"
+    },
+    "showMore": {
+        "message": "Details",
+        "description": "Displays the details of a key change"
+    },
+    "showLess": {
+        "message": "Hide details",
+        "description": "Hides the details of a key change"
    }
 }
--- a/background.html
+++ b/background.html
@ -235,8 +235,12 @@
  <script type='text/x-tmpl-mustache' id='group-member-list'>
    <div class='container'></div>
  </script>
-  <script type='text/x-tmpl-mustache' id='key-verification'>
+  <script type='text/x-tmpl-mustache' id='key_verification_panel'>
    <div class='container'>
+      {{> key_verification }}
+    </div>
+  </script>
+  <script type='text/x-tmpl-mustache' id='key_verification'>
      <p> {{theirIdentity}} </p>
      {{ ^their_key }}
        <div class='placeholder'>{{ their_key_unknown }}</div>
@ -250,7 +254,6 @@
      <div class='key'>
        {{ #your_key  }} <span>{{ . }}</span> {{ /your_key  }}
      </div>
-    </div>
  </script>
  <!-- index -->
  <script type='text/x-tmpl-mustache' id='group_info_input'>
@ -305,15 +308,13 @@
    <div class='clearfix'>
      <h3>{{ newIdentity }}</h3>
      {{> avatar }}
-      <span class='name'>{{ name }}
-      <button class='conflict'><span>{{ verify }}</span></button>
-      <button class='cancel hide'><span>{{ cancel }}</span></button>
-      </span>
+      <span class='name'>{{ name }}</span>
+      <button class='resolve'>{{ resolve }}</button>
+      <span class='hideKeys hide'> {{ hideKeys }} </span>
+      <span class='showKeys'> {{ showKeys }} </span>
    </div>
-    <div class='content hide'>
+    <div class='keys hide'>
      <p> {{ message }} </p>
-      <p> {{{ verifyContact }}} </p>
-      <p><button class='resolve'>{{ resolve }}</button></p>
    </div>
  </script>
  <script type='text/x-tmpl-mustache' id='window-controls'>
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@ -162,7 +162,7 @@
                var our_number = textsecure.storage.user.getNumber();
                textsecure.storage.axolotl.getIdentityKey(their_number).then(function(their_key) {
                    textsecure.storage.axolotl.getIdentityKey(our_number).then(function(our_key) {
-                        var view = new Whisper.KeyVerificationView({
+                        var view = new Whisper.KeyVerificationPanelView({
                            model: { their_key: their_key, your_key: our_key }
                        }).render();
                        this.listenBack(view);
--- a/js/views/key_conflict_dialogue_view.js
+++ b/js/views/key_conflict_dialogue_view.js
@ -11,42 +11,48 @@
        className: 'key-conflict-dialogue clearfix',
        initialize: function(options) {
            this.contact = options.contact;
-            this.conflict = options.conflict;
            this.conversation = options.conversation;
+            textsecure.storage.axolotl.getIdentityKey(textsecure.storage.user.getNumber()).then(function(our_key) {
+                this.your_key = our_key;
+                this.render();
+            }.bind(this));
+            textsecure.storage.axolotl.getIdentityKey(textsecure.storage.user.getNumber()).then(function(our_key) {
+                var view = new Whisper.KeyVerificationView({
+                    model: {
+                        their_key : this.model.identityKey,
+                        your_key  : our_key
+                    }
+                });
+                view.render().$el.appendTo(this.$('.keys'));
+            }.bind(this));
        },
        events: {
-            'click .conflict': 'showDialog',
-            'click .cancel'  : 'cancel',
-            'click .verify'  : 'triggerVerify',
+            'click .showKeys': 'showKeys',
+            'click .hideKeys': 'hideKeys',
            'click .resolve' : 'resolve'
        },
-        triggerVerify: function() {
-            this.trigger('verify', {identityKey: this.model.identityKey});
+        hideKeys: function() {
+            this.$('.keys, .hideKeys').hide();
+            this.$('.showKeys').show();
+        },
+        showKeys: function() {
+            this.$('.keys, .hideKeys').show();
+            this.$('.showKeys').hide();
        },
        resolve: function() {
-            this.trigger('resolve');
            this.remove();
            this.conversation.resolveConflicts(this.model);
        },
-        showDialog: function() {
-            this.$('.conflict').hide();
-            this.$('.cancel, .content').show();
-        },
-        cancel: function() {
-            this.$('.cancel, .content').hide();
-            this.$('.conflict').show();
-        },
        render_attributes: function() {
            return {
                name         : this.contact.getTitle(),
                avatar       : this.contact.getAvatar(),
-                conflict     : this.conflict,
-                verify       : i18n('verify'),
-                cancel       : i18n('cancel'),
+                conflict     : this.model,
                newIdentity  : i18n('newIdentity'),
                message      : i18n('identityChanged'),
                resolve      : i18n('acceptNewKey'),
-                verifyContact: i18n('verifyContact')
+                showKeys     : i18n('showMore'),
+                hideKeys     : i18n('showLess')
            };
        }
    });
--- a/js/views/key_verification_view.js
+++ b/js/views/key_verification_view.js
@ -6,8 +6,8 @@
    window.Whisper = window.Whisper || {};

    Whisper.KeyVerificationView = Whisper.View.extend({
-        className: 'key-verification panel',
-        templateName: 'key-verification',
+        className: 'key-verification',
+        templateName: 'key_verification',
        events: {
            'click .back': 'goBack'
        },
@ -36,4 +36,8 @@
            };
        }
    });
+    Whisper.KeyVerificationPanelView = Whisper.KeyVerificationView.extend({
+        className: 'key-verification panel',
+        templateName: 'key_verification_panel',
+    });
 })();
--- a/js/views/message_detail_view.js
+++ b/js/views/message_detail_view.js
@ -43,19 +43,6 @@
        goBack: function() {
            this.trigger('back');
        },
-        verify: function(their_key) {
-            textsecure.storage.axolotl.getIdentityKey(textsecure.storage.user.getNumber()).then(function(our_key) {
-                var view = new Whisper.KeyVerificationView({
-                    model: { their_key: their_key, your_key: our_key }
-                });
-                this.$el.hide();
-                view.render().$el.insertAfter(this.el);
-                this.listenTo(view, 'back', function() {
-                    view.remove();
-                    this.$el.show();
-                }.bind(this));
-            }.bind(this));
-        },
        contacts: function() {
            if (this.model.isIncoming()) {
                var number = this.model.get('source');
@ -83,14 +70,6 @@
                conversation: this.conversation
            }).render();
            this.$('.conflicts').append(view.el);
-            this.listenTo(view, 'verify', function(data) {
-                this.verify(conflict.identityKey);
-            });
-            /*
-            this.listenTo(view, 'resolve', function() {
-                this.render();
-            });
-            */
        },
        render: function() {
            this.errors = _.groupBy(this.model.get('errors'), 'number');
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@ -47,17 +47,16 @@
 }

 .key-verification {
-  background: white;
-  padding: 20px 10px;
-
-  p {
-    padding: 1em;
+  &.panel {
+    padding: 20px 10px;
  }
+
  .key, .placeholder {
    padding: 0 1em;
    -webkit-user-select: text;
  }
  .key {
+    display: inline-block;
    font-family: monospace;
    padding: 10px;
    margin: 10px;
@ -71,39 +70,36 @@
 }

 .message-detail {
+  & > .container > * {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
  .key-conflict-dialogue {
    background: #F3F3A7;
    border-radius: 5px;
-    padding: 1em;
-    margin: 1em;
+    padding: 20px;
+    margin: 20px;

-    button {
+    button.resolve {
      outline: none;
      border: none;
      border-radius: 5px;
      color: white;
-      padding: 0.5em 1em;
      font-weight: bold;
-      line-height: 18px;
-
-      span {
-        vertical-align: middle;
-      }
+      line-height: 36px;
+      padding: 0 20px;
+      float: right;
+      background: $blue;
+      margin-left: 20px;
    }
-  }

-  .key-conflict-dialogue {
-    .content p {
-      max-width: 40em;
-      margin: 1em  auto;
-    }
-    .verify {
+    .hideKeys, .showKeys {
      color: $blue;
      text-decoration: underline;
      cursor: pointer;
-    }
-    .resolve {
-      background: $blue;
+      float: right;
+      line-height: 36px;
    }
  }

@ -446,12 +442,6 @@
    display: none;
  }

-  .avatar {
-    height: 36px;
-    width: 36px;
-    line-height: 36px;
-  }
-
  .end-session {
    font: small;
    font-style: italic;
@ -471,6 +461,16 @@
  }
 }

+.message-list,
+.message-container,
+.key-conflict-dialogue {
+  .avatar {
+    height: 36px;
+    width: 36px;
+    line-height: 36px;
+  }
+}
+
 .bottom-bar {
  box-sizing: content-box;
  $button-width: 36px;
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@ -657,48 +657,47 @@ input.search {
        padding: 2em 20px 0;
        overflow-y: auto; }

-.key-verification {
-  background: white;
+.key-verification.panel {
  padding: 20px 10px; }
-  .key-verification p {
-    padding: 1em; }
-  .key-verification .key, .key-verification .placeholder {
-    padding: 0 1em;
-    -webkit-user-select: text; }
-  .key-verification .key {
-    font-family: monospace;
-    padding: 10px;
-    margin: 10px;
-    background: #f3f3f3;
-    border: solid 1px #d9d9d9;
-    border-radius: 5px; }
-  .key-verification .placeholder {
-    font-weight: bold; }
+.key-verification .key, .key-verification .placeholder {
+  padding: 0 1em;
+  -webkit-user-select: text; }
+.key-verification .key {
+  display: inline-block;
+  font-family: monospace;
+  padding: 10px;
+  margin: 10px;
+  background: #f3f3f3;
+  border: solid 1px #d9d9d9;
+  border-radius: 5px; }
+.key-verification .placeholder {
+  font-weight: bold; }

+.message-detail > .container > * {
+  max-width: 800px;
+  margin: 0 auto; }
 .message-detail .key-conflict-dialogue {
  background: #F3F3A7;
  border-radius: 5px;
-  padding: 1em;
-  margin: 1em; }
-  .message-detail .key-conflict-dialogue button {
+  padding: 20px;
+  margin: 20px; }
+  .message-detail .key-conflict-dialogue button.resolve {
    outline: none;
    border: none;
    border-radius: 5px;
    color: white;
-    padding: 0.5em 1em;
    font-weight: bold;
-    line-height: 18px; }
-    .message-detail .key-conflict-dialogue button span {
-      vertical-align: middle; }
-.message-detail .key-conflict-dialogue .content p {
-  max-width: 40em;
-  margin: 1em  auto; }
-.message-detail .key-conflict-dialogue .verify {
-  color: #2090ea;
-  text-decoration: underline;
-  cursor: pointer; }
-.message-detail .key-conflict-dialogue .resolve {
-  background: #2090ea; }
+    line-height: 36px;
+    padding: 0 20px;
+    float: right;
+    background: #2090ea;
+    margin-left: 20px; }
+  .message-detail .key-conflict-dialogue .hideKeys, .message-detail .key-conflict-dialogue .showKeys {
+    color: #2090ea;
+    text-decoration: underline;
+    cursor: pointer;
+    float: right;
+    line-height: 36px; }
 .message-detail .message-container {
  background: white;
  padding: 20px; }
@ -972,11 +971,6 @@ input.search {
  .message-container .outgoing .avatar,
  .message-list .outgoing .avatar {
    display: none; }
-  .message-container .avatar,
-  .message-list .avatar {
-    height: 36px;
-    width: 36px;
-    line-height: 36px; }
  .message-container .end-session,
  .message-list .end-session {
    font: small;
@ -992,6 +986,13 @@ input.search {
    .message-list .key-conflict button {
      margin-top: 5px; }

+.message-list .avatar,
+.message-container .avatar,
+.key-conflict-dialogue .avatar {
+  height: 36px;
+  width: 36px;
+  line-height: 36px; }
+
 .bottom-bar {
  box-sizing: content-box;
  padding: 5px 5px 5px 0;