Add support for new fingerprint format

This will be ready to roll whenever Android/iOS is.

// FREEBIE

background.html

@@ -287,6 +287,13 @@
       <div class='key'>
         {{ #your_key  }} <span>{{ . }}</span> {{ /your_key  }}
       </div>
+      <div class='securityNumber'></div>
+  </script>
+  <script type='text/x-tmpl-mustache' id='security_number'>
+      <label> Security number </label>
+      <div class='key'>
+        {{ #chunks }} <span>{{ . }}</span> {{ /chunks }}
+      </div>
   </script>
   <!-- index -->
   <script type='text/x-tmpl-mustache' id='group_info_input'>

js/views/conversation_view.js

@@ -200,8 +200,13 @@
                 textsecure.storage.protocol.loadIdentityKey(their_number).then(function(their_key) {
                     textsecure.storage.protocol.loadIdentityKey(our_number).then(function(our_key) {
                         var view = new Whisper.KeyVerificationPanelView({
-                            model: { their_key: their_key, your_key: our_key }
-                        }).render();
+                            model: {
+                                your_number: our_number,
+                                their_number: their_number,
+                                their_key: their_key,
+                                your_key: our_key
+                            }
+                        });
                         this.listenBack(view);
                     }.bind(this));
                 }.bind(this));

js/views/key_conflict_dialogue_view.js

@@ -12,18 +12,19 @@
         initialize: function(options) {
             this.contact = options.contact;
             this.conversation = options.conversation;
-            textsecure.storage.protocol.loadIdentityKey(textsecure.storage.user.getNumber()).then(function(our_key) {
+            var our_number = textsecure.storage.user.getNumber();
+            textsecure.storage.protocol.loadIdentityKey(our_number).then(function(our_key) {
                 this.your_key = our_key;
                 this.render();
-            }.bind(this));
-            textsecure.storage.protocol.loadIdentityKey(textsecure.storage.user.getNumber()).then(function(our_key) {
                 var view = new Whisper.KeyVerificationView({
                     model: {
+                        your_number: our_number,
+                        their_number: this.model.number,
                         their_key : this.model.identityKey,
                         your_key  : our_key
                     }
                 });
-                view.render().$el.appendTo(this.$('.keys'));
+                view.$el.appendTo(this.$('.keys'));
             }.bind(this));
         },
         events: {

js/views/key_verification_view.js

@@ -5,9 +5,45 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
+    var SecurityNumberView = Whisper.View.extend({
+        className: 'securityNumber',
+        templateName: 'security_number',
+        initialize: function() {
+            this.generateSecurityNumber();
+        },
+        generateSecurityNumber: function() {
+            new libsignal.FingerprintGenerator(5200).createFor(
+                this.model.your_number,
+                this.model.your_key,
+                this.model.their_number,
+                this.model.their_key
+            ).then(this.handleSecurityNumber.bind(this));
+        },
+        handleSecurityNumber: function(securityNumber) {
+            this.model.securityNumber = securityNumber;
+            this.render();
+        },
+        render_attributes: function() {
+            var s = this.model.securityNumber;
+            var chunks = [];
+            for (var i = 0; i < s.length; i += 5) {
+                chunks.push(s.substring(i, i+5));
+            }
+            return { chunks: chunks };
+        }
+    });
+
     Whisper.KeyVerificationView = Whisper.View.extend({
         className: 'key-verification',
         templateName: 'key_verification',
+        initialize: function() {
+            this.render();
+            /*
+            this.$('.securityNumber').append(
+                new SecurityNumberView({model: this.model}).el
+            );
+            */
+        },
         splitKey: function(key) {
             // key is an array buffer
             var bytes = new Uint8Array(key);