From 88e61458e84e462d81a43f9a17b3dd9396952dc5 Mon Sep 17 00:00:00 2001
From: Sebastian Zoglowek <55794780+zoglo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 15:03:32 +0200
Subject: [PATCH] Update `form_wrapper` template

---
 contao/templates/forms/form_wrapper.html5     | 24 +++++++++++++++----
 .../forms/form_wrapper_contao5_default.html5  | 22 +++++++++++++----
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/contao/templates/forms/form_wrapper.html5 b/contao/templates/forms/form_wrapper.html5
index 34e58df..a71b2bb 100644
--- a/contao/templates/forms/form_wrapper.html5
+++ b/contao/templates/forms/form_wrapper.html5
@@ -38,7 +38,7 @@
 <!-- indexer::continue -->
 
 <?php if ($this->ajax): ?>
-  <script>
+  <script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
     window.addEventListener('DOMContentLoaded', () => {
       const el = document.querySelector('[data-ajax-form="<?= $this->id ?>"]');
 
@@ -75,7 +75,11 @@
 
           // Send the triggered button data as well
           if (e.submitter) {
-              formData.append(e.submitter.name, e.submitter.value);
+            formData.append(e.submitter.name, e.submitter.value);
+
+            // Prevent double form submission
+            e.submitter.disabled = true;
+            setTimeout(() => e.submitter.disabled = false, 30000);
           }
 
           request(form, formData, xhr => {
@@ -87,10 +91,10 @@
               return;
             }
 
-            const template = document.createElement('template');
-            template.innerHTML = xhr.responseText.trim();
+            const range = document.createRange();
+            range.selectNode(form.parentNode);
 
-            const newForm = template.content.firstElementChild;
+            const newForm = range.createContextualFragment(xhr.responseText).firstElementChild;
             form.replaceWith(newForm);
 
             if (!newForm.getAttribute('action')) {
@@ -105,4 +109,14 @@
       initForm(el);
     });
   </script>
+<?php else: ?>
+  <script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
+    document.currentScript.previousElementSibling.querySelector('form').addEventListener('submit', e => {
+      // Prevent double form submission
+      if (e.submitter) {
+        e.submitter.disabled = true;
+        setTimeout(() => e.submitter.disabled = false, 30000);
+      }
+    });
+  </script>
 <?php endif; ?>
diff --git a/contao/templates/forms/form_wrapper_contao5_default.html5 b/contao/templates/forms/form_wrapper_contao5_default.html5
index 949214a..b6ac1d9 100644
--- a/contao/templates/forms/form_wrapper_contao5_default.html5
+++ b/contao/templates/forms/form_wrapper_contao5_default.html5
@@ -15,7 +15,7 @@
 <!-- indexer::continue -->
 
 <?php if ($this->ajax): ?>
-  <script>
+  <script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
     window.addEventListener('DOMContentLoaded', () => {
       const el = document.querySelector('[data-ajax-form="<?= $this->id ?>"]');
 
@@ -53,6 +53,10 @@
           // Send the triggered button data as well
           if (e.submitter) {
             formData.append(e.submitter.name, e.submitter.value);
+
+            // Prevent double form submission
+            e.submitter.disabled = true;
+            setTimeout(() => e.submitter.disabled = false, 30000);
           }
 
           request(form, formData, xhr => {
@@ -64,10 +68,10 @@
               return;
             }
 
-            const template = document.createElement('template');
-            template.innerHTML = xhr.responseText.trim();
+            const range = document.createRange();
+            range.selectNode(form.parentNode);
 
-            const newForm = template.content.firstElementChild;
+            const newForm = range.createContextualFragment(xhr.responseText).firstElementChild;
             form.replaceWith(newForm);
 
             if (!newForm.getAttribute('action')) {
@@ -82,4 +86,14 @@
       initForm(el);
     });
   </script>
+<?php else: ?>
+  <script<?= $this->attr()->setIfExists('nonce', $this->nonce('script-src')) ?>>
+    document.currentScript.previousElementSibling.querySelector('form').addEventListener('submit', e => {
+      // Prevent double form submission
+      if (e.submitter) {
+        e.submitter.disabled = true;
+        setTimeout(() => e.submitter.disabled = false, 30000);
+      }
+    });
+  </script>
 <?php endif; ?>