From 8ecf0573865727e2afbb5175847d4f9a888fb4a4 Mon Sep 17 00:00:00 2001
From: sachaaaaa <sacha@loki.network>
Date: Mon, 16 Sep 2019 18:15:43 +1000
Subject: [PATCH] Display list of paired device in modal

---
 _locales/en/messages.json              | 24 +++++++++++
 background.html                        | 18 +++++++--
 js/views/app_view.js                   | 17 +++++---
 js/views/device_pairing_dialog_view.js | 55 +++++++++++++++++++++-----
 libloki/storage.js                     |  8 +++-
 ts/components/MainHeader.tsx           |  2 +-
 6 files changed, 102 insertions(+), 22 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index e58951412..5b511b5f0 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -926,6 +926,30 @@
   "cancel": {
     "message": "Cancel"
   },
+  "skip": {
+    "message": "Skip"
+  },
+  "close": {
+    "message": "Close"
+  },
+  "pairNewDevice": {
+    "message": "Pair new Device"
+  },
+  "devicePairingAccepted": {
+    "message": "Device Pairing Accepted"
+  },
+  "devicePairingReceived": {
+    "message": "Device Pairing Received"
+  },
+  "waitingForDeviceToRegister": {
+    "message": "Waiting for device to register..."
+  },
+  "pairedDevices": {
+    "message": "Paired Devices"
+  },
+  "allowPairing": {
+    "message": "Allow Pairing"
+  },
   "clear": {
     "message": "Clear"
   },
diff --git a/background.html b/background.html
index 51aa7f5ab..739b83827 100644
--- a/background.html
+++ b/background.html
@@ -247,8 +247,21 @@
   </script>
   <script type='text/x-tmpl-mustache' id='device-pairing-dialog'>
     <div class="content">
+
+      <!-- Default view -->
+      <div class="defaultView">
+        <h4>{{ defaultTitle }}</h4>
+        <ul id="pairedPubKeys">
+          <li>No paired devices</li>
+        </ul>
+        <div class='buttons'>
+          <button id='close' tabindex='2'>{{ closeText }}</button>
+          <button id="startPairing" tabindex='1'>{{ startPairingText }}</button>
+        </div>
+      </div>
+
       <!-- Waiting for request -->
-      <div class="waitingForRequestView">
+      <div class="waitingForRequestView" style="display: none;">
         <h4>{{ waitingForRequestTitle }}</h4>
         <div class='buttons'>
           <button class="cancel">{{ cancelText }}</button>
@@ -269,7 +282,6 @@
       <!-- Request accepted -->
       <div class="requestAcceptedView" style="display: none;">
         <h4>{{ requestAcceptedTitle }}</h4>
-        Sending pairing authorisation to:
         <p class="secretWords"></p>
         <p class="transmissionStatus">Please be patient...</p>
         <div class='buttons'>
@@ -660,7 +672,7 @@
                 </br>
                 Open the Loki Messenger App on your Primary Device
               </br>
-                and select "Pair New Device" in the main menu.
+                and select "Device Pairing" in the main menu.
               </p>
               <div class='standalone-secondary-device-inputs'>
                 <input class='form-control' type='text' id='primary-pubkey' placeholder='Primary Account Public Key' autocomplete='off' spellcheck='false' />
diff --git a/js/views/app_view.js b/js/views/app_view.js
index 654670e62..ad01d38c3 100644
--- a/js/views/app_view.js
+++ b/js/views/app_view.js
@@ -202,12 +202,17 @@
     },
     showDevicePairingDialog() {
       const dialog = new Whisper.DevicePairingDialogView();
-      // remove all listeners for this events is fine since the
-      // only listener is right below.
-      Whisper.events.off('devicePairingRequestReceived');
-      Whisper.events.on('devicePairingRequestReceived', pubKey =>
-        dialog.requestReceived(pubKey)
-      );
+
+      dialog.on('startReceivingRequests', () => {
+        Whisper.events.on('devicePairingRequestReceived', pubKey =>
+          dialog.requestReceived(pubKey)
+        );
+      });
+
+      dialog.on('stopReceivingRequests', () => {
+        Whisper.events.off('devicePairingRequestReceived');
+      });
+
       dialog.once('devicePairingRequestAccepted', (pubKey, cb) =>
         Whisper.events.trigger('devicePairingRequestAccepted', pubKey, cb)
       );
diff --git a/js/views/device_pairing_dialog_view.js b/js/views/device_pairing_dialog_view.js
index f2fb0087a..8406ce8e4 100644
--- a/js/views/device_pairing_dialog_view.js
+++ b/js/views/device_pairing_dialog_view.js
@@ -1,4 +1,4 @@
-/* global Whisper, i18n */
+/* global Whisper, i18n, libloki, textsecure */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -13,27 +13,43 @@
       this.pubKeyRequests = [];
       this.pubKey = null;
       this.accepted = false;
+      this.isListening = false;
       this.view = '';
       this.render();
       this.showView();
     },
     events: {
-      'click .waitingForRequestView .cancel': 'close',
+      'click #startPairing': 'startReceivingRequests',
+      'click #close': 'close',
+      'click .waitingForRequestView .cancel': 'stopReceivingRequests',
       'click .requestReceivedView .skip': 'skipDevice',
       'click #allowPairing': 'allowDevice',
-      'click .requestAcceptedView .ok': 'close',
+      'click .requestAcceptedView .ok': 'stopReceivingRequests',
     },
     render_attributes() {
       return {
-        waitingForRequestTitle: 'Waiting for device to register...',
-        requestReceivedTitle: 'Device Pairing Received',
-        requestAcceptedTitle: 'Device Pairing Accepted',
+        defaultTitle: i18n('pairedDevices'),
+        waitingForRequestTitle: i18n('waitingForDeviceToRegister'),
+        requestReceivedTitle: i18n('devicePairingReceived'),
+        requestAcceptedTitle: i18n('devicePairingAccepted'),
+        startPairingText: i18n('pairNewDevice'),
         cancelText: i18n('cancel'),
-        skipText: 'Skip',
+        closeText: i18n('close'),
+        skipText: i18n('skip'),
         okText: i18n('ok'),
-        allowPairingText: 'Allow Pairing',
+        allowPairingText: i18n('allowPairing'),
       };
     },
