Try to prevent double-submit

Stephen Paul Weber created 2 years ago

By disabling and hiding the button and ignoring signals from the app during the
submission process.

Change summary

views/credit_cards.slim | 19 +++++++++++++++----
1 file changed, 15 insertions(+), 4 deletions(-)

Detailed changes

views/credit_cards.slim

@@ -52,11 +52,15 @@ javascript:
 		document.querySelector("input[name=atfd]").value = atfd;
 	}
 
+	var button = document.createElement("button");
+	button.innerHTML = "Save";
+	document.querySelector("form").appendChild(button);
+
 	if (window.xmpp_xep0050) {
 		xmpp_xep0050.preventDefault();
 
 		window.addEventListener("message", (ev) => {
-			if (ev.data === "xmpp_xep0050/next") {
+			if (ev.data === "xmpp_xep0050/next" && !button.disabled) {
 				document.querySelector("form").requestSubmit();
 			}
 			if (ev.data === "xmpp_xep0050/cancel") {
@@ -71,9 +75,6 @@ javascript:
 		});
 	}
 
-	var button = document.createElement("button");
-	button.innerHTML = "Save";
-	document.querySelector("form").appendChild(button);
 	braintree.dropin.create({
 		authorization: #{{token.to_json}},
 		container: "#braintree",
@@ -92,6 +93,8 @@ javascript:
 		}
 
 		document.querySelector("form").addEventListener("submit", function(e) {
+			button.disabled = true;
+			button.style.display = "none";
 			e.preventDefault();
 			instance._mainView.hideSheetError();
 
@@ -103,6 +106,8 @@ javascript:
 			}, function(err, payload) {
 				if(err) {
 					console.log(err);
+					button.disabled = false;
+					button.style.display = "block";
 				} else {
 					instance._mainView.showLoadingIndicator();
 					e.target.braintree_nonce.value = payload.nonce;
@@ -110,6 +115,8 @@ javascript:
 						"method": "POST",
 						"body": new FormData(e.target)
 					}).then(function(response) {
+						button.disabled = false;
+						button.style.display = "block";
 						instance._mainView.hideLoadingIndicator();
 
 						if(response.status === 200) {
@@ -118,6 +125,8 @@ javascript:
 							return Promise.reject(response);
 						}
 					}).catch(function(err) {
+						button.disabled = false;
+						button.style.display = "block";
 						if(!(err instanceof Response)) return Promise.reject(err);
 
 						return err.text().then(function(msg) {
@@ -131,6 +140,8 @@ javascript:
 							}
 						});
 					}).catch(function(err) {
+						button.disabled = false;
+						button.style.display = "block";
 						console.log(err);
 						instance._mainView.hideLoadingIndicator();
 						instance.clearSelectedPaymentMethod();