Display key conflict dialog inline

One less modal.

// FREEBIE

_locales/en/messages.json

@@ -9,7 +9,15 @@
       "message": "Submit"
     },
     "verifyContact": {
-      "message": "You may wish to <span class='verify'>verify</span> this contact."
+      "message": "You may wish to $tag_start$verify$tag_end$ this contact.",
+      "placeholders": {
+        "tag_start": {
+          "content": "<a class='verify' href='#'>"
+        },
+        "tag_end": {
+          "content": "</a>"
+        }
+      }
     },
     "acceptNewKey": {
       "message": "Accept new key"
@@ -20,6 +28,9 @@
     "newIdentity": {
       "message": "New Identity"
     },
+    "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."
+    },
     "outgoingKeyConflict": {
       "message": "This contact's identity key has changed. Click to process and display."
     },

background.html

@@ -276,7 +276,7 @@
     <p>{{ message }}</p>
   </script>
   <script type='text/x-tmpl-mustache' id='contact-detail'>
-      <div>
+      <div class='clearfix'>
         {{ #errors }}
             <span class='error-icon'>
               <span class='error-message'>{{message}}</span>
@@ -286,6 +286,7 @@
         <span class='name'>{{ name }}
         {{ #conflict }}
             <button class='conflict'><span>{{ verify }}</span></button>
+            <button class='cancel hide'><span>{{ cancel }}</span></button>
         {{ /conflict }}
         </span>
       </div>
@@ -294,11 +295,8 @@
     <div class='content'>
       <p> {{ message }} </p>
       <p> {{{ verifyContact }}} </p>
-      <p>
-        <button class='cancel'>{{ cancel }}</button>
-        <button class='resolve'>{{ resolve }}</button>
-      </p>
     </div>
+    <button class='resolve'>{{ resolve }}</button>
   </script>
   <script type='text/x-tmpl-mustache' id='window-controls'>
     <button class='minimize'>&minus;</button>

js/views/key_conflict_dialogue_view.js

@@ -7,25 +7,18 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.KeyConflictDialogueView = Whisper.View.extend({
-        className: 'key-conflict-dialogue',
+        className: 'key-conflict-dialogue clearfix',
         templateName: 'key-conflict-dialogue',
         initialize: function(options) {
             this.conversation = options.conversation;
         },
         events: {
             'click .verify': 'triggerVerify',
-            'click .resolve': 'resolve',
-            'click .cancel': 'remove',
-            'click': 'clickOut'
+            'click .resolve': 'resolve'
         },
         triggerVerify: function() {
             this.trigger('verify', {identityKey: this.model.identityKey});
         },
-        clickOut: function(e) {
-            if (!$(e.target).closest('.content').length) {
-                this.remove();
-            }
-        },
         resolve: function() {
             this.trigger('resolve');
             this.remove();
@@ -33,8 +26,7 @@
         },
         render_attributes: function() {
             return {
-                message: this.model.message,
-                cancel: i18n('cancel'),
+                message: i18n('identityChanged'),
                 resolve: i18n('acceptNewKey'),
                 verifyContact: i18n('verifyContact')
             };

js/views/message_detail_view.js

@@ -14,12 +14,21 @@
                 return (e.name === 'IncomingIdentityKeyError' ||
                         e.name === 'OutgoingIdentityKeyError');
             });
+
         },
         events: {
-            'click .conflict': 'triggerConflict'
+            'click .conflict': 'triggerConflict',
+            'click .cancel'  : 'cancel'
         },
         triggerConflict: function() {
-            this.$el.trigger('conflict', {conflict: this.conflict});
+            this.$el.trigger('conflict', {conflict: this.conflict, el: this.el});
+            this.$('.cancel').show();
+            this.$('.conflict').hide();
+        },
+        cancel: function() {
+            this.$('.key-conflict-dialogue').remove();
+            this.$('.cancel').hide();
+            this.$('.conflict').show();
         },
         render_attributes: function() {
             return {
@@ -27,7 +36,8 @@
                 avatar   : this.model.getAvatar(),
                 conflict : this.conflict,
                 errors   : this.errors,
-                verify   : i18n('verify')
+                verify   : i18n('verify'),
+                cancel   : i18n('cancel')
             };
         }
     });
@@ -76,7 +86,7 @@
                 model: data.conflict,
                 conversation: this.conversation
             });
-            view.render().$el.appendTo(this.$el);
+            view.render().$el.appendTo(data.el);
             this.listenTo(view, 'verify', function(data) {
                 this.verify(data.identityKey);
             });

stylesheets/_conversation.scss

