Merge pull request 'fix(web): Turnstile yüklenemeyince kullanıcıya uyarı göster' (#139) from dev into main

Reviewed-on: #139

apps/web/src/components/turnstile.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 
 // Cloudflare Turnstile site key (public). sase.tr/dev.sase.tr/localhost domainleri
 // için kayıtlı. Gerekirse VITE_TURNSTILE_SITE_KEY ile override edilebilir.
@@ -67,6 +67,9 @@ export const Turnstile = forwardRef<TurnstileHandle, TurnstileProps>(function Tu
   const widgetIdRef = useRef<string | null>(null);
   const callbacksRef = useRef({ onVerify, onExpire });
   callbacksRef.current = { onVerify, onExpire };
+  // Script engellendi (reklam engelleyici vb.) veya widget hata verdi — kullanıcıya
+  // sebebini söylemezsek form token'sız gider ve yanıltıcı bir giriş hatası görür.
+  const [failed, setFailed] = useState(false);
 
   useImperativeHandle(ref, () => ({
     reset: () => {
@@ -84,12 +87,20 @@ export const Turnstile = forwardRef<TurnstileHandle, TurnstileProps>(function Tu
         widgetIdRef.current = window.turnstile.render(containerRef.current, {
           sitekey: SITE_KEY,
           theme,
-          callback: (token: string) => callbacksRef.current.onVerify(token),
+          callback: (token: string) => {
+            setFailed(false);
+            callbacksRef.current.onVerify(token);
+          },
           "expired-callback": () => callbacksRef.current.onExpire?.(),
-          "error-callback": () => callbacksRef.current.onExpire?.(),
+          "error-callback": () => {
+            setFailed(true);
+            callbacksRef.current.onExpire?.();
+          },
         });
       })
-      .catch(() => {});
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
 
     return () => {
       cancelled = true;
@@ -102,5 +113,15 @@ export const Turnstile = forwardRef<TurnstileHandle, TurnstileProps>(function Tu
     };
   }, [theme]);
 
-  return <div ref={containerRef} className={className} />;
+  return (
+    <div className={className}>
+      <div ref={containerRef} />
+      {failed && (
+        <p className="mt-2 text-sm text-destructive" role="alert">
+          Güvenlik doğrulaması yüklenemedi. Reklam engelleyici veya gizlilik eklentisi engelliyor
+          olabilir — bu site için devre dışı bırakıp sayfayı yenileyin.
+        </p>
+      )}
+    </div>
+  );
 });