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;