Fix Turnstile auto-initialization

This commit is contained in:
gpt-engineer-app[bot]
2025-10-01 18:28:16 +00:00
parent 92f00bb5ff
commit 1c7efe28c1

View File

@@ -72,10 +72,15 @@ export function TurnstileCaptcha({
} }
}; };
// Auto-reset on theme changes // Monitor for initialization failures
useEffect(() => { useEffect(() => {
resetCaptcha(); if (loading) {
}, [theme]); const timeout = setTimeout(() => {
setLoading(false);
}, 10000); // 10 second timeout
return () => clearTimeout(timeout);
}
}, [loading]);
if (!siteKey || siteKey === "0x4AAAAAAAk8oZ8Z8Z8Z8Z8Z") { if (!siteKey || siteKey === "0x4AAAAAAAk8oZ8Z8Z8Z8Z8Z") {
return ( return (
@@ -90,15 +95,15 @@ export function TurnstileCaptcha({
return ( return (
<div className={`space-y-3 ${className}`}> <div className={`space-y-3 ${className}`}>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center min-h-[65px]">
{loading && ( <div
<div className="flex items-center justify-center p-4 border border-dashed border-muted-foreground/30 rounded-lg bg-muted/20"> className="transition-opacity duration-300"
<RefreshCw className="w-4 h-4 animate-spin mr-2 text-muted-foreground" /> style={{
<span className="text-sm text-muted-foreground">Loading CAPTCHA...</span> visibility: loading ? 'hidden' : 'visible',
</div> opacity: loading ? 0 : 1,
)} height: loading ? 0 : 'auto'
}}
<div className={loading ? 'opacity-0 absolute' : 'opacity-100'}> >
<Turnstile <Turnstile
key={key} key={key}
ref={turnstileRef} ref={turnstileRef}
@@ -110,10 +115,18 @@ export function TurnstileCaptcha({
options={{ options={{
theme, theme,
size, size,
tabIndex: 0 execution: 'render',
appearance: 'always'
}} }}
/> />
</div> </div>
{loading && (
<div className="flex items-center justify-center p-4 border border-dashed border-muted-foreground/30 rounded-lg bg-muted/20">
<RefreshCw className="w-4 h-4 animate-spin mr-2 text-muted-foreground" />
<span className="text-sm text-muted-foreground">Loading CAPTCHA...</span>
</div>
)}
</div> </div>
{error && ( {error && (