108 lines
2.7 KiB
TypeScript
108 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useId, useRef, useState } from "react";
|
|
|
|
declare global {
|
|
interface Window {
|
|
turnstile?: {
|
|
render: (
|
|
container: HTMLElement,
|
|
options: {
|
|
sitekey: string;
|
|
callback?: (token: string) => void;
|
|
"expired-callback"?: () => void;
|
|
"error-callback"?: () => void;
|
|
},
|
|
) => string;
|
|
};
|
|
}
|
|
}
|
|
|
|
type ContactTurnstileProps = {
|
|
siteKey: string;
|
|
};
|
|
|
|
export function ContactTurnstile({ siteKey }: ContactTurnstileProps) {
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
const [token, setToken] = useState("");
|
|
const [error, setError] = useState("");
|
|
const widgetId = useId();
|
|
|
|
useEffect(() => {
|
|
if (!siteKey || !containerRef.current) {
|
|
return undefined;
|
|
}
|
|
|
|
let cancelled = false;
|
|
|
|
function renderWidget() {
|
|
if (cancelled || !containerRef.current || !window.turnstile) {
|
|
return;
|
|
}
|
|
|
|
if (containerRef.current.dataset.widgetMounted === widgetId) {
|
|
return;
|
|
}
|
|
|
|
containerRef.current.innerHTML = "";
|
|
window.turnstile.render(containerRef.current, {
|
|
sitekey: siteKey,
|
|
callback: (nextToken) => {
|
|
setToken(nextToken);
|
|
setError("");
|
|
},
|
|
"expired-callback": () => {
|
|
setToken("");
|
|
setError("Verification expired. Please try again.");
|
|
},
|
|
"error-callback": () => {
|
|
setToken("");
|
|
setError("Verification could not be completed.");
|
|
},
|
|
});
|
|
containerRef.current.dataset.widgetMounted = widgetId;
|
|
}
|
|
|
|
function ensureScript() {
|
|
const existingScript = document.querySelector<HTMLScriptElement>(
|
|
'script[src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"]',
|
|
);
|
|
|
|
if (existingScript) {
|
|
if (window.turnstile) {
|
|
renderWidget();
|
|
} else {
|
|
existingScript.addEventListener("load", renderWidget, { once: true });
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement("script");
|
|
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
|
|
script.async = true;
|
|
script.defer = true;
|
|
script.addEventListener("load", renderWidget, { once: true });
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
ensureScript();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [siteKey, widgetId]);
|
|
|
|
if (!siteKey) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div ref={containerRef} />
|
|
<input type="hidden" name="turnstileToken" value={token} />
|
|
{error ? <p className="text-xs text-destructive">{error}</p> : null}
|
|
</div>
|
|
);
|
|
}
|