From 4ac90c066a91bcbda6a1ba6133fc69d0d9a44c51 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 15 Sep 2017 14:10:21 +0100
Subject: [PATCH] Prevent doubling clicking form submissions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Have seen users complaining that they got an invitation email twice.
This is probably because they clicked the button twice even though they
think they only clicked it once.

Double form submission is a common issue on web pages, and there are a
number of different ways to prevent it. I’ve chosen to do it this way
because:
- temporarily, not permanently disabling the button means that this
  addresses the double clicking issue without breaking things if the
  user did, really want to click the button again deliberately (for
  whatever reason)
- doing it with a `data` attribute, rather than the `disabled` attribute
  means that the interaction behaviour of the button doesn’t change (
  `disabled` buttons can’t be focused, for example)
---
 .../preventDuplicateFormSubmissions.js        | 30 +++++++++++++++++++
 gulpfile.babel.js                             |  1 +
 2 files changed, 31 insertions(+)
 create mode 100644 app/assets/javascripts/preventDuplicateFormSubmissions.js

diff --git a/app/assets/javascripts/preventDuplicateFormSubmissions.js b/app/assets/javascripts/preventDuplicateFormSubmissions.js
new file mode 100644
index 000000000..0eca28039
--- /dev/null
+++ b/app/assets/javascripts/preventDuplicateFormSubmissions.js
@@ -0,0 +1,30 @@
+(function() {
+
+  "use strict";
+
+  let disableSubmitButtons = function(event) {
+
+    $submitButton = $(this).find(':submit');
+
+    if ($submitButton.data('clicked') == 'true') {
+
+      event.preventDefault();
+
+    } else {
+
+      $submitButton.data('clicked', 'true');
+      setTimeout(renableSubmitButton($submitButton), 1500);
+
+    }
+
+  };
+
+  let renableSubmitButton = $submitButton => () => {
+
+    $submitButton.data('clicked', '');
+
+  };
+
+  $('form').on('submit', disableSubmitButtons);
+
+})();
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 26dd6c96b..9ecc9c15d 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -67,6 +67,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/listEntry.js',
     paths.src + 'javascripts/liveSearch.js',
     paths.src + 'javascripts/errorTracking.js',
+    paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
     paths.src + 'javascripts/main.js'
   ])
   .pipe(plugins.prettyerror())