Merge pull request #6960 from beganovich/jira-778

Prevent double form submission

public/js/clients/invoices/payment.js

@@ -1,2 +1,2 @@
 /*! For license information please see payment.js.LICENSE.txt */
-(()=>{function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var t=function(){function t(e,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.shouldDisplayTerms=e,this.shouldDisplaySignature=n,this.termsAccepted=!1}var n,a,i;return n=t,(a=[{key:"handleMethodSelect",value:function(e){var t=this;document.getElementById("company_gateway_id").value=e.dataset.companyGatewayId,document.getElementById("payment_method_id").value=e.dataset.gatewayTypeId,this.shouldDisplaySignature&&!this.shouldDisplayTerms&&(this.displayTerms(),document.getElementById("accept-terms-button").addEventListener("click",(function(){t.termsAccepted=!0,t.submitForm()}))),!this.shouldDisplaySignature&&this.shouldDisplayTerms&&(this.displaySignature(),document.getElementById("signature-next-step").addEventListener("click",(function(){document.querySelector('input[name="signature"').value=t.signaturePad.toDataURL(),t.submitForm()}))),this.shouldDisplaySignature&&this.shouldDisplayTerms&&(this.displaySignature(),document.getElementById("signature-next-step").addEventListener("click",(function(){t.displayTerms(),document.getElementById("accept-terms-button").addEventListener("click",(function(){document.querySelector('input[name="signature"').value=t.signaturePad.toDataURL(),t.termsAccepted=!0,t.submitForm()}))}))),this.shouldDisplaySignature||this.shouldDisplayTerms||this.submitForm()}},{key:"submitForm",value:function(){document.getElementById("payment-form").submit()}},{key:"displayTerms",value:function(){document.getElementById("displayTermsModal").removeAttribute("style")}},{key:"displaySignature",value:function(){document.getElementById("displaySignatureModal").removeAttribute("style");var e=new SignaturePad(document.getElementById("signature-pad"),{penColor:"rgb(0, 0, 0)"});this.signaturePad=e}},{key:"handle",value:function(){var e=this;document.querySelectorAll(".dropdown-gateway-button").forEach((function(t){t.addEventListener("click",(function(){return e.handleMethodSelect(t)}))}))}}])&&e(n.prototype,a),i&&e(n,i),t}(),n=document.querySelector('meta[name="require-invoice-signature"]').content,a=document.querySelector('meta[name="show-invoice-terms"]').content;new t(Boolean(+n),Boolean(+a)).handle()})();
+(()=>{function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}var t=function(){function t(e,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),this.shouldDisplayTerms=e,this.shouldDisplaySignature=n,this.termsAccepted=!1,this.submitting=!1}var n,a,i;return n=t,(a=[{key:"handleMethodSelect",value:function(e){var t=this;document.getElementById("company_gateway_id").value=e.dataset.companyGatewayId,document.getElementById("payment_method_id").value=e.dataset.gatewayTypeId,this.shouldDisplaySignature&&!this.shouldDisplayTerms&&(this.displayTerms(),document.getElementById("accept-terms-button").addEventListener("click",(function(){t.termsAccepted=!0,t.submitForm()}))),!this.shouldDisplaySignature&&this.shouldDisplayTerms&&(this.displaySignature(),document.getElementById("signature-next-step").addEventListener("click",(function(){document.querySelector('input[name="signature"').value=t.signaturePad.toDataURL(),t.submitForm()}))),this.shouldDisplaySignature&&this.shouldDisplayTerms&&(this.displaySignature(),document.getElementById("signature-next-step").addEventListener("click",(function(){t.displayTerms(),document.getElementById("accept-terms-button").addEventListener("click",(function(){document.querySelector('input[name="signature"').value=t.signaturePad.toDataURL(),t.termsAccepted=!0,t.submitForm()}))}))),this.shouldDisplaySignature||this.shouldDisplayTerms||this.submitForm()}},{key:"submitForm",value:function(){document.getElementById("payment-form").submit()}},{key:"displayTerms",value:function(){document.getElementById("displayTermsModal").removeAttribute("style")}},{key:"displaySignature",value:function(){document.getElementById("displaySignatureModal").removeAttribute("style");var e=new SignaturePad(document.getElementById("signature-pad"),{penColor:"rgb(0, 0, 0)"});this.signaturePad=e}},{key:"handle",value:function(){var e=this;document.querySelectorAll(".dropdown-gateway-button").forEach((function(t){t.addEventListener("click",(function(){e.submitting||(e.handleMethodSelect(t),e.submitting=!0)}))}))}}])&&e(n.prototype,a),i&&e(n,i),t}(),n=document.querySelector('meta[name="require-invoice-signature"]').content,a=document.querySelector('meta[name="show-invoice-terms"]').content;new t(Boolean(+n),Boolean(+a)).handle()})();

