@prosopo/procaptcha-puzzle 2.10.8 → 2.10.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/.turbo/turbo-build$colon$cjs.log +53 -0
  2. package/.turbo/turbo-build$colon$tsc.log +56 -0
  3. package/.turbo/turbo-build.log +57 -57
  4. package/CHANGELOG.md +8 -0
  5. package/dist/cjs/components/ProcaptchaPuzzle.cjs +18 -0
  6. package/dist/cjs/components/ProcaptchaWidget.cjs +191 -0
  7. package/dist/cjs/components/PuzzleCanvas.cjs +275 -0
  8. package/dist/cjs/index.cjs +5 -0
  9. package/dist/cjs/services/Manager.cjs +286 -0
  10. package/dist/components/ProcaptchaPuzzle.js +17 -5
  11. package/dist/components/ProcaptchaWidget.js +181 -144
  12. package/dist/components/PuzzleCanvas.js +258 -189
  13. package/dist/index.js +5 -3
  14. package/dist/services/Manager.js +270 -253
  15. package/package.json +4 -4
  16. package/src/components/ProcaptchaPuzzle.tsx +38 -0
  17. package/src/components/ProcaptchaWidget.tsx +261 -0
  18. package/src/components/PuzzleCanvas.tsx +336 -0
  19. package/src/index.ts +15 -0
  20. package/src/services/Manager.ts +454 -0
  21. package/tsconfig.cjs.json +44 -0
  22. package/tsconfig.json +45 -0
  23. package/tsconfig.tsbuildinfo +1 -0
  24. package/tsconfig.types.json +9 -0
  25. package/.turbo/turbo-typecheck.log +0 -4
package/dist/components/ProcaptchaWidget.js CHANGED
@@ -1,155 +1,192 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
2
- import { loadI18next, useTranslation } from "@prosopo/locale";
3
- import { buildUpdateState, useProcaptcha } from "@prosopo/procaptcha-common";
4
- import { Checkbox, Honeypot } from "@prosopo/procaptcha-common";
5
- import { ModeEnum, } from "@prosopo/types";
6
- import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
7
- import { useCallback, useEffect, useRef, useState } from "react";
1
+ import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
2
+ import { useTranslation, loadI18next } from "@prosopo/locale";
3
+ import { useProcaptcha, buildUpdateState, Honeypot, Checkbox } from "@prosopo/procaptcha-common";
4
+ import { ModeEnum } from "@prosopo/types";
5
+ import { lightTheme, darkTheme } from "@prosopo/widget-skeleton";
6
+ import { useState, useRef, useEffect, useCallback } from "react";
8
7
  import { Manager } from "../services/Manager.js";
9
8
  import { PuzzleCanvas } from "./PuzzleCanvas.js";
10
9
  const PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
