@prosopo/procaptcha-react 0.2.16 → 0.2.19
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/README.md +4 -9
- package/dist/cjs/components/Button.cjs +68 -0
- package/dist/cjs/components/CaptchaComponent.cjs +64 -41
- package/dist/cjs/components/CaptchaWidget.cjs +41 -36
- 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 +140 -134
- package/dist/cjs/components/collector.cjs +25 -0
- package/dist/cjs/components/theme.cjs +27 -12
- package/dist/components/Button.d.ts +10 -0
- package/dist/components/Button.d.ts.map +1 -0
- package/dist/components/Button.js +59 -0
- package/dist/components/Button.js.map +1 -0
- package/dist/components/CaptchaComponent.d.ts +1 -1
- package/dist/components/CaptchaComponent.d.ts.map +1 -1
- package/dist/components/CaptchaComponent.js +23 -11
- package/dist/components/CaptchaComponent.js.map +1 -1
- package/dist/components/CaptchaWidget.d.ts +2 -1
- package/dist/components/CaptchaWidget.d.ts.map +1 -1
- package/dist/components/CaptchaWidget.js +40 -35
- package/dist/components/CaptchaWidget.js.map +1 -1
- package/dist/components/Checkbox.d.ts +9 -0
- package/dist/components/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox.js +43 -0
- package/dist/components/Checkbox.js.map +1 -0
- package/dist/components/ExtensionAccountSelect.d.ts +1 -1
- package/dist/components/ExtensionAccountSelect.d.ts.map +1 -1
- package/dist/components/ExtensionAccountSelect.js +7 -6
- package/dist/components/ExtensionAccountSelect.js.map +1 -1
- package/dist/components/LoadingSpinner.d.ts +6 -0
- package/dist/components/LoadingSpinner.d.ts.map +1 -0
- package/dist/components/LoadingSpinner.js +28 -0
- package/dist/components/LoadingSpinner.js.map +1 -0
- package/dist/components/Modal.d.ts +8 -0
- package/dist/components/Modal.d.ts.map +1 -0
- package/dist/components/Modal.js +35 -0
- package/dist/components/Modal.js.map +1 -0
- package/dist/components/Procaptcha.d.ts.map +1 -1
- package/dist/components/Procaptcha.js +48 -47
- package/dist/components/Procaptcha.js.map +1 -1
- package/dist/components/collector.d.ts +8 -0
- package/dist/components/collector.d.ts.map +1 -0
- package/dist/components/collector.js +25 -0
- package/dist/components/collector.js.map +1 -0
- package/dist/components/theme.d.ts +50 -2
- package/dist/components/theme.d.ts.map +1 -1
- package/dist/components/theme.js +23 -8
- package/dist/components/theme.js.map +1 -1
- package/package.json +14 -10
|
@@ -2,11 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
4
4
|
const procaptcha = require("@prosopo/procaptcha");
|
|
5
|
-
const
|
|
5
|
+
const LoadingSpinner = require("./LoadingSpinner.cjs");
|
|
6
6
|
const react = require("@emotion/react");
|
|
7
7
|
const theme = require("./theme.cjs");
|
|
8
|
-
const
|
|
8
|
+
const React = require("react");
|
|
9
9
|
const CaptchaComponent = require("./CaptchaComponent.cjs");
|
|
10
|
+
const Checkbox = require("./Checkbox.cjs");
|
|
11
|
+
const collector = require("./collector.cjs");
|
|
12
|
+
const Modal = require("./Modal.cjs");
|
|
10
13
|
const logoStyle = react.css`
|
|
11
14
|
align-items: center;
|
|
12
15
|
justify-content: flex-end;
|
|
@@ -39,7 +42,7 @@ const logoStyle = react.css`
|
|
|
39
42
|
}
|
|
40
43
|
`;
|
|
41
44
|
const useRefAsState = (defaultValue) => {
|
|
42
|
-
const ref =
|
|
45
|
+
const ref = React.useRef(defaultValue);
|
|
43
46
|
const setter = (value2) => {
|
|
44
47
|
ref.current = value2;
|
|
45
48
|
};
|
|
@@ -47,21 +50,22 @@ const useRefAsState = (defaultValue) => {
|
|
|
47
50
|
return [value, setter];
|
|
48
51
|
};
|
|
49
52
|
const useProcaptcha = () => {
|
|
50
|
-
const [isHuman, setIsHuman] =
|
|
51
|
-
const [index, setIndex] =
|
|
52
|
-
const [solutions, setSolutions] =
|
|
53
|
+
const [isHuman, setIsHuman] = React.useState(false);
|
|
54
|
+
const [index, setIndex] = React.useState(0);
|
|
55
|
+
const [solutions, setSolutions] = React.useState([]);
|
|
53
56
|
const [captchaApi, setCaptchaApi] = useRefAsState(void 0);
|
|
54
|
-
const [showModal, setShowModal] =
|
|
55
|
-
const [challenge, setChallenge] =
|
|
56
|
-
const [loading, setLoading] =
|
|
57
|
-
const [account, setAccount] =
|
|
58
|
-
const [dappAccount, setDappAccount] =
|
|
57
|
+
const [showModal, setShowModal] = React.useState(false);
|
|
58
|
+
const [challenge, setChallenge] = React.useState(void 0);
|
|
59
|
+
const [loading, setLoading] = React.useState(false);
|
|
60
|
+
const [account, setAccount] = React.useState(void 0);
|
|
61
|
+
const [dappAccount, setDappAccount] = React.useState(void 0);
|
|
59
62
|
const [submission, setSubmission] = useRefAsState(void 0);
|
|
60
63
|
const [timeout, setTimeout] = useRefAsState(void 0);
|
|
61
64
|
const [blockNumber, setBlockNumber] = useRefAsState(void 0);
|
|
62
65
|
const [successfullChallengeTimeout, setSuccessfullChallengeTimeout] = useRefAsState(
|
|
63
66
|
void 0
|
|
64
67
|
);
|
|
68
|
+
const [sendData, setSendData] = React.useState(false);
|
|
65
69
|
return [
|
|
66
70
|
// the state
|
|
67
71
|
{
|
|
@@ -77,7 +81,8 @@ const useProcaptcha = () => {
|
|
|
77
81
|
submission,
|
|
78
82
|
timeout,
|
|
79
83
|
blockNumber,
|
|
80
|
-
successfullChallengeTimeout
|
|
84
|
+
successfullChallengeTimeout,
|
|
85
|
+
sendData
|
|
81
86
|
},
|
|
82
87
|
// and method to update the state
|
|
83
88
|
(nextState) => {
|
|
@@ -109,6 +114,8 @@ const useProcaptcha = () => {
|
|
|
109
114
|
setSuccessfullChallengeTimeout(nextState.timeout);
|
|
110
115
|
if (nextState.blockNumber !== void 0)
|
|
111
116
|
setBlockNumber(nextState.blockNumber);
|
|
117
|
+
if (nextState.sendData !== void 0)
|
|
118
|
+
setSendData(nextState.sendData);
|
|
112
119
|
}
|
|
113
120
|
];
|
|
114
121
|
};
|
|
@@ -119,134 +126,133 @@ const Procaptcha = (props) => {
|
|
|
119
126
|
const [state, updateState] = useProcaptcha();
|
|
120
127
|
console.log("state", state);
|
|
121
128
|
const manager = procaptcha.Manager(config, state, updateState, callbacks);
|
|
122
|
-
const
|
|
123
|
-
const
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
onSubmit: manager.submit,
|
|
132
|
-
onCancel: manager.cancel,
|
|
133
|
-
onClick: manager.select,
|
|
134
|
-
onNext: manager.nextRound,
|
|
135
|
-
themeColor: config.theme ?? "light"
|
|
136
|
-
}
|
|
137
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { children: "No challenge set." }) }),
|
|
138
|
-
/* @__PURE__ */ jsxRuntime.jsxs(material.Box, { p: 0, sx: [...Array.isArray(configSx) ? configSx : [configSx]], "data-cy": "button-human", children: [
|
|
139
|
-
" ",
|
|
140
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
141
|
-
material.Box,
|
|
129
|
+
const styleWidth = { maxWidth: "400px", minWidth: "200px", margin: "8px" };
|
|
130
|
+
const themeColor = props.config.theme === "light" ? "light" : "dark";
|
|
131
|
+
const theme$1 = React.useMemo(() => props.config.theme === "light" ? theme.lightTheme : theme.darkTheme, [props.config.theme]);
|
|
132
|
+
console.log("theme", theme$1);
|
|
133
|
+
console.log("showModal", state.showModal);
|
|
134
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
135
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: [
|
|
136
|
+
/* @__PURE__ */ jsxRuntime.jsx(Modal, { show: state.showModal, children: state.challenge ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
137
|
+
CaptchaComponent,
|
|
142
138
|
{
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
display: "flex",
|
|
172
|
-
alignItems: "center",
|
|
173
|
-
justifyContent: "center",
|
|
174
|
-
flexDirection: "column"
|
|
175
|
-
},
|
|
176
|
-
children: [
|
|
177
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
178
|
-
material.Box,
|
|
179
|
-
{
|
|
180
|
-
sx: {
|
|
181
|
-
display: !state.loading ? "block" : "none"
|
|
182
|
-
},
|
|
183
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
184
|
-
material.Checkbox,
|
|
185
|
-
{
|
|
186
|
-
onChange: manager.start,
|
|
187
|
-
checked: state.isHuman,
|
|
188
|
-
inputProps: { "aria-label": "controlled" },
|
|
189
|
-
sx: {
|
|
190
|
-
"& .MuiSvgIcon-root": { fontSize: 32, position: "relative" },
|
|
191
|
-
"& .PrivateSwitchBase-input": {
|
|
192
|
-
width: "1.4em",
|
|
193
|
-
height: "1.4em",
|
|
194
|
-
top: "auto",
|
|
195
|
-
left: "auto",
|
|
196
|
-
opacity: "1",
|
|
197
|
-
"&::before": {
|
|
198
|
-
content: '""',
|
|
199
|
-
position: "absolute",
|
|
200
|
-
height: "100%",
|
|
201
|
-
width: "100%"
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
)
|
|
207
|
-
}
|
|
208
|
-
),
|
|
209
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
210
|
-
material.Box,
|
|
211
|
-
{
|
|
212
|
-
sx: {
|
|
213
|
-
display: state.loading ? "block" : "none"
|
|
214
|
-
},
|
|
215
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { pt: "5px", children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: "24px", disableShrink: true }) })
|
|
216
|
-
}
|
|
217
|
-
)
|
|
218
|
-
]
|
|
219
|
-
}
|
|
220
|
-
),
|
|
221
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { p: 1, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: theme$1.palette.primary.contrastText, children: "I am a human" }) })
|
|
222
|
-
]
|
|
223
|
-
}
|
|
224
|
-
) }),
|
|
225
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Link, { href: "https://prosopo.io", target: "_blank", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
226
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
139
|
+
challenge: state.challenge,
|
|
140
|
+
index: state.index,
|
|
141
|
+
solutions: state.solutions,
|
|
142
|
+
onSubmit: manager.submit,
|
|
143
|
+
onCancel: manager.cancel,
|
|
144
|
+
onClick: manager.select,
|
|
145
|
+
onNext: manager.nextRound,
|
|
146
|
+
themeColor: config.theme ?? "light"
|
|
147
|
+
}
|
|
148
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No challenge set." }) }),
|
|
149
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: styleWidth, "data-cy": "button-human", children: [
|
|
150
|
+
" ",
|
|
151
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
152
|
+
"div",
|
|
153
|
+
{
|
|
154
|
+
style: {
|
|
155
|
+
padding: "8px",
|
|
156
|
+
border: "1px solid",
|
|
157
|
+
backgroundColor: theme$1.palette.background.default,
|
|
158
|
+
borderColor: theme$1.palette.grey[300],
|
|
159
|
+
borderRadius: "8px",
|
|
160
|
+
display: "flex",
|
|
161
|
+
justifyContent: "space-between",
|
|
162
|
+
alignItems: "center",
|
|
163
|
+
flexWrap: "wrap"
|
|
164
|
+
},
|
|
165
|
+
children: [
|
|
166
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
227
167
|
"div",
|
|
228
168
|
{
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
169
|
+
style: {
|
|
170
|
+
display: "flex",
|
|
171
|
+
justifyContent: "flex-start",
|
|
172
|
+
alignItems: "center",
|
|
173
|
+
flexWrap: "wrap"
|
|
174
|
+
},
|
|
175
|
+
children: [
|
|
176
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
177
|
+
"div",
|
|
178
|
+
{
|
|
179
|
+
style: {
|
|
180
|
+
height: "50px",
|
|
181
|
+
width: "50px",
|
|
182
|
+
display: "flex",
|
|
183
|
+
alignItems: "center",
|
|
184
|
+
justifyContent: "center",
|
|
185
|
+
flexDirection: "column",
|
|
186
|
+
verticalAlign: "middle"
|
|
187
|
+
},
|
|
188
|
+
children: [
|
|
189
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
190
|
+
"div",
|
|
191
|
+
{
|
|
192
|
+
style: {
|
|
193
|
+
display: !state.loading ? "flex" : "none"
|
|
194
|
+
},
|
|
195
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
196
|
+
Checkbox,
|
|
197
|
+
{
|
|
198
|
+
themeColor,
|
|
199
|
+
onChange: manager.start,
|
|
200
|
+
checked: state.isHuman
|
|
201
|
+
}
|
|
202
|
+
)
|
|
203
|
+
}
|
|
204
|
+
),
|
|
205
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
206
|
+
"div",
|
|
207
|
+
{
|
|
208
|
+
style: {
|
|
209
|
+
display: state.loading ? "flex" : "none"
|
|
210
|
+
},
|
|
211
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) })
|
|
212
|
+
}
|
|
213
|
+
)
|
|
214
|
+
]
|
|
215
|
+
}
|
|
216
|
+
),
|
|
217
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: theme$1.palette.primary.contrastText, paddingLeft: "4px" }, children: "I am a human" }) })
|
|
218
|
+
]
|
|
233
219
|
}
|
|
234
|
-
),
|
|
235
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
236
|
-
"
|
|
220
|
+
) }),
|
|
221
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
222
|
+
"a",
|
|
237
223
|
{
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
224
|
+
href: "https://www.prosopo.io/#features?ref=accounts.prosopo.io&utm_campaign=widget&utm_medium=checkbox",
|
|
225
|
+
target: "_blank",
|
|
226
|
+
"aria-label": "Visit prosopo.io to learn more about the service and its accessibility options.",
|
|
227
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
228
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
229
|
+
"div",
|
|
230
|
+
{
|
|
231
|
+
css: logoStyle,
|
|
232
|
+
dangerouslySetInnerHTML: {
|
|
233
|
+
__html: props.config.theme === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
),
|
|
237
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
238
|
+
"div",
|
|
239
|
+
{
|
|
240
|
+
css: logoStyle,
|
|
241
|
+
dangerouslySetInnerHTML: {
|
|
242
|
+
__html: props.config.theme === "light" ? logoWithTextBlack : logoWithTextWhite
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
)
|
|
246
|
+
] }) })
|
|
242
247
|
}
|
|
243
|
-
)
|
|
244
|
-
]
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
)
|
|
248
|
-
] })
|
|
249
|
-
|
|
248
|
+
) })
|
|
249
|
+
]
|
|
250
|
+
}
|
|
251
|
+
)
|
|
252
|
+
] })
|
|
253
|
+
] }),
|
|
254
|
+
config.devOnlyWatchEvents && /* @__PURE__ */ jsxRuntime.jsx(collector, { onProcessData: manager.exportData, sendData: state.showModal })
|
|
255
|
+
] });
|
|
250
256
|
};
|
|
251
257
|
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>';
|
|
252
258
|
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>';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const procaptcha = require("@prosopo/procaptcha");
|
|
5
|
+
const Collector = ({ onProcessData, sendData }) => {
|
|
6
|
+
const [mouseEvents, setStoredMouseEvents] = React.useState([]);
|
|
7
|
+
const [touchEvents, setStoredTouchEvents] = React.useState([]);
|
|
8
|
+
const [keyboardEvents, setStoredKeyboardEvents] = React.useState([]);
|
|
9
|
+
const ref = React.useRef(null);
|
|
10
|
+
React.useEffect(() => {
|
|
11
|
+
if (ref && ref.current) {
|
|
12
|
+
procaptcha.startCollector(setStoredMouseEvents, setStoredTouchEvents, setStoredKeyboardEvents, ref.current);
|
|
13
|
+
}
|
|
14
|
+
}, []);
|
|
15
|
+
React.useEffect(() => {
|
|
16
|
+
const userEvents = {
|
|
17
|
+
mouseEvents,
|
|
18
|
+
touchEvents,
|
|
19
|
+
keyboardEvents
|
|
20
|
+
};
|
|
21
|
+
onProcessData(userEvents);
|
|
22
|
+
}, [sendData]);
|
|
23
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref });
|
|
24
|
+
};
|
|
25
|
+
module.exports = Collector;
|
|
@@ -1,29 +1,44 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
4
|
-
|
|
3
|
+
const grey = {
|
|
4
|
+
0: "#fff",
|
|
5
|
+
100: "#f5f5f5",
|
|
6
|
+
200: "#eeeeee",
|
|
7
|
+
300: "#e0e0e0",
|
|
8
|
+
400: "#bdbdbd",
|
|
9
|
+
500: "#9e9e9e",
|
|
10
|
+
600: "#757575",
|
|
11
|
+
700: "#616161",
|
|
12
|
+
800: "#424242",
|
|
13
|
+
900: "#212121"
|
|
14
|
+
};
|
|
15
|
+
const lightTheme = {
|
|
5
16
|
palette: {
|
|
6
17
|
mode: "light",
|
|
7
18
|
primary: {
|
|
8
|
-
main: "#
|
|
9
|
-
contrastText: "#
|
|
19
|
+
main: "#487DFA",
|
|
20
|
+
contrastText: "#fff"
|
|
10
21
|
},
|
|
11
22
|
background: {
|
|
12
|
-
default: "#fff"
|
|
13
|
-
|
|
23
|
+
default: "#fff",
|
|
24
|
+
contrastText: "#000"
|
|
25
|
+
},
|
|
26
|
+
grey
|
|
14
27
|
}
|
|
15
|
-
}
|
|
16
|
-
const darkTheme =
|
|
28
|
+
};
|
|
29
|
+
const darkTheme = {
|
|
17
30
|
palette: {
|
|
18
31
|
mode: "dark",
|
|
19
32
|
primary: {
|
|
20
|
-
main: "#
|
|
33
|
+
main: "#487DFA",
|
|
21
34
|
contrastText: "#fff"
|
|
22
35
|
},
|
|
23
36
|
background: {
|
|
24
|
-
default: "#303030"
|
|
25
|
-
|
|
37
|
+
default: "#303030",
|
|
38
|
+
contrastText: "#fff"
|
|
39
|
+
},
|
|
40
|
+
grey
|
|
26
41
|
}
|
|
27
|
-
}
|
|
42
|
+
};
|
|
28
43
|
exports.darkTheme = darkTheme;
|
|
29
44
|
exports.lightTheme = lightTheme;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React, { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
themeColor: 'light' | 'dark';
|
|
4
|
+
buttonType: 'cancel' | 'next';
|
|
5
|
+
onClick: () => void;
|
|
6
|
+
text: string;
|
|
7
|
+
}
|
|
8
|
+
declare const Button: React.FC<ButtonProps>;
|
|
9
|
+
export default Button;
|
|
10
|
+
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAoC,MAAM,OAAO,CAAA;AAGrF,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACjE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,UAAU,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACf;AAgCD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmCjC,CAAA;AACD,eAAe,MAAM,CAAA"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { darkTheme, lightTheme } from './theme.js';
|
|
3
|
+
import { useMemo, useState } from 'react';
|
|
4
|
+
import addDataAttr from '../util/index.js';
|
|
5
|
+
const buttonStyleBase = {
|
|
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
|
+
appearance: undefined,
|
|
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
|
+
};
|
|
32
|
+
const Button = ({ themeColor, buttonType, text, onClick }) => {
|
|
33
|
+
const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
|
|
34
|
+
const [hover, setHover] = useState(false);
|
|
35
|
+
const buttonStyle = useMemo(() => {
|
|
36
|
+
const baseStyle = {
|
|
37
|
+
...buttonStyleBase,
|
|
38
|
+
color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText,
|
|
39
|
+
};
|
|
40
|
+
if (buttonType === 'cancel') {
|
|
41
|
+
return {
|
|
42
|
+
...baseStyle,
|
|
43
|
+
backgroundColor: hover ? theme.palette.grey[600] : 'transparent',
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
return {
|
|
48
|
+
...baseStyle,
|
|
49
|
+
backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default,
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
}, [buttonType, hover, theme]);
|
|
53
|
+
return (_jsx("button", { ...addDataAttr({ dev: { cy: `button-${buttonType}` } }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: buttonStyle, onClick: (e) => {
|
|
54
|
+
e.preventDefault();
|
|
55
|
+
onClick();
|
|
56
|
+
}, children: text }));
|
|
57
|
+
};
|
|
58
|
+
export default Button;
|
|
59
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAc,EAAuC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrF,OAAO,WAAW,MAAM,kBAAkB,CAAA;AAS1C,MAAM,eAAe,GAAkB;IACnC,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,EACN,+MAA+M;IACnN,KAAK,EAAE,cAAc;IACrB,eAAe,EAAE,SAAS;IAC1B,SAAS,EACL,+GAA+G;CACtH,CAAA;AAED,MAAM,MAAM,GAA0B,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAe,EAAE,EAAE;IAC7F,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAC5F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG;YACd,GAAG,eAAe;YAClB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY;SAC5F,CAAA;QACD,IAAI,UAAU,KAAK,QAAQ,EAAE;YACzB,OAAO;gBACH,GAAG,SAAS;gBACZ,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa;aACnE,CAAA;SACJ;aAAM;YACH,OAAO;gBACH,GAAG,SAAS;gBACZ,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;aACzF,CAAA;SACJ;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IAE9B,OAAO,CACH,oBACQ,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;YACX,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,OAAO,EAAE,CAAA;QACb,CAAC,YAEA,IAAI,GACA,CACZ,CAAA;AACL,CAAC,CAAA;AACD,eAAe,MAAM,CAAA"}
|
|
@@ -9,6 +9,6 @@ export interface CaptchaComponentProps {
|
|
|
9
9
|
onNext: () => void;
|
|
10
10
|
themeColor: 'light' | 'dark';
|
|
11
11
|
}
|
|
12
|
-
declare const CaptchaComponent: ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, themeColor, }: CaptchaComponentProps) => import("react/jsx-runtime").JSX.Element;
|
|
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;
|
|
14
14
|
//# sourceMappingURL=CaptchaComponent.d.ts.map
|
|
@@ -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,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAQjD,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,kBAAkB,CAAA;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,EAAE,EAAE,CAAA;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,gBAAgB,sFASnB,qBAAqB,qDA4GvB,CAAA;AAED,eAAe,gBAAgB,CAAA"}
|
|
@@ -1,48 +1,60 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Box, Button, Typography } from '@mui/material';
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
3
2
|
import { CaptchaWidget } from './CaptchaWidget.js';
|
|
4
3
|
import { at } from '@prosopo/util';
|
|
5
4
|
import { darkTheme, lightTheme } from './theme.js';
|
|
6
5
|
import { useMemo } from 'react';
|
|
7
6
|
import { useTranslation } from '@prosopo/common';
|
|
7
|
+
import Button from './Button.js';
|
|
8
8
|
import addDataAttr from '../util/index.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
13
|
const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
|
|
14
|
-
return (_jsx(
|
|
14
|
+
return (_jsx("div", { style: {
|
|
15
15
|
overflowX: 'auto',
|
|
16
16
|
overflowY: 'auto',
|
|
17
17
|
width: '100%',
|
|
18
18
|
maxWidth: '500px',
|
|
19
19
|
maxHeight: '100%',
|
|
20
|
-
|
|
20
|
+
display: 'flex',
|
|
21
|
+
flexDirection: 'column',
|
|
22
|
+
}, children: _jsxs("div", { style: {
|
|
23
|
+
backgroundColor: theme.palette.background.default,
|
|
21
24
|
display: 'flex',
|
|
22
25
|
flexDirection: 'column',
|
|
23
26
|
minWidth: '300px',
|
|
24
|
-
}, children: [_jsxs(
|
|
27
|
+
}, children: [_jsxs("div", { style: {
|
|
25
28
|
display: 'flex',
|
|
26
29
|
alignItems: 'center',
|
|
27
30
|
width: '100%',
|
|
28
|
-
|
|
31
|
+
backgroundColor: theme.palette.primary.main,
|
|
32
|
+
padding: '24px 16px',
|
|
33
|
+
}, children: [_jsxs("p", { style: {
|
|
29
34
|
color: '#ffffff',
|
|
30
35
|
fontWeight: 700,
|
|
31
|
-
|
|
36
|
+
lineHeight: 1.5,
|
|
37
|
+
}, children: [t('WIDGET.SELECT_ALL'), ': '] }), _jsx("p", { style: {
|
|
32
38
|
color: '#ffffff',
|
|
33
39
|
fontWeight: 700,
|
|
34
40
|
textTransform: 'capitalize',
|
|
35
|
-
|
|
36
|
-
}, children: `${at(challenge.captchas, index).captcha.target}` })] }), _jsx(
|
|
41
|
+
lineHeight: 1.5,
|
|
42
|
+
}, children: `${at(challenge.captchas, index).captcha.target}` })] }), _jsx("div", { ...addDataAttr({ dev: { cy: 'captcha-' + index } }), children: captcha && (_jsx(CaptchaWidget, { challenge: captcha, solution: solution, onClick: onClick, themeColor: themeColor })) }), _jsx("div", { style: {
|
|
37
43
|
display: 'flex',
|
|
38
44
|
alignItems: 'center',
|
|
39
45
|
justifyContent: 'center',
|
|
40
46
|
width: '100%',
|
|
41
|
-
}, ...addDataAttr({ dev: { cy: 'dots-captcha' } }) }),
|
|
47
|
+
}, ...addDataAttr({ dev: { cy: 'dots-captcha' } }) }), _jsx("div", { style: {
|
|
48
|
+
padding: '8px 16px',
|
|
49
|
+
display: 'flex',
|
|
50
|
+
width: '100%',
|
|
51
|
+
} }), _jsxs("div", { style: {
|
|
52
|
+
padding: '0 16px 16px',
|
|
42
53
|
display: 'flex',
|
|
43
54
|
alignItems: 'center',
|
|
44
55
|
justifyContent: 'space-between',
|
|
45
|
-
|
|
56
|
+
lineHeight: 1.75,
|
|
57
|
+
}, children: [_jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t('WIDGET.CANCEL') }), _jsx(Button, { themeColor: themeColor, buttonType: "next", text: index < challenge.captchas.length - 1 ? t('WIDGET.NEXT') : t('WIDGET.SUBMIT'), onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit })] })] }) }));
|
|
46
58
|
};
|
|
47
59
|
export default CaptchaComponent;
|
|
48
60
|
//# sourceMappingURL=CaptchaComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaptchaComponent.js","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"CaptchaComponent.js","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ export interface CaptchaWidgetProps {
|
|
|
3
3
|
challenge: CaptchaResponseCaptcha;
|
|
4
4
|
solution: string[];
|
|
5
5
|
onClick: (hash: string) => void;
|
|
6
|
+
themeColor: 'light' | 'dark';
|
|
6
7
|
}
|
|
7
|
-
export declare const CaptchaWidget: ({ challenge, solution, onClick }: CaptchaWidgetProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const CaptchaWidget: ({ challenge, solution, onClick, themeColor }: CaptchaWidgetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
8
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":"AAaA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAI5D,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,sBAAsB,CAAA;IACjC,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AASD,eAAO,MAAM,aAAa,iDAAkD,kBAAkB,qDAsH7F,CAAA"}
|