51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
|
import { Turnstile } from "@marsidev/react-turnstile";
|
||
|
|
import { Box, useTheme } from "@mui/material";
|
||
|
|
import i18next from "i18next";
|
||
|
|
import { useEffect, useRef } from "react";
|
||
|
|
import { useAppSelector } from "../../../redux/hooks.ts";
|
||
|
|
import { CaptchaParams } from "./Captcha.tsx";
|
||
|
|
|
||
|
|
export interface TurnstileProps {
|
||
|
|
onStateChange: (state: CaptchaParams) => void;
|
||
|
|
generation: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
const TurnstileCaptcha = ({ onStateChange, generation, ...rest }: TurnstileProps) => {
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
const captchaRef = useRef();
|
||
|
|
const turnstileKey = useAppSelector((state) => state.siteConfig.basic.config.turnstile_site_id);
|
||
|
|
|
||
|
|
const refreshCaptcha = async () => {
|
||
|
|
captchaRef.current?.reset();
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
refreshCaptcha();
|
||
|
|
}, [generation]);
|
||
|
|
|
||
|
|
const onCompleted = (t: string) => {
|
||
|
|
onStateChange({ ticket: t });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box sx={{ textAlign: "center" }}>
|
||
|
|
{turnstileKey && (
|
||
|
|
<Turnstile
|
||
|
|
ref={captchaRef}
|
||
|
|
siteKey={turnstileKey}
|
||
|
|
options={{
|
||
|
|
size: "flexible",
|
||
|
|
theme: theme.palette.mode,
|
||
|
|
language: i18next.language,
|
||
|
|
}}
|
||
|
|
onSuccess={onCompleted}
|
||
|
|
{...rest}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default TurnstileCaptcha;
|