Clean up submission behavior

- fix disabling of submit button - send a bad nonce to trigger error handling vs. crash
gratipay · Sep 12, 2017 · 72827bb · 72827bb
1 parent 0c1a606
commit 72827bb
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 12 deletions.
diff --git a/js/gratipay/homepage.js b/js/gratipay/homepage.js
@@ -5,6 +5,12 @@ Gratipay.homepage.initForm = function(clientAuthorization) {
     self.$form = $('#homepage #content form');
     self.$submit = self.$form.find('button[type=submit]');
 
+    function disable(e) {
+        e.preventDefault();
+        self.$submit.prop('disabled', true);
+        self.$submit.addClass('processing');
+    }
+
     if (clientAuthorization === undefined) {    // Offline mode
 
         $('#braintree-container').addClass('offline').html(Gratipay.jsonml(['div',
@@ -16,7 +22,7 @@ Gratipay.homepage.initForm = function(clientAuthorization) {
         ]));
 
         self.$submit.click(function(e) {
-            e.preventDefault();
+            disable(e);
             nonce = $('#braintree-container input').val();
             self.submitFormWithNonce(nonce);
         });
@@ -28,9 +34,9 @@ Gratipay.homepage.initForm = function(clientAuthorization) {
                 $('#braintree-container').addClass('failed').text('Failed to load Braintree.');
             } else {
                 self.$submit.click(function(e) {
-                    e.preventDefault();
+                    disable(e);
                     instance.requestPaymentMethod(function(requestPaymentMethodErr, payload) {
-                        self.submitFormWithNonce(payload.nonce);
+                        self.submitFormWithNonce(payload ? payload.nonce : '');
                     });
                 });
             }
@@ -49,8 +55,6 @@ Gratipay.homepage.submitFormWithNonce = function(nonce) {
     var data = new FormData(self.$form[0]);
     data.set('payment_method_nonce', nonce);
 
-    self.$submit.prop('disable', true);
-
     $.ajax({
         url: self.$form.attr('action'),
         type: 'POST',
@@ -61,7 +65,8 @@ Gratipay.homepage.submitFormWithNonce = function(nonce) {
         success: function(data) {
             // Due to Aspen limitations we use 200 for both success and failure. :/
             if (data.errors.length > 0) {
-                self.$submit.prop('disable', false);
+                self.$submit.prop('disabled', false);
+                self.$submit.removeClass('processing');
                 Gratipay.notification(data.msg, 'error');
                 for (var i=0, fieldName; fieldName=data.errors[i]; i++) {
                     $('.'+fieldName, self.$form).addClass('error');

diff --git a/scss/pages/homepage.scss b/scss/pages/homepage.scss
@@ -198,6 +198,7 @@
                         }
                     }
                 }
+
                 .help {
                     display: none;
                     color: red;
@@ -213,10 +214,14 @@
                     }
                 }
             }
-            &.optional {
-                button {
-                    background: $light-gray;
-                    color: $medium-gray;
+
+            button[type=submit] {
+                .processing {
+                    display: none;
+                }
+                &.processing {
+                    .active { display: none; }
+                    .processing { display: inline; }
                 }
             }
         }

diff --git a/www/browse/payments/%uuid/invoice.spt b/www/browse/payments/%uuid/invoice.spt
@@ -169,7 +169,7 @@ if pfos is None:
             <table>
                 <tbody>
                     <tr>
-                        <th>open source software</th>
+                        <th>open source software sponsorship</th>
                         <td>$</td>
                         <td>{{ pfos.amount }}.00</td>
                     </tr>

diff --git a/www/index.spt b/www/index.spt
@@ -222,7 +222,8 @@ $(document).ready(function() {
 
         <div class="important-button">
             <button type="submit" class="selected large">
-                {{ _("Pay for Open Source") }}
+                <span class="active">{{ _("Pay for Open Source") }}</span>
+                <span class="processing">{{ _("Processing ...") }}</span>
             </button>
         </div>
         <p class="fine-print">