visual feedback when submitting forms (#3164)

This also helps with the failing integration test. We needed a way to tell the ajax request was back. Observing the button state now works for that.

2 files changed, 13 insertions, 2 deletions

diff --git a/users/app/assets/javascripts/users.js b/users/app/assets/javascripts/users.js
index 9d1a0f0..aaeba6e 100644
--- a/users/app/assets/javascripts/users.js
+++ b/users/app/assets/javascripts/users.js
@@ -28,12 +28,22 @@
     var form = submitEvent.target;
     var token = form.dataset.token;
     var url = form.action;
-    return $.ajax({
+    var req = $.ajax({
       url: url,
       type: 'PUT',
       headers: { Authorization: 'Token token="' + token + '"' },
       data: $(form).serialize()
     });
+    req.done( function() {
+      $(form).find('input[type="submit"]').button('reset');
+    });
+  };
+
+  markAsSubmitted = function(submitEvent) {
+    var form = submitEvent.target;
+    $(form).addClass('submitted')
+    // bootstrap loading state:
+    $(form).find('input[type="submit"]').button('loading');
   };
 
   //
@@ -86,6 +96,7 @@
   //
 
   $(document).ready(function() {
+    $('form').submit(markAsSubmitted);
     $('#new_user').submit(prevent_default);
     $('#new_user').submit(srp.signup);
     $('#new_session').submit(prevent_default);
diff --git a/users/app/views/users/_edit.html.haml b/users/app/views/users/_edit.html.haml
index ae3f32d..9d2473b 100644
--- a/users/app/views/users/_edit.html.haml
+++ b/users/app/views/users/_edit.html.haml
@@ -35,7 +35,7 @@
   = f.input :public_key, :as => :text, :hint => t(:use_ascii_key), :input_html => {:class => "full-width", :rows => 4}
   .control-group
     .controls
-      = f.submit t(:save), :class => 'btn'
+      = f.submit t(:save), :class => 'btn', :data => {"loading-text" => "Saving..."}
 
 -#
 -# DESTROY ACCOUNT