@prosopo/procaptcha-puzzle 2.10.39 → 2.10.40

package/dist/components/ProcaptchaWidget.js

@@ -1,215 +1,188 @@
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
-import { useTranslation, loadI18next } from "@prosopo/locale";
-import { useProcaptcha, buildUpdateState, Honeypot, Checkbox } from "@prosopo/procaptcha-common";
-import { ModeEnum } from "@prosopo/types";
-import { lightTheme, darkTheme } from "@prosopo/widget-skeleton";
-import { useState, useRef, useEffect, useCallback } from "react";
+import "../_virtual/_rolldown/runtime.js";
 import { Manager } from "../services/Manager.js";
 import { PuzzleCanvas } from "./PuzzleCanvas.js";
-const PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
-const Procaptcha = (props) => {
-  const { t, ready: isTranslationReady } = useTranslation();
-  const config = props.config;
-  const i18n = props.i18n;
-  const theme = "light" === config.theme ? lightTheme : darkTheme;
-  const frictionlessState = props.frictionlessState;
-  const callbacks = props.callbacks || {};
-  const [state, _updateState] = useProcaptcha(useState, useRef);
-  const [loading, setLoading] = useState(false);
-  const [puzzlePhase, setPuzzlePhase] = useState("checkbox");
-  const [challengeData, setChallengeData] = useState(null);
-  const [showRetry, setShowRetry] = useState(false);
-  const updateState = buildUpdateState(state, _updateState);
-  const hpRef = useRef(null);
-  const manager = useRef(
-    Manager(
-      config,
-      state,
-      updateState,
-      callbacks,
-      frictionlessState,
-      () => hpRef.current?.value || void 0
-    )
-  );
-  const lastCoordsRef = useRef(null);
-  const sessionInvalidatedFiredRef = useRef(false);
-  useEffect(() => {
-    if (!config.language) return;
-    if (i18n) {
-      if (i18n.language !== config.language) {
-        void i18n.changeLanguage(config.language);
-      }
-      return;
-    }
-    void loadI18next(false, config.language);
-  }, [i18n, config.language]);
-  useEffect(() => {
-    if (!props.autoStart) return;
-    setLoading(true);
-    setShowRetry(false);
-    const coords = props.startCoords;
-    lastCoordsRef.current = coords ?? null;
-    manager.current.start(coords?.x ?? 0, coords?.y ?? 0).then(
-      (challenge) => {
-        if (challenge) {
-          setChallengeData(challenge);
-          setPuzzlePhase("dragging");
-        }
-        setLoading(false);
-      },
-      () => setLoading(false)
-    );
-  }, [props.autoStart, props.startCoords]);
-  useEffect(() => {
-    if (!state.error) return void 0;
-    setLoading(false);
-    setPuzzlePhase("checkbox");
-    setChallengeData(null);
-    setShowRetry(false);
-    if (state.error.key !== "CAPTCHA.NO_SESSION_FOUND") return void 0;
-    if (props.onSessionInvalidated && !sessionInvalidatedFiredRef.current) {
-      sessionInvalidatedFiredRef.current = true;
-      const coords = lastCoordsRef.current;
-      props.onSessionInvalidated(coords?.x, coords?.y);
-      return void 0;
-    }
-    if (frictionlessState) {
-      const timer = setTimeout(() => {
-        frictionlessState.restart();
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-    return void 0;
-  }, [state.error, frictionlessState, props.onSessionInvalidated]);
-  useEffect(() => {
-    if (config.mode === ModeEnum.invisible) {
-      const handleExecuteEvent = async () => {
-        if (loading) {
-          return;
-        }
-        setLoading(true);
-        setShowRetry(false);
-        try {
-          const challenge = await manager.current.start();
-          if (challenge) {
-            setChallengeData(challenge);
-            setPuzzlePhase("dragging");
-          }
-        } catch (error) {
-          callbacks.onError?.(
-            error instanceof Error ? error : new Error(String(error))
-          );
-        } finally {
-          setLoading(false);
-        }
-      };
-      document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
-      return () => {
-        document.removeEventListener(
-          PROCAPTCHA_EXECUTE_EVENT,
-          handleExecuteEvent
-        );
-      };
-    }
-    return () => {
-    };
-  }, [config.mode, callbacks.onError, loading]);
-  const handlePuzzleComplete = useCallback(
-    async (finalX, finalY, puzzleEvents) => {
-      setPuzzlePhase("submitting");
-      let verified = false;
-      try {
-        verified = await manager.current.submitSolution(
-          finalX,
-          finalY,
-          puzzleEvents
-        );
-      } catch (error) {
-        callbacks.onError?.(
-          error instanceof Error ? error : new Error(String(error))
-        );
-      }
-      if (verified) {
-        setPuzzlePhase("checkbox");
-        setChallengeData(null);
-        setShowRetry(false);
-        setLoading(false);
-        return;
-      }
-      setShowRetry(true);
-      setPuzzlePhase("dragging");
-      try {
-        const newChallenge = await manager.current.start();
-        if (newChallenge) {
-          setChallengeData(newChallenge);
-        } else {
-          setPuzzlePhase("checkbox");
-          setChallengeData(null);
-          setShowRetry(false);
-        }
-      } catch {
-        setPuzzlePhase("checkbox");
-        setChallengeData(null);
-        setShowRetry(false);
-      }
-      setLoading(false);
-    },
-    [callbacks.onError]
-  );
-  const isInvisible = config.mode === ModeEnum.invisible;
-  const showPuzzleOverlay = (puzzlePhase === "dragging" || puzzlePhase === "submitting") && challengeData;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    frictionlessState?.hp && /* @__PURE__ */ jsx(Honeypot, { ref: hpRef, encodedQuestion: frictionlessState.hp }),
-    showPuzzleOverlay && /* @__PURE__ */ jsx(
-      PuzzleCanvas,
-      {
-        originX: challengeData.originX,
-        originY: challengeData.originY,
-        targetX: challengeData.targetX,
-        targetY: challengeData.targetY,
-        onComplete: handlePuzzleComplete,
-        showRetry,
-        submitting: puzzlePhase === "submitting"
-      }
-    ),
-    !isInvisible && /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: state.isHuman,
-        theme,
-        onChange: async (event) => {
-          if (loading) {
-            return;
-          }
-          setLoading(true);
-          setShowRetry(false);
-          let x = 0;
-          let y = 0;
-          const mouseOrTouchEvent = event.nativeEvent;
-          if (!mouseOrTouchEvent.isTrusted) {
-          } else if ("touches" in mouseOrTouchEvent && mouseOrTouchEvent.touches.length > 0 && mouseOrTouchEvent.touches[0]) {
-            x = mouseOrTouchEvent.touches[0].clientX;
-            y = mouseOrTouchEvent.touches[0].clientY;
-          } else if ("clientX" in mouseOrTouchEvent && "clientY" in mouseOrTouchEvent) {
-            x = mouseOrTouchEvent.clientX;
-            y = mouseOrTouchEvent.clientY;
-          }
-          lastCoordsRef.current = { x, y };
-          const challenge = await manager.current.start(x, y);
-          if (challenge) {
-            setChallengeData(challenge);
-            setPuzzlePhase("dragging");
-          }
-          setLoading(false);
-        },
-        labelText: isTranslationReady ? t("WIDGET.I_AM_HUMAN") : "",
-        error: state.error?.message,
-        "aria-label": "human checkbox",
-        loading: loading || puzzlePhase === "submitting"
-      }
-    )
-  ] });
-};
-export {
-  Procaptcha as default
+import { loadI18next, useTranslation } from "@prosopo/locale";
+import { Checkbox, Honeypot, buildUpdateState, useProcaptcha } from "@prosopo/procaptcha-common";
+import { ModeEnum } from "@prosopo/types";
+import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+//#region src/components/ProcaptchaWidget.tsx
+var PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
+var Procaptcha = (props) => {
+	const { t, ready: isTranslationReady } = useTranslation();
+	const config = props.config;
+	const i18n = props.i18n;
+	const theme = "light" === config.theme ? lightTheme : darkTheme;
+	const frictionlessState = props.frictionlessState;
+	const callbacks = props.callbacks || {};
+	const [state, _updateState] = useProcaptcha(useState, useRef);
+	const [loading, setLoading] = useState(false);
+	const [puzzlePhase, setPuzzlePhase] = useState("checkbox");
+	const [challengeData, setChallengeData] = useState(null);
+	const [showRetry, setShowRetry] = useState(false);
+	const updateState = buildUpdateState(state, _updateState);
+	const hpRef = useRef(null);
+	const manager = useRef(Manager(config, state, updateState, callbacks, frictionlessState, () => hpRef.current?.value || void 0));
+	const lastCoordsRef = useRef(null);
+	const sessionInvalidatedFiredRef = useRef(false);
+	useEffect(() => {
+		if (!config.language) return;
+		if (i18n) {
+			if (i18n.language !== config.language) i18n.changeLanguage(config.language);
+			return;
+		}
+		loadI18next(false, config.language);
+	}, [i18n, config.language]);
+	useEffect(() => {
+		if (!props.autoStart) return;
+		setLoading(true);
+		setShowRetry(false);
+		const coords = props.startCoords;
+		lastCoordsRef.current = coords ?? null;
+		manager.current.start(coords?.x ?? 0, coords?.y ?? 0).then((challenge) => {
+			if (challenge) {
+				setChallengeData(challenge);
+				setPuzzlePhase("dragging");
+			}
+			setLoading(false);
+		}, () => setLoading(false));
+	}, [props.autoStart, props.startCoords]);
+	useEffect(() => {
+		if (!state.error) return void 0;
+		setLoading(false);
+		setPuzzlePhase("checkbox");
+		setChallengeData(null);
+		setShowRetry(false);
+		if (state.error.key !== "CAPTCHA.NO_SESSION_FOUND") return void 0;
+		if (props.onSessionInvalidated && !sessionInvalidatedFiredRef.current) {
+			sessionInvalidatedFiredRef.current = true;
+			const coords = lastCoordsRef.current;
+			props.onSessionInvalidated(coords?.x, coords?.y);
+			return;
+		}
+		if (frictionlessState) {
+			const timer = setTimeout(() => {
+				frictionlessState.restart();
+			}, 100);
+			return () => clearTimeout(timer);
+		}
+	}, [
+		state.error,
+		frictionlessState,
+		props.onSessionInvalidated
+	]);
+	useEffect(() => {
+		if (config.mode === ModeEnum.invisible) {
+			const handleExecuteEvent = async () => {
+				if (loading) return;
+				setLoading(true);
+				setShowRetry(false);
+				try {
+					const challenge = await manager.current.start();
+					if (challenge) {
+						setChallengeData(challenge);
+						setPuzzlePhase("dragging");
+					}
+				} catch (error) {
+					callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
+				} finally {
+					setLoading(false);
+				}
+			};
+			document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
+			return () => {
+				document.removeEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
+			};
+		}
+		return () => {};
+	}, [
+		config.mode,
+		callbacks.onError,
+		loading
+	]);
+	const handlePuzzleComplete = useCallback(async (finalX, finalY, puzzleEvents) => {
+		setPuzzlePhase("submitting");
+		let verified = false;
+		try {
+			verified = await manager.current.submitSolution(finalX, finalY, puzzleEvents);
+		} catch (error) {
+			callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
+		}
+		if (verified) {
+			setPuzzlePhase("checkbox");
+			setChallengeData(null);
+			setShowRetry(false);
+			setLoading(false);
+			return;
+		}
+		setShowRetry(true);
+		setPuzzlePhase("dragging");
+		try {
+			const newChallenge = await manager.current.start();
+			if (newChallenge) setChallengeData(newChallenge);
+			else {
+				setPuzzlePhase("checkbox");
+				setChallengeData(null);
+				setShowRetry(false);
+			}
+		} catch {
+			setPuzzlePhase("checkbox");
+			setChallengeData(null);
+			setShowRetry(false);
+		}
+		setLoading(false);
+	}, [callbacks.onError]);
+	const isInvisible = config.mode === ModeEnum.invisible;
+	const showPuzzleOverlay = (puzzlePhase === "dragging" || puzzlePhase === "submitting") && challengeData;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		frictionlessState?.hp && /* @__PURE__ */ jsx(Honeypot, {
+			ref: hpRef,
+			encodedQuestion: frictionlessState.hp
+		}),
+		showPuzzleOverlay && /* @__PURE__ */ jsx(PuzzleCanvas, {
+			originX: challengeData.originX,
+			originY: challengeData.originY,
+			targetX: challengeData.targetX,
+			targetY: challengeData.targetY,
+			onComplete: handlePuzzleComplete,
+			showRetry,
+			submitting: puzzlePhase === "submitting"
+		}),
+		!isInvisible && /* @__PURE__ */ jsx(Checkbox, {
+			checked: state.isHuman,
+			theme,
+			onChange: async (event) => {
+				if (loading) return;
+				setLoading(true);
+				setShowRetry(false);
+				let x = 0;
+				let y = 0;
+				const mouseOrTouchEvent = event.nativeEvent;
+				if (!mouseOrTouchEvent.isTrusted) {} else if ("touches" in mouseOrTouchEvent && mouseOrTouchEvent.touches.length > 0 && mouseOrTouchEvent.touches[0]) {
+					x = mouseOrTouchEvent.touches[0].clientX;
+					y = mouseOrTouchEvent.touches[0].clientY;
+				} else if ("clientX" in mouseOrTouchEvent && "clientY" in mouseOrTouchEvent) {
+					x = mouseOrTouchEvent.clientX;
+					y = mouseOrTouchEvent.clientY;
+				}
+				lastCoordsRef.current = {
+					x,
+					y
+				};
+				const challenge = await manager.current.start(x, y);
+				if (challenge) {
+					setChallengeData(challenge);
+					setPuzzlePhase("dragging");
+				}
+				setLoading(false);
+			},
+			labelText: isTranslationReady ? t("WIDGET.I_AM_HUMAN") : "",
+			error: state.error?.message,
+			"aria-label": "human checkbox",
+			loading: loading || puzzlePhase === "submitting"
+		})
+	] });
 };
+//#endregion
+export { Procaptcha as default };