Changed registration to be a 2 step process.

app/password_util.js

@@ -11,7 +11,7 @@ const matchesHash = (phrase, hash) =>
   phrase && sha512(phrase.trim()) === hash.trim();
 
 const validatePassword = (phrase, i18n) => {
-  if (!phrase || typeof phrase !== 'string') {
+  if (typeof phrase !== 'string') {
     return i18n ? i18n('passwordTypeError') : ERRORS.TYPE;
   }
 

background.html

@@ -655,21 +655,15 @@
         <div class='step-body'>
           <div class='header'>Create your Loki Messenger Account</div>
 
-          <div class='display-name-input'>
+          <!-- Registration -->
-            <div class='input-header'>Enter a name that will be shown to all your contacts</div>
+          <div class='page'>
-            <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
-          </div>
-          <div class='password-inputs'>
-              <div class='input-header'>Type an optional password for added security</div>
-              <input class='form-control' type='password' id='password' placeholder='Password (optional)' autocomplete='off' spellcheck='false'>
-              <input class='form-control' type='password' id='password-confirmation' placeholder='Retype your password' autocomplete='off' spellcheck='false'>
-              <div class='error'></div>
-          </div>
-
             <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 class='restore standalone-register-language'>
+                <span>Language:</span>
                 <div class='select-container'>
                   <select id='mnemonic-language'></select>
                 </div>
@@ -693,12 +687,32 @@
               </div>
               <div id='mnemonic-display' />
               <div class='standalone-register-buttons'>
-              <a class='button' id='generate-mnemonic'>Generate Seed</a>
+                <a class='button grey' id='generate-mnemonic'>Generate Seed</a>
-              <a class='button' id='copy-mnemonic'>Copy Seed</a>
+                <a class='button grey' id='copy-mnemonic'>Copy Seed</a>
                 <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
               </div>
             </div>
           </div>
+
+          <!-- Profile -->
+          <div class='page'>
+            <div class='display-name-input'>
+              <div class='input-header'>Enter a name that will be shown to all your contacts</div>
+              <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
+            </div>
+            <div class='password-inputs'>
+                <div class='input-header'>Type an optional password for added security</div>
+                <input class='form-control' type='password' id='password' placeholder='Password (optional)' autocomplete='off' spellcheck='false'>
+                <input class='form-control' type='password' id='password-confirmation' placeholder='Retype your password' autocomplete='off' spellcheck='false'>
+                <div class='error'></div>
+            </div>
+            <div class='buttons'>
+              <a class='button grey' id='back-button'>Back</a>
+              <a class='button' id='save-button' data-loading-text='Please wait...'>Save</a>
+            </div>
+          </div>
+
+        </div>
       </div>
     </div>
   </script>

js/views/standalone_registration_view.js

@@ -1,4 +1,4 @@
-/* global Whisper, $, getAccountManager, textsecure, i18n, passwordUtil */
+/* global Whisper, $, getAccountManager, textsecure, i18n, passwordUtil, _ */
 
 /* eslint-disable more/no-then */
 
@@ -38,9 +38,12 @@
 
       this.$passwordInput = this.$('#password');
       this.$passwordConfirmationInput = this.$('#password-confirmation');
-      this.$passwordConfirmationInput.hide();
       this.$passwordInputError = this.$('.password-inputs .error');
 
+      this.registrationParams = {};
+      this.$pages = this.$('.page');
+      this.showRegisterPage();
+
       this.onValidatePassword();
     },
     events: {
@@ -50,14 +53,40 @@
       'change #code': 'onChangeCode',
       'click #register': 'registerWithoutMnemonic',
       'click #register-mnemonic': 'registerWithMnemonic',
+      'click #back-button': 'onBack',
+      'click #save-button': 'onSaveProfile',
       'change #mnemonic': 'onChangeMnemonic',
       'click #generate-mnemonic': 'onGenerateMnemonic',
       'change #mnemonic-display-language': 'onGenerateMnemonic',
       'click #copy-mnemonic': 'onCopyMnemonic',
       'click .section-toggle': 'toggleSection',
-      'keyup #password': 'onPasswordChange',
+      'keyup #password': 'onValidatePassword',
       'keyup #password-confirmation': 'onValidatePassword',
     },
+    async showPage(pageIndex) {
+      // eslint-disable-next-line func-names
+      this.$pages.each(function(index) {
+        if (index !== pageIndex) {
+          $(this).hide();
+        } else {
+          $(this).show();
+        }
+      });
+    },
+    async showRegisterPage() {
+      this.registrationParams = {};
+      this.showPage(0);
+    },
+    async showProfilePage(mnemonic, language) {
+      this.registrationParams = {
+        mnemonic,
+        language,
+      };
+      this.$passwordInput.val('');
+      this.$passwordConfirmationInput.val('');
+      this.onValidatePassword();
+      this.showPage(1);
+    },
     async register(mnemonic, language) {
       // Make sure the password is valid
       if (this.validatePassword()) {
@@ -85,7 +114,7 @@
     registerWithoutMnemonic() {
       const mnemonic = this.$('#mnemonic-display').text();
       const language = this.$('#mnemonic-display-language').val();
-      this.register(mnemonic, language);
+      this.showProfilePage(mnemonic, language);
     },
     registerWithMnemonic() {
       const mnemonic = this.$('#mnemonic').val();
@@ -93,8 +122,20 @@
       if (!mnemonic) {
         this.log('Please provide a mnemonic word list');
       } else {
-        this.register(mnemonic, language);
+        this.showProfilePage(mnemonic, language);
+      }
+    },
+    onSaveProfile() {
+      if (_.isEmpty(this.registrationParams)) {
+        this.onBack();
+        return;
       }
+
+      const { mnemonic, language } = this.registrationParams;
+      this.register(mnemonic, language);
+    },
+    onBack() {
+      this.showRegisterPage();
     },
     onChangeMnemonic() {
       this.$('#status').html('');
@@ -185,16 +226,6 @@
         .not($next)
         .slideUp('fast');
     },
-    onPasswordChange() {
-      const input = this.$passwordInput.val();
-      if (!input || input.length === 0) {
-        this.$passwordConfirmationInput.val('');
-        this.$passwordConfirmationInput.hide();
-      } else {
-        this.$passwordConfirmationInput.show();
-      }
-      this.onValidatePassword();
-    },
     validatePassword() {
       const input = this.trim(this.$passwordInput.val());
       const confirmationInput = this.trim(

stylesheets/_global.scss

@@ -872,8 +872,7 @@ $loading-height: 16px;
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin: 1em 8px;
+    margin: 0 8px;
-    margin-top: 0;
 
     input {
       flex: 1;
@@ -914,6 +913,10 @@ $loading-height: 16px;
     justify-content: center;
     margin-top: 2em;
 
+    &.restore {
+      margin-bottom: 2em;
+    }
+
     span {
       margin-right: 8px;
     }
@@ -924,15 +927,18 @@ $loading-height: 16px;
     font-size: 14px;
   }
 
-  #generate-mnemonic,
+  .button.grey {
-  #copy-mnemonic {
     background: $grey;
   }
 
+  .buttons {
+    margin-top: 24px;
+  }
+
   .select-container {
     position: relative;
     display: block;
-    width: 10em;
+    width: 9em;
     line-height: 2.8;
     background: white;
     overflow: hidden;
@@ -957,6 +963,7 @@ $loading-height: 16px;
       padding: 0 0 0 0.5em;
       color: black;
       cursor: pointer;
+      font-size: 14px;
 
       ::-ms-expand {
         display: none;
@@ -979,6 +986,11 @@ $loading-height: 16px;
   }
 
   .password-inputs {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
     input {
       margin-bottom: 0.5em;
     }