FIX form submission button state (#1866)

Author: hitaishi19

client/dist/js/bundle.js

@@ -460,6 +460,24 @@ $.entwine('ss', function($) {
       // default to first button if none given - simulates browser behaviour
       if(!button) button = this.find('.btn-toolbar :submit:first');
 
+      // set button to "submitting" state
+      $(button).addClass('btn--loading loading');
+      $(button).prop('disabled', true);
+
+      if ($(button).is('button')) {
+        $(button).append(
+          $(
+            '<div class="btn__loading-icon">' +
+              '<span class="btn__circle btn__circle--1"></span>' +
+              '<span class="btn__circle btn__circle--2"></span>' +
+              '<span class="btn__circle btn__circle--3"></span>' +
+              '</div>'
+          )
+        );
+
+        $(button).css($(button).outerWidth() + 'px');
+      }
+
       var beforeSubmitFormEventData = {
         // array of promises that must resolve({success:true}) before the form is submitted
         // result of each promise must be an object of
@@ -470,6 +488,14 @@ $.entwine('ss', function($) {
       };
       form.trigger('beforesubmitform', beforeSubmitFormEventData);
 
+      var clearButton = function() {
+        $(button).removeClass('btn--loading loading');
+        $(button).prop('disabled', false);
+        $(button).find('.btn__loading-icon').remove();
+        $(button).css('width', 'auto');
+        $(button).text($(button).data('original-text'));
+      }
+
       Promise.all(beforeSubmitFormEventData.promises).then(function(results) {
 
         let success = true;
@@ -499,38 +525,15 @@ $.entwine('ss', function($) {
               }
             });
           }
+          clearButton();
           return false;
         }
 
         self.trigger('submitform', {form: form, button: button});
 
-        // set button to "submitting" state
-        $(button).addClass('btn--loading loading');
-        $(button).prop('disabled', true);
-
-        if($(button).is('button')) {
-
-          $(button).append($(
-            '<div class="btn__loading-icon">'+
-              '<span class="btn__circle btn__circle--1"></span>'+
-              '<span class="btn__circle btn__circle--2"></span>'+
-              '<span class="btn__circle btn__circle--3"></span>'+
-            '</div>'));
-
-          $(button).css($(button).outerWidth() + 'px');
-        }
-
         // validate if required
         var validationResult = form.validate();
 
-        var clearButton = function() {
-          $(button).removeClass('btn--loading loading');
-          $(button).prop('disabled', false);
-          $(button).find('.btn__loading-icon').remove();
-          $(button).css('width', 'auto');
-          $(button).text($(button).data('original-text'));
-        }
-
         if(typeof validationResult!=='undefined' && !validationResult) {
           statusMessage("Validation failed.", "bad");
           clearButton();
@@ -572,7 +575,10 @@ $.entwine('ss', function($) {
             newContentEls.filter('form').trigger('aftersubmitform', {status: status, xhr: xhr, formData: formData});
           }
         }, ajaxOptions));
-      });
+      }).catch(function() {
+    		// Handle errors from the promises
+    		clearButton();
+      });;
 
       return false;
     },