public/mix-manifest.json

@@ -4,7 +4,7 @@
     "/js/clients/payments/authorize-credit-card-payment.js": "/js/clients/payments/authorize-credit-card-payment.js?id=cfe5de1cf87a0b01568d",
     "/js/clients/payments/stripe-ach.js": "/js/clients/payments/stripe-ach.js?id=5e74bc0d346beeb57ee9",
     "/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=6b79265cbb8c963eef19",
-    "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=5b79f72432f92a85fefa",
+    "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=d9132fae12153a6943a6",
     "/js/clients/payments/stripe-sofort.js": "/js/clients/payments/stripe-sofort.js?id=926c7b9d1ee48bbf786b",
     "/js/clients/payments/stripe-alipay.js": "/js/clients/payments/stripe-alipay.js?id=1e159400d6a5ca4662c1",
     "/js/clients/payments/checkout-credit-card.js": "/js/clients/payments/checkout-credit-card.js?id=0b47ce36fe20191adb33",

resources/js/clients/invoices/payment.js

@@ -13,6 +13,7 @@ class Payment {
         this.shouldDisplayTerms = displayTerms;
         this.shouldDisplaySignature = displaySignature;
         this.termsAccepted = false;
+        this.submitting = false;
     }
 
     handleMethodSelect(element) {
@@ -95,9 +96,13 @@ class Payment {
         document
             .querySelectorAll(".dropdown-gateway-button")
             .forEach(element => {
-                element.addEventListener("click", () =>
+                element.addEventListener("click", () => {
+                    if (!this.submitting) {
                         this.handleMethodSelect(element)
-                );
+
+                        this.submitting = true;
+                    }
+                });
             });
     }
 }

resources/views/portal/ninja2020/components/livewire/documents-table.blade.php

@@ -64,7 +64,7 @@
                 <option>15</option>
                 <option>20</option>
             </select>
-            <button x-on:click="document.getElementById('multiple-downloads').submit()" class="button button-primary bg-primary py-2 ml-2">
+            <button onclick="document.getElementById('multiple-downloads').submit(); setTimeout(() => this.disabled = true, 0); setTimeout(() => this.disabled = false, 5000);" class="button button-primary bg-primary py-2 ml-2">
                 <span class="hidden md:block">
                     {{ ctrans('texts.download_selected') }}
                 </span>

resources/views/portal/ninja2020/components/livewire/invoices-table.blade.php

@@ -99,7 +99,7 @@
                                         @csrf
                                         <input type="hidden" name="invoices[]" value="{{ $invoice->hashed_id }}">
                                         <input type="hidden" name="action" value="payment">
-                                        <button class="px-2 py-1 mr-3 text-xs uppercase button button-primary bg-primary" dusk="pay-now">
+                                        <button onclick="setTimeout(() => this.disabled = true, 0); return true;" class="px-2 py-1 mr-3 text-xs uppercase button button-primary bg-primary" dusk="pay-now">
                                             {{ ctrans('texts.pay_now') }}
                                         </button>
                                     </form>

resources/views/portal/ninja2020/invoices/index.blade.php

@@ -15,10 +15,10 @@
     <div class="flex items-center">
         <form action="{{ route('client.invoices.bulk') }}" method="post" id="bulkActions">
             @csrf
-            <button type="submit" class="button button-primary bg-primary" name="action" value="download">{{ ctrans('texts.download') }}</button>
+            <button type="submit" onclick="setTimeout(() => this.disabled = true, 0); setTimeout(() => this.disabled = false, 5000); return true;" class="button button-primary bg-primary" name="action" value="download">{{ ctrans('texts.download') }}</button>
 
             @if(!empty(auth()->user()->client->service()->getPaymentMethods(0)))
