@prosopo/procaptcha-react 1.0.1 → 2.0.0
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/dist/cjs/components/Button.cjs +15 -7
- package/dist/cjs/components/CaptchaComponent.cjs +72 -43
- package/dist/cjs/components/CaptchaWidget.cjs +137 -98
- package/dist/cjs/components/Modal.cjs +38 -36
- package/dist/cjs/components/Procaptcha.cjs +2 -4
- package/dist/cjs/components/ProcaptchaWidget.cjs +100 -83
- package/dist/cjs/util/index.cjs +6 -2
- package/dist/components/Button.d.ts +4 -3
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +41 -39
- package/dist/components/Button.js.map +1 -1
- package/dist/components/CaptchaComponent.d.ts +2 -2
- package/dist/components/CaptchaComponent.d.ts.map +1 -1
- package/dist/components/CaptchaComponent.js +61 -48
- package/dist/components/CaptchaComponent.js.map +1 -1
- package/dist/components/CaptchaWidget.d.ts +4 -4
- package/dist/components/CaptchaWidget.d.ts.map +1 -1
- package/dist/components/CaptchaWidget.js +84 -47
- package/dist/components/CaptchaWidget.js.map +1 -1
- package/dist/components/Modal.d.ts +1 -1
- package/dist/components/Modal.d.ts.map +1 -1
- package/dist/components/Modal.js +16 -16
- package/dist/components/Modal.js.map +1 -1
- package/dist/components/Procaptcha.d.ts +3 -3
- package/dist/components/Procaptcha.d.ts.map +1 -1
- package/dist/components/Procaptcha.js +3 -3
- package/dist/components/Procaptcha.js.map +1 -1
- package/dist/components/ProcaptchaWidget.d.ts +1 -1
- package/dist/components/ProcaptchaWidget.d.ts.map +1 -1
- package/dist/components/ProcaptchaWidget.js +36 -37
- package/dist/components/ProcaptchaWidget.js.map +1 -1
- package/dist/components/collector.d.ts +1 -1
- package/dist/components/collector.d.ts.map +1 -1
- package/dist/components/collector.js +4 -4
- package/dist/components/collector.js.map +1 -1
- package/dist/components/index.d.ts +5 -5
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +5 -5
- package/dist/components/index.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/util/index.d.ts.map +1 -1
- package/dist/util/index.js +3 -1
- package/dist/util/index.js.map +1 -1
- package/package.json +66 -72
- package/vite.cjs.config.ts +6 -3
- package/dist/cjs/components/collector.cjs +0 -26
- package/typedoc.config.js +0 -19
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
3
|
-
const webComponents = require("@prosopo/web-components");
|
|
4
3
|
const procaptcha = require("@prosopo/procaptcha");
|
|
5
|
-
const types = require("@prosopo/types");
|
|
6
4
|
const procaptchaCommon = require("@prosopo/procaptcha-common");
|
|
5
|
+
const types = require("@prosopo/types");
|
|
6
|
+
const webComponents = require("@prosopo/web-components");
|
|
7
7
|
const React = require("react");
|
|
8
8
|
const CaptchaComponent = require("./CaptchaComponent.cjs");
|
|
9
|
-
const collector = require("./collector.cjs");
|
|
10
9
|
const Modal = require("./Modal.cjs");
|
|
11
10
|
const ProcaptchaWidget = (props) => {
|
|
12
11
|
const config = types.ProcaptchaConfigSchema.parse(props.config);
|
|
@@ -29,89 +28,107 @@ const ProcaptchaWidget = (props) => {
|
|
|
29
28
|
themeColor: config.theme ?? "light"
|
|
30
29
|
}
|
|
31
30
|
) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No challenge set." }) }),
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"div",
|
|
37
|
-
{
|
|
38
|
-
style: {
|
|
39
|
-
padding: webComponents.WIDGET_PADDING,
|
|
40
|
-
border: webComponents.WIDGET_BORDER,
|
|
41
|
-
backgroundColor: theme.palette.background.default,
|
|
42
|
-
borderColor: theme.palette.grey[300],
|
|
43
|
-
borderRadius: webComponents.WIDGET_BORDER_RADIUS,
|
|
44
|
-
display: "flex",
|
|
45
|
-
alignItems: "center",
|
|
46
|
-
flexWrap: "wrap",
|
|
47
|
-
justifyContent: "space-between",
|
|
48
|
-
minHeight: `${webComponents.WIDGET_INNER_HEIGHT}px`,
|
|
49
|
-
overflow: "hidden"
|
|
50
|
-
},
|
|
51
|
-
children: [
|
|
52
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
-
"div",
|
|
54
|
-
{
|
|
55
|
-
style: {
|
|
56
|
-
alignItems: "center",
|
|
57
|
-
flex: 1
|
|
58
|
-
},
|
|
59
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
60
|
-
"div",
|
|
61
|
-
{
|
|
62
|
-
style: {
|
|
63
|
-
display: "flex",
|
|
64
|
-
alignItems: "center",
|
|
65
|
-
justifyContent: "center",
|
|
66
|
-
flexDirection: "column",
|
|
67
|
-
verticalAlign: "middle"
|
|
68
|
-
},
|
|
69
|
-
children: [
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
-
"div",
|
|
72
|
-
{
|
|
73
|
-
style: {
|
|
74
|
-
display: !state.loading ? "flex" : "none"
|
|
75
|
-
},
|
|
76
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
77
|
-
webComponents.Checkbox,
|
|
78
|
-
{
|
|
79
|
-
themeColor,
|
|
80
|
-
onChange: manager.start,
|
|
81
|
-
checked: state.isHuman,
|
|
82
|
-
labelText: "I am human"
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
}
|
|
86
|
-
),
|
|
87
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
88
|
-
"div",
|
|
89
|
-
{
|
|
90
|
-
style: {
|
|
91
|
-
display: state.loading ? "flex" : "none"
|
|
92
|
-
},
|
|
93
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(webComponents.LoadingSpinner, { themeColor }) })
|
|
94
|
-
}
|
|
95
|
-
)
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
) }),
|
|
101
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: webComponents.WIDGET_URL, target: "_blank", "aria-label": webComponents.WIDGET_URL_TEXT, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(webComponents.Logo, { themeColor }) }) }) })
|
|
102
|
-
]
|
|
103
|
-
}
|
|
104
|
-
)
|
|
105
|
-
] }) }),
|
|
106
|
-
config.devOnlyWatchEvents && /* @__PURE__ */ jsxRuntime.jsx(
|
|
107
|
-
collector,
|
|
31
|
+
/* @__PURE__ */ jsxRuntime.jsx(webComponents.ContainerDiv, { children: /* @__PURE__ */ jsxRuntime.jsx(webComponents.WidthBasedStylesDiv, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: webComponents.WIDGET_DIMENSIONS, "data-cy": "button-human", children: [
|
|
32
|
+
" ",
|
|
33
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
34
|
+
"div",
|
|
108
35
|
{
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
36
|
+
style: {
|
|
37
|
+
padding: webComponents.WIDGET_PADDING,
|
|
38
|
+
border: webComponents.WIDGET_BORDER,
|
|
39
|
+
backgroundColor: theme.palette.background.default,
|
|
40
|
+
borderColor: theme.palette.grey[300],
|
|
41
|
+
borderRadius: webComponents.WIDGET_BORDER_RADIUS,
|
|
42
|
+
display: "flex",
|
|
43
|
+
alignItems: "center",
|
|
44
|
+
flexWrap: "wrap",
|
|
45
|
+
justifyContent: "space-between",
|
|
46
|
+
minHeight: `${webComponents.WIDGET_INNER_HEIGHT}px`,
|
|
47
|
+
overflow: "hidden"
|
|
48
|
+
},
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
style: { display: "inline-flex", flexDirection: "column" },
|
|
54
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
55
|
+
"div",
|
|
56
|
+
{
|
|
57
|
+
style: {
|
|
58
|
+
alignItems: "center",
|
|
59
|
+
flex: 1
|
|
60
|
+
},
|
|
61
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
style: {
|
|
65
|
+
display: "flex",
|
|
66
|
+
alignItems: "center",
|
|
67
|
+
justifyContent: "center",
|
|
68
|
+
flexDirection: "column",
|
|
69
|
+
verticalAlign: "middle"
|
|
70
|
+
},
|
|
71
|
+
children: [
|
|
72
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
73
|
+
"div",
|
|
74
|
+
{
|
|
75
|
+
style: {
|
|
76
|
+
display: !state.loading ? "flex" : "none"
|
|
77
|
+
},
|
|
78
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
+
webComponents.Checkbox,
|
|
80
|
+
{
|
|
81
|
+
themeColor,
|
|
82
|
+
onChange: manager.start,
|
|
83
|
+
checked: state.isHuman,
|
|
84
|
+
labelText: "I am human",
|
|
85
|
+
"aria-label": "human checkbox"
|
|
86
|
+
}
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
+
"div",
|
|
92
|
+
{
|
|
93
|
+
style: {
|
|
94
|
+
display: state.loading ? "flex" : "none"
|
|
95
|
+
},
|
|
96
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
97
|
+
webComponents.LoadingSpinner,
|
|
98
|
+
{
|
|
99
|
+
themeColor,
|
|
100
|
+
"aria-label": "Loading spinner"
|
|
101
|
+
}
|
|
102
|
+
) })
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
}
|
|
111
|
+
),
|
|
112
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
"div",
|
|
114
|
+
{
|
|
115
|
+
style: { display: "inline-flex", flexDirection: "column" },
|
|
116
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
117
|
+
"a",
|
|
118
|
+
{
|
|
119
|
+
href: webComponents.WIDGET_URL,
|
|
120
|
+
target: "_blank",
|
|
121
|
+
"aria-label": webComponents.WIDGET_URL_TEXT,
|
|
122
|
+
rel: "noreferrer",
|
|
123
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(webComponents.Logo, { themeColor, "aria-label": "Prosopo logo" }) })
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
}
|
|
127
|
+
)
|
|
128
|
+
]
|
|
112
129
|
}
|
|
113
130
|
)
|
|
114
|
-
] })
|
|
131
|
+
] }) }) })
|
|
115
132
|
] }) });
|
|
116
133
|
};
|
|
117
134
|
module.exports = ProcaptchaWidget;
|
package/dist/cjs/util/index.cjs
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
function renameKeysForDataAttr(data = {}) {
|
|
3
|
-
return Object.keys(data).reduce(
|
|
3
|
+
return Object.keys(data).reduce(
|
|
4
|
+
// biome-ignore lint/performance/noAccumulatingSpread: TODO fix
|
|
5
|
+
(prev, curr) => ({ ...prev, [`data-${curr}`]: data[curr] }),
|
|
6
|
+
{}
|
|
7
|
+
);
|
|
4
8
|
}
|
|
5
9
|
function addDataAttr({
|
|
6
10
|
general,
|
|
@@ -8,7 +12,7 @@ function addDataAttr({
|
|
|
8
12
|
}) {
|
|
9
13
|
return {
|
|
10
14
|
...renameKeysForDataAttr(general),
|
|
11
|
-
...process.env.NODE_ENV
|
|
15
|
+
...process.env.NODE_ENV !== "production" ? renameKeysForDataAttr(dev) : {}
|
|
12
16
|
};
|
|
13
17
|
}
|
|
14
18
|
module.exports = addDataAttr;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import type React from "react";
|
|
2
|
+
import { type ButtonHTMLAttributes } from "react";
|
|
2
3
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
|
-
themeColor:
|
|
4
|
-
buttonType:
|
|
4
|
+
themeColor: "light" | "dark";
|
|
5
|
+
buttonType: "cancel" | "next";
|
|
5
6
|
onClick: () => void;
|
|
6
7
|
text: string;
|
|
7
8
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,KAAK,oBAAoB,EAIzB,MAAM,OAAO,CAAC;AAGf,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpE,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;AAgCD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+CjC,CAAC;AACF,eAAe,MAAM,CAAC"}
|
|
@@ -1,59 +1,61 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { darkTheme, lightTheme } from
|
|
3
|
-
import { useMemo, useState } from
|
|
4
|
-
import addDataAttr from
|
|
2
|
+
import { darkTheme, lightTheme } from "@prosopo/web-components";
|
|
3
|
+
import { useMemo, useState, } from "react";
|
|
4
|
+
import addDataAttr from "../util/index.js";
|
|
5
5
|
const buttonStyleBase = {
|
|
6
|
-
display:
|
|
7
|
-
alignItems:
|
|
8
|
-
justifyContent:
|
|
9
|
-
position:
|
|
10
|
-
boxSizing:
|
|
11
|
-
outline:
|
|
12
|
-
border:
|
|
13
|
-
margin:
|
|
14
|
-
cursor:
|
|
15
|
-
userSelect:
|
|
16
|
-
verticalAlign:
|
|
6
|
+
display: "inline-flex",
|
|
7
|
+
alignItems: "center",
|
|
8
|
+
justifyContent: "center",
|
|
9
|
+
position: "relative",
|
|
10
|
+
boxSizing: "border-box",
|
|
11
|
+
outline: "0px",
|
|
12
|
+
border: "0px",
|
|
13
|
+
margin: "0px",
|
|
14
|
+
cursor: "pointer",
|
|
15
|
+
userSelect: "none",
|
|
16
|
+
verticalAlign: "middle",
|
|
17
17
|
appearance: undefined,
|
|
18
|
-
textDecoration:
|
|
19
|
-
fontWeight:
|
|
20
|
-
fontSize:
|
|
21
|
-
lineHeight:
|
|
22
|
-
letterSpacing:
|
|
23
|
-
textTransform:
|
|
24
|
-
minWidth:
|
|
25
|
-
padding:
|
|
26
|
-
borderRadius:
|
|
27
|
-
transition:
|
|
28
|
-
color:
|
|
29
|
-
backgroundColor:
|
|
30
|
-
boxShadow:
|
|
18
|
+
textDecoration: "none",
|
|
19
|
+
fontWeight: "500",
|
|
20
|
+
fontSize: "0.875rem",
|
|
21
|
+
lineHeight: "1.75",
|
|
22
|
+
letterSpacing: "0.02857em",
|
|
23
|
+
textTransform: "uppercase",
|
|
24
|
+
minWidth: "64px",
|
|
25
|
+
padding: "6px 16px",
|
|
26
|
+
borderRadius: "4px",
|
|
27
|
+
transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
28
|
+
color: "rgb(0, 0, 0)",
|
|
29
|
+
backgroundColor: "#ffffff",
|
|
30
|
+
boxShadow: "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px",
|
|
31
31
|
};
|
|
32
|
-
const Button = ({ themeColor, buttonType, text, onClick }) => {
|
|
33
|
-
const theme = useMemo(() => (themeColor ===
|
|
32
|
+
const Button = ({ themeColor, buttonType, text, onClick, }) => {
|
|
33
|
+
const theme = useMemo(() => (themeColor === "light" ? lightTheme : darkTheme), [themeColor]);
|
|
34
34
|
const [hover, setHover] = useState(false);
|
|
35
35
|
const buttonStyle = useMemo(() => {
|
|
36
36
|
const baseStyle = {
|
|
37
37
|
...buttonStyleBase,
|
|
38
|
-
color: hover
|
|
38
|
+
color: hover
|
|
39
|
+
? theme.palette.primary.contrastText
|
|
40
|
+
: theme.palette.background.contrastText,
|
|
39
41
|
};
|
|
40
|
-
if (buttonType ===
|
|
42
|
+
if (buttonType === "cancel") {
|
|
41
43
|
return {
|
|
42
44
|
...baseStyle,
|
|
43
|
-
backgroundColor: hover ? theme.palette.grey[600] :
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
else {
|
|
47
|
-
return {
|
|
48
|
-
...baseStyle,
|
|
49
|
-
backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default,
|
|
45
|
+
backgroundColor: hover ? theme.palette.grey[600] : "transparent",
|
|
50
46
|
};
|
|
51
47
|
}
|
|
48
|
+
return {
|
|
49
|
+
...baseStyle,
|
|
50
|
+
backgroundColor: hover
|
|
51
|
+
? theme.palette.primary.main
|
|
52
|
+
: theme.palette.background.default,
|
|
53
|
+
};
|
|
52
54
|
}, [buttonType, hover, theme]);
|
|
53
55
|
return (_jsx("button", { ...addDataAttr({ dev: { cy: `button-${buttonType}` } }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: buttonStyle, onClick: (e) => {
|
|
54
56
|
e.preventDefault();
|
|
55
57
|
onClick();
|
|
56
|
-
}, children: text }));
|
|
58
|
+
}, "aria-label": text, children: text }));
|
|
57
59
|
};
|
|
58
60
|
export default Button;
|
|
59
61
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAGN,OAAO,EACP,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAS3C,MAAM,eAAe,GAAkB;IACtC,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,SAAS;IACrB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,WAAW;IAC1B,aAAa,EAAE,WAAW;IAC1B,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,KAAK;IACnB,UAAU,EACT,+MAA+M;IAChN,KAAK,EAAE,cAAc;IACrB,eAAe,EAAE,SAAS;IAC1B,SAAS,EACR,+GAA+G;CAChH,CAAC;AAEF,MAAM,MAAM,GAA0B,CAAC,EACtC,UAAU,EACV,UAAU,EACV,IAAI,EACJ,OAAO,GACM,EAAE,EAAE;IACjB,MAAM,KAAK,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EACvD,CAAC,UAAU,CAAC,CACZ,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,SAAS,GAAG;YACjB,GAAG,eAAe;YAClB,KAAK,EAAE,KAAK;gBACX,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY;gBACpC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY;SACxC,CAAC;QACF,IAAI,UAAU,KAAK,QAAQ,EAAE;YAC5B,OAAO;gBACN,GAAG,SAAS;gBACZ,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa;aAChE,CAAC;SACF;QACD,OAAO;YACN,GAAG,SAAS;YACZ,eAAe,EAAE,KAAK;gBACrB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;gBAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;SACnC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAE/B,OAAO,CACN,oBACK,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,UAAU,UAAU,EAAE,EAAE,EAAE,CAAC,EACxD,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACnC,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,EAAE,CAAC;QACX,CAAC,gBACW,IAAI,YAEf,IAAI,GACG,CACT,CAAC;AACH,CAAC,CAAC;AACF,eAAe,MAAM,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CaptchaResponseBody } from
|
|
1
|
+
import type { CaptchaResponseBody } from "@prosopo/types";
|
|
2
2
|
export interface CaptchaComponentProps {
|
|
3
3
|
challenge: CaptchaResponseBody;
|
|
4
4
|
index: number;
|
|
@@ -7,7 +7,7 @@ export interface CaptchaComponentProps {
|
|
|
7
7
|
onCancel: () => void;
|
|
8
8
|
onClick: (hash: string) => void;
|
|
9
9
|
onNext: () => void;
|
|
10
|
-
themeColor:
|
|
10
|
+
themeColor: "light" | "dark";
|
|
11
11
|
}
|
|
12
12
|
declare const CaptchaComponent: ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, themeColor, }: CaptchaComponentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
13
13
|
export default CaptchaComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaptchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CaptchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQ1D,MAAM,WAAW,qBAAqB;IACrC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,gBAAgB,sFASnB,qBAAqB,qDAmJvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,60 +1,73 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import Button from
|
|
8
|
-
import
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useTranslation } from "@prosopo/common";
|
|
3
|
+
import { at } from "@prosopo/util";
|
|
4
|
+
import { darkTheme, lightTheme } from "@prosopo/web-components";
|
|
5
|
+
import { Suspense, useMemo } from "react";
|
|
6
|
+
import addDataAttr from "../util/index.js";
|
|
7
|
+
import Button from "./Button.js";
|
|
8
|
+
import { CaptchaWidget } from "./CaptchaWidget.js";
|
|
9
9
|
const CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, themeColor, }) => {
|
|
10
10
|
const { t } = useTranslation();
|
|
11
11
|
const captcha = challenge.captchas ? at(challenge.captchas, index) : null;
|
|
12
12
|
const solution = solutions ? at(solutions, index) : [];
|
|
13
|
-
const theme = useMemo(() => (themeColor ===
|
|
13
|
+
const theme = useMemo(() => (themeColor === "light" ? lightTheme : darkTheme), [themeColor]);
|
|
14
14
|
return (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx("div", { style: {
|
|
15
|
-
overflowX:
|
|
16
|
-
overflowY:
|
|
17
|
-
width:
|
|
18
|
-
maxWidth:
|
|
19
|
-
maxHeight:
|
|
20
|
-
display:
|
|
21
|
-
flexDirection:
|
|
15
|
+
overflowX: "auto",
|
|
16
|
+
overflowY: "auto",
|
|
17
|
+
width: "100%",
|
|
18
|
+
maxWidth: "500px",
|
|
19
|
+
maxHeight: "100%",
|
|
20
|
+
display: "flex",
|
|
21
|
+
flexDirection: "column",
|
|
22
|
+
border: "1px solid #dddddd",
|
|
23
|
+
boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
|
|
24
|
+
borderRadius: "4px",
|
|
25
|
+
padding: `${theme.spacing.unit}px`,
|
|
26
|
+
backgroundColor: theme.palette.background.default,
|
|
22
27
|
}, children: _jsxs("div", { style: {
|
|
23
28
|
backgroundColor: theme.palette.background.default,
|
|
24
|
-
display:
|
|
25
|
-
flexDirection:
|
|
26
|
-
minWidth:
|
|
27
|
-
}, children: [
|
|
28
|
-
display:
|
|
29
|
-
alignItems:
|
|
30
|
-
width:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}, children: [
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
width:
|
|
29
|
+
display: "flex",
|
|
30
|
+
flexDirection: "column",
|
|
31
|
+
minWidth: "300px",
|
|
32
|
+
}, children: [_jsx("div", { style: {
|
|
33
|
+
display: "flex",
|
|
34
|
+
alignItems: "center",
|
|
35
|
+
width: "100%",
|
|
36
|
+
}, children: _jsx("div", { style: {
|
|
37
|
+
backgroundColor: theme.palette.primary.main,
|
|
38
|
+
width: "100%",
|
|
39
|
+
}, children: _jsxs("div", { style: {
|
|
40
|
+
paddingLeft: `${theme.spacing.half}px`,
|
|
41
|
+
paddingRight: `${theme.spacing.half}px`,
|
|
42
|
+
}, children: [_jsxs("p", { style: {
|
|
43
|
+
color: "#ffffff",
|
|
44
|
+
fontWeight: 700,
|
|
45
|
+
lineHeight: 1.5,
|
|
46
|
+
}, children: [t("WIDGET.SELECT_ALL"), ":", "\u00A0", _jsx("span", { style: { textTransform: "capitalize" }, children: `${at(challenge.captchas, index).target}` })] }), _jsx("p", { style: {
|
|
47
|
+
color: "#ffffff",
|
|
48
|
+
fontWeight: 500,
|
|
49
|
+
lineHeight: 0.8,
|
|
50
|
+
fontSize: "0.8rem",
|
|
51
|
+
}, children: t("WIDGET.IF_NONE_CLICK_NEXT") })] }) }) }), _jsx("div", { ...addDataAttr({ dev: { cy: `captcha-${index}` } }), children: captcha && (_jsx(CaptchaWidget, { challenge: captcha, solution: solution, onClick: onClick, themeColor: themeColor })) }), _jsx("div", { style: {
|
|
52
|
+
display: "flex",
|
|
53
|
+
alignItems: "center",
|
|
54
|
+
justifyContent: "center",
|
|
55
|
+
width: "100%",
|
|
56
|
+
}, ...addDataAttr({ dev: { cy: "dots-captcha" } }) }), _jsx("div", { style: {
|
|
57
|
+
padding: `0 ${theme.spacing}px`,
|
|
58
|
+
display: "flex",
|
|
59
|
+
width: "100%",
|
|
51
60
|
} }), _jsxs("div", { style: {
|
|
52
|
-
padding:
|
|
53
|
-
display:
|
|
54
|
-
alignItems:
|
|
55
|
-
justifyContent:
|
|
61
|
+
padding: `0 ${theme.spacing}px`,
|
|
62
|
+
display: "flex",
|
|
63
|
+
alignItems: "center",
|
|
64
|
+
justifyContent: "space-between",
|
|
56
65
|
lineHeight: 1.75,
|
|
57
|
-
}, children: [_jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t(
|
|
66
|
+
}, children: [_jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t("WIDGET.CANCEL"), "aria-label": t("WIDGET.CANCEL") }), _jsx(Button, { themeColor: themeColor, buttonType: "next", text: index < challenge.captchas.length - 1
|
|
67
|
+
? t("WIDGET.NEXT")
|
|
68
|
+
: t("WIDGET.SUBMIT"), onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit, "aria-label": index < challenge.captchas.length - 1
|
|
69
|
+
? t("WIDGET.NEXT")
|
|
70
|
+
: t("WIDGET.SUBMIT"), "data-cy": "button-next" })] })] }) }) }));
|
|
58
71
|
};
|
|
59
72
|
export default CaptchaComponent;
|
|
60
73
|
//# sourceMappingURL=CaptchaComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaptchaComponent.js","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"CaptchaComponent.js","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { Captcha } from "@prosopo/types";
|
|
2
2
|
export interface CaptchaWidgetProps {
|
|
3
|
-
challenge:
|
|
3
|
+
challenge: Captcha;
|
|
4
4
|
solution: string[];
|
|
5
5
|
onClick: (hash: string) => void;
|
|
6
|
-
themeColor:
|
|
6
|
+
themeColor: "light" | "dark";
|
|
7
7
|
}
|
|
8
|
-
export declare const CaptchaWidget: ({ challenge, solution, onClick, themeColor }: CaptchaWidgetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const CaptchaWidget: ({ challenge, solution, onClick, themeColor, }: CaptchaWidgetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
9
9
|
//# sourceMappingURL=CaptchaWidget.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaWidget.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaWidget.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAkB9C,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAYD,eAAO,MAAM,aAAa,kDAKvB,kBAAkB,qDAkKpB,CAAC"}
|