fix(web): Turnstile yüklenemeyince kullanıcıya uyarı göster
Some checks failed
QA Gate (P0/P1) / Test affected app (pull_request) Has been cancelled

Reklam engelleyici / gizlilik eklentisi challenges.cloudflare.com'u
kestiğinde widget sessizce kayboluyordu; form token'sız gidince
kullanıcı yanıltıcı 'E-posta veya şifre hatalı' görüyordu. Artık
script yüklenemediğinde veya widget error-callback verdiğinde
widget'ın altında açıklayıcı bir uyarı çıkıyor (login/register/iletişim).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-12 16:45:26 +03:00
parent d5362a5390
commit aba8e5eb9b

View File

@@ -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>
);
});