Merge pull request #477 from IT-Srbija-Org/fix/optimize-turnstile-captcha-loading

perf: optimize Cloudflare Turnstile CAPTCHA loading on login

Author: djavolak

templates/base.html.twig

@@ -36,6 +36,7 @@
 
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="preconnect" href="https://challenges.cloudflare.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
 
         <link href="{{ asset('stylesheet/tabler-icons/tabler-icons.min.css') }}" rel="stylesheet" type="text/css"/>

templates/captcha.html.twig

@@ -1,6 +1,46 @@
 {% if show_captcha() %}
     <div>
         <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" defer></script>
-        <div class="cf-turnstile" data-sitekey="{{ CLOUDFLARE_TURNSTILE_SITEKEY }}" data-theme="light"></div>
+        <div class="cf-turnstile"
+             data-sitekey="{{ CLOUDFLARE_TURNSTILE_SITEKEY }}"
+             data-theme="light"
+             data-appearance="interaction-only"
+             data-retry="auto"
+             data-callback="onTurnstileSuccess"
+        ></div>
     </div>
+
+    <script>
+        var turnstileReady = false;
+        var pendingForm = null;
+
+        function onTurnstileSuccess(token) {
+            turnstileReady = true;
+            if (pendingForm) {
+                pendingForm.submit();
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            var widget = document.querySelector('.cf-turnstile');
+            if (!widget) return;
+
+            var form = widget.closest('form');
+            if (!form) return;
+
+            form.addEventListener('submit', function (e) {
+                if (turnstileReady) return;
+
+                e.preventDefault();
+                pendingForm = form;
+
+                var btn = form.querySelector('[type="submit"]');
+                if (btn) {
+                    btn.disabled = true;
+                    btn.dataset.originalText = btn.textContent;
+                    btn.textContent = 'Molimo sačekajte...';
+                }
+            });
+        });
+    </script>
 {% endif %}