cesnimda
37 lines
1.8 KiB
TypeScript
37 lines
1.8 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { Box, Typography } from "@mui/material";
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
|
|
type Props = { siteKey: string; action: "login" | "register"; onToken: (token: string) => void; };
|
|
|
|
export default function TurnstileWidget({ siteKey, action, onToken }: Props) {
|
|
const { language, t } = useI18n();
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useEffect(() => {
|
|
let widgetId: string | undefined;
|
|
let cancelled = false;
|
|
const render = () => {
|
|
if (cancelled || !ref.current || !(window as any).turnstile) return;
|
|
widgetId = (window as any).turnstile.render(ref.current, {
|
|
sitekey: siteKey, action, theme: "auto", size: "flexible", language: language === "nb" ? "nb" : "en",
|
|
callback: onToken,
|
|
"expired-callback": () => onToken(""),
|
|
"error-callback": () => onToken(""),
|
|
});
|
|
};
|
|
const existing = document.querySelector<HTMLScriptElement>('script[data-turnstile]');
|
|
if ((window as any).turnstile) render();
|
|
else if (existing) existing.addEventListener("load", render, { once: true });
|
|
else {
|
|
const script = document.createElement("script");
|
|
script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
|
|
script.async = true; script.defer = true; script.dataset.turnstile = "true";
|
|
script.addEventListener("load", render, { once: true });
|
|
document.head.appendChild(script);
|
|
}
|
|
return () => { cancelled = true; if (widgetId && (window as any).turnstile) (window as any).turnstile.remove(widgetId); };
|
|
}, [action, language, onToken, siteKey]);
|
|
|
|
return <Box><Typography variant="caption" color="text.secondary">{t("securityCheck")}</Typography><Box ref={ref} sx={{ minHeight: 65, mt: 0.5 }} /></Box>;
|
|
}
|