@prosopo/procaptcha-react 2.12.0 → 2.13.1
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.
- package/.turbo/turbo-build$colon$cjs.log +8 -8
- package/.turbo/turbo-build$colon$tsc.log +22 -22
- package/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +86 -0
- package/dist/cjs/components/button.cjs +14 -14
- package/dist/cjs/components/captchaComponent.cjs +42 -27
- package/dist/cjs/components/captchaWidget.cjs +41 -24
- package/dist/cjs/components/modal.cjs +7 -3
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +16 -16
- package/dist/components/button.js.map +1 -1
- package/dist/components/captchaComponent.d.ts.map +1 -1
- package/dist/components/captchaComponent.js +44 -29
- package/dist/components/captchaComponent.js.map +1 -1
- package/dist/components/captchaWidget.d.ts.map +1 -1
- package/dist/components/captchaWidget.js +43 -26
- package/dist/components/captchaWidget.js.map +1 -1
- package/dist/components/modal.d.ts.map +1 -1
- package/dist/components/modal.js +8 -4
- package/dist/components/modal.js.map +1 -1
- package/dist/tests/button.unit.test.js +42 -3
- package/dist/tests/button.unit.test.js.map +1 -1
- package/dist/tests/captchaComponent.unit.test.js +4 -4
- package/dist/tests/captchaComponent.unit.test.js.map +1 -1
- package/dist/tests/captchaWidget.unit.test.js +91 -11
- package/dist/tests/captchaWidget.unit.test.js.map +1 -1
- package/dist/tests/modal.unit.test.js +26 -10
- package/dist/tests/modal.unit.test.js.map +1 -1
- package/dist/tests/procaptchaWidget.unit.test.js +10 -8
- package/dist/tests/procaptchaWidget.unit.test.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAaA,OAAO,EACN,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAaA,OAAO,EACN,KAAK,SAAS,EAMd,MAAM,4BAA4B,CAAC;AASpC,MAAM,WAAW,WAAW;IAC3B,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,UAAU,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACb;AA6BD,eAAO,MAAM,WAAW,cACZ,WAAW,gBACR,WAAW,KACvB,SAAS,CAAC,WAAW,CAuGvB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import addDataAttr from "../util/index.js";
|
|
2
|
-
import { Teardown, applyAttributes, applyStyles,
|
|
3
|
-
import { darkTheme, lightTheme, withAlpha } from "@prosopo/widget-skeleton";
|
|
2
|
+
import { Teardown, applyAttributes, applyStyles, createControl } from "@prosopo/procaptcha-common";
|
|
3
|
+
import { canHover, darkTheme, lightTheme, withAlpha } from "@prosopo/widget-skeleton";
|
|
4
4
|
//#region src/components/button.ts
|
|
5
5
|
var buttonStyleBase = {
|
|
6
6
|
display: "inline-flex",
|
|
@@ -27,7 +27,10 @@ var mountButton = (container, initialProps) => {
|
|
|
27
27
|
let props = initialProps;
|
|
28
28
|
let hover = false;
|
|
29
29
|
let focusVisible = false;
|
|
30
|
-
const button =
|
|
30
|
+
const button = createControl(teardown, { onActivate: (event) => {
|
|
31
|
+
event.preventDefault();
|
|
32
|
+
props.onClick();
|
|
33
|
+
} });
|
|
31
34
|
const buttonStyle = () => {
|
|
32
35
|
const theme = "light" === props.themeColor ? lightTheme : darkTheme;
|
|
33
36
|
const baseStyle = {
|
|
@@ -62,14 +65,16 @@ var mountButton = (container, initialProps) => {
|
|
|
62
65
|
});
|
|
63
66
|
button.textContent = props.text;
|
|
64
67
|
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
68
|
+
if (canHover()) {
|
|
69
|
+
teardown.addEventListener(button, "mouseenter", () => {
|
|
70
|
+
hover = true;
|
|
71
|
+
render();
|
|
72
|
+
});
|
|
73
|
+
teardown.addEventListener(button, "mouseleave", () => {
|
|
74
|
+
hover = false;
|
|
75
|
+
render();
|
|
76
|
+
});
|
|
77
|
+
}
|
|
73
78
|
teardown.addEventListener(button, "focus", () => {
|
|
74
79
|
focusVisible = button.matches(":focus-visible");
|
|
75
80
|
render();
|
|
@@ -78,11 +83,6 @@ var mountButton = (container, initialProps) => {
|
|
|
78
83
|
focusVisible = false;
|
|
79
84
|
render();
|
|
80
85
|
});
|
|
81
|
-
teardown.addEventListener(button, "click", (event) => {
|
|
82
|
-
if (!isEventTrusted(event)) return;
|
|
83
|
-
event.preventDefault();
|
|
84
|
-
props.onClick();
|
|
85
|
-
});
|
|
86
86
|
render();
|
|
87
87
|
container.appendChild(button);
|
|
88
88
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAaA,OAAO,EAGN,QAAQ,EACR,eAAe,EACf,WAAW,EACX,aAAa,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"captchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/captchaComponent.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACN,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"captchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/captchaComponent.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EACN,KAAK,SAAS,EAQd,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAY1D,MAAM,WAAW,qBAAqB;IACrC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,UAAU,EAAE,UAAU,CAAC;CACvB;AA0ED,eAAO,MAAM,qBAAqB,cACtB,WAAW,gBACR,qBAAqB,KACjC,SAAS,CAAC,qBAAqB,CA2MjC,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import addDataAttr from "../util/index.js";
|
|
2
2
|
import { mountButton } from "./button.js";
|
|
3
3
|
import { mountCaptchaWidget } from "./captchaWidget.js";
|
|
4
|
-
import { applyAttributes, applyStyles, createElement, mountReloadButton } from "@prosopo/procaptcha-common";
|
|
5
|
-
import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
|
|
4
|
+
import { applyAttributes, applyStyles, createElement, mountReloadButton, threeColumnBasis, wrapRandomly } from "@prosopo/procaptcha-common";
|
|
5
|
+
import { darkTheme, lightTheme, randomInt } from "@prosopo/widget-skeleton";
|
|
6
6
|
import { at } from "@prosopo/util";
|
|
7
7
|
//#region src/components/captchaComponent.ts
|
|
8
8
|
var outerStyle = (theme) => ({
|
|
@@ -17,7 +17,7 @@ var outerStyle = (theme) => ({
|
|
|
17
17
|
borderRadius: theme.shape.card,
|
|
18
18
|
backgroundColor: theme.palette.background.default,
|
|
19
19
|
userSelect: "none",
|
|
20
|
-
touchAction: "
|
|
20
|
+
touchAction: "pan-y",
|
|
21
21
|
overscrollBehavior: "none"
|
|
22
22
|
});
|
|
23
23
|
var promptStyle = (theme) => ({
|
|
@@ -34,11 +34,22 @@ var targetStyle = (theme) => ({
|
|
|
34
34
|
color: theme.palette.titleAccent,
|
|
35
35
|
fontWeight: 700
|
|
36
36
|
});
|
|
37
|
-
var columnStyle = {
|
|
37
|
+
var columnStyle = (gap) => ({
|
|
38
38
|
position: "relative",
|
|
39
39
|
flexGrow: 1,
|
|
40
|
-
flexBasis:
|
|
41
|
-
};
|
|
40
|
+
flexBasis: threeColumnBasis(gap)
|
|
41
|
+
});
|
|
42
|
+
var SPACING_JITTER = 4;
|
|
43
|
+
var MIN_CONTROL_GAP = 6;
|
|
44
|
+
var MAX_CONTROL_GAP = 14;
|
|
45
|
+
var HEADER_PADDING_Y = 12;
|
|
46
|
+
var HEADER_PADDING_X = 14;
|
|
47
|
+
var HEADER_PADDING_JITTER = 3;
|
|
48
|
+
var MIN_WRAPPER_DEPTH = 0;
|
|
49
|
+
var MAX_WRAPPER_DEPTH = 2;
|
|
50
|
+
var decoy = (element) => wrapRandomly(element, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH);
|
|
51
|
+
/** A spacing token moved by a few pixels, never below zero. */
|
|
52
|
+
var jittered = (base, jitter = SPACING_JITTER) => Math.max(0, base + randomInt(-jitter, jitter));
|
|
42
53
|
var mountCaptchaComponent = (container, initialProps) => {
|
|
43
54
|
let props = initialProps;
|
|
44
55
|
const themeOf = (themeColor) => "light" === themeColor ? lightTheme : darkTheme;
|
|
@@ -46,26 +57,29 @@ var mountCaptchaComponent = (container, initialProps) => {
|
|
|
46
57
|
const currentSolution = () => at(props.solutions, props.index, { noWrap: true });
|
|
47
58
|
const isLastRound = () => props.index >= props.challenge.captchas.length - 1;
|
|
48
59
|
const theme = themeOf(props.themeColor);
|
|
49
|
-
const
|
|
50
|
-
const
|
|
60
|
+
const controlGap = randomInt(MIN_CONTROL_GAP, MAX_CONTROL_GAP);
|
|
61
|
+
const column = columnStyle(controlGap);
|
|
51
62
|
const targetLabel = createElement("span", { style: targetStyle(theme) });
|
|
52
|
-
const promptText = createElement("p", {
|
|
63
|
+
const promptText = createElement("p", {
|
|
64
|
+
style: promptStyle(theme),
|
|
65
|
+
attributes: addDataAttr({ dev: { cy: "captcha-prompt" } })
|
|
66
|
+
});
|
|
53
67
|
const hintText = createElement("p", { style: hintStyle(theme) });
|
|
54
68
|
const header = createElement("div", {
|
|
55
69
|
style: {
|
|
56
|
-
padding:
|
|
70
|
+
padding: `${jittered(HEADER_PADDING_Y, HEADER_PADDING_JITTER)}px ${jittered(HEADER_PADDING_X, HEADER_PADDING_JITTER)}px`,
|
|
57
71
|
fontFamily: theme.font.fontFamily
|
|
58
72
|
},
|
|
59
|
-
children: [promptText, hintText]
|
|
73
|
+
children: [decoy(promptText), decoy(hintText)]
|
|
60
74
|
});
|
|
61
75
|
const headerBar = createElement("div", {
|
|
62
76
|
style: {
|
|
63
77
|
backgroundColor: theme.palette.primaryContainer.main,
|
|
64
78
|
borderRadius: theme.shape.header,
|
|
65
79
|
width: "100%",
|
|
66
|
-
marginTop:
|
|
80
|
+
marginTop: `${jittered(theme.spacing.unit)}px`
|
|
67
81
|
},
|
|
68
|
-
children: [header]
|
|
82
|
+
children: [decoy(header)]
|
|
69
83
|
});
|
|
70
84
|
const headerRow = createElement("div", {
|
|
71
85
|
style: {
|
|
@@ -73,15 +87,15 @@ var mountCaptchaComponent = (container, initialProps) => {
|
|
|
73
87
|
alignItems: "center",
|
|
74
88
|
width: "100%"
|
|
75
89
|
},
|
|
76
|
-
children: [headerBar]
|
|
90
|
+
children: [decoy(headerBar)]
|
|
77
91
|
});
|
|
78
92
|
const gridHost = createElement("div", {
|
|
79
93
|
style: { overflow: "hidden" },
|
|
80
94
|
attributes: addDataAttr({ dev: { cy: `captcha-${props.index}` } })
|
|
81
95
|
});
|
|
82
|
-
const cancelHost = createElement("div", { style:
|
|
83
|
-
const reloadHost = createElement("div", { style:
|
|
84
|
-
const nextHost = createElement("div", { style:
|
|
96
|
+
const cancelHost = createElement("div", { style: column });
|
|
97
|
+
const reloadHost = createElement("div", { style: column });
|
|
98
|
+
const nextHost = createElement("div", { style: column });
|
|
85
99
|
const controls = createElement("div", {
|
|
86
100
|
style: {
|
|
87
101
|
width: "100%",
|
|
@@ -89,12 +103,12 @@ var mountCaptchaComponent = (container, initialProps) => {
|
|
|
89
103
|
display: "flex",
|
|
90
104
|
flexDirection: "row",
|
|
91
105
|
justifyContent: "space-between",
|
|
92
|
-
gap:
|
|
106
|
+
gap: `${controlGap}px`
|
|
93
107
|
},
|
|
94
108
|
children: [
|
|
95
|
-
cancelHost,
|
|
96
|
-
reloadHost,
|
|
97
|
-
nextHost
|
|
109
|
+
decoy(cancelHost),
|
|
110
|
+
decoy(reloadHost),
|
|
111
|
+
decoy(nextHost)
|
|
98
112
|
]
|
|
99
113
|
});
|
|
100
114
|
const controlsRow = createElement("div", {
|
|
@@ -103,9 +117,9 @@ var mountCaptchaComponent = (container, initialProps) => {
|
|
|
103
117
|
alignItems: "center",
|
|
104
118
|
justifyContent: "space-between",
|
|
105
119
|
lineHeight: 1.75,
|
|
106
|
-
padding: `${
|
|
120
|
+
padding: `${jittered(theme.spacing.unit)}px 0 ${jittered(theme.spacing.unit * 2)}px 0`
|
|
107
121
|
},
|
|
108
|
-
children: [controls]
|
|
122
|
+
children: [decoy(controls)]
|
|
109
123
|
});
|
|
110
124
|
const inner = createElement("div", {
|
|
111
125
|
style: {
|
|
@@ -113,19 +127,20 @@ var mountCaptchaComponent = (container, initialProps) => {
|
|
|
113
127
|
display: "flex",
|
|
114
128
|
flexDirection: "column",
|
|
115
129
|
minWidth: "300px",
|
|
116
|
-
marginLeft:
|
|
117
|
-
marginRight:
|
|
130
|
+
marginLeft: `${jittered(theme.spacing.unit)}px`,
|
|
131
|
+
marginRight: `${jittered(theme.spacing.unit)}px`,
|
|
118
132
|
justifyContent: "center"
|
|
119
133
|
},
|
|
120
134
|
children: [
|
|
121
|
-
headerRow,
|
|
122
|
-
gridHost,
|
|
123
|
-
controlsRow
|
|
135
|
+
decoy(headerRow),
|
|
136
|
+
decoy(gridHost),
|
|
137
|
+
decoy(controlsRow)
|
|
124
138
|
]
|
|
125
139
|
});
|
|
126
140
|
const root = createElement("div", {
|
|
127
141
|
style: outerStyle(theme),
|
|
128
|
-
|
|
142
|
+
attributes: addDataAttr({ dev: { cy: "captcha-panel" } }),
|
|
143
|
+
children: [decoy(inner)]
|
|
129
144
|
});
|
|
130
145
|
const grid = mountCaptchaWidget(gridHost, {
|
|
131
146
|
challenge: currentCaptcha(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"captchaComponent.js","sourceRoot":"","sources":["../../src/components/captchaComponent.ts"],"names":[],"mappings":"AAcA,OAAO,EAGN,eAAe,EACf,WAAW,EACX,aAAa,EACb,iBAAiB,
|
|
1
|
+
{"version":3,"file":"captchaComponent.js","sourceRoot":"","sources":["../../src/components/captchaComponent.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"captchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/captchaWidget.ts"],"names":[],"mappings":"AAcA,OAAO,EACN,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"captchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/captchaWidget.ts"],"names":[],"mappings":"AAcA,OAAO,EACN,KAAK,SAAS,EAUd,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAc,MAAM,gBAAgB,CAAC;AAQ1D,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAuGD,eAAO,MAAM,kBAAkB,cACnB,WAAW,gBACR,kBAAkB,KAC9B,SAAS,CAAC,kBAAkB,CAsN9B,CAAC"}
|
|
@@ -1,28 +1,46 @@
|
|
|
1
|
-
import { Teardown, applyStyles, clearElement, createElement, createSvgElement,
|
|
2
|
-
import { darkTheme, lightTheme } from "@prosopo/widget-skeleton";
|
|
1
|
+
import { Teardown, applyStyles, clearElement, createControl, createElement, createSvgElement, threeColumnBasis, wrapRandomly } from "@prosopo/procaptcha-common";
|
|
2
|
+
import { darkTheme, lightTheme, randomInt } from "@prosopo/widget-skeleton";
|
|
3
3
|
import { ProsopoDatasetError } from "@prosopo/common";
|
|
4
4
|
//#region src/components/captchaWidget.ts
|
|
5
5
|
var getHash = (item) => {
|
|
6
6
|
if (!item.hash) throw new ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
|
|
7
7
|
return item.hash;
|
|
8
8
|
};
|
|
9
|
-
var
|
|
9
|
+
var cellStyle = (gap) => ({
|
|
10
10
|
flexGrow: 1,
|
|
11
|
-
flexBasis:
|
|
11
|
+
flexBasis: threeColumnBasis(gap),
|
|
12
12
|
boxSizing: "border-box"
|
|
13
|
-
};
|
|
13
|
+
});
|
|
14
|
+
var MIN_GRID_GAP = 8;
|
|
15
|
+
var MAX_GRID_GAP = 15;
|
|
16
|
+
var GRID_PADDING_JITTER = 4;
|
|
17
|
+
var MIN_WRAPPER_DEPTH = 0;
|
|
18
|
+
var MAX_WRAPPER_DEPTH = 2;
|
|
14
19
|
var CHECK_ICON_PATH = "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z";
|
|
20
|
+
/**
|
|
21
|
+
* Asset signing is optional, so both shapes of URL arrive here. An unsigned one
|
|
22
|
+
* gets the cache-buster it always got; a signed one cannot, because its token
|
|
23
|
+
* is a signature over the query string and any addition invalidates it —
|
|
24
|
+
* turning a transient failure into a permanent 403.
|
|
25
|
+
*/
|
|
26
|
+
var retrySrc = (url) => url.includes("token=") ? url : `${url}${url.includes("?") ? "&" : "?"}retry=${Date.now()}`;
|
|
15
27
|
var themeOf = (themeColor) => "light" === themeColor ? lightTheme : darkTheme;
|
|
16
|
-
|
|
28
|
+
/** Drawn once per mounted grid, so tile centres move between page loads. */
|
|
29
|
+
var generateMetrics = (theme) => ({
|
|
30
|
+
gap: randomInt(MIN_GRID_GAP, MAX_GRID_GAP),
|
|
31
|
+
paddingTop: Math.max(0, theme.spacing.unit + randomInt(-GRID_PADDING_JITTER, GRID_PADDING_JITTER)),
|
|
32
|
+
paddingBottom: Math.max(0, theme.spacing.unit + randomInt(-GRID_PADDING_JITTER, GRID_PADDING_JITTER))
|
|
33
|
+
});
|
|
34
|
+
var gridStyle = (metrics) => ({
|
|
17
35
|
width: "100%",
|
|
18
36
|
height: "100%",
|
|
19
37
|
display: "flex",
|
|
20
38
|
flexDirection: "row",
|
|
21
39
|
flexWrap: "wrap",
|
|
22
40
|
justifyContent: "space-between",
|
|
23
|
-
paddingTop: `${
|
|
24
|
-
paddingBottom: `${
|
|
25
|
-
gap:
|
|
41
|
+
paddingTop: `${metrics.paddingTop}px`,
|
|
42
|
+
paddingBottom: `${metrics.paddingBottom}px`,
|
|
43
|
+
gap: `${metrics.gap}px`
|
|
26
44
|
});
|
|
27
45
|
var selectionStyle = (theme, selected) => ({
|
|
28
46
|
borderRadius: selected ? theme.shape.tileSelected : theme.shape.tile,
|
|
@@ -42,7 +60,8 @@ var mountCaptchaWidget = (container, initialProps) => {
|
|
|
42
60
|
let renderedChallenge;
|
|
43
61
|
let tiles = [];
|
|
44
62
|
let focusedHash = null;
|
|
45
|
-
const
|
|
63
|
+
const metrics = generateMetrics(themeOf(initialProps.themeColor));
|
|
64
|
+
const grid = createElement("div", { style: gridStyle(metrics) });
|
|
46
65
|
const buildTile = (item, index) => {
|
|
47
66
|
const hash = getHash(item);
|
|
48
67
|
const theme = themeOf(props.themeColor);
|
|
@@ -67,7 +86,10 @@ var mountCaptchaWidget = (container, initialProps) => {
|
|
|
67
86
|
teardown.addEventListener(image, "error", () => {
|
|
68
87
|
const retryCount = Number(image.dataset.retryCount ?? "0") + 1;
|
|
69
88
|
image.dataset.retryCount = String(retryCount);
|
|
70
|
-
if (retryCount <= 3)
|
|
89
|
+
if (retryCount <= 3) {
|
|
90
|
+
image.removeAttribute("src");
|
|
91
|
+
image.src = retrySrc(item.data);
|
|
92
|
+
}
|
|
71
93
|
});
|
|
72
94
|
const icon = createSvgElement("svg", {
|
|
73
95
|
style: {
|
|
@@ -84,11 +106,8 @@ var mountCaptchaWidget = (container, initialProps) => {
|
|
|
84
106
|
},
|
|
85
107
|
attributes: {
|
|
86
108
|
focusable: "false",
|
|
87
|
-
color: "#fff",
|
|
88
109
|
"aria-hidden": "true",
|
|
89
|
-
viewBox: "0 0 24 24"
|
|
90
|
-
"data-testid": "CheckIcon",
|
|
91
|
-
"aria-label": "Check icon"
|
|
110
|
+
viewBox: "0 0 24 24"
|
|
92
111
|
},
|
|
93
112
|
children: [createSvgElement("path", { attributes: { d: CHECK_ICON_PATH } })]
|
|
94
113
|
});
|
|
@@ -110,7 +129,7 @@ var mountCaptchaWidget = (container, initialProps) => {
|
|
|
110
129
|
},
|
|
111
130
|
children: [icon]
|
|
112
131
|
});
|
|
113
|
-
const clickable =
|
|
132
|
+
const clickable = createControl(teardown, {
|
|
114
133
|
style: {
|
|
115
134
|
position: "relative",
|
|
116
135
|
cursor: "pointer",
|
|
@@ -123,13 +142,11 @@ var mountCaptchaWidget = (container, initialProps) => {
|
|
|
123
142
|
appearance: "none",
|
|
124
143
|
display: "block"
|
|
125
144
|
},
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
const mouseEvent = event;
|
|
132
|
-
props.onClick(hash, mouseEvent.clientX, mouseEvent.clientY);
|
|
145
|
+
children: [image, overlay],
|
|
146
|
+
onActivate: (event) => {
|
|
147
|
+
const fromPointer = "clientX" in event;
|
|
148
|
+
props.onClick(hash, fromPointer ? event.clientX : 0, fromPointer ? event.clientY : 0);
|
|
149
|
+
}
|
|
133
150
|
});
|
|
134
151
|
teardown.addEventListener(clickable, "focus", () => {
|
|
135
152
|
focusedHash = clickable.matches(":focus-visible") ? hash : null;
|
|
@@ -140,10 +157,10 @@ var mountCaptchaWidget = (container, initialProps) => {
|
|
|
140
157
|
applyFocusRing();
|
|
141
158
|
});
|
|
142
159
|
const cell = createElement("div", {
|
|
143
|
-
style:
|
|
160
|
+
style: cellStyle(metrics.gap),
|
|
144
161
|
children: [clickable]
|
|
145
162
|
});
|
|
146
|
-
grid.appendChild(cell);
|
|
163
|
+
grid.appendChild(wrapRandomly(cell, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH));
|
|
147
164
|
return {
|
|
148
165
|
hash,
|
|
149
166
|
image,
|
|
@@ -165,7 +182,7 @@ var mountCaptchaWidget = (container, initialProps) => {
|
|
|
165
182
|
teardown.run();
|
|
166
183
|
teardown = new Teardown();
|
|
167
184
|
clearElement(grid);
|
|
168
|
-
applyStyles(grid, gridStyle(
|
|
185
|
+
applyStyles(grid, gridStyle(metrics));
|
|
169
186
|
tiles = props.challenge.items.map(buildTile);
|
|
170
187
|
renderedChallenge = props.challenge;
|
|
171
188
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"captchaWidget.js","sourceRoot":"","sources":["../../src/components/captchaWidget.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAGN,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"captchaWidget.js","sourceRoot":"","sources":["../../src/components/captchaWidget.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGpD,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,UAAU,CAAC;IAE5D,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;CAC9B;AAQD,eAAO,MAAM,UAAU,iBAAkB,UAAU,KAAG,cAqCrD,CAAC"}
|
package/dist/components/modal.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { applyStyles, createElement, mountChallengeSurface } from "@prosopo/procaptcha-common";
|
|
1
|
+
import { applyStyles, createElement, mountChallengeSurface, wrapRandomly } from "@prosopo/procaptcha-common";
|
|
2
|
+
import { randomToken } from "@prosopo/widget-skeleton";
|
|
2
3
|
//#region src/components/modal.ts
|
|
4
|
+
var MIN_WRAPPER_DEPTH = 1;
|
|
5
|
+
var MAX_WRAPPER_DEPTH = 3;
|
|
3
6
|
/**
|
|
4
7
|
* The image captcha's dialog frame; positioning lives in `ChallengeSurface`.
|
|
5
8
|
*/
|
|
6
9
|
var mountModal = (initialProps) => {
|
|
7
|
-
const inner = createElement("div", { className:
|
|
10
|
+
const inner = createElement("div", { className: randomToken() });
|
|
8
11
|
applyStyles(inner, {
|
|
9
12
|
maxWidth: "500px",
|
|
10
13
|
maxHeight: "100%",
|
|
@@ -14,17 +17,18 @@ var mountModal = (initialProps) => {
|
|
|
14
17
|
alignSelf: "center",
|
|
15
18
|
boxSizing: "border-box"
|
|
16
19
|
});
|
|
20
|
+
const outerClassName = randomToken();
|
|
17
21
|
const surfaceProps = (props) => ({
|
|
18
22
|
show: props.show,
|
|
19
23
|
placement: props.placement,
|
|
20
24
|
anchor: props.anchor,
|
|
21
25
|
onDismiss: props.onDismiss,
|
|
22
26
|
scrim: "none",
|
|
23
|
-
className:
|
|
27
|
+
className: outerClassName,
|
|
24
28
|
dialogLabel: props.dialogLabel
|
|
25
29
|
});
|
|
26
30
|
const surface = mountChallengeSurface(surfaceProps(initialProps));
|
|
27
|
-
surface.content.appendChild(inner);
|
|
31
|
+
surface.content.appendChild(wrapRandomly(inner, MIN_WRAPPER_DEPTH, MAX_WRAPPER_DEPTH));
|
|
28
32
|
return {
|
|
29
33
|
content: inner,
|
|
30
34
|
update: (props) => surface.update(surfaceProps(props)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"AAcA,OAAO,EAEN,WAAW,EACX,aAAa,EACb,qBAAqB,
|
|
1
|
+
{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"AAcA,OAAO,EAEN,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,YAAY,GACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAevD,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAC5B,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAK5B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,YAAwB,EAAkB,EAAE;IACtE,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC;IAEjE,WAAW,CAAC,KAAK,EAAE;QAClB,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,MAAM;QACjB,eAAe,EAAE,aAAa;QAC9B,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,YAAY;KACvB,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,WAAW,EAAE,CAAC;IAErC,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAE,EAAE,CAAC,CAAC;QAC5C,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,SAAS,EAAE,KAAK,CAAC,SAAS;QAC1B,KAAK,EAAE,MAAe;QACtB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,KAAK,CAAC,WAAW;KAC9B,CAAC,CAAC;IAEH,MAAM,OAAO,GAA8B,qBAAqB,CAC/D,YAAY,CAAC,YAAY,CAAC,CAC1B,CAAC;IACF,OAAO,CAAC,OAAO,CAAC,WAAW,CAC1B,YAAY,CAAC,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CACzD,CAAC;IAEF,OAAO;QACN,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,CAAC,KAAiB,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAClE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE;KAChC,CAAC;AACH,CAAC,CAAC"}
|
|
@@ -18,11 +18,23 @@ const render = (overrides = {}) => {
|
|
|
18
18
|
else {
|
|
19
19
|
button = mountButton(mounted.container, props(overrides));
|
|
20
20
|
}
|
|
21
|
-
const element = mounted.container.
|
|
22
|
-
if (!element)
|
|
23
|
-
throw new Error("expected
|
|
21
|
+
const element = mounted.container.firstElementChild;
|
|
22
|
+
if (!(element instanceof HTMLElement)) {
|
|
23
|
+
throw new Error("expected an action to be rendered");
|
|
24
|
+
}
|
|
24
25
|
return element;
|
|
25
26
|
};
|
|
27
|
+
const renderAs = (kind, overrides = {}) => {
|
|
28
|
+
const draws = vi
|
|
29
|
+
.spyOn(Math, "random")
|
|
30
|
+
.mockReturnValue("button" === kind ? 0 : 0.99);
|
|
31
|
+
try {
|
|
32
|
+
return render(overrides);
|
|
33
|
+
}
|
|
34
|
+
finally {
|
|
35
|
+
draws.mockRestore();
|
|
36
|
+
}
|
|
37
|
+
};
|
|
26
38
|
beforeEach(() => {
|
|
27
39
|
vi.clearAllMocks();
|
|
28
40
|
process.env.NODE_ENV = "test";
|
|
@@ -32,6 +44,7 @@ beforeEach(() => {
|
|
|
32
44
|
afterEach(() => {
|
|
33
45
|
button?.destroy();
|
|
34
46
|
mounted.unmount();
|
|
47
|
+
vi.unstubAllGlobals();
|
|
35
48
|
});
|
|
36
49
|
describe("what the button renders", () => {
|
|
37
50
|
test("shows its text and labels itself with it", () => {
|
|
@@ -52,6 +65,17 @@ describe("what the button renders", () => {
|
|
|
52
65
|
const element = render({ buttonType: "cancel" });
|
|
53
66
|
expect(element.getAttribute("data-cy")).toBeNull();
|
|
54
67
|
});
|
|
68
|
+
test("is a plain button when it is a button", () => {
|
|
69
|
+
const element = renderAs("button");
|
|
70
|
+
expect(element.tagName).toBe("BUTTON");
|
|
71
|
+
expect(element.getAttribute("type")).toBe("button");
|
|
72
|
+
});
|
|
73
|
+
test("is a tabbable button by role when it is not a button", () => {
|
|
74
|
+
const element = renderAs("generic");
|
|
75
|
+
expect(element.tagName).toBe("DIV");
|
|
76
|
+
expect(element.getAttribute("role")).toBe("button");
|
|
77
|
+
expect(element.getAttribute("tabindex")).toBe("0");
|
|
78
|
+
});
|
|
55
79
|
});
|
|
56
80
|
describe("theming", () => {
|
|
57
81
|
test("is a borderless pill, not an outlined box", () => {
|
|
@@ -77,6 +101,15 @@ describe("theming", () => {
|
|
|
77
101
|
fire(element, "mouseenter");
|
|
78
102
|
expect(element.style.backgroundColor).toBe(withAlpha(lightTheme.palette.primary.main, lightTheme.stateLayer.hover));
|
|
79
103
|
});
|
|
104
|
+
test("a touch screen gets no state layer", () => {
|
|
105
|
+
vi.stubGlobal("matchMedia", (query) => ({
|
|
106
|
+
matches: "(hover: hover)" !== query,
|
|
107
|
+
media: query,
|
|
108
|
+
}));
|
|
109
|
+
const element = render({ buttonType: "cancel" });
|
|
110
|
+
fire(element, "mouseenter");
|
|
111
|
+
expect(element.style.backgroundColor).toBe("transparent");
|
|
112
|
+
});
|
|
80
113
|
test("hovering a next button composites a state layer over its fill", () => {
|
|
81
114
|
const element = render({ buttonType: "next" });
|
|
82
115
|
fire(element, "mouseenter");
|
|
@@ -126,6 +159,12 @@ describe("clicking", () => {
|
|
|
126
159
|
fire(element, "click");
|
|
127
160
|
expect(onClick).toHaveBeenCalledTimes(2);
|
|
128
161
|
});
|
|
162
|
+
test("Enter and Space call the handler when it is not a button", () => {
|
|
163
|
+
const element = renderAs("generic");
|
|
164
|
+
fire(element, "keydown", { key: "Enter" });
|
|
165
|
+
fire(element, "keydown", { key: " " });
|
|
166
|
+
expect(onClick).toHaveBeenCalledTimes(2);
|
|
167
|
+
});
|
|
129
168
|
test("a destroyed button stops listening", () => {
|
|
130
169
|
const element = render();
|
|
131
170
|
button?.destroy();
|