chg: dev: refactor all forms to have Symfony Form Types & Validation Constrainsts - & implement Google ReCapthca v3 #4

templates/Security/login.html.twig

@@ -68,6 +68,8 @@
           <span>Remember me</span>
         </label>
 
+        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"/>
+
         <button type="submit" class="auth-submit">
           <i class="fa fa-sign-in"></i> Sign In
         </button>
@@ -85,3 +87,20 @@
 
   </div>
 {% endblock %}
+
+{% block javascripts %}
+  {{ parent() }}
+  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
+  <script>
+    document.querySelector('.auth-form').addEventListener('submit', function (e) {
+      e.preventDefault();
+      const form = this;
+      grecaptcha.ready(function () {
+        grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'login'}).then(function (token) {
+          document.getElementById('g-recaptcha-response').value = token;
+          form.submit();
+        });
+      });
+    });
+  </script>
+{% endblock %}