first commit

src/component/Common/Captcha/TurnstileCaptcha.tsx

@@ -0,0 +1,50 @@
+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;