diff --git a/background.html b/background.html
index c9b2bcac0b42..de7b90401eb4 100644
--- a/background.html
+++ b/background.html
@@ -304,6 +304,7 @@
{{ /has_their_key }}
{{ #has_their_key }}
+
{{ #chunks }} {{ . }} {{ /chunks }}
diff --git a/js/views/key_verification_view.js b/js/views/key_verification_view.js
index 576afabc25ac..73e54cc3f614 100644
--- a/js/views/key_verification_view.js
+++ b/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) {
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index af521b140248..1e34fdd24acb 100644
--- a/stylesheets/_conversation.scss
+++ b/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 {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index d2585b7f9e05..83250cee6402 100644
--- a/stylesheets/manifest.css
+++ b/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;