Secondary device registration UI

background.html

@@ -574,21 +574,7 @@
 
           <!-- Registration -->
           <div class='page'>
-            <h4 class='section-toggle'>Restore using seed</h4>
-            <div class='standalone-mnemonic section-content'>
-              <div class='standalone-mnemonic-inputs'>
-                <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic Seed' autocomplete='off' spellcheck='false' />
-              </div>
-              <div id='error' class='collapse'></div>
-              <div class='restore standalone-register-language'>
-                <span>Language:</span>
-                <div class='select-container'>
-                  <select id='mnemonic-language'></select>
-                </div>
-              </div>
-              <a class='button' id='register-mnemonic'>Restore</a>
-              <div id=status></div>
-            </div>
+            <!-- New account -->
             <h4 class='section-toggle section-toggle-visible'>Register a new account</h4>
             <div class='standalone-register section-content'>
               <div class='standalone-register-warning'>
@@ -609,6 +595,38 @@
                 <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
               </div>
             </div>
+            <!-- Restore using seed -->
+            <h4 class='section-toggle'>Restore using seed</h4>
+            <div class='standalone-mnemonic section-content'>
+              <div class='standalone-mnemonic-inputs'>
+                <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic Seed' autocomplete='off' spellcheck='false' />
+              </div>
+              <div id='error' class='collapse'></div>
+              <div class='restore standalone-register-language'>
+                <span>Language:</span>
+                <div class='select-container'>
+                  <select id='mnemonic-language'></select>
+                </div>
+              </div>
+              <a class='button' id='register-mnemonic'>Restore</a>
+              <div id=status></div>
+            </div>
+            <!-- Link device to an existing account -->
+            <h4 class='section-toggle'>Link device to an existing account</h4>
+            <div class='standalone-secondary-device section-content'>
+              <p class='standalone-register-warning'>
+                You will need your Primary Device handy during this step.
+                </br>
+                Open the Loki Messenger App on your Primary Device
+              </br>
+                and select "Pair New Device" 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' />
+              </div>
+              <div id='error' class='collapse'></div>
+              <a class='button' id='register-secondary-device'>Link</a>
+            </div>
           </div>
 
           <!-- Profile -->

js/views/standalone_registration_view.js

@@ -26,6 +26,7 @@
       this.$('#error').hide();
 
       this.$('.standalone-mnemonic').hide();
+      this.$('.standalone-secondary-device').hide();
 
       this.onGenerateMnemonic();
 
@@ -49,6 +50,7 @@
 
       this.registrationParams = {};
       this.$pages = this.$('.page');
+      this.pairingTimeout = null;
       this.showRegisterPage();
 
       this.onValidatePassword();
@@ -60,6 +62,7 @@
       'change #code': 'onChangeCode',
       'click #register': 'registerWithoutMnemonic',
       'click #register-mnemonic': 'registerWithMnemonic',
+      'click #register-secondary-device': 'registerSecondaryDevice',
       'click #back-button': 'onBack',
       'click #save-button': 'onSaveProfile',
       'change #mnemonic': 'onChangeMnemonic',
@@ -123,6 +126,38 @@
       const language = this.$('#mnemonic-display-language').val();
       this.showProfilePage(mnemonic, language);
     },
+    async registerSecondaryDevice() {
+      const mnemonic = this.$('#mnemonic-display').text();
+      const language = this.$('#mnemonic-display-language').val();
+      const primaryPubKey = this.$('#primary-pubkey').val();
+      this.$('.standalone-secondary-device #error').hide();
+      Whisper.events.on('secondaryDeviceRegistration', () => {
+        // Ensure the left menu is updated
+        Whisper.events.trigger('userChanged', { isSecondaryDevice: true });
+        this.$el.trigger('openInbox');
+      });
+      clearTimeout(this.pairingTimeout);
+      this.pairingTimeout = setTimeout(() => {
+        this.$('.standalone-secondary-device #error').text(
+          'The primary device has not responded within 1 minute. Ensure it is connected.'
+        );
+        this.$('.standalone-secondary-device #error').show();
+      }, 60000);
+      textsecure.storage.put('secondaryDeviceStatus', 'ongoing');
+      try {
+        await this.accountManager.registerSingleDevice(
+          mnemonic,
+          language,
+          'John Smith'
+        );
+        await this.accountManager.requestPairing(primaryPubKey);
+      } catch (e) {
+        textsecure.storage.remove('secondaryDeviceStatus');
+        this.$('.standalone-secondary-device #error').text(e);
+        this.$('.standalone-secondary-device #error').show();
+        clearTimeout(this.pairingTimeout);
+      }
+    },
     registerWithMnemonic() {
       const mnemonic = this.$('#mnemonic').val();
       const language = this.$('#mnemonic-language').val();