edx.org - adding in more UI status when processing login/register forms

lms/templates/login.html

@@ -7,7 +7,7 @@
 <%block name="js_extra">
   <script type="text/javascript">
     $(function() {
-      
+
       var view_name = 'view-login';
 
       // adding js class for styling with accessibility in mind
@@ -31,7 +31,7 @@
     (function() {
       $(document).delegate('#login-form', 'ajax:success', function(data, json, xhr) {
         if(json.success) {
-          $('.message.submission-error').removeClass('is-shown'); 
+          $('.message.submission-error').removeClass('is-shown');
           toggleSubmitButton();
           var u=decodeURI(window.location.search);
           next=u.split("next=")[1];
@@ -41,7 +41,7 @@
             location.href="${reverse('dashboard')}";
           }
         } else {
-          $('.message.submission-error').addClass('is-shown'); 
+          $('.message.submission-error').addClass('is-shown');
           toggleSubmitButton();
           $('.message.submission-error .message-copy').html(json.value);
         }
@@ -51,13 +51,14 @@
     function toggleSubmitButton(e) {
       var $msgError = $('form .status.submission-error');
       var $submitButton = $('form .form-actions #submit');
+      var $submitButtonCopy = $submitButton.html();
 
       if(!$msgError.hasClass('is-shown')) {
-        $submitButton.prop('disabled', true);
+        $submitButton.prop('disabled', true).html('Processing your account information &hellip;');
       }
 
       else {
-        $submitButton.prop('disabled', false);
+        $submitButton.prop('disabled', false).html($submitButtonCopy);
       }
     }
   </script>
@@ -76,7 +77,7 @@
     </header>
 
     <form role="form" id="login-form" method="post" data-remote="true" action="/login_ajax">
-      
+
       <!-- status messages -->
       <div role="alert" class="status message">
         <h3 class="message-title">We're Sorry, edX accounts are unavailable currently</h3>
@@ -91,7 +92,7 @@
       </div>
 
       <p class="instructions sr">
-        Please provide the following information to log into your edX account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>. 
+        Please provide the following information to log into your edX account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
       </p>
 
       <fieldset class="group group-form group-form-requiredinformation">
@@ -100,7 +101,7 @@
         <ol class="list-input">
           <li class="field required text" id="field-email">
             <label for="email">E-mail</label>
-            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />              
+            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
           </li>
           <li class="field required password" id="field-password">
             <label for="password">Password</label>

lms/templates/register.html

@@ -37,7 +37,7 @@
     (function() {
      $(document).delegate('#register-form', 'ajax:success', function(data, json, xhr) {
        if(json.success) {
-        $('.message.submission-error').removeClass('is-shown'); 
+        $('.message.submission-error').removeClass('is-shown');
         toggleSubmitButton();
         location.href="${reverse('dashboard')}";
        } else {
@@ -52,13 +52,14 @@
     function toggleSubmitButton(e) {
       var $msgError = $('form .status.submission-error');
       var $submitButton = $('form .form-actions #submit').prop('disabled', true);
+      var $submitButtonCopy = $submitButton.html();
 
       if(!$msgError.hasClass('is-shown')) {
-        $submitButton.prop('disabled', true);
+        $submitButton.prop('disabled', true).html('Processing your registration …');
       }
 
       else {
-        $submitButton.prop('disabled', false);
+        $submitButton.prop('disabled', false).html($submitButtonCopy);
       }
     }
   </script>
@@ -77,7 +78,7 @@
     </header>
 
     <form role="form" id="register-form" method="post" data-remote="true" action="/create_account">
-      
+
       <!-- status messages -->
       <div role="alert" class="status message">
         <h3 class="message-title">We're sorry, edX enrollment is not available in your region</h3>
@@ -91,7 +92,7 @@
 
       <p class="instructions">
         Please complete the following fields to register for an edX account. <br />
-        Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>. 
+        Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.
       </p>
 
       <fieldset class="group group-form group-form-requiredinformation">
@@ -102,7 +103,7 @@
         <ol class="list-input">
           <li class="field required text" id="field-email">
             <label for="email">E-mail</label>
-            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />              
+            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
           </li>
           <li class="field required password" id="field-password">
             <label for="password">Password</label>
@@ -236,4 +237,4 @@
       <p>Need help in registering with edX? <a href="#">View our FAQs for answers to commonly asked questions</a>.  Once registered, most questions can be answered in the course specific discussion forums or through the FAQs.</p>
     </div>
   </aside>
-</section>
\ No newline at end of file
+</section>