Add key verification screen

Accessible from the menu on private conversations.

conversation.html

@@ -22,6 +22,7 @@
                       {{/group}}
                       {{^group}}
                           <li><a class='end-session'>End Session</a></li>
+                          <li><a class='verify-identity'>Verify Identity</a></li>
                       {{/group}}
                       <li><a class='destroy'>Delete messages</a></li>
                   </ul>
@@ -116,6 +117,22 @@
             </table>
           </div>
         </script>
+        <script type='text/x-tmpl-mustache' id='key-verification'>
+          <div class='title-bar' id='header'>
+              <button class='back'></button>
+              <span class='title-text'>Verify Identity</span>
+          </div>
+          <div class='container'>
+            <p> Their identity (they read): </p>
+            <div class='key'>
+              {{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
+            </div>
+            <p> Your identity (you read): </p>
+            <div class='key'>
+              {{ #your_key  }} <span>{{ . }}</span> {{ /your_key  }}
+            </div>
+          </div>
+        </script>
 
         <script type="text/javascript" src="js/components.js"></script>
 
@@ -138,6 +155,7 @@
         <script type="text/javascript" src="js/views/group_update_view.js"></script>
         <script type="text/javascript" src="js/views/attachment_view.js"></script>
         <script type="text/javascript" src="js/views/message_view.js"></script>
+        <script type="text/javascript" src="js/views/key_verification_view.js"></script>
         <script type="text/javascript" src="js/views/message_detail_view.js"></script>
         <script type="text/javascript" src="js/views/message_list_view.js"></script>
 

js/views/conversation_view.js

@@ -52,11 +52,32 @@
             'click .end-session': 'endSession',
             'click .leave-group': 'leaveGroup',
             'click .new-group-update': 'newGroupUpdate',
+            'click .verify-identity': 'verifyIdentity',
             'click .hamburger': 'toggleMenu',
             'click' : 'closeMenu',
             'select .entry': 'messageDetail'
         },
 
+        verifyIdentity: function() {
+            if (this.model.isPrivate()) {
+                var number = this.model.id;
+                var view = new Whisper.KeyVerificationView({
+                    model: {
+                        their_key: textsecure.storage.devices.getIdentityKeyForNumber(number),
+                        your_key: textsecure.storage.devices.getIdentityKeyForNumber(
+                            textsecure.utils.unencodeNumber(textsecure.storage.getUnencrypted("number_id"))[0]
+                        )
+                    }
+                });
+                this.$el.hide();
+                view.render().$el.insertAfter(this.el);
+                this.listenTo(view, 'back', function() {
+                    view.remove();
+                    this.$el.show();
+                });
+            }
+        },
+
         messageDetail: function(e, data) {
             var view = new Whisper.MessageDetailView({ model: data.message, conversation: this.model });
             view.$el.insertAfter(this.$el);

js/views/key_verification_view.js

@@ -0,0 +1,48 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+    'use strict';
+
+    window.Whisper = window.Whisper || {};
+
+    Whisper.KeyVerificationView = Backbone.View.extend({
+        className: 'key-verification',
+        initialize: function(options) {
+            this.template = $('#key-verification').html();
+            Mustache.parse(this.template);
+        },
+        events: {
+            'click .back': 'goBack'
+        },
+        goBack: function() {
+            this.trigger('back');
+        },
+        splitKey: function(key) {
+            // key is a binary string
+            return _.map(key, function(chr, i) {
+                return ('0' + key.charCodeAt(i).toString(16)).slice(-2);
+
+            });
+        },
+        render: function() {
+            this.$el.html(Mustache.render(this.template, {
+                your_key: this.splitKey(this.model.your_key),
+                their_key: this.splitKey(this.model.their_key)
+            }));
+            return this;
+        }
+    });
+})();

js/views/message_detail_view.js

@@ -27,11 +27,28 @@
             this.conversation = options.conversation;
         },
         events: {
-            'click .back': 'goBack'
+            'click .back': 'goBack',
+            'verify': 'verify'
         },
         goBack: function() {
             this.trigger('back');
         },
+        verify: function(number) {
+            var view = new Whisper.KeyVerificationView({
+                model: {
+                    their_key: textsecure.storage.devices.getIdentityKeyForNumber(number),
+                    your_key: textsecure.storage.devices.getIdentityKeyForNumber(
+                        textsecure.utils.unencodeNumber(textsecure.storage.getUnencrypted("number_id"))[0]
+                    )
+                }
+            });
+            this.$el.hide();
+            view.render().$el.insertAfter(this.el);
+            this.listenTo(view, 'back', function() {
+                view.remove();
+                this.$el.show();
+            });
+        },
         render: function() {
             this.$el.html(Mustache.render(this.template, {
                 sent_at: moment(this.model.get('sent_at')).toString(),

stylesheets/_conversation.scss

@@ -2,10 +2,24 @@
   padding: $header-height 0;
 }
 
-.conversation, .discussion-container, .message-list, .message-detail {
+.conversation, .discussion-container, .message-list, .message-detail, .key-verification {
   height: 100%;
 }
 
+.key-verification {
+  padding: $header-height 0 0;
+  .container {
+    height: 100%;
+    overflow: auto;
+  }
+  p {
+    padding: 1em;
+  }
+  .key {
+    font-family: monospace;
+    padding: 0 1em;
+  }
+}
 .message-detail {
   padding: $header-height 0 0;
   background: $grey_l;

stylesheets/manifest.css

@@ -280,9 +280,20 @@ input.new-message {
 .conversation {
   padding: 36px 0; }
 
-.conversation, .discussion-container, .message-list, .message-detail {
+.conversation, .discussion-container, .message-list, .message-detail, .key-verification {
   height: 100%; }
 
+.key-verification {
+  padding: 36px 0 0; }
+  .key-verification .container {
+    height: 100%;
+    overflow: auto; }
+  .key-verification p {
+    padding: 1em; }
+  .key-verification .key {
+    font-family: monospace;
+    padding: 0 1em; }
+
 .message-detail {
   padding: 36px 0 0;
   background: #f3f3f3; }