Prevent accidental double-clicking of submit buttons

i-dot-ai · Aug 5, 2024 · 4ae2f77 · 4ae2f77
1 parent 54a9491
commit 4ae2f77
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 9 deletions.
diff --git a/django_app/frontend/src/js/main.js b/django_app/frontend/src/js/main.js
@@ -1,3 +1,18 @@
 import "./trusted-types.js";
 import "./libs/govuk-frontend.min.js";
 import "../../node_modules/i.ai-design-system/dist/iai-design-system.js";
+
+// Because this doesn't appear to be working in Redbox: https://design-system.service.gov.uk/components/button/#stop-users-from-accidentally-sending-information-more-than-once
+(() => {
+  let buttons = document.querySelectorAll(`[data-prevent-double-click="true"]`);
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      window.setTimeout(() => {
+        button.disabled = true;
+        window.setTimeout(() => {
+          button.disabled = false;
+        }, 1000);
+      }, 1);
+    });
+  });
+})();
diff --git a/django_app/redbox_app/templates/chats.html b/django_app/redbox_app/templates/chats.html
@@ -1,6 +1,5 @@
 {% set pageTitle = "Chats" %}
 {% extends "base.html" %}
-{% from "macros/govuk-button.html" import govukButton %}
 {% from "macros/chat-macros.html" import message_box, route_display %}
 
 

diff --git a/django_app/redbox_app/templates/citations.html b/django_app/redbox_app/templates/citations.html
@@ -1,6 +1,5 @@
 {% set pageTitle = "Citations" %}
 {% extends "base.html" %}
-{% from "macros/govuk-button.html" import govukButton %}
 
 
 {% block content %}

diff --git a/django_app/redbox_app/templates/macros/govuk-button.html b/django_app/redbox_app/templates/macros/govuk-button.html
@@ -1,12 +1,12 @@
-{% macro govukButton(text=None, visually_hidden_text=None, href=None, classes=None, download=False) %}
+{% macro govukButton(text=None, visually_hidden_text=None, href=None, classes=None, download=False, prevent_double_click=False) %}
 
 {% if href %}
   <a href="{{ href }}" role="button" draggable="false" class="govuk-button {{ classes }}" data-module="govuk-button" 
     {% if download %}download{% endif %}>
     {{ text | safe }}
   </a>
 {% else %}
-  <button type="submit" class="govuk-button {{ classes }}" data-module="govuk-button">
+  <button type="submit" class="govuk-button {{ classes }}" data-module="govuk-button" {% if prevent_double_click %}data-prevent-double-click="true"{% endif %}>
     {{ text | safe }}
   </button>
 {% endif %}

diff --git a/django_app/redbox_app/templates/magic_link/error.html b/django_app/redbox_app/templates/magic_link/error.html
@@ -1,7 +1,6 @@
 {% set pageTitle = "Sign in - confirmation" %}
 
 {% extends "base.html" %}
-{% from "macros/govuk-button.html" import govukButton %}
 
 {% block content %}
 

diff --git a/django_app/redbox_app/templates/remove-doc.html b/django_app/redbox_app/templates/remove-doc.html
@@ -32,7 +32,7 @@ <h1 class="govuk-heading-m">Are you sure you want to remove this document?</h1>
       </div>
     </dl>
 
-    {{ govukButton(text="Remove", classes="govuk-button--warning") }}
+    {{ govukButton(text="Remove", classes="govuk-button--warning", prevent_double_click=True) }}
 
   </form>
 </div>

diff --git a/django_app/redbox_app/templates/sign-in-link-sent.html b/django_app/redbox_app/templates/sign-in-link-sent.html
@@ -1,7 +1,6 @@
 {% set pageTitle = "Sign in - link sent" %}
 
 {% extends "base.html" %}
-{% from "macros/govuk-button.html" import govukButton %}
 
 {% block content %}
 

diff --git a/django_app/redbox_app/templates/signed-out.html b/django_app/redbox_app/templates/signed-out.html
@@ -1,7 +1,6 @@
 {% set pageTitle = "Signed out" %}
 
 {% extends "base.html" %}
-{% from "macros/govuk-button.html" import govukButton %}
 
 {% block content %}
 

diff --git a/django_app/redbox_app/templates/upload.html b/django_app/redbox_app/templates/upload.html
@@ -33,7 +33,7 @@ <h1 class="govuk-heading-l">{{ pageTitle }}</h1>
           <input class="govuk-file-upload {% if errors.upload_doc %} govuk-file-upload--error{% endif %}" multiple id="upload-docs" name="uploadDocs" type="file" aria-describedby="upload-docs-notification upload-docs-filetypes {% if errors.upload_doc %} file-upload-docs-error{% endif %}">
         </div>
 
-        {{ govukButton(text="Upload") }}
+        {{ govukButton(text="Upload", prevent_double_click=True) }}
 
       </form>