fix(web): Turnstile yüklenemeyince kullanıcıya uyarı göster #139
@@ -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>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user