@prosopo/procaptcha-puzzle 2.13.2 → 2.14.0

package/src/components/ProcaptchaWidget.tsx

@@ -1,320 +0,0 @@
-// Copyright 2021-2026 Prosopo (UK) Ltd.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { loadI18next, useTranslation } from "@prosopo/locale";
-import { buildUpdateState, useProcaptcha } from "@prosopo/procaptcha-common";
-import { Checkbox, Honeypot, isEventTrusted } from "@prosopo/procaptcha-common";
-import {
-	type GetPuzzleCaptchaResponse,
-	ModeEnum,
-	type ProcaptchaProps,
-	type PuzzleEvent,
-} from "@prosopo/types";
-import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Manager } from "../services/Manager.js";
-import { PuzzleCanvas } from "./PuzzleCanvas.js";
-
-// Define the same event name as in the bundle for consistency
-const PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
-
-type PuzzlePhase = "checkbox" | "dragging" | "submitting";
-
-const Procaptcha = (props: ProcaptchaProps) => {
-	const { t, ready: isTranslationReady } = useTranslation();
-	const config = props.config;
-	const i18n = props.i18n;
-	const theme = "light" === config.theme ? lightTheme : darkTheme;
-	const frictionlessState = props.frictionlessState; // Set up Session ID and Provider if they exist
-	const callbacks = props.callbacks || {};
-	const [state, _updateState] = useProcaptcha(useState, useRef);
-	const [loading, setLoading] = useState(false);
-	const [puzzlePhase, setPuzzlePhase] = useState<PuzzlePhase>("checkbox");
-	const [challengeData, setChallengeData] =
-		useState<GetPuzzleCaptchaResponse | null>(null);
-	const [showRetry, setShowRetry] = useState(false);
-	// get the state update mechanism
-	const updateState = buildUpdateState(state, _updateState);
-	const hpRef = useRef<HTMLInputElement>(null);
-	const manager = useRef(
-		Manager(
-			config,
-			state,
-			updateState,
-			callbacks,
-			frictionlessState,
-			() => hpRef.current?.value || undefined,
-		),
-	);
-	// See ProcaptchaWidget (procaptcha-pow) — same session-invalidation
-	// recovery contract with coords preservation across a re-mint.
-	const lastCoordsRef = useRef<{ x: number; y: number } | null>(null);
-	const sessionInvalidatedFiredRef = useRef(false);
-
-	useEffect(() => {
-		if (!config.language) return;
-		if (i18n) {
-			if (i18n.language !== config.language) {
-				void i18n.changeLanguage(config.language);
-			}
-			return;
-		}
-		// Direct-React consumers don't go through WidgetFactory, so pass the
-		// language into loadI18next — first init boots with the right language
-		// (skipping browser detection), and subsequent calls reconcile via
-		// changeLanguage inside loadI18next.
-		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 undefined;
-		setLoading(false);
-		setPuzzlePhase("checkbox");
-		setChallengeData(null);
-		setShowRetry(false);
-		if (state.error.key !== "CAPTCHA.NO_SESSION_FOUND") return undefined;
-		if (props.onSessionInvalidated && !sessionInvalidatedFiredRef.current) {
-			sessionInvalidatedFiredRef.current = true;
-			const coords = lastCoordsRef.current;
-			props.onSessionInvalidated(coords?.x, coords?.y);
-			return undefined;
-		}
-		if (frictionlessState) {
-			const timer = setTimeout(() => {
-				frictionlessState.restart();
-			}, 100);
-			return () => clearTimeout(timer);
-		}
-		return undefined;
-	}, [state.error, frictionlessState, props.onSessionInvalidated]);
-
-	// A bare execute() reaches every invisible widget via document. A targeted
-	// execute() is dispatched on this widget's container and works in either
-	// mode, which is what lets a bound button drive a visible widget.
-	useEffect(() => {
-		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);
-			}
-		};
-
-		const container = props.container;
-		const invisible = config.mode === ModeEnum.invisible;
-		container?.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
-		if (invisible) {
-			document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
-		}
-
-		return () => {
-			container?.removeEventListener(
-				PROCAPTCHA_EXECUTE_EVENT,
-				handleExecuteEvent,
-			);
-			if (invisible) {
-				document.removeEventListener(
-					PROCAPTCHA_EXECUTE_EVENT,
-					handleExecuteEvent,
-				);
-			}
-		};
-	}, [config.mode, callbacks.onError, loading, props.container]);
-
-	const handlePuzzleComplete = useCallback(
-		async (finalX: number, finalY: number, puzzleEvents: PuzzleEvent[]) => {
-			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;
-			}
-
-			// Failed — show retry message and fetch a new challenge
-			setShowRetry(true);
-			setPuzzlePhase("dragging");
-
-			try {
-				const newChallenge = await manager.current.start();
-				if (newChallenge) {
-					setChallengeData(newChallenge);
-				} else {
-					// Couldn't get new challenge, fall back to checkbox
-					setPuzzlePhase("checkbox");
-					setChallengeData(null);
-					setShowRetry(false);
-				}
-			} catch {
-				setPuzzlePhase("checkbox");
-				setChallengeData(null);
-				setShowRetry(false);
-			}
-			setLoading(false);
-		},
-		[callbacks.onError],
-	);
-
-	const isInvisible = config.mode === ModeEnum.invisible;
-
-	// Dismissing returns to the checkbox; clicking away is not a wrong answer.
-	const handleDismiss = useCallback(() => {
-		setPuzzlePhase("checkbox");
-		setChallengeData(null);
-		setShowRetry(false);
-		setLoading(false);
-	}, []);
-	const showPuzzleOverlay =
-		(puzzlePhase === "dragging" || puzzlePhase === "submitting") &&
-		challengeData;
-
-	return (
-		<>
-			{frictionlessState?.hp && (
-				<Honeypot ref={hpRef} encodedQuestion={frictionlessState.hp} />
-			)}
-			{/* Puzzle overlay — shown in both visible and invisible modes once a
-			    challenge has been fetched; puzzle is inherently interactive. */}
-			{showPuzzleOverlay && (
-				<PuzzleCanvas
-					originX={challengeData.originX}
-					originY={challengeData.originY}
-					background={challengeData.background}
-					piece={challengeData.piece}
-					pieceSize={challengeData.pieceSize}
-					onComplete={handlePuzzleComplete}
-					showRetry={showRetry}
-					submitting={puzzlePhase === "submitting"}
-					theme={theme}
-					placement={config.placement}
-					anchor={props.container}
-					onDismiss={handleDismiss}
-				/>
-			)}
-
-			{/* Checkbox — only in visible mode. Invisible mode is driven by
-			    the host page's execute() call (e.g. on form submit). */}
-			{!isInvisible && (
-				<Checkbox
-					checked={state.isHuman}
-					theme={theme}
-					onChange={async (event: React.MouseEvent | React.TouchEvent) => {
-						if (loading) {
-							return;
-						}
-						setLoading(true);
-						setShowRetry(false);
-
-						// Capture click coordinates (mirrors POW widget) so the
-						// puzzle solution salt records the entry-point telemetry.
-						let x = 0;
-						let y = 0;
-						const mouseOrTouchEvent = event.nativeEvent;
-						if (!isEventTrusted(mouseOrTouchEvent)) {
-							// Don't capture coordinates for non-trusted events
-						} 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 };
-						try {
-							const challenge = await manager.current.start(x, y);
-
-							if (challenge) {
-								setChallengeData(challenge);
-								setPuzzlePhase("dragging");
-							}
-						} catch (error) {
-							// The manager reports failures through state.error;
-							// rethrowing here only produces an unhandled rejection,
-							// since nothing awaits this handler.
-							callbacks.onError?.(
-								error instanceof Error ? error : new Error(String(error)),
-							);
-						} finally {
-							// A rejected start would otherwise leave the spinner up for
-							// good, with no way back to the checkbox for the user.
-							setLoading(false);
-						}
-					}}
-					labelText={isTranslationReady ? t("WIDGET.I_AM_HUMAN") : ""}
-					error={state.error?.message}
-					aria-label="human checkbox"
-					loadingText={t("WIDGET.CHECKING", {
-						defaultValue: "Checking that you are human",
-					})}
-					loading={loading || puzzlePhase === "submitting"}
-				/>
-			)}
-		</>
-	);
-};
-
-export default Procaptcha;