Added QR code viewing.

_locales/en/messages.json

@@ -1920,6 +1920,11 @@
     "description":
       "Button action that the user can click to view their unique seed"
   },
+  "showQRCode": {
+    "message": "Show QR code",
+    "description":
+      "Button action that the user can click to view their QR code"
+  },
 
   "seedViewTitle": {
     "message":

background.html

@@ -281,6 +281,13 @@
       </div>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='qr-code-template'>
+    <div class="content">
+      <div id="qr">
+      </div>
+      <button class='ok' tabindex='1'>{{ ok }}</button>
+    </div>
+  </script>
   <script type='text/x-tmpl-mustache' id='identicon-svg'>
       <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
          <circle cx='50' cy='50' r='40' fill='{{ color }}' />
@@ -684,6 +691,7 @@
   <script type='text/javascript' src='js/views/nickname_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/password_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/seed_dialog_view.js'></script>
+  <script type='text/javascript' src='js/views/qr_dialog_view.js'></script>
   <script type='text/javascript' src='js/views/beta_release_disclaimer_view.js'></script>
   <script type='text/javascript' src='js/views/identicon_svg_view.js'></script>
   <script type='text/javascript' src='js/views/install_view.js'></script>

js/background.js

@@ -757,6 +757,13 @@
       }
     });
 
+    Whisper.events.on('showQRDialog', async () => {
+      if (appView) {
+        const ourNumber = textsecure.storage.user.getNumber();
+        appView.showQRDialog(ourNumber);
+      }
+    });
+
     Whisper.events.on('calculatingPoW', ({ pubKey, timestamp }) => {
       try {
         const conversation = ConversationController.get(pubKey);

js/views/app_view.js

@@ -196,5 +196,9 @@
       const dialog = new Whisper.SeedDialogView({ seed });
       this.el.append(dialog.el);
     },
+    showQRDialog(string) {
+      const dialog = new Whisper.QRDialogView({ string });
+      this.el.append(dialog.el);
+    },
   });
 })();

js/views/qr_dialog_view.js

@@ -0,0 +1,49 @@
+/* global Whisper, i18n, QRCode */
+
+/* eslint-disable more/no-then */
+
+// eslint-disable-next-line func-names
+(function() {
+  'use strict';
+
+  window.Whisper = window.Whisper || {};
+
+  Whisper.QRDialogView = Whisper.View.extend({
+    templateName: 'qr-code-template',
+    className: 'loki-dialog qr-dialog modal',
+    initialize(options = {}) {
+      this.okText = options.okText || i18n('ok');
+      this.render();
+      this.$('.qr-dialog').bind('keyup', event =>
+        this.onKeyup(event)
+      );
+
+      if (options.string) {
+        this.qr = new QRCode(this.$('#qr')[0]).makeCode(options.string);
+        this.$('#qr').addClass('ready');
+      }
+    },
+    events: {
+      'click .ok': 'close',
+    },
+    render_attributes() {
+      return {
+        ok: this.okText,
+      };
+    },
+    close() {
+      this.remove();
+    },
+    onKeyup(event) {
+      switch (event.key) {
+        case 'Enter':
+        case 'Escape':
+        case 'Esc':
+          this.close();
+          break;
+        default:
+          break;
+      }
+    },
+  });
+})();

stylesheets/_conversation.scss

@@ -383,6 +383,7 @@
     border: 1px solid $color-loki-green;
     color: white;
     outline: none;
+    user-select: none;
 
     &:hover,
     &:disabled {

stylesheets/_global.scss

@@ -860,3 +860,18 @@ $loading-height: 16px;
 .inbox {
   position: relative;
 }
+
+.qr-dialog {
+
+  .content {
+    width: 300px !important;
+    max-width: none !important;
+    min-width: auto !important;
+  }
+
+  #qr {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1em;
+  }
+}

test/index.html

@@ -567,6 +567,7 @@
   <script type='text/javascript' src='../js/views/nickname_dialog_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/password_dialog_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/seed_dialog_view.js' data-cover></script>
+  <script type='text/javascript' src='js/views/qr_dialog_view.js'></script>
   <script type='text/javascript' src='../js/views/identicon_svg_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/last_seen_indicator_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/scroll_down_button_view.js' data-cover></script>

ts/components/MainHeader.tsx

@@ -327,6 +327,13 @@ export class MainHeader extends React.Component<Props, any> {
           trigger('showSeedDialog');
         },
       },
+      {
+        id: 'showQRCode',
+        name: i18n('showQRCode'),
+        onClick: () => {
+          trigger('showQRDialog');
+        },
+      }
     ];
 
     const passItem = (type: string) => ({