+    startReceivingRequests() {
+      this.trigger('startReceivingRequests');
+      this.isListening = true;
+      this.showView();
+    },
+    stopReceivingRequests() {
+      this.trigger('stopReceivingRequests');
+      this.isListening = false;
+      this.showView();
+    },
     requestReceived(secondaryDevicePubKey) {
       // FIFO: push at the front of the array with unshift()
       this.pubKeyRequests.unshift(secondaryDevicePubKey);
@@ -51,7 +67,7 @@
     },
     transmisssionCB(errors) {
       if (!errors) {
-        this.$('.transmissionStatus').text('Sent successfully');
+        this.$('.transmissionStatus').text(i18n('sent'));
       } else {
         this.$('.transmissionStatus').text(errors);
       }
@@ -67,10 +83,27 @@
       this.pubKey = this.pubKeyRequests.pop();
     },
     showView() {
+      const defaultView = this.$('.defaultView');
       const waitingForRequestView = this.$('.waitingForRequestView');
       const requestReceivedView = this.$('.requestReceivedView');
       const requestAcceptedView = this.$('.requestAcceptedView');
-      if (this.accepted) {
+      if (!this.isListening) {
+        const ourPubKey = textsecure.storage.user.getNumber();
+        defaultView.show();
+        requestReceivedView.hide();
+        waitingForRequestView.hide();
+        requestAcceptedView.hide();
+        // eslint-disable-next-line more/no-then
+        libloki.storage.getSecondaryDevicesFor(ourPubKey).then(pubKeys => {
+          if (pubKeys && pubKeys.length > 0) {
+            this.$('#pairedPubKeys').empty();
+            pubKeys.forEach(x => {
+              this.$('#pairedPubKeys').append(`<li>${x}</li>`);
+            });
+          }
+        });
+      } else if (this.accepted) {
+        defaultView.hide();
         requestReceivedView.hide();
         waitingForRequestView.hide();
         requestAcceptedView.show();
@@ -84,10 +117,12 @@
         requestReceivedView.show();
         waitingForRequestView.hide();
         requestAcceptedView.hide();
+        defaultView.hide();
       } else {
         waitingForRequestView.show();
         requestReceivedView.hide();
         requestAcceptedView.hide();
+        defaultView.hide();
       }
     },
     close() {
diff --git a/libloki/storage.js b/libloki/storage.js
index ab93cf644..c33696c3a 100644
--- a/libloki/storage.js
+++ b/libloki/storage.js
@@ -125,10 +125,13 @@
     return window.Signal.Data.getAuthorisationForPubKey(secondaryPubKey);
   }
 
+  function getSecondaryDevicesFor(primaryDevicePubKey) {
+    return window.Signal.Data.getSecondaryDevicesFor(primaryDevicePubKey);
+  }
+
   async function getAllDevicePubKeysForPrimaryPubKey(primaryDevicePubKey) {
     const secondaryPubKeys =
-      (await window.Signal.Data.getSecondaryDevicesFor(primaryDevicePubKey)) ||
-      [];
+      (await getSecondaryDevicesFor(primaryDevicePubKey)) || [];
     return secondaryPubKeys.concat(primaryDevicePubKey);
   }
 
@@ -141,6 +144,7 @@
     getGrantAuthorisationForSecondaryPubKey,
     getAuthorisationForSecondaryPubKey,
     getAllDevicePubKeysForPrimaryPubKey,
+    getSecondaryDevicesFor,
   };
 
   // Libloki protocol store
diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx
index 55c7a95ff..cb8871f9a 100644
--- a/ts/components/MainHeader.tsx
+++ b/ts/components/MainHeader.tsx
@@ -369,7 +369,7 @@ export class MainHeader extends React.Component<Props, any> {
     if (!isSecondaryDevice) {
       menuItems.push({
         id: 'pairNewDevice',
-        name: 'Pair new Device',
+        name: 'Device Pairing',
         onClick: () => {
           trigger('showDevicePairingDialog');
         },