Registration ux tweaks

js/options.js

@@ -67,6 +67,7 @@
             });
 
             $('#request-voice').click(function() {
+                $('#error').hide();
                 var number = validateNumber();
                 if (number) {
                     textsecure.api.requestVerificationVoice(number).catch(displayError);
@@ -77,6 +78,7 @@
             });
 
             $('#request-sms').click(function() {
+                $('#error').hide();
                 var number = validateNumber();
                 if (number) {
                     textsecure.api.requestVerificationSMS(number).catch(displayError);
@@ -104,29 +106,29 @@
                     var number = validateNumber();
                     var verificationCode = validateCode();
                     if (number && verificationCode) {
-                        $('#verify1').hide();
-                        $('#verify2done').text('');
-                        $('#verify3done').text('');
-                        $('#verify4done').text('');
-                        $('#verify5').hide();
+                        $('#verifyCode').prop('disabled', 'disabled');
+                        $('#verify *').hide();
                         $('#verify').show().addClass('in');
+                        $('#verify2').show();
 
                         textsecure.registerSingleDevice(number, verificationCode, function(step) {
                             switch(step) {
                             case 1:
-                                $('#verify2done').text('done');
+                                $('#verify3').show();
                                 break;
                             case 2:
-                                $('#verify3done').text('done');
+                                $('#verify4').show();
                                 break;
                             case 3:
                                 $('#complete-number').text(number);
                                 $('#verify').hide();
+                                $('#init-setup').hide().removeClass('in');
                                 $('#setup-complete').show().addClass('in');
                                 registrationDone();
                             }
                         }).catch(function(error) {
-                            //TODO: No alerts...
+                            $('#verify *').hide();
+                            $('#verifyCode').removeAttr('disabled');
                             if (error.humanError)
                                 displayError(error.humanError);
                             else

options.html

@@ -54,37 +54,41 @@
       </div>
       <div id='single-device' class='row collapse'>
         <div class='col-xs-offset-1 col-md-6'>
-          <button class='back btn btn-link'>Back</button>
           <div class='narrow'>
             <div id='step1'>
               <div id='number-container'>
-                <input type="text" id="number" placeholder="Phone Number">
+                <input class='form-control' type="text" id="number" placeholder="Phone Number" tabindex=0>
               </div>
               <div>
-                <select id="regionCode">
+                <select class='form-control' id="regionCode">
                   <option value="ZZ" selected>Country</option>
                 </select>
               </div>
               <div class='clearfix'>
-                <button id="request-sms" class="btn btn-default">Send SMS</button>
-                <button id="request-voice" class="btn btn-default">Call</button>
+                <button id="request-sms" class="btn btn-info">Send SMS</button>
+                <button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
               </div>
             </div>
             <form id="step2" class="collapse">
-              <input type="text" pattern="[0-9]{3}-?[0-9]{3}" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
-              <button id="verifyCode" class="btn btn-info">Submit</button>
+              <input class='form-control' type="text" pattern="[0-9]{3}-?[0-9]{3}" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
+              <button id="verifyCode" class="btn btn-info" data-loading-text="Please wait...">Register</button>
               <div id='error' class='collapse'></div>
             </form>
           </div>
+          <button class='back btn btn-link'>Back</button>
         </div>
       </div>
     </div>
-    <div id="verify" class="hidden">
-      <div id="verify1">Receiving identity key...<span id="verify1done"></span></div>
-      <div id="verify2">Verifying number and setup code...<span id="verify2done"></span></div>
-      <div id="verify3">Generating keys...<span id="verify3done"></span></div>
-      <div id="verify4">Registering...<span id="verify4done"></span></div>
-      <div id="verify5">Syncing with existing devices...<span id="verify5done"></span></div>
+    <div class='row'>
+      <div class='col-xs-offset-1 col-md-6'>
+        <div id="verify" class="collapse narrow">
+          <div id="verify1">Receiving identity key...<span class="done"></span></div>
+          <div id="verify2">Verifying number and setup code...<span class="done" id="verify2done"></span></div>
+          <div id="verify3">Generating keys...<span class="done" id="verify3done"></span></div>
+          <div id="verify4">Registering...<span class="done" id="verify4done"></span></div>
+          <div id="verify5">Syncing with existing devices...<span class="done" id="verify5done"></span></div>
+        </div>
+      </div>
     </div>
     <div id="setup-complete" class="collapse">
       <h3>You are registered on TextSecure with number <span id="complete-number"></span></h3>

stylesheets/options.css

@@ -64,7 +64,6 @@ h2 {
   box-sizing: border-box;
   width: 100%;
   display: block;
-  text-align: center;
   margin-bottom: 0.5em;
 }
 
@@ -140,3 +139,7 @@ h2 {
   margin: 2em 0;
 }
 #log, #listener { height: 0; }
+
+input.form-control, select.form-control {
+  border-radius: 0;
+}