chg: usr: replace Google ReCaptcha with Cap instance #13

templates/Game/play.html.twig

@@ -14,7 +14,7 @@
              data-is-authenticated="{{ app.user ? '1' : '0' }}"
              data-mercure-hub-url="{{ mercure_hub_url }}"
              data-mercure-subscriber-jwt="{{ mercure_subscriber_jwt }}"
-             data-recaptcha-site-key="{{ recaptcha_site_key }}">
+             data-cap-api-endpoint="{{ cap_api_endpoint }}">
         </div>
     </div>
 {% endblock %}
@@ -39,6 +39,5 @@
 
 {% block javascripts %}
     {{ parent() }}
-    <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
     {{ vite_entry_script_tags('mineseeker', { dependency: 'react' }) }}
 {% endblock %}

templates/Official/contact.html.twig

@@ -37,6 +37,12 @@
       </p>
 
       <div class="auth-card" style="max-width: 600px; margin: 0 auto;">
+        <div class="auth-title-row">
+          <h2 class="auth-title">Contact Form</h2>
+          <span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
+        </div>
+        <p class="auth-sub">Your message is protected by automated abuse checks.</p>
+        <div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>
         {{ form_start(form, {attr: {class: 'auth-form'}}) }}
 
         <div class="auth-field">
@@ -127,10 +133,5 @@
 
 {% block javascripts %}
   {{ parent() }}
-  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
-  {{ vite_entry_script_tags('contact', { dependency: 'react' }) }}
-  <div id="contact-form-wrapper"
-       data-site-key="{{ recaptcha_site_key }}"
-       data-recaptcha-field-id="{{ form.recaptcha.vars.id }}">
-  </div>
+  {{ vite_entry_script_tags('cap') }}
 {% endblock %}

templates/Security/forgot_password.html.twig

@@ -34,8 +34,12 @@
       </div>
     {% else %}
       <div class="auth-card">
-        <h2 class="auth-title">Forgot Password</h2>
+        <div class="auth-title-row">
+          <h2 class="auth-title">Forgot Password</h2>
+          <span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
+        </div>
         <p class="auth-sub">Enter your email and we'll send you a reset link</p>
+        <div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>
 
         {{ form_start(form, {attr: {class: 'auth-form'}}) }}
 
@@ -75,20 +79,5 @@
 
 {% 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>
+  {{ vite_entry_script_tags('cap') }}
 {% endblock %}

templates/Security/login.html.twig

@@ -36,7 +36,10 @@
     {% endfor %}
 
     <div class="auth-card">
-      <h2 class="auth-title">Sign In</h2>
+      <div class="auth-title-row">
+        <h2 class="auth-title">Sign In</h2>
+        <span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
+      </div>
       <p class="auth-sub">Welcome back, commander</p>
 
       {% if error %}
@@ -46,6 +49,8 @@
         </div>
       {% endif %}
 
+      <div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>
+
       <form class="auth-form" method="post" action="{{ path('MineSeekerBundle_login') }}">
         <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
 
@@ -92,8 +97,6 @@
           </p>
         </div>
 
-        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"/>
-
         <button type="submit" class="auth-submit">
           <i class="fas fa-right-to-bracket"></i> Sign In
         </button>
@@ -121,20 +124,6 @@
 {% 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>
-
+  {{ vite_entry_script_tags('cap') }}
   {{ vite_entry_script_tags('passkey', { dependency: 'react' }) }}
 {% endblock %}

templates/Security/register.html.twig

@@ -42,8 +42,12 @@
       </div>
     {% else %}
       <div class="auth-card">
-        <h2 class="auth-title">Create Account</h2>
+        <div class="auth-title-row">
+          <h2 class="auth-title">Create Account</h2>
+          <span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
+        </div>
         <p class="auth-sub">Join the battle — no subscription required</p>
+        <div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>
 
         {{ form_start(form, {attr: {class: 'auth-form'}}) }}
 
@@ -153,20 +157,5 @@
 
 {% 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: 'register'}).then(function (token) {
-            document.getElementById('{{ form.recaptcha.vars.id }}').value = token;
-            form.submit();
-          });
-        });
-      });
-    }());
-  </script>
+  {{ vite_entry_script_tags('cap') }}
 {% endblock %}

templates/Security/reset_password.html.twig

@@ -16,8 +16,12 @@
 {% block body %}
   <div class="auth-page">
     <div class="auth-card">
-      <h2 class="auth-title">Reset Password</h2>
+      <div class="auth-title-row">
+        <h2 class="auth-title">Reset Password</h2>
+        <span class="auth-cap-badge"><i class="fas fa-shield-halved"></i> Protected by Cap</span>
+      </div>
       <p class="auth-sub">Choose a new password for your account</p>
+      <div data-cap-api-endpoint="{{ cap_api_endpoint }}" style="display: none;" aria-hidden="true"></div>
 
       {{ form_start(form, {attr: {class: 'auth-form'}}) }}
 
@@ -65,19 +69,5 @@
 
 {% block javascripts %}
   {{ parent() }}
-  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
-  <script>
-    (function () {
-      document.querySelector('.auth-form').addEventListener('submit', function (e) {
-        e.preventDefault();
-        const form = this;
-        grecaptcha.ready(function () {
-          grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'reset_password'}).then(function (token) {
-            document.getElementById('{{ form.recaptcha.vars.id }}').value = token;
-            form.submit();
-          });
-        });
-      });
-    }());
-  </script>
+  {{ vite_entry_script_tags('cap') }}
 {% endblock %}