11
10
  const Procaptcha = (props) => {
12
- const { t, ready: isTranslationReady } = useTranslation();
13
- const config = props.config;
14
- const i18n = props.i18n;
15
- const theme = "light" === config.theme ? lightTheme : darkTheme;
16
- const frictionlessState = props.frictionlessState;
17
- const callbacks = props.callbacks || {};
18
- const [state, _updateState] = useProcaptcha(useState, useRef);
19
- const [loading, setLoading] = useState(false);
20
- const [puzzlePhase, setPuzzlePhase] = useState("checkbox");
21
- const [challengeData, setChallengeData] = useState(null);
22
- const [showRetry, setShowRetry] = useState(false);
23
- const updateState = buildUpdateState(state, _updateState);
24
- const hpRef = useRef(null);
25
- const manager = useRef(Manager(config, state, updateState, callbacks, frictionlessState, () => hpRef.current?.value || undefined));
26
- useEffect(() => {
27
- if (config.language) {
28
- if (i18n) {
29
- if (i18n.language !== config.language) {
30
- i18n.changeLanguage(config.language).then((r) => r);
31
- }
32
- }
33
- else {
34
- loadI18next(false).then((i18n) => {
35
- if (i18n.language !== config.language)
36
- i18n.changeLanguage(config.language).then((r) => r);
37
- });
38
- }
11
+ const { t, ready: isTranslationReady } = useTranslation();
12
+ const config = props.config;
13
+ const i18n = props.i18n;
14
+ const theme = "light" === config.theme ? lightTheme : darkTheme;
15
+ const frictionlessState = props.frictionlessState;
16
+ const callbacks = props.callbacks || {};
17
+ const [state, _updateState] = useProcaptcha(useState, useRef);
18
+ const [loading, setLoading] = useState(false);
19
+ const [puzzlePhase, setPuzzlePhase] = useState("checkbox");
20
+ const [challengeData, setChallengeData] = useState(null);
21
+ const [showRetry, setShowRetry] = useState(false);
22
+ const updateState = buildUpdateState(state, _updateState);
23
+ const hpRef = useRef(null);
24
+ const manager = useRef(
25
+ Manager(
26
+ config,
27
+ state,
28
+ updateState,
29
+ callbacks,
30
+ frictionlessState,
31
+ () => hpRef.current?.value || void 0
32
+ )
33
+ );
34
+ useEffect(() => {
35
+ if (config.language) {
36
+ if (i18n) {
37
+ if (i18n.language !== config.language) {
38
+ i18n.changeLanguage(config.language).then((r) => r);
39
39
  }
40
- }, [i18n, config.language]);
41
- useEffect(() => {
42
- if (!state.error)
43
- return undefined;
44
- setLoading(false);
45
- setPuzzlePhase("checkbox");
46
- setChallengeData(null);
47
- setShowRetry(false);
48
- if (state.error.key === "CAPTCHA.NO_SESSION_FOUND" && frictionlessState) {
49
- const timer = setTimeout(() => {
50
- frictionlessState.restart();
51
- }, 100);
52
- return () => clearTimeout(timer);
53
- }
54
- return undefined;
55
- }, [state.error, frictionlessState]);
56
- useEffect(() => {
57
- if (config.mode === ModeEnum.invisible) {
58
- const handleExecuteEvent = async () => {
59
- if (loading) {
60
- return;
61
- }
62
- setLoading(true);
63
- setShowRetry(false);
64
- try {
65
- const challenge = await manager.current.start();
66
- if (challenge) {
67
- setChallengeData(challenge);
68
- setPuzzlePhase("dragging");
69
- }
70
- }
71
- catch (error) {
72
- callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
73
- }
74
- finally {
75
- setLoading(false);
76
- }
77
- };
78
- document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
79
- return () => {
80
- document.removeEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
81
- };
40
+ } else {
41
+ loadI18next(false).then((i18n2) => {
42
+ if (i18n2.language !== config.language)
43
+ i18n2.changeLanguage(config.language).then((r) => r);
44
+ });
45
+ }
46
+ }
47
+ }, [i18n, config.language]);
48
+ useEffect(() => {
49
+ if (!state.error) return void 0;
50
+ setLoading(false);
51
+ setPuzzlePhase("checkbox");
52
+ setChallengeData(null);
53
+ setShowRetry(false);
54
+ if (state.error.key === "CAPTCHA.NO_SESSION_FOUND" && frictionlessState) {
55
+ const timer = setTimeout(() => {
56
+ frictionlessState.restart();
57
+ }, 100);
58
+ return () => clearTimeout(timer);
59
+ }
60
+ return void 0;
61
+ }, [state.error, frictionlessState]);
62
+ useEffect(() => {
63
+ if (config.mode === ModeEnum.invisible) {
64
+ const handleExecuteEvent = async () => {
65
+ if (loading) {
66
+ return;
82
67
  }
83
- return () => { };
84
- }, [config.mode, callbacks.onError, loading]);
85
- const handlePuzzleComplete = useCallback(async (finalX, finalY, puzzleEvents) => {
86
- setPuzzlePhase("submitting");
87
- let verified = false;
68
+ setLoading(true);
69
+ setShowRetry(false);
88
70
  try {
89
- verified = await manager.current.submitSolution(finalX, finalY, puzzleEvents);
71
+ const challenge = await manager.current.start();
72
+ if (challenge) {
73
+ setChallengeData(challenge);
74
+ setPuzzlePhase("dragging");
75
+ }
76
+ } catch (error) {
77
+ callbacks.onError?.(
78
+ error instanceof Error ? error : new Error(String(error))
79
+ );
80
+ } finally {
81
+ setLoading(false);
90
82
  }
91
- catch (error) {
92
- callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
83
+ };
84
+ document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
85
+ return () => {
86
+ document.removeEventListener(
87
+ PROCAPTCHA_EXECUTE_EVENT,
88
+ handleExecuteEvent
89
+ );
90
+ };
91
+ }
92
+ return () => {
93
+ };
94
+ }, [config.mode, callbacks.onError, loading]);
95
+ const handlePuzzleComplete = useCallback(
96
+ async (finalX, finalY, puzzleEvents) => {
97
+ setPuzzlePhase("submitting");
98
+ let verified = false;
99
+ try {
100
+ verified = await manager.current.submitSolution(
101
+ finalX,
102
+ finalY,
103
+ puzzleEvents
104
+ );
105
+ } catch (error) {
106
+ callbacks.onError?.(
107
+ error instanceof Error ? error : new Error(String(error))
108
+ );
109
+ }
110
+ if (verified) {
111
+ setPuzzlePhase("checkbox");
112
+ setChallengeData(null);
113
+ setShowRetry(false);
114
+ setLoading(false);
115
+ return;
116
+ }
117
+ setShowRetry(true);
118
+ setPuzzlePhase("dragging");
119
+ try {
120
+ const newChallenge = await manager.current.start();
121
+ if (newChallenge) {
122
+ setChallengeData(newChallenge);
123
+ } else {
124
+ setPuzzlePhase("checkbox");
125
+ setChallengeData(null);
126
+ setShowRetry(false);
93
127
  }
94
- if (verified) {
95
- setPuzzlePhase("checkbox");
96
- setChallengeData(null);
97
- setShowRetry(false);
98
- setLoading(false);
128
+ } catch {
129
+ setPuzzlePhase("checkbox");
130
+ setChallengeData(null);
131
+ setShowRetry(false);
132
+ }
133
+ setLoading(false);
134
+ },
135
+ [callbacks.onError]
136
+ );
137
+ const isInvisible = config.mode === ModeEnum.invisible;
138
+ const showPuzzleOverlay = (puzzlePhase === "dragging" || puzzlePhase === "submitting") && challengeData;
139
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
140
+ frictionlessState?.hp && /* @__PURE__ */ jsx(Honeypot, { ref: hpRef, encodedQuestion: frictionlessState.hp }),
141
+ showPuzzleOverlay && /* @__PURE__ */ jsx(
142
+ PuzzleCanvas,
143
+ {
144
+ originX: challengeData.originX,
145
+ originY: challengeData.originY,
146
+ targetX: challengeData.targetX,
147
+ targetY: challengeData.targetY,
148
+ onComplete: handlePuzzleComplete,
149
+ showRetry,
150
+ submitting: puzzlePhase === "submitting"
151
+ }
152
+ ),
153
+ !isInvisible && /* @__PURE__ */ jsx(
154
+ Checkbox,
155
+ {
156
+ checked: state.isHuman,
157
+ theme,
158
+ onChange: async (event) => {
159
+ if (loading) {
99
160
  return;
100
- }
101
- setShowRetry(true);
102
- setPuzzlePhase("dragging");
103
- try {
104
- const newChallenge = await manager.current.start();
105
- if (newChallenge) {
106
- setChallengeData(newChallenge);
107
- }
108
- else {
109
- setPuzzlePhase("checkbox");
110
- setChallengeData(null);
111
- setShowRetry(false);
112
- }
113
- }
114
- catch {
115
- setPuzzlePhase("checkbox");
116
- setChallengeData(null);
117
- setShowRetry(false);
118
- }
119
- setLoading(false);
120
- }, [callbacks.onError]);
121
- const isInvisible = config.mode === ModeEnum.invisible;
122
- const showPuzzleOverlay = (puzzlePhase === "dragging" || puzzlePhase === "submitting") &&
123
- challengeData;
124
- return (_jsxs(_Fragment, { children: [frictionlessState?.hp && (_jsx(Honeypot, { ref: hpRef, encodedQuestion: frictionlessState.hp })), showPuzzleOverlay && (_jsx(PuzzleCanvas, { originX: challengeData.originX, originY: challengeData.originY, targetX: challengeData.targetX, targetY: challengeData.targetY, onComplete: handlePuzzleComplete, showRetry: showRetry, submitting: puzzlePhase === "submitting" })), !isInvisible && (_jsx(Checkbox, { checked: state.isHuman, theme: theme, onChange: async (event) => {
125
- if (loading) {
126
- return;
127
- }
128
- setLoading(true);
129
- setShowRetry(false);
130
- let x = 0;
131
- let y = 0;
132
- const mouseOrTouchEvent = event.nativeEvent;
133
- if (!mouseOrTouchEvent.isTrusted) {
134
- }
135
- else if ("touches" in mouseOrTouchEvent &&
136
- mouseOrTouchEvent.touches.length > 0 &&
137
- mouseOrTouchEvent.touches[0]) {
138
- x = mouseOrTouchEvent.touches[0].clientX;
139
- y = mouseOrTouchEvent.touches[0].clientY;
140
- }
141
- else if ("clientX" in mouseOrTouchEvent &&
142
- "clientY" in mouseOrTouchEvent) {
143
- x = mouseOrTouchEvent.clientX;
144
- y = mouseOrTouchEvent.clientY;
145
- }
146
- const challenge = await manager.current.start(x, y);
147
- if (challenge) {
148
- setChallengeData(challenge);
149
- setPuzzlePhase("dragging");
150
- }
151
- setLoading(false);
152
- }, labelText: isTranslationReady ? t("WIDGET.I_AM_HUMAN") : "", error: state.error?.message, "aria-label": "human checkbox", loading: loading || puzzlePhase === "submitting" }))] }));
161
+ }
162
+ setLoading(true);
163
+ setShowRetry(false);
164
+ let x = 0;
165
+ let y = 0;
166
+ const mouseOrTouchEvent = event.nativeEvent;
167
+ if (!mouseOrTouchEvent.isTrusted) {
168
+ } else if ("touches" in mouseOrTouchEvent && mouseOrTouchEvent.touches.length > 0 && mouseOrTouchEvent.touches[0]) {
169
+ x = mouseOrTouchEvent.touches[0].clientX;
170
+ y = mouseOrTouchEvent.touches[0].clientY;
171
+ } else if ("clientX" in mouseOrTouchEvent && "clientY" in mouseOrTouchEvent) {
172
+ x = mouseOrTouchEvent.clientX;
173
+ y = mouseOrTouchEvent.clientY;
174
+ }
175
+ const challenge = await manager.current.start(x, y);
176
+ if (challenge) {
177
+ setChallengeData(challenge);
178
+ setPuzzlePhase("dragging");
179
+ }
180
+ setLoading(false);
181
+ },
182
+ labelText: isTranslationReady ? t("WIDGET.I_AM_HUMAN") : "",
183
+ error: state.error?.message,
184
+ "aria-label": "human checkbox",
185
+ loading: loading || puzzlePhase === "submitting"
186
+ }
187
+ )
188
+ ] });
189
+ };
190
+ export {
191
+ Procaptcha as default
153
192
  };
154
- export default Procaptcha;
155
- //# sourceMappingURL=ProcaptchaWidget.js.map