-                <button type="submit" class="button button-primary bg-primary" name="action" value="payment">{{ ctrans('texts.pay_now') }}</button>
+                <button onclick="setTimeout(() => this.disabled = true, 0); return true;" type="submit" class="button button-primary bg-primary" name="action" value="payment">{{ ctrans('texts.pay_now') }}</button>
             @endif
         </form>
     </div>

resources/views/portal/ninja2020/payment_methods/includes/modals/removal.blade.php

@@ -36,7 +36,7 @@
                 <form action="{{ route('client.payment_methods.destroy', [$payment_method->hashed_id, 'method' => $payment_method->gateway_type->id]) }}" method="post">
                     @csrf
                     @method('DELETE')
-                    <button type="submit" class="button button-danger button-block" dusk="confirm-payment-removal">
+                    <button type="submit" onclick="setTimeout(() => this.disabled = true, 0); return true;" class="button button-danger button-block" dusk="confirm-payment-removal">
                         {{ ctrans('texts.remove') }}
                     </button>
                 </form>

resources/views/portal/ninja2020/quotes/approve.blade.php

@@ -26,7 +26,7 @@
                         <div class="relative inline-block text-left">
                             <div>
                                 <div class="rounded-md shadow-sm">
-                                    <button type="button" id="approve-button"
+                                    <button type="button" id="approve-button" onclick="setTimeout(() => this.disabled = true, 0); return true;"
                                             class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150">
                                         {{ ctrans('texts.approve') }}
                                     </button>

resources/views/portal/ninja2020/quotes/includes/actions.blade.php

@@ -1,5 +1,6 @@
 <form action="{{ route('client.quotes.bulk') }}" method="post" id="approve-form" />
 @csrf
+
 <input type="hidden" name="action" value="approve">
 <input type="hidden" name="process" value="true">
 <input type="hidden" name="quotes[]" value="{{ $quote->hashed_id }}">
@@ -17,11 +18,13 @@
 
                 <div class="inline-flex rounded-md shadow-sm">
                     <input type="hidden" name="action" value="payment">
-                        <button type="button" class="button button-primary bg-primary" id="approve-button">{{ ctrans('texts.approve') }}</button>
+                    <button onclick="setTimeout(() => this.disabled = true, 0); return true;" type="button"
+                        class="button button-primary bg-primary"
+                        id="approve-button">{{ ctrans('texts.approve') }}</button>
                 </div>
             </div>
         </div>
     </div>
 </div>
-</form>
 
+</form>

resources/views/portal/ninja2020/quotes/index.blade.php

@@ -15,12 +15,16 @@
     <div class="flex justify-between items-center">
         <form action="{{ route('client.quotes.bulk') }}" method="post" id="bulkActions">
             @csrf
-            <button type="submit" class="button button-primary bg-primary" name="action"
+            <button type="submit"
+                onclick="setTimeout(() => this.disabled = true, 0); setTimeout(() => this.disabled = false, 5000); return true;"
+                class="button button-primary bg-primary" name="action"
                 value="download">{{ ctrans('texts.download') }}</button>
-            <button type="submit" class="button button-primary bg-primary" name="action"
+            <button type="submit" onclick="setTimeout(() => this.disabled = true, 0); return true;"
+                class="button button-primary bg-primary" name="action"
                 value="approve">{{ ctrans('texts.approve') }}</button>
         </form>
     </div>
+
     <div class="flex flex-col mt-4">
         @livewire('quotes-table', ['company' => $company])
     </div>

resources/views/portal/ninja2020/statement/index.blade.php

@@ -31,7 +31,7 @@
                 <span class="ml-2">{{ ctrans('texts.show_aging') }}</span>
             </label> <!-- End show aging checkbox -->
         </div>
-        <button id="pdf-download" class="button button-primary bg-primary mt-4 md:mt-0">{{ ctrans('texts.download') }}</button>
+        <button onclick="setTimeout(() => this.disabled = true, 0); setTimeout(() => this.disabled = false, 5000); return true;" id="pdf-download" class="button button-primary bg-primary mt-4 md:mt-0">{{ ctrans('texts.download') }}</button>
     </div>
 
     @include('portal.ninja2020.components.pdf-viewer', ['url' => route('client.statement.raw')])