Add qr codes

background.html

@@ -304,6 +304,7 @@
       {{ /has_their_key }}
       {{ #has_their_key }}
         <label> {{ yourSafetyNumberWith }} </label>
+        <div class='qr'></div>
         <div class='key'>
           {{ #chunks }} <span>{{ . }}</span> {{ /chunks }}
         </div>

js/views/key_verification_view.js

@@ -17,7 +17,13 @@
                 this.loadTheirKey(),
                 this.loadOurKey(),
             ]).then(this.generateSecurityNumber.bind(this))
-              .then(this.render.bind(this));
+              .then(this.render.bind(this))
+              .then(this.makeQRCode.bind(this));
+        },
+        makeQRCode: function() {
+            new QRCode(this.$('.qr')[0]).makeCode(
+                dcodeIO.ByteBuffer.wrap(this.our_key).toString('base64')
+            );
         },
         loadTheirKey: function() {
             if (this.their_key) {

stylesheets/_conversation.scss

@@ -61,7 +61,7 @@
 .key-verification {
   label {
     display: block;
-    margin-bottom: 10px;
+    margin: 10px 0;
     font-size: $font-size-small;
   }
 
@@ -81,6 +81,19 @@
   .placeholder {
     font-weight: bold;
   }
+  .qr {
+    border-radius: 200px;
+    border: solid 1px $grey_l2;
+    width: 150px;
+    height: 150px;
+    text-align: center;
+    padding: 25px;
+    margin: 10px auto;
+    img {
+      display: inline-block;
+      max-width: 100%;
+    }
+  }
 }
 
 .message-detail {

stylesheets/manifest.css

@@ -967,7 +967,7 @@ input.search {
 
 .key-verification label {
   display: block;
-  margin-bottom: 10px;
+  margin: 10px 0;
   font-size: 0.92857em; }
 .key-verification .key, .key-verification .placeholder {
   padding: 0 1em;
@@ -982,6 +982,17 @@ input.search {
   border-radius: 5px; }
 .key-verification .placeholder {
   font-weight: bold; }
+.key-verification .qr {
+  border-radius: 200px;
+  border: solid 1px #d9d9d9;
+  width: 150px;
+  height: 150px;
+  text-align: center;
+  padding: 25px;
+  margin: 10px auto; }
+  .key-verification .qr img {
+    display: inline-block;
+    max-width: 100%; }
 
 .message-detail .key-conflict-dialogue {
   border-radius: 5px;