Show QR code button in profile

public/img/ic_qr.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 24 24" width="24" height="24" style="fill: rgba(0, 0, 0, 0.87);">
+    <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb" d="M 5 5 L 5 6 L 5 12 L 5 13 L 6 13 L 7 13 L 7 15 L 9 15 L 9 13 L 12 13 L 13 13 L 13 12 L 13 6 L 13 5 L 12 5 L 6 5 L 5 5 z M 13 13 L 13 15 L 15 15 L 15 17 L 11 17 L 11 19 L 6 19 L 5 19 L 5 20 L 5 26 L 5 27 L 6 27 L 12 27 L 13 27 L 13 26 L 13 20 L 13 19 L 19 19 L 19 17 L 17 17 L 17 15 L 21 15 L 21 13 L 23 13 L 23 15 L 25 15 L 25 13 L 26 13 L 27 13 L 27 12 L 27 6 L 27 5 L 26 5 L 20 5 L 19 5 L 19 6 L 19 12 L 19 13 L 13 13 z M 25 15 L 25 17 L 27 17 L 27 15 L 25 15 z M 25 17 L 23 17 L 23 19 L 25 19 L 25 17 z M 25 19 L 25 21 L 27 21 L 27 19 L 25 19 z M 25 21 L 23 21 L 23 19 L 21 19 L 21 21 L 18 21 L 16 21 L 16 27 L 18 27 L 18 23 L 22 23 L 22 25 L 24 25 L 24 23 L 25 23 L 25 21 z M 22 25 L 20 25 L 20 27 L 22 27 L 22 25 z M 23 17 L 23 15 L 21 15 L 21 17 L 23 17 z M 11 17 L 11 15 L 9 15 L 9 17 L 11 17 z M 7 15 L 5 15 L 5 17 L 7 17 L 7 15 z M 15 5 L 15 9 L 14 9 L 14 11 L 15 11 L 15 12 L 17 12 L 17 9 L 18 9 L 18 7 L 17 7 L 17 5 L 15 5 z M 7 7 L 11 7 L 11 11 L 7 11 L 7 7 z M 21 7 L 25 7 L 25 11 L 21 11 L 21 7 z M 8 8 L 8 10 L 10 10 L 10 8 L 8 8 z M 22 8 L 22 10 L 24 10 L 24 8 L 22 8 z M 7 21 L 11 21 L 11 25 L 7 25 L 7 21 z M 8 22 L 8 24 L 10 24 L 10 22 L 8 22 z M 25 25 L 25 27 L 27 27 L 27 25 L 25 25 z"/>
+</svg>

src/controller_model/contact.ts

@@ -148,6 +148,10 @@ export class ContactControllerModel implements threema.ControllerModel {
             });
     }
 
+    public canShowQr(): boolean {
+        return false;
+    }
+
     public save(): Promise<threema.ContactReceiver> {
         switch (this.getMode()) {
             case ControllerModelMode.EDIT:

src/controller_model/distributionList.ts

@@ -132,6 +132,10 @@ export class DistributionListControllerModel implements threema.ControllerModel
             });
     }
 
+    public canShowQr(): boolean {
+        return false;
+    }
+
     public delete(ev): void {
 
         const confirm = this.$mdDialog.confirm()

src/controller_model/group.ts

@@ -147,6 +147,10 @@ export class GroupControllerModel implements threema.ControllerModel {
             });
     }
 