@@ -102,18 +102,23 @@
     border-radius: 5px;
 
     button {
-      margin: 5px;
-      background: $blue;
       outline: none;
       border: none;
       border-radius: 5px;
       color: white;
-      padding: 0.5em;
+      padding: 0.5em 1em;
       font-weight: bold;
+      line-height: 18px;
 
       span {
         vertical-align: middle;
       }
+    }
+  }
+  .hasRetry {
+    button {
+      margin: 5px;
+      background: $blue;
 
       &:before {
         content: '';
@@ -168,9 +173,34 @@
     }
   }
 
+  .conflicts .contact-detail {
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+  }
+  .contacts .contact-detail {
+    padding: 0 36px;
+  }
   .contact-detail {
     margin-bottom: 5px;
-    padding: 0 36px;
+
+    .key-conflict-dialogue {
+      .content {
+        max-width: 40em;
+        margin: 0 auto;
+      }
+      .verify {
+        color: $blue;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+
+      button {
+        float: right;
+        background: $blue;
+        margin: 0 0 10px 10px;
+      }
+    }
   }
 
   h3 {
@@ -220,14 +250,11 @@
   button.conflict {
     float: right;
     background: #d00;
-
-    span {
-      padding-left: 5px;
-    }
-
-    &:before {
-      background: url('/images/error.png') no-repeat center center;
-    }
+  }
+  button.cancel {
+    float: right;
+    color: $grey_d;
+    border: solid 1px #ccc;
   }
 }
 
@@ -485,28 +512,6 @@
   }
 }
 
-.key-conflict-dialogue {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  padding: $header-height;
-
-  .content {
-    padding: 1em;
-    background: white;
-    color: black;
-    box-shadow: 0 0 5px 0 black;
-  }
-
-  .verify {
-    color: $blue;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-}
-
 .bottom-bar {
   $button-width: 36px;
   margin-top: 4px;

stylesheets/manifest.css

@@ -657,26 +657,27 @@ input.search {
   border-radius: 5px; }
   .message-detail .hasConflict button,
   .message-detail .hasRetry button {
-    margin: 5px;
-    background: #2090ea;
     outline: none;
     border: none;
     border-radius: 5px;
     color: white;
-    padding: 0.5em;
-    font-weight: bold; }
+    padding: 0.5em 1em;
+    font-weight: bold;
+    line-height: 18px; }
     .message-detail .hasConflict button span,
     .message-detail .hasRetry button span {
       vertical-align: middle; }
-    .message-detail .hasConflict button:before,
-    .message-detail .hasRetry button:before {
-      content: '';
-      display: inline-block;
-      vertical-align: middle;
-      width: 18px;
-      height: 18px;
-      background: url("/images/refresh.png") no-repeat center center;
-      background-size: 100%; }
+.message-detail .hasRetry button {
+  margin: 5px;
+  background: #2090ea; }
+  .message-detail .hasRetry button:before {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    width: 18px;
+    height: 18px;
+    background: url("/images/refresh.png") no-repeat center center;
+    background-size: 100%; }
 .message-detail .message-container {
   background: white;
   padding: 1em 0; }
@@ -704,9 +705,25 @@ input.search {
       height: 18px;
       background: url("/images/refresh.png") no-repeat center center;
       background-size: 100%; }
-.message-detail .contact-detail {
-  margin-bottom: 5px;
+.message-detail .conflicts .contact-detail {
+  padding: 1em;
+  border: 1px solid #ccc;
+  border-radius: 10px; }
+.message-detail .contacts .contact-detail {
   padding: 0 36px; }
+.message-detail .contact-detail {
+  margin-bottom: 5px; }
+  .message-detail .contact-detail .key-conflict-dialogue .content {
+    max-width: 40em;
+    margin: 0 auto; }
+  .message-detail .contact-detail .key-conflict-dialogue .verify {
+    color: #2090ea;
+    text-decoration: underline;
+    cursor: pointer; }
+  .message-detail .contact-detail .key-conflict-dialogue button {
+    float: right;
+    background: #2090ea;
+    margin: 0 0 10px 10px; }
 .message-detail h3 {
   font-size: 1em;
   padding: 5px; }
@@ -746,10 +763,10 @@ input.search {
 .message-detail button.conflict {
   float: right;
   background: #d00; }
-  .message-detail button.conflict span {
-    padding-left: 5px; }
-  .message-detail button.conflict:before {
-    background: url("/images/error.png") no-repeat center center; }
+.message-detail button.cancel {
+  float: right;
+  color: #454545;
+  border: solid 1px #ccc; }
 
 .group-update {
   font-size: smaller; }
@@ -951,23 +968,6 @@ input.search {
     .message-list .key-conflict button {
       margin-top: 5px; }
 
-.key-conflict-dialogue {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  padding: 36px; }
-  .key-conflict-dialogue .content {
-    padding: 1em;
-    background: white;
-    color: black;
-    box-shadow: 0 0 5px 0 black; }
-  .key-conflict-dialogue .verify {
-    color: #2090ea;
-    text-decoration: underline;
-    cursor: pointer; }
-
 .bottom-bar {
   margin-top: 4px;
   height: 36px;