From b5ec11afa089444234db0c1797b5b378bcccdbf4 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Wed, 10 Apr 2013 11:26:00 -0400
Subject: [PATCH 1/2] edx.org - adding in more UI status when processing
 login/register forms

---
 lms/templates/login.html    | 17 +++++++++--------
 lms/templates/register.html | 15 ++++++++-------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/lms/templates/login.html b/lms/templates/login.html
index 6627da6e18..8290743418 100644
--- a/lms/templates/login.html
+++ b/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>
diff --git a/lms/templates/register.html b/lms/templates/register.html
index f5e4511c09..7e79f420e6 100644
--- a/lms/templates/register.html
+++ b/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 &hellip;');
       }
 
       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>

From 22a56fddb4705de86180ba59b249b4854dff617a Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Wed, 10 Apr 2013 13:38:25 -0400
Subject: [PATCH 2/2] edx.org - adding in an intermediate disabled state for
 login/register submit buttons when the form is first processed

---
 lms/static/sass/multicourse/_account.scss | 2 +-
 lms/templates/login.html                  | 2 ++
 lms/templates/register.html               | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss
index 5e1965ae43..eab8cbe66b 100644
--- a/lms/static/sass/multicourse/_account.scss
+++ b/lms/static/sass/multicourse/_account.scss
@@ -391,7 +391,7 @@
     button[type="submit"] {
       @extend .button-primary;
 
-      &:disabled {
+      &:disabled, &.is-disabled {
         opacity: 0.3;
         cursor: default !important;
       }
diff --git a/lms/templates/login.html b/lms/templates/login.html
index 8290743418..2e0281f4f6 100644
--- a/lms/templates/login.html
+++ b/lms/templates/login.html
@@ -30,6 +30,8 @@
 
     (function() {
       $(document).delegate('#login-form', 'ajax:success', function(data, json, xhr) {
+        $(this).find('.form-actions #submit').addClass('is-disabled');
+
         if(json.success) {
           $('.message.submission-error').removeClass('is-shown');
           toggleSubmitButton();
diff --git a/lms/templates/register.html b/lms/templates/register.html
index 7e79f420e6..ee06a3caa0 100644
--- a/lms/templates/register.html
+++ b/lms/templates/register.html
@@ -36,6 +36,8 @@
 
     (function() {
      $(document).delegate('#register-form', 'ajax:success', function(data, json, xhr) {
+        $(this).find('.form-actions #submit').addClass('is-disabled');
+
        if(json.success) {
         $('.message.submission-error').removeClass('is-shown');
         toggleSubmitButton();