+    public canShowQr(): boolean {
+        return false;
+    }
+
     public leave(ev): void {
         const confirm = this.$mdDialog.confirm()
             .title(this.$translate.instant('messenger.GROUP_LEAVE'))

src/controller_model/me.ts

@@ -157,6 +157,10 @@ export class MeControllerModel implements threema.ControllerModel {
         return false;
     }
 
+    public canShowQr(): boolean {
+        return true;
+    }
+
     /**
      * Save the changes, return a promise with the receiver.
      */

src/partials/dialog.myidentity.html → src/partials/dialog.qr.html

@@ -2,21 +2,15 @@
     <form ng-cloak>
         <md-toolbar>
             <div class="md-toolbar-tools">
-                <h2 translate>messenger.MY_THREEMA_ID</h2>
+                <h2>{{ ctrl.profile.identity }}</h2>
                 <span flex></span>
-                <md-button class="md-icon-button" ng-click="ctrl.cancel()" translate-attr="{'aria-label': 'common.OK'}">
+                <md-button class="md-icon-button" ng-click="ctrl.cancel()" translate-attr="{'aria-label': 'common.CANCEL'}">
                     <md-icon aria-label="Close dialog" class="material-icons md-24">close</md-icon>
                 </md-button>
             </div>
         </md-toolbar>
         <md-dialog-content>
             <div class="md-dialog-content center">
-                <dl class="key-values">
-                    <dt>Threema ID</dt>
-                    <dd>{{ctrl.identity.identity}}</dd>
-                    <dt translate>messenger.KEY_FINGERPRINT</dt>
-                    <dd>{{ctrl.identity.fingerprint}}</dd>
-                </dl>
                 <div class="qrcode">
                     <qrcode version="{{ ctrl.qrCode.version }}"
                     error-correction-level="{{ ctrl.qrCode.errorCorrectionLevel }}"
@@ -27,7 +21,7 @@
         <md-dialog-actions layout="row">
             <span flex></span>
             <md-button ng-click="ctrl.cancel()">
-                <span translate>common.OK</span>
+                <span translate>common.CLOSE</span>
             </md-button>
         </md-dialog-actions>
     </form>

src/partials/messenger.receiver.html

@@ -6,6 +6,10 @@
         </div>
 
         <div class="header-buttons">
+            <md-button aria-label="chat" class="md-icon-button" ng-show="ctrl.controllerModel.canShowQr()" ng-click="ctrl.showQr()">
+                <md-icon><img src="public/img/ic_qr.svg" alt="QR"></md-icon>
+            </md-button>
+
             <md-button aria-label="chat" class="md-icon-button" ng-show="ctrl.controllerModel.canEdit()" ng-click="ctrl.edit()">
                 <md-icon class="material-icons md-24">mode_edit</md-icon>
             </md-button>

src/partials/messenger.ts

@@ -16,7 +16,7 @@
  */
 
 import {ContactControllerModel} from '../controller_model/contact';
-import {supportsPassive, throttle} from '../helpers';
+import {supportsPassive, throttle, u8aToHex} from '../helpers';
 import {ContactService} from '../services/contact';
 import {ControllerService} from '../services/controller';
 import {ControllerModelService} from '../services/controller_model';
@@ -1061,14 +1061,19 @@ class MessengerController {
 class ReceiverDetailController {
     private logTag: string = '[ReceiverDetailController]';
 
-    public $mdDialog: any;
-    public $state: ng.ui.IStateService;
+    // Angular services
+    private $mdDialog: any;
+    private $state: ng.ui.IStateService;
+
+    // Own services
+    private fingerPrintService: FingerPrintService;
+    private contactService: ContactService;
+    private webClientService: WebClientService;
+
     public receiver: threema.Receiver;
     public me: threema.MeReceiver;
     public title: string;
     public fingerPrint?: string;
-    private fingerPrintService: FingerPrintService;
-    private contactService: ContactService;
     private showGroups = false;
     private showDistributionLists = false;
     private inGroups: threema.GroupReceiver[] = [];
@@ -1093,6 +1098,7 @@ class ReceiverDetailController {
         this.$state = $state;
         this.fingerPrintService = fingerPrintService;
         this.contactService = contactService;
+        this.webClientService = webClientService;
 
         this.receiver = webClientService.receivers.getData($stateParams);
         this.me = webClientService.me;
@@ -1188,6 +1194,35 @@ class ReceiverDetailController {
         });
     }
 
+    /**
+     * Show the QR code of the public key.
+     */
+    public showQr(): void {
+        const profile = this.webClientService.getProfile();
+        const $mdDialog = this.$mdDialog;
+        $mdDialog.show({
+            controllerAs: 'ctrl',
+            controller: [function() {
+               this.cancel = () =>  {
+                   $mdDialog.cancel();
+               };
+               this.profile = profile;
+               this.qrCode = {
+                    errorCorrectionLevel: 'L',
+                    size: '400px',
+                    data: '3mid:'
+                    + profile.identity
+                    + ','
+                    + u8aToHex(new Uint8Array(profile.publicKey)),
+                };
+            }],
+            templateUrl: 'partials/dialog.qr.html',
+            parent: angular.element(document.body),
+            clickOutsideToClose: true,
+            fullscreen: true,
+        });
+    }
+
     public goBack(): void {
         window.history.back();
     }

src/threema.d.ts

@@ -476,6 +476,11 @@ declare namespace threema {
          */
         canClean(): boolean;
 
+        /*
+         * Return whether this receiver can show a QR code of the public key.
+         */
+        canShowQr(): boolean;
+
         /**
          * The editing mode, e.g. view or edit this receiver.
          */