Dialogs for device pairing requests - Primary device side

background.html

@@ -245,6 +245,40 @@
       </div>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='device-pairing-dialog'>
+    <div class="content">
+      <!-- Waiting for request -->
+      <div class="waitingForRequestView">
+        <h4>{{ waitingForRequestTitle }}</h4>
+        <div class='buttons'>
+          <button class="cancel">{{ cancelText }}</button>
+        </div>
+      </div>
+
+      <!-- Request Received -->
+      <div class="requestReceivedView" style="display: none;">
+        <h4>{{ requestReceivedTitle }}</h4>
+        Please verify that the pubkey shown here is your secondary device pubkey!
+        <p class="secondaryPubKey"></p>
+        <div class='buttons'>
+          <button class="skip">{{ skipText }}</button>
+          <button id="allowPairing">{{ allowPairingText }}</button>
+        </div>
+      </div>
+
+      <!-- Request accepted -->
+      <div class="requestAcceptedView" style="display: none;">
+        <h4>{{ requestAcceptedTitle }}</h4>
+        Sending pairing authorisation to:
+        <p class="secondaryPubKey"></p>
+        <p class="transmissionStatus">Please be patient...</p>
+        <div class='buttons'>
+          <button class="ok" style="display: none;">{{ okText }}</button>
+        </div>
+      </div>
+    </div>
+  </script>
+
   <script type='text/x-tmpl-mustache' id='beta-disclaimer-dialog'>
     <div class="content">
       <div class="betaDisclaimerView" style="display: none;">
@@ -693,6 +727,7 @@
   <script type='text/javascript' src='js/views/app_view.js'></script>
   <script type='text/javascript' src='js/views/import_view.js'></script>
   <script type='text/javascript' src='js/views/clear_data_view.js'></script>
+  <script type='text/javascript' src='js/views/device_pairing_dialog_view.js'></script>
 
   <script type='text/javascript' src='js/wall_clock_listener.js'></script>
   <script type='text/javascript' src='js/rotate_signed_prekey_listener.js'></script>

js/views/app_view.js

@@ -196,5 +196,15 @@
       const dialog = new Whisper.SeedDialogView({ seed });
       this.el.append(dialog.el);
     },
+    showDevicePairingDialog() {
+      const dialog = new Whisper.DevicePairingDialogView();
+      Whisper.events.on('devicePairingRequestReceived', pubKey =>
+        dialog.requestReceived(pubKey)
+      );
+      dialog.on('devicePairingRequestAccepted', (pubKey, cb) =>
+        Whisper.events.trigger('devicePairingRequestAccepted', pubKey, cb)
+      );
+      this.el.append(dialog.el);
+    },
   });
 })();

js/views/device_pairing_dialog_view.js

@@ -0,0 +1,91 @@
+/* global Whisper, i18n */
+
+// eslint-disable-next-line func-names
+(function() {
+  'use strict';
+
+  window.Whisper = window.Whisper || {};
+
+  Whisper.DevicePairingDialogView = Whisper.View.extend({
+    className: 'loki-dialog device-pairing-dialog modal',
+    templateName: 'device-pairing-dialog',
+    initialize() {
+      this.pubKeyRequests = [];
+      this.pubKey = null;
+      this.accepted = false;
+      this.view = '';
+      this.render();
+      this.showView();
+    },
+    events: {
+      'click .waitingForRequestView .cancel': 'close',
+      'click .requestReceivedView .skip': 'skipDevice',
+      'click #allowPairing': 'allowDevice',
+      'click .requestAcceptedView .ok': 'close',
+    },
+    render_attributes() {
+      return {
+        waitingForRequestTitle: 'Waiting for device to register...',
+        requestReceivedTitle: 'Device Pairing Received',
+        requestAcceptedTitle: 'Device Pairing Accepted',
+        cancelText: i18n('cancel'),
+        skipText: 'Skip',
+        okText: i18n('ok'),
+        allowPairingText: 'Allow Pairing',
+      };
+    },
+    requestReceived(secondaryDevicePubKey) {
+      // FIFO: push at the front of the array with unshift()
+      this.pubKeyRequests.unshift(secondaryDevicePubKey);
+      if (!this.pubKey) {
+        this.nextPubKey();
+        this.showView('requestReceived');
+      }
+    },
+    allowDevice() {
+      this.accepted = true;
+      this.trigger('devicePairingRequestAccepted', this.pubKey, errors =>
+        this.transmisssionCB(errors)
+      );
+      this.showView();
+    },
+    transmisssionCB(errors) {
+      if (!errors) {
+        this.$('.transmissionStatus').text('Sent successfully');
+      } else {
+        this.$('.transmissionStatus').text(errors);
+      }
+      this.$('.requestAcceptedView .ok').show();
+    },
+    skipDevice() {
+      this.nextPubKey();
+      this.showView();
+    },
+    nextPubKey() {
+      // FIFO: pop at the back of the array using pop()
+      this.pubKey = this.pubKeyRequests.pop();
+    },
+    showView() {
+      const waitingForRequestView = this.$('.waitingForRequestView');
+      const requestReceivedView = this.$('.requestReceivedView');
+      const requestAcceptedView = this.$('.requestAcceptedView');
+      if (this.accepted) {
+        requestReceivedView.hide();
+        waitingForRequestView.hide();
+        requestAcceptedView.show();
+      } else if (this.pubKey) {
+        this.$('.secondaryPubKey').text(this.pubKey);
+        requestReceivedView.show();
+        waitingForRequestView.hide();
+        requestAcceptedView.hide();
+      } else {
+        waitingForRequestView.show();
+        requestReceivedView.hide();
+        requestAcceptedView.hide();
+      }
+    },
+    close() {
+      this.remove();
+    },
+  });
+})();