Merge pull request #1455 from OpenTechFund/feature/spam-protect-newsletter-form

Make the spam protect javascript more generic and use it for newslett…

opentech/public/forms/templates/public_forms/form_page.html

@@ -6,7 +6,7 @@
     <h1>{{ page.title }}</h1>
     {{ page.intro|richtext }}
     <p class="wrapper--error message-no-js js-hidden">You must have Javascript enabled to use this form.</p>
-    <form class="form wagtail-form" action="#" data-pageurl="{% pageurl page %}" method="post" enctype="multipart/form-data">
+    <form class="form wagtail-form" action="#" data-actionpath="{% pageurl page %}" method="post" enctype="multipart/form-data">
         {% csrf_token %}
         {{ form.media }}
         {% for field in form %}
@@ -22,5 +22,5 @@
 {% endblock %}
 
 {% block extra_js %}
-    <script src="{% static 'js/public/wagtail-form.js' %}"></script>
+    <script src="{% static 'js/public/protect-form.js' %}"></script>
 {% endblock %}

opentech/public/mailchimp/templates/mailchimp/newsletter_signup.html

+{% load static i18n %}
 <h4>Get the latest internet freedom news</h4>
-<form class="form" action="{{ PUBLIC_SITE.root_url }}{% url "newsletter:subscribe" %}" method="post">
+<form class="form newsletter-form" action="#" data-actionpath="{{ PUBLIC_SITE.root_url }}{% url "newsletter:subscribe" %}" method="post">
     <div>
         {% for field in newsletter_form %}
         <label for="{{ field.id_for_label }}"{% if field.field.required %} required{% endif %}>
@@ -11,7 +12,11 @@
         {{ field }}
         {% endfor %}
         <div class="form-actions form-wrapper">
-            <input type="submit" value="Sign up" class="form-submit button button--transparent--wide link--footer-signup">
+            <button class="form-submit button button--transparent--wide link--footer-signup" type="submit">{% trans 'Sign up' %}</button>
         </div>
     </div>
 </form>
+
+{% block extra_js %}
+    <script src="{% static 'js/public/protect-form.js' %}"></script>
+{% endblock %}

opentech/static_src/src/javascript/public/wagtail-form.js → opentech/static_src/src/javascript/public/protect-form.js

@@ -2,10 +2,10 @@
 
     'use strict';
 
-    $('.wagtail-form').each(function () {
-        var $wagtail_form = $(this);
-        var $wagtail_form_button = $wagtail_form.find('button[type="submit"]');
-        var wagtail_form_action = $wagtail_form.data('pageurl');
+    $('.wagtail-form, .newsletter-form').each(function () {
+        var $protect_form = $(this);
+        var $protect_form_button = $protect_form.find('button[type="submit"]');
+        var protect_form_action = $protect_form.data('actionpath');
 
         // Remove the "no javascript" messages
         $('.message-no-js').detach();
@@ -13,23 +13,23 @@
         // Wait for a mouse to move, indicating they are human.
         $('body').mousemove(function () {
             // Unlock the form.
-            $wagtail_form.attr('action', wagtail_form_action);
-            $wagtail_form_button.attr('disabled', false);
+            $protect_form.attr('action', protect_form_action);
+            $protect_form_button.attr('disabled', false);
         });
 
         // Wait for a touch move event, indicating that they are human.
         $('body').on('touchmove', function () {
             // Unlock the form.
-            $wagtail_form.attr('action', wagtail_form_action);
-            $wagtail_form_button.attr('disabled', false);
+            $protect_form.attr('action', protect_form_action);
+            $protect_form_button.attr('disabled', false);
         });
 
         // A tab or enter key pressed can also indicate they are human.
         $('body').keydown(function (e) {
             if ((e.keyCode === 9) || (e.keyCode === 13)) {
                 // Unlock the form.
-                $wagtail_form.attr('action', wagtail_form_action);
-                $wagtail_form_button.attr('disabled', false);
+                $protect_form.attr('action', protect_form_action);
+                $protect_form_button.attr('disabled', false);
             }
         });
     });