@prosopo/procaptcha-react 0.2.32 → 0.2.33
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 +68 -0
- package/dist/cjs/components/CaptchaComponent.cjs +66 -43
- package/dist/cjs/components/CaptchaPlaceholder.cjs +132 -0
- package/dist/cjs/components/CaptchaWidget.cjs +43 -37
- package/dist/cjs/components/Checkbox.cjs +56 -0
- package/dist/cjs/components/ExtensionAccountSelect.cjs +26 -26
- package/dist/cjs/components/LoadingSpinner.cjs +30 -0
- package/dist/cjs/components/Modal.cjs +35 -0
- package/dist/cjs/components/Procaptcha.cjs +6 -253
- package/dist/cjs/components/ProcaptchaWidget.cjs +260 -0
- package/dist/cjs/components/collector.cjs +25 -0
- package/dist/cjs/components/index.cjs +3 -1
- package/dist/cjs/components/theme.cjs +27 -12
- package/dist/cjs/index.cjs +4 -2
- package/package.json +6 -6
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
3
|
+
const theme = require("./theme.cjs");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const index = require("../util/index.cjs");
|
|
6
|
+
const buttonStyleBase = {
|
|
7
|
+
display: "inline-flex",
|
|
8
|
+
alignItems: "center",
|
|
9
|
+
justifyContent: "center",
|
|
10
|
+
position: "relative",
|
|
11
|
+
boxSizing: "border-box",
|
|
12
|
+
outline: "0px",
|
|
13
|
+
border: "0px",
|
|
14
|
+
margin: "0px",
|
|
15
|
+
cursor: "pointer",
|
|
16
|
+
userSelect: "none",
|
|
17
|
+
verticalAlign: "middle",
|
|
18
|
+
appearance: void 0,
|
|
19
|
+
textDecoration: "none",
|
|
20
|
+
fontWeight: "500",
|
|
21
|
+
fontSize: "0.875rem",
|
|
22
|
+
lineHeight: "1.75",
|
|
23
|
+
letterSpacing: "0.02857em",
|
|
24
|
+
textTransform: "uppercase",
|
|
25
|
+
minWidth: "64px",
|
|
26
|
+
padding: "6px 16px",
|
|
27
|
+
borderRadius: "4px",
|
|
28
|
+
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",
|
|
29
|
+
color: "rgb(0, 0, 0)",
|
|
30
|
+
backgroundColor: "#ffffff",
|
|
31
|
+
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"
|
|
32
|
+
};
|
|
33
|
+
const Button = ({ themeColor, buttonType, text, onClick }) => {
|
|
34
|
+
const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
|
|
35
|
+
const [hover, setHover] = React.useState(false);
|
|
36
|
+
const buttonStyle = React.useMemo(() => {
|
|
37
|
+
const baseStyle = {
|
|
38
|
+
...buttonStyleBase,
|
|
39
|
+
color: hover ? theme$1.palette.primary.contrastText : theme$1.palette.background.contrastText
|
|
40
|
+
};
|
|
41
|
+
if (buttonType === "cancel") {
|
|
42
|
+
return {
|
|
43
|
+
...baseStyle,
|
|
44
|
+
backgroundColor: hover ? theme$1.palette.grey[600] : "transparent"
|
|
45
|
+
};
|
|
46
|
+
} else {
|
|
47
|
+
return {
|
|
48
|
+
...baseStyle,
|
|
49
|
+
backgroundColor: hover ? theme$1.palette.primary.main : theme$1.palette.background.default
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
}, [buttonType, hover, theme$1]);
|
|
53
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
+
"button",
|
|
55
|
+
{
|
|
56
|
+
...index({ dev: { cy: `button-${buttonType}` } }),
|
|
57
|
+
onMouseEnter: () => setHover(true),
|
|
58
|
+
onMouseLeave: () => setHover(false),
|
|
59
|
+
style: buttonStyle,
|
|
60
|
+
onClick: (e) => {
|
|
61
|
+
e.preventDefault();
|
|
62
|
+
onClick();
|
|
63
|
+
},
|
|
64
|
+
children: text
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
};
|
|
68
|
+
module.exports = Button;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
-
const material = require("@mui/material");
|
|
2
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
3
|
const CaptchaWidget = require("./CaptchaWidget.cjs");
|
|
4
|
+
const React = require("react");
|
|
5
5
|
const util = require("@prosopo/util");
|
|
6
6
|
const theme = require("./theme.cjs");
|
|
7
|
-
const react = require("react");
|
|
8
7
|
const common = require("@prosopo/common");
|
|
8
|
+
const Button = require("./Button.cjs");
|
|
9
9
|
const index = require("../util/index.cjs");
|
|
10
10
|
const CaptchaComponent = ({
|
|
11
11
|
challenge,
|
|
@@ -20,46 +20,48 @@ const CaptchaComponent = ({
|
|
|
20
20
|
const { t } = common.useTranslation();
|
|
21
21
|
const captcha = challenge.captchas ? util.at(challenge.captchas, index$1) : null;
|
|
22
22
|
const solution = solutions ? util.at(solutions, index$1) : [];
|
|
23
|
-
const theme$1 =
|
|
24
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
-
|
|
23
|
+
const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
|
|
24
|
+
return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
+
"div",
|
|
26
26
|
{
|
|
27
|
-
|
|
27
|
+
style: {
|
|
28
28
|
// introduce scroll bars when screen < minWidth of children
|
|
29
29
|
overflowX: "auto",
|
|
30
30
|
overflowY: "auto",
|
|
31
31
|
width: "100%",
|
|
32
32
|
maxWidth: "500px",
|
|
33
|
-
maxHeight: "100%"
|
|
33
|
+
maxHeight: "100%",
|
|
34
|
+
display: "flex",
|
|
35
|
+
flexDirection: "column"
|
|
34
36
|
},
|
|
35
37
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
36
|
-
|
|
38
|
+
"div",
|
|
37
39
|
{
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
style: {
|
|
41
|
+
backgroundColor: theme$1.palette.background.default,
|
|
40
42
|
display: "flex",
|
|
41
43
|
flexDirection: "column",
|
|
42
44
|
minWidth: "300px"
|
|
43
45
|
},
|
|
44
46
|
children: [
|
|
45
47
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
46
|
-
|
|
48
|
+
"div",
|
|
47
49
|
{
|
|
48
|
-
|
|
49
|
-
py: 3,
|
|
50
|
-
sx: {
|
|
50
|
+
style: {
|
|
51
51
|
display: "flex",
|
|
52
52
|
alignItems: "center",
|
|
53
|
-
width: "100%"
|
|
53
|
+
width: "100%",
|
|
54
|
+
backgroundColor: theme$1.palette.primary.main,
|
|
55
|
+
padding: "24px 16px"
|
|
54
56
|
},
|
|
55
|
-
bgcolor: theme$1.palette.primary.main,
|
|
56
57
|
children: [
|
|
57
58
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
58
|
-
|
|
59
|
+
"p",
|
|
59
60
|
{
|
|
60
|
-
|
|
61
|
+
style: {
|
|
61
62
|
color: "#ffffff",
|
|
62
|
-
fontWeight: 700
|
|
63
|
+
fontWeight: 700,
|
|
64
|
+
lineHeight: 1.5
|
|
63
65
|
},
|
|
64
66
|
children: [
|
|
65
67
|
t("WIDGET.SELECT_ALL"),
|
|
@@ -68,14 +70,13 @@ const CaptchaComponent = ({
|
|
|
68
70
|
}
|
|
69
71
|
),
|
|
70
72
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
-
|
|
73
|
+
"p",
|
|
72
74
|
{
|
|
73
|
-
|
|
74
|
-
sx: {
|
|
75
|
+
style: {
|
|
75
76
|
color: "#ffffff",
|
|
76
77
|
fontWeight: 700,
|
|
77
78
|
textTransform: "capitalize",
|
|
78
|
-
|
|
79
|
+
lineHeight: 1.5
|
|
79
80
|
},
|
|
80
81
|
children: `${util.at(challenge.captchas, index$1).captcha.target}`
|
|
81
82
|
}
|
|
@@ -83,13 +84,19 @@ const CaptchaComponent = ({
|
|
|
83
84
|
]
|
|
84
85
|
}
|
|
85
86
|
),
|
|
86
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
87
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { ...index({ dev: { cy: "captcha-" + index$1 } }), children: captcha && /* @__PURE__ */ jsxRuntime.jsx(
|
|
88
|
+
CaptchaWidget.CaptchaWidget,
|
|
89
|
+
{
|
|
90
|
+
challenge: captcha,
|
|
91
|
+
solution,
|
|
92
|
+
onClick,
|
|
93
|
+
themeColor
|
|
94
|
+
}
|
|
95
|
+
) }),
|
|
87
96
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
88
|
-
|
|
97
|
+
"div",
|
|
89
98
|
{
|
|
90
|
-
|
|
91
|
-
py: 1,
|
|
92
|
-
sx: {
|
|
99
|
+
style: {
|
|
93
100
|
display: "flex",
|
|
94
101
|
alignItems: "center",
|
|
95
102
|
justifyContent: "center",
|
|
@@ -98,27 +105,43 @@ const CaptchaComponent = ({
|
|
|
98
105
|
...index({ dev: { cy: "dots-captcha" } })
|
|
99
106
|
}
|
|
100
107
|
),
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
+
"div",
|
|
110
|
+
{
|
|
111
|
+
style: {
|
|
112
|
+
padding: "8px 16px",
|
|
113
|
+
display: "flex",
|
|
114
|
+
width: "100%"
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
),
|
|
101
118
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
102
|
-
|
|
119
|
+
"div",
|
|
103
120
|
{
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
pb: 2,
|
|
107
|
-
sx: {
|
|
121
|
+
style: {
|
|
122
|
+
padding: "0 16px 16px",
|
|
108
123
|
display: "flex",
|
|
109
124
|
alignItems: "center",
|
|
110
|
-
justifyContent: "space-between"
|
|
125
|
+
justifyContent: "space-between",
|
|
126
|
+
lineHeight: 1.75
|
|
111
127
|
},
|
|
112
128
|
children: [
|
|
113
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onCancel, variant: "text", children: t("WIDGET.CANCEL") }),
|
|
114
129
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
115
|
-
|
|
130
|
+
Button,
|
|
131
|
+
{
|
|
132
|
+
themeColor,
|
|
133
|
+
buttonType: "cancel",
|
|
134
|
+
onClick: onCancel,
|
|
135
|
+
text: t("WIDGET.CANCEL")
|
|
136
|
+
}
|
|
137
|
+
),
|
|
138
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
+
Button,
|
|
116
140
|
{
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
children: index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT")
|
|
141
|
+
themeColor,
|
|
142
|
+
buttonType: "next",
|
|
143
|
+
text: index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
|
|
144
|
+
onClick: index$1 < challenge.captchas.length - 1 ? onNext : onSubmit
|
|
122
145
|
}
|
|
123
146
|
)
|
|
124
147
|
]
|
|
@@ -128,6 +151,6 @@ const CaptchaComponent = ({
|
|
|
128
151
|
}
|
|
129
152
|
)
|
|
130
153
|
}
|
|
131
|
-
);
|
|
154
|
+
) });
|
|
132
155
|
};
|
|
133
156
|
module.exports = CaptchaComponent;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
+
const LoadingSpinner = require("./LoadingSpinner.cjs");
|
|
5
|
+
const react = require("@emotion/react");
|
|
6
|
+
const theme = require("./theme.cjs");
|
|
7
|
+
const React = require("react");
|
|
8
|
+
const logoStyle = react.css`
|
|
9
|
+
align-items: center;
|
|
10
|
+
justify-content: flex-end;
|
|
11
|
+
display: flex;
|
|
12
|
+
padding: 8px;
|
|
13
|
+
|
|
14
|
+
@media (max-width: 245px) {
|
|
15
|
+
&:nth-of-type(1),
|
|
16
|
+
&:nth-of-type(2) {
|
|
17
|
+
display: none;
|
|
18
|
+
} /* Both logos hidden */
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@media (min-width: 245px) and (max-width: 400px) {
|
|
22
|
+
&:nth-of-type(1) {
|
|
23
|
+
display: flex;
|
|
24
|
+
} /* logoWithText */
|
|
25
|
+
&:nth-of-type(2) {
|
|
26
|
+
display: none;
|
|
27
|
+
} /* logoWithoutText */
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@media (min-width: 401px) {
|
|
31
|
+
&:nth-of-type(1) {
|
|
32
|
+
display: none;
|
|
33
|
+
} /* logoWithText */
|
|
34
|
+
&:nth-of-type(2) {
|
|
35
|
+
display: flex;
|
|
36
|
+
} /* logoWithoutText */
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
39
|
+
const ProcaptchaPlaceholder = (props) => {
|
|
40
|
+
const darkMode = props.darkMode;
|
|
41
|
+
const styleWidth = { maxWidth: "400px", minWidth: "200px", margin: "8px" };
|
|
42
|
+
const themeColor = darkMode ? "light" : "dark";
|
|
43
|
+
const theme$1 = React.useMemo(() => darkMode === "light" ? theme.lightTheme : theme.darkTheme, [darkMode]);
|
|
44
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styleWidth, "data-cy": "button-human", children: [
|
|
45
|
+
" ",
|
|
46
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
47
|
+
"div",
|
|
48
|
+
{
|
|
49
|
+
style: {
|
|
50
|
+
padding: "8px",
|
|
51
|
+
border: "1px solid",
|
|
52
|
+
backgroundColor: theme$1.palette.background.default,
|
|
53
|
+
borderColor: theme$1.palette.grey[300],
|
|
54
|
+
borderRadius: "8px",
|
|
55
|
+
display: "flex",
|
|
56
|
+
justifyContent: "space-between",
|
|
57
|
+
alignItems: "center",
|
|
58
|
+
flexWrap: "wrap"
|
|
59
|
+
},
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
style: {
|
|
65
|
+
display: "flex",
|
|
66
|
+
justifyContent: "flex-start",
|
|
67
|
+
alignItems: "center",
|
|
68
|
+
flexWrap: "wrap"
|
|
69
|
+
},
|
|
70
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
+
"div",
|
|
72
|
+
{
|
|
73
|
+
style: {
|
|
74
|
+
height: "50px",
|
|
75
|
+
width: "50px",
|
|
76
|
+
display: "flex",
|
|
77
|
+
alignItems: "center",
|
|
78
|
+
justifyContent: "center",
|
|
79
|
+
flexDirection: "column",
|
|
80
|
+
verticalAlign: "middle"
|
|
81
|
+
},
|
|
82
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
style: {
|
|
86
|
+
display: "flex"
|
|
87
|
+
},
|
|
88
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) })
|
|
89
|
+
}
|
|
90
|
+
)
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
) }),
|
|
95
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
96
|
+
"a",
|
|
97
|
+
{
|
|
98
|
+
href: "https://www.prosopo.io/#features?ref=accounts.prosopo.io&utm_campaign=widget&utm_medium=checkbox",
|
|
99
|
+
target: "_blank",
|
|
100
|
+
"aria-label": "Visit prosopo.io to learn more about the service and its accessibility options.",
|
|
101
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
102
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
103
|
+
"div",
|
|
104
|
+
{
|
|
105
|
+
css: logoStyle,
|
|
106
|
+
dangerouslySetInnerHTML: {
|
|
107
|
+
__html: darkMode === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
),
|
|
111
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
112
|
+
"div",
|
|
113
|
+
{
|
|
114
|
+
css: logoStyle,
|
|
115
|
+
dangerouslySetInnerHTML: {
|
|
116
|
+
__html: darkMode === "light" ? logoWithTextBlack : logoWithTextWhite
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
)
|
|
120
|
+
] }) })
|
|
121
|
+
}
|
|
122
|
+
) })
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
] }) }) });
|
|
127
|
+
};
|
|
128
|
+
const logoWithTextBlack = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
|
|
129
|
+
const logoWithTextWhite = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
|
|
130
|
+
const logoWithoutTextWhite = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#fff"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#fff"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#fff"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#fff"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
|
|
131
|
+
const logoWithoutTextBlack = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#000000"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#000000"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#000000"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#000000"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
|
|
132
|
+
exports.ProcaptchaPlaceholder = ProcaptchaPlaceholder;
|
|
@@ -1,29 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
return Icon.default ? Icon.default : Icon;
|
|
8
|
-
};
|
|
9
|
-
const CheckIconNormalized = normalizeIcon(CheckIcon);
|
|
3
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
|
+
const common = require("@prosopo/common");
|
|
5
|
+
const theme = require("./theme.cjs");
|
|
6
|
+
const React = require("react");
|
|
10
7
|
const getHash = (item) => {
|
|
11
8
|
if (!item.hash) {
|
|
12
|
-
throw new
|
|
9
|
+
throw new common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
|
|
13
10
|
}
|
|
14
11
|
return item.hash;
|
|
15
12
|
};
|
|
16
|
-
const CaptchaWidget = ({ challenge, solution, onClick }) => {
|
|
13
|
+
const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
|
|
17
14
|
const items = challenge.captcha.items;
|
|
18
|
-
const theme =
|
|
15
|
+
const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
|
|
19
16
|
const isTouchDevice = "ontouchstart" in window;
|
|
20
17
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
21
|
-
|
|
18
|
+
"div",
|
|
22
19
|
{
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
sx: {
|
|
20
|
+
style: {
|
|
21
|
+
paddingRight: 0.5,
|
|
22
|
+
paddingBottom: 0.5,
|
|
27
23
|
// expand to full height / width of parent
|
|
28
24
|
width: "100%",
|
|
29
25
|
height: "100%",
|
|
@@ -35,11 +31,11 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
|
|
|
35
31
|
children: items.map((item, index) => {
|
|
36
32
|
const hash = getHash(item);
|
|
37
33
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
38
|
-
|
|
34
|
+
"div",
|
|
39
35
|
{
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
style: {
|
|
37
|
+
paddingTop: "4px",
|
|
38
|
+
paddingLeft: "4px",
|
|
43
39
|
// enable the items in the grid to grow in width to use up excess space
|
|
44
40
|
flexGrow: 1,
|
|
45
41
|
// make the width of each item 1/3rd of the width overall, i.e. 3 columns
|
|
@@ -48,19 +44,19 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
|
|
|
48
44
|
boxSizing: "border-box"
|
|
49
45
|
},
|
|
50
46
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
51
|
-
|
|
47
|
+
"div",
|
|
52
48
|
{
|
|
53
|
-
|
|
49
|
+
style: { cursor: "pointer", height: "100%", width: "100%" },
|
|
54
50
|
onClick: isTouchDevice ? void 0 : () => onClick(hash),
|
|
55
51
|
onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
|
|
56
52
|
children: [
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { border: 1, borderColor: theme$1.palette.grey[300] }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
58
54
|
"img",
|
|
59
55
|
{
|
|
60
56
|
style: {
|
|
61
57
|
width: "100%",
|
|
62
58
|
// image should be full width / height of the item
|
|
63
|
-
backgroundColor: theme.palette.grey[300],
|
|
59
|
+
backgroundColor: theme$1.palette.grey[300],
|
|
64
60
|
// colour of the bands when letterboxing and image
|
|
65
61
|
opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
|
|
66
62
|
// iphone workaround
|
|
@@ -75,10 +71,10 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
|
|
|
75
71
|
alt: `Captcha image ${index + 1}`
|
|
76
72
|
}
|
|
77
73
|
) }),
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
-
|
|
74
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
75
|
+
"div",
|
|
80
76
|
{
|
|
81
|
-
|
|
77
|
+
style: {
|
|
82
78
|
// relative to where the element _should_ be positioned
|
|
83
79
|
position: "relative",
|
|
84
80
|
// make the overlay the full height/width of an item
|
|
@@ -86,14 +82,15 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
|
|
|
86
82
|
height: "100%",
|
|
87
83
|
// shift it up 100% to overlay the item element
|
|
88
84
|
top: "-100%",
|
|
85
|
+
visibility: solution.includes(hash) ? "visible" : "hidden",
|
|
89
86
|
// transition on opacity upon (de)selection
|
|
90
|
-
|
|
91
|
-
|
|
87
|
+
transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
88
|
+
opacity: 1
|
|
92
89
|
},
|
|
93
90
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
94
|
-
|
|
91
|
+
"div",
|
|
95
92
|
{
|
|
96
|
-
|
|
93
|
+
style: {
|
|
97
94
|
// make the overlay absolute positioned compare to its container
|
|
98
95
|
position: "absolute",
|
|
99
96
|
// spread across 100% width/height of the item box
|
|
@@ -111,22 +108,31 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
|
|
|
111
108
|
backgroundColor: "rgba(0,0,0,0.5)"
|
|
112
109
|
},
|
|
113
110
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
114
|
-
|
|
111
|
+
"svg",
|
|
115
112
|
{
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
// img must be displayed as block otherwise
|
|
113
|
+
style: {
|
|
114
|
+
backgroundColor: "transparent",
|
|
115
|
+
// img must be displayed as block otherwise gets a bottom whitespace border
|
|
119
116
|
display: "block",
|
|
120
117
|
// how big the overlay icon is
|
|
121
118
|
width: "35%",
|
|
122
|
-
height: "35%"
|
|
123
|
-
|
|
119
|
+
height: "35%",
|
|
120
|
+
transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
121
|
+
userSelect: "none",
|
|
122
|
+
fill: "currentcolor"
|
|
123
|
+
},
|
|
124
|
+
focusable: "false",
|
|
125
|
+
color: "#fff",
|
|
126
|
+
"aria-hidden": "true",
|
|
127
|
+
viewBox: "0 0 24 24",
|
|
128
|
+
"data-testid": "CheckIcon",
|
|
129
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
|
|
124
130
|
}
|
|
125
131
|
)
|
|
126
132
|
}
|
|
127
133
|
)
|
|
128
134
|
}
|
|
129
|
-
)
|
|
135
|
+
)
|
|
130
136
|
]
|
|
131
137
|
}
|
|
132
138
|
)
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
3
|
+
const react = require("@emotion/react");
|
|
4
|
+
const theme = require("./theme.cjs");
|
|
5
|
+
const React = require("react");
|
|
6
|
+
const checkboxBefore = react.css`{
|
|
7
|
+
&:before {
|
|
8
|
+
content: '""';
|
|
9
|
+
position: absolute;
|
|
10
|
+
height: 100%;
|
|
11
|
+
width: 100%;
|
|
12
|
+
}
|
|
13
|
+
}`;
|
|
14
|
+
const baseStyle = {
|
|
15
|
+
width: "2.2em",
|
|
16
|
+
height: "2.2em",
|
|
17
|
+
top: "auto",
|
|
18
|
+
left: "auto",
|
|
19
|
+
opacity: "1",
|
|
20
|
+
borderRadius: "12.5%",
|
|
21
|
+
appearance: "none",
|
|
22
|
+
cursor: "pointer",
|
|
23
|
+
margin: "0",
|
|
24
|
+
borderStyle: "solid",
|
|
25
|
+
borderWidth: "1px"
|
|
26
|
+
};
|
|
27
|
+
const Checkbox = ({ themeColor, onChange, checked }) => {
|
|
28
|
+
const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
|
|
29
|
+
const checkboxStyleBase = {
|
|
30
|
+
...baseStyle,
|
|
31
|
+
border: `1px solid ${theme$1.palette.background.contrastText}`
|
|
32
|
+
};
|
|
33
|
+
const [hover, setHover] = React.useState(false);
|
|
34
|
+
const checkboxStyle = React.useMemo(() => {
|
|
35
|
+
return {
|
|
36
|
+
...checkboxStyleBase,
|
|
37
|
+
borderColor: hover ? theme$1.palette.background.contrastText : theme$1.palette.grey[400],
|
|
38
|
+
appearance: checked ? "auto" : "none"
|
|
39
|
+
};
|
|
40
|
+
}, [hover, theme$1, checked]);
|
|
41
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
|
+
"input",
|
|
43
|
+
{
|
|
44
|
+
onMouseEnter: () => setHover(true),
|
|
45
|
+
onMouseLeave: () => setHover(false),
|
|
46
|
+
css: checkboxBefore,
|
|
47
|
+
type: "checkbox",
|
|
48
|
+
"aria-live": "assertive",
|
|
49
|
+
"aria-haspopup": "true",
|
|
50
|
+
onChange,
|
|
51
|
+
checked,
|
|
52
|
+
style: checkboxStyle
|
|
53
|
+
}
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
module.exports = Checkbox;
|