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

templates/Security/forgot_password.html.twig

@@ -4,7 +4,6 @@
 
 {% block body %}
   <div class="auth-page">
-
     {% for email in app.flashes('reset_sent') %}
       <div class="auth-card auth-card--sent">
         <div class="auth-sent-icon"><i class="fa fa-envelope-o"></i></div>
@@ -21,40 +20,62 @@
         </a>
       </div>
     {% else %}
-
       <div class="auth-card">
         <h2 class="auth-title">Forgot Password</h2>
         <p class="auth-sub">Enter your email and we'll send you a reset link</p>
 
-        <form class="auth-form" method="post" action="{{ path('MineSeekerBundle_forgot_password') }}">
+        {{ form_start(form, {attr: {class: 'auth-form'}}) }}
 
           <div class="auth-field">
-            <label for="email" class="auth-label">Email</label>
+            <label for="{{ form.email.vars.id }}" class="auth-label">Email</label>
             <div class="auth-input-wrap">
               <i class="fa fa-envelope auth-input-icon"></i>
-              <input
-                type="email"
-                id="email"
-                name="_email"
-                class="auth-input"
-                autocomplete="email"
-                autofocus
-                required
-              />
+              {{ form_widget(form.email, {
+                attr: {
+                  class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
+                  autocomplete: 'email',
+                  autofocus: true,
+                }
+              }) }}
             </div>
+            {% if not form.email.vars.valid %}
+              {% for error in form.email.vars.errors %}
+                <p class="auth-field-error"><i class="fa fa-exclamation-circle"></i> {{ error.message }}</p>
+              {% endfor %}
+            {% endif %}
           </div>
 
           <button type="submit" class="auth-submit">
             <i class="fa fa-paper-plane"></i> Send Reset Link
           </button>
-        </form>
+
+        {{ form_end(form) }}
 
         <p class="auth-switch">
           Remembered it?
           <a href="{{ path('MineSeekerBundle_login') }}">Sign in</a>
         </p>
       </div>
-
     {% endfor %}
   </div>
 {% endblock %}
+
+{% block javascripts %}
+  {{ parent() }}
+  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
+  <script>
+    (function () {
+      const form = document.querySelector('.auth-form');
+      if (!form) return;
+      form.addEventListener('submit', function (e) {
+        e.preventDefault();
+        grecaptcha.ready(function () {
+          grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'forgot_password'}).then(function (token) {
+            document.getElementById('{{ form.recaptcha.vars.id }}').value = token;
+            form.submit();
+          });
+        });
+      });
+    }());
+  </script>
+{% endblock %}