Nest key verification inside conflict dialogs

// FREEBIE

_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"
     }
 }

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'>

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);

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')
             };
         }
     });

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',
+    });
 })();

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');

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;

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;