@prosopo/procaptcha-common 2.7.8 → 2.7.10
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/CHANGELOG.md +33 -0
- package/dist/callbacks/defaultCallbacks.js +149 -114
- package/dist/callbacks/defaultEvents.js +6 -4
- package/dist/elements/form.js +13 -8
- package/dist/elements/window.js +11 -7
- package/dist/extensionLoader.js +4 -4
- package/dist/index.js +21 -9
- package/dist/providers.js +33 -26
- package/dist/reactComponents/Checkbox.js +104 -56
- package/dist/reactComponents/Reload.js +79 -40
- package/dist/state/builder.js +82 -83
- package/package.json +18 -15
- package/vite.cjs.config.ts +2 -2
- package/vite.esm.config.ts +20 -0
- package/dist/callbacks/defaultCallbacks.d.ts +0 -4
- package/dist/callbacks/defaultCallbacks.d.ts.map +0 -1
- package/dist/callbacks/defaultCallbacks.js.map +0 -1
- package/dist/callbacks/defaultEvents.d.ts +0 -14
- package/dist/callbacks/defaultEvents.d.ts.map +0 -1
- package/dist/callbacks/defaultEvents.js.map +0 -1
- package/dist/elements/form.d.ts +0 -3
- package/dist/elements/form.d.ts.map +0 -1
- package/dist/elements/form.js.map +0 -1
- package/dist/elements/window.d.ts +0 -2
- package/dist/elements/window.d.ts.map +0 -1
- package/dist/elements/window.js.map +0 -1
- package/dist/extensionLoader.d.ts +0 -2
- package/dist/extensionLoader.d.ts.map +0 -1
- package/dist/extensionLoader.js.map +0 -1
- package/dist/index.d.ts +0 -9
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/providers.d.ts +0 -4
- package/dist/providers.d.ts.map +0 -1
- package/dist/providers.js.map +0 -1
- package/dist/reactComponents/Checkbox.d.ts +0 -13
- package/dist/reactComponents/Checkbox.d.ts.map +0 -1
- package/dist/reactComponents/Checkbox.js.map +0 -1
- package/dist/reactComponents/Reload.d.ts +0 -8
- package/dist/reactComponents/Reload.d.ts.map +0 -1
- package/dist/reactComponents/Reload.js.map +0 -1
- package/dist/state/builder.d.ts +0 -9
- package/dist/state/builder.d.ts.map +0 -1
- package/dist/state/builder.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,38 @@
|
|
|
1
1
|
# @prosopo/procaptcha-common
|
|
2
2
|
|
|
3
|
+
## 2.7.10
|
|
4
|
+
### Patch Changes
|
|
5
|
+
|
|
6
|
+
- 3573f0b: fix npm scripts bundle command
|
|
7
|
+
- 3573f0b: build using vite, typecheck using tsc
|
|
8
|
+
- efd8102: Add tests for unwrap error helper
|
|
9
|
+
- 3573f0b: standardise all vite based npm scripts for bundling
|
|
10
|
+
- Updated dependencies [52dbf21]
|
|
11
|
+
- Updated dependencies [93d5e50]
|
|
12
|
+
- Updated dependencies [3573f0b]
|
|
13
|
+
- Updated dependencies [3573f0b]
|
|
14
|
+
- Updated dependencies [efd8102]
|
|
15
|
+
- Updated dependencies [93d5e50]
|
|
16
|
+
- Updated dependencies [63519d7]
|
|
17
|
+
- Updated dependencies [f29fc7e]
|
|
18
|
+
- Updated dependencies [3573f0b]
|
|
19
|
+
- Updated dependencies [2d0dd8a]
|
|
20
|
+
- @prosopo/util@3.0.3
|
|
21
|
+
- @prosopo/widget-skeleton@2.6.1
|
|
22
|
+
- @prosopo/types@3.0.4
|
|
23
|
+
- @prosopo/load-balancer@2.6.15
|
|
24
|
+
- @prosopo/account@2.7.10
|
|
25
|
+
- @prosopo/common@3.1.0
|
|
26
|
+
- @prosopo/config@3.1.1
|
|
27
|
+
|
|
28
|
+
## 2.7.9
|
|
29
|
+
### Patch Changes
|
|
30
|
+
|
|
31
|
+
- Updated dependencies [b0d7207]
|
|
32
|
+
- @prosopo/types@3.0.3
|
|
33
|
+
- @prosopo/account@2.7.9
|
|
34
|
+
- @prosopo/load-balancer@2.6.14
|
|
35
|
+
|
|
3
36
|
## 2.7.8
|
|
4
37
|
### Patch Changes
|
|
5
38
|
|
|
@@ -1,123 +1,158 @@
|
|
|
1
|
-
import { ApiParams
|
|
2
|
-
import {
|
|
1
|
+
import { ApiParams } from "@prosopo/types";
|
|
2
|
+
import { removeProcaptchaResponse, getParentForm } from "../elements/form.js";
|
|
3
3
|
import { getWindowCallback } from "../elements/window.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
4
|
+
const getDefaultCallbacks = (element) => ({
|
|
5
|
+
onHuman: (token) => handleOnHuman(token, element),
|
|
6
|
+
onChallengeExpired: () => {
|
|
7
|
+
removeProcaptchaResponse();
|
|
8
|
+
console.log("Challenge expired");
|
|
9
|
+
},
|
|
10
|
+
onExtensionNotFound: () => {
|
|
11
|
+
console.error("Extension not found");
|
|
12
|
+
},
|
|
13
|
+
onExpired: () => {
|
|
14
|
+
removeProcaptchaResponse();
|
|
15
|
+
},
|
|
16
|
+
onError: (error) => {
|
|
17
|
+
removeProcaptchaResponse();
|
|
18
|
+
console.error(error);
|
|
19
|
+
},
|
|
20
|
+
onClose: () => {
|
|
21
|
+
console.log("Challenge closed");
|
|
22
|
+
},
|
|
23
|
+
onOpen: () => {
|
|
24
|
+
console.log("Challenge opened");
|
|
25
|
+
},
|
|
26
|
+
onFailed: () => {
|
|
27
|
+
alert("Captcha challenge failed. Please try again");
|
|
28
|
+
console.log("Challenge failed");
|
|
29
|
+
},
|
|
30
|
+
onReset: () => {
|
|
31
|
+
removeProcaptchaResponse();
|
|
32
|
+
console.log("Captcha widget reset");
|
|
33
|
+
},
|
|
34
|
+
onReload: () => {
|
|
35
|
+
console.log("Challenge reloaded");
|
|
36
|
+
}
|
|
37
37
|
});
|
|
38
38
|
const getUserCallback = (callback, element, callbackFnOrName) => {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
if (typeof callbackFnOrName === "function") {
|
|
47
|
-
return callbackFnOrName;
|
|
48
|
-
}
|
|
49
|
-
if (typeof callbackFnOrName === "string") {
|
|
50
|
-
return getWindowCallback(callbackFnOrName);
|
|
39
|
+
const callbackFnName = element.getAttribute(`data-${callback}`);
|
|
40
|
+
if (callbackFnName) {
|
|
41
|
+
const callbackFn = getWindowCallback(callbackFnName);
|
|
42
|
+
if (callbackFn) {
|
|
43
|
+
return callbackFn;
|
|
51
44
|
}
|
|
45
|
+
}
|
|
46
|
+
if (typeof callbackFnOrName === "function") {
|
|
47
|
+
return callbackFnOrName;
|
|
48
|
+
}
|
|
49
|
+
if (typeof callbackFnOrName === "string") {
|
|
50
|
+
return getWindowCallback(callbackFnOrName);
|
|
51
|
+
}
|
|
52
52
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
53
|
+
function setUserCallbacks(renderOptions, callbacks, element) {
|
|
54
|
+
const humanCallback = getUserCallback(
|
|
55
|
+
"callback",
|
|
56
|
+
element,
|
|
57
|
+
renderOptions?.callback
|
|
58
|
+
);
|
|
59
|
+
if (humanCallback) {
|
|
60
|
+
callbacks.onHuman = (token) => {
|
|
61
|
+
handleOnHuman(token, element);
|
|
62
|
+
humanCallback(token);
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
const chalExpiredCallback = getUserCallback(
|
|
66
|
+
"chalexpired-callback",
|
|
67
|
+
element,
|
|
68
|
+
renderOptions?.["chalexpired-callback"]
|
|
69
|
+
);
|
|
70
|
+
if (chalExpiredCallback) {
|
|
71
|
+
callbacks.onChallengeExpired = () => {
|
|
72
|
+
removeProcaptchaResponse();
|
|
73
|
+
chalExpiredCallback();
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
const expiredCallback = getUserCallback(
|
|
77
|
+
"expired-callback",
|
|
78
|
+
element,
|
|
79
|
+
renderOptions?.["expired-callback"]
|
|
80
|
+
);
|
|
81
|
+
if (expiredCallback) {
|
|
82
|
+
callbacks.onExpired = () => {
|
|
83
|
+
removeProcaptchaResponse();
|
|
84
|
+
expiredCallback();
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
const errorCallback = getUserCallback(
|
|
88
|
+
"error-callback",
|
|
89
|
+
element,
|
|
90
|
+
renderOptions?.["error-callback"]
|
|
91
|
+
);
|
|
92
|
+
if (errorCallback) {
|
|
93
|
+
callbacks.onError = (error) => {
|
|
94
|
+
removeProcaptchaResponse();
|
|
95
|
+
errorCallback(error);
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
const closeCallback = getUserCallback(
|
|
99
|
+
"close-callback",
|
|
100
|
+
element,
|
|
101
|
+
renderOptions?.["close-callback"]
|
|
102
|
+
);
|
|
103
|
+
if (closeCallback) {
|
|
104
|
+
callbacks.onClose = () => {
|
|
105
|
+
closeCallback();
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
const openCallback = getUserCallback(
|
|
109
|
+
"open-callback",
|
|
110
|
+
element,
|
|
111
|
+
renderOptions?.["open-callback"]
|
|
112
|
+
);
|
|
113
|
+
if (openCallback) {
|
|
114
|
+
callbacks.onOpen = () => {
|
|
115
|
+
openCallback();
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
const failedCallback = getUserCallback(
|
|
119
|
+
"failed-callback",
|
|
120
|
+
element,
|
|
121
|
+
renderOptions?.["failed-callback"]
|
|
122
|
+
);
|
|
123
|
+
if (failedCallback) {
|
|
124
|
+
callbacks.onFailed = () => {
|
|
125
|
+
failedCallback();
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
const resetCallback = getUserCallback(
|
|
129
|
+
"reset-callback",
|
|
130
|
+
element,
|
|
131
|
+
renderOptions?.["reset-callback"]
|
|
132
|
+
);
|
|
133
|
+
if (resetCallback) {
|
|
134
|
+
callbacks.onReset = () => {
|
|
135
|
+
removeProcaptchaResponse();
|
|
136
|
+
resetCallback();
|
|
137
|
+
};
|
|
138
|
+
}
|
|
107
139
|
}
|
|
108
140
|
const handleOnHuman = (token, element) => {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
const input = document.createElement("input");
|
|
117
|
-
input.type = "hidden";
|
|
118
|
-
input.name = ApiParams.procaptchaResponse;
|
|
119
|
-
input.value = token;
|
|
120
|
-
form.appendChild(input);
|
|
141
|
+
removeProcaptchaResponse();
|
|
142
|
+
if (element) {
|
|
143
|
+
const form = getParentForm(element);
|
|
144
|
+
if (!form) {
|
|
145
|
+
console.error("Parent form not found for the element:", element);
|
|
146
|
+
return;
|
|
121
147
|
}
|
|
148
|
+
const input = document.createElement("input");
|
|
149
|
+
input.type = "hidden";
|
|
150
|
+
input.name = ApiParams.procaptchaResponse;
|
|
151
|
+
input.value = token;
|
|
152
|
+
form.appendChild(input);
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
export {
|
|
156
|
+
getDefaultCallbacks,
|
|
157
|
+
setUserCallbacks
|
|
122
158
|
};
|
|
123
|
-
//# sourceMappingURL=defaultCallbacks.js.map
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { getDefaultCallbacks } from "./defaultCallbacks.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
const getDefaultEvents = (callbacks) => ({
|
|
3
|
+
...getDefaultCallbacks(void 0),
|
|
4
|
+
...callbacks
|
|
5
5
|
});
|
|
6
|
-
|
|
6
|
+
export {
|
|
7
|
+
getDefaultEvents
|
|
8
|
+
};
|
package/dist/elements/form.js
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { ApiParams } from "@prosopo/types";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
function getParentForm(widgetElement) {
|
|
3
|
+
const rootWidgetNode = widgetElement.getRootNode();
|
|
4
|
+
const topWidgetElement = rootWidgetNode instanceof ShadowRoot ? rootWidgetNode.host : widgetElement;
|
|
5
|
+
return topWidgetElement.closest("form");
|
|
6
6
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
const removeProcaptchaResponse = () => {
|
|
8
|
+
const element = Array.from(
|
|
9
|
+
document.getElementsByName(ApiParams.procaptchaResponse)
|
|
10
|
+
);
|
|
11
|
+
element.map((el) => el.remove());
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
getParentForm,
|
|
15
|
+
removeProcaptchaResponse
|
|
10
16
|
};
|
|
11
|
-
//# sourceMappingURL=form.js.map
|
package/dist/elements/window.js
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
const getWindowCallback = (callbackName) => {
|
|
2
|
+
const fn = window[callbackName.replace("window.", "")];
|
|
3
|
+
if (typeof fn !== "function") {
|
|
4
|
+
throw new Error(
|
|
5
|
+
`Callback ${callbackName} is not defined on the window object`
|
|
6
|
+
);
|
|
7
|
+
}
|
|
8
|
+
return fn;
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
getWindowCallback
|
|
7
12
|
};
|
|
8
|
-
//# sourceMappingURL=window.js.map
|
package/dist/extensionLoader.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
const ExtensionLoader = async (web2) => web2 ? (await import("@prosopo/account/extension/ExtensionWeb2")).default : (await import("@prosopo/account/extension/ExtensionWeb3")).default;
|
|
2
|
+
export {
|
|
3
|
+
ExtensionLoader
|
|
4
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { getRandomActiveProvider, providerRetry } from "./providers.js";
|
|
2
|
+
import { buildUpdateState, useProcaptcha } from "./state/builder.js";
|
|
3
|
+
import { getDefaultCallbacks, setUserCallbacks } from "./callbacks/defaultCallbacks.js";
|
|
4
|
+
import { getDefaultEvents } from "./callbacks/defaultEvents.js";
|
|
5
|
+
import { ExtensionLoader } from "./extensionLoader.js";
|
|
6
|
+
import { getWindowCallback } from "./elements/window.js";
|
|
7
|
+
import { ReloadButton } from "./reactComponents/Reload.js";
|
|
8
|
+
import { Checkbox } from "./reactComponents/Checkbox.js";
|
|
9
|
+
export {
|
|
10
|
+
Checkbox,
|
|
11
|
+
ExtensionLoader,
|
|
12
|
+
ReloadButton,
|
|
13
|
+
buildUpdateState,
|
|
14
|
+
getDefaultCallbacks,
|
|
15
|
+
getDefaultEvents,
|
|
16
|
+
getRandomActiveProvider,
|
|
17
|
+
getWindowCallback,
|
|
18
|
+
providerRetry,
|
|
19
|
+
setUserCallbacks,
|
|
20
|
+
useProcaptcha
|
|
21
|
+
};
|
package/dist/providers.js
CHANGED
|
@@ -1,33 +1,40 @@
|
|
|
1
1
|
import { loadBalancer } from "@prosopo/load-balancer";
|
|
2
2
|
import { at } from "@prosopo/util";
|
|
3
3
|
let providers = [];
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
const getRandomActiveProvider = async (config) => {
|
|
5
|
+
const randomIntBetween = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
|
|
6
|
+
if (providers.length === 0) {
|
|
7
|
+
providers = await loadBalancer(config.defaultEnvironment);
|
|
8
|
+
}
|
|
9
|
+
const randomProvderObj = at(
|
|
10
|
+
providers,
|
|
11
|
+
randomIntBetween(0, providers.length - 1)
|
|
12
|
+
);
|
|
13
|
+
return {
|
|
14
|
+
providerAccount: randomProvderObj.address,
|
|
15
|
+
provider: {
|
|
16
|
+
url: randomProvderObj.url,
|
|
17
|
+
datasetId: randomProvderObj.datasetId
|
|
8
18
|
}
|
|
9
|
-
|
|
10
|
-
return {
|
|
11
|
-
providerAccount: randomProvderObj.address,
|
|
12
|
-
provider: {
|
|
13
|
-
url: randomProvderObj.url,
|
|
14
|
-
datasetId: randomProvderObj.datasetId,
|
|
15
|
-
},
|
|
16
|
-
};
|
|
19
|
+
};
|
|
17
20
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
console.error(err);
|
|
29
|
-
stateReset();
|
|
30
|
-
await retryFn();
|
|
21
|
+
const providerRetry = async (currentFn, retryFn, stateReset, attemptCount, retryMax) => {
|
|
22
|
+
try {
|
|
23
|
+
await currentFn();
|
|
24
|
+
} catch (err) {
|
|
25
|
+
if (attemptCount >= retryMax) {
|
|
26
|
+
console.error(err);
|
|
27
|
+
console.error(
|
|
28
|
+
`Max retries (${attemptCount} of ${retryMax}) reached, aborting`
|
|
29
|
+
);
|
|
30
|
+
return stateReset();
|
|
31
31
|
}
|
|
32
|
+
console.error(err);
|
|
33
|
+
stateReset();
|
|
34
|
+
await retryFn();
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
export {
|
|
38
|
+
getRandomActiveProvider,
|
|
39
|
+
providerRetry
|
|
32
40
|
};
|
|
33
|
-
//# sourceMappingURL=providers.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { css } from "@emotion/react";
|
|
3
3
|
import styled from "@emotion/styled";
|
|
4
|
-
import { WIDGET_CHECKBOX_SPINNER_CSS_CLASS
|
|
5
|
-
import {
|
|
6
|
-
const checkboxBefore = css
|
|
4
|
+
import { WIDGET_CHECKBOX_SPINNER_CSS_CLASS } from "@prosopo/widget-skeleton";
|
|
5
|
+
import { useState, useMemo } from "react";
|
|
6
|
+
const checkboxBefore = css`{
|
|
7
7
|
&:before {
|
|
8
8
|
content: '""';
|
|
9
9
|
position: absolute;
|
|
@@ -12,34 +12,42 @@ const checkboxBefore = css `{
|
|
|
12
12
|
}
|
|
13
13
|
}`;
|
|
14
14
|
const baseStyle = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
15
|
+
width: "28px",
|
|
16
|
+
height: "28px",
|
|
17
|
+
minWidth: "14px",
|
|
18
|
+
minHeight: "14px",
|
|
19
|
+
top: "auto",
|
|
20
|
+
left: "auto",
|
|
21
|
+
opacity: "1",
|
|
22
|
+
borderRadius: "12.5%",
|
|
23
|
+
appearance: "none",
|
|
24
|
+
cursor: "pointer",
|
|
25
|
+
margin: "0",
|
|
26
|
+
borderStyle: "solid",
|
|
27
|
+
borderWidth: "1px"
|
|
28
28
|
};
|
|
29
29
|
const ID_LETTERS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
30
|
-
const FAQ_LINK = process.env.PROSOPO_DOCS_URL
|
|
31
|
-
? `${new URL(`${process.env.PROSOPO_DOCS_URL}/en/basics/faq/`).href}/`
|
|
32
|
-
: "https://docs.prosopo.io/en/basics/faq/";
|
|
30
|
+
const FAQ_LINK = process.env.PROSOPO_DOCS_URL ? `${new URL(`${process.env.PROSOPO_DOCS_URL}/en/basics/faq/`).href}/` : "https://docs.prosopo.io/en/basics/faq/";
|
|
33
31
|
const generateRandomId = () => {
|
|
34
|
-
|
|
32
|
+
return Array.from(
|
|
33
|
+
{ length: 8 },
|
|
34
|
+
() => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)]
|
|
35
|
+
).join("");
|
|
35
36
|
};
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
const Checkbox = ({
|
|
38
|
+
theme,
|
|
39
|
+
onChange,
|
|
40
|
+
checked,
|
|
41
|
+
labelText,
|
|
42
|
+
error,
|
|
43
|
+
loading
|
|
44
|
+
}) => {
|
|
45
|
+
const checkboxStyleBase = {
|
|
46
|
+
...baseStyle,
|
|
47
|
+
border: `1px solid ${theme.palette.background.contrastText}`
|
|
48
|
+
};
|
|
49
|
+
const [hover, setHover] = useState(false);
|
|
50
|
+
const ResponsiveLabel = styled.label`
|
|
43
51
|
color: ${theme.palette.background.contrastText};
|
|
44
52
|
position: relative;
|
|
45
53
|
display: flex;
|
|
@@ -59,32 +67,72 @@ export const Checkbox = ({ theme, onChange, checked, labelText, error, loading,
|
|
|
59
67
|
font-size: 16px;
|
|
60
68
|
}
|
|
61
69
|
`;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
70
|
+
const checkboxStyle = useMemo(() => {
|
|
71
|
+
return {
|
|
72
|
+
...checkboxStyleBase,
|
|
73
|
+
borderColor: hover ? theme.palette.background.contrastText : theme.palette.border,
|
|
74
|
+
appearance: checked ? "auto" : "none",
|
|
75
|
+
flex: 1,
|
|
76
|
+
margin: "15px",
|
|
77
|
+
minWidth: "28px",
|
|
78
|
+
minHeight: "28px"
|
|
79
|
+
};
|
|
80
|
+
}, [hover, theme, checked]);
|
|
81
|
+
const id = generateRandomId();
|
|
82
|
+
return /* @__PURE__ */ jsxs(
|
|
83
|
+
"span",
|
|
84
|
+
{
|
|
85
|
+
style: {
|
|
86
|
+
display: "inline-flex",
|
|
87
|
+
alignItems: "center",
|
|
88
|
+
minHeight: "58px"
|
|
89
|
+
},
|
|
90
|
+
children: [
|
|
91
|
+
loading ? /* @__PURE__ */ jsx(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
className: WIDGET_CHECKBOX_SPINNER_CSS_CLASS,
|
|
95
|
+
"aria-label": "Loading spinner"
|
|
96
|
+
}
|
|
97
|
+
) : /* @__PURE__ */ jsx(
|
|
98
|
+
"input",
|
|
99
|
+
{
|
|
100
|
+
name: id,
|
|
101
|
+
id,
|
|
102
|
+
onMouseEnter: () => setHover(true),
|
|
103
|
+
onMouseLeave: () => setHover(false),
|
|
104
|
+
css: checkboxBefore,
|
|
105
|
+
type: "checkbox",
|
|
106
|
+
"aria-live": "assertive",
|
|
107
|
+
"aria-label": labelText,
|
|
108
|
+
onChange: (e) => {
|
|
109
|
+
e.preventDefault();
|
|
110
|
+
e.stopPropagation();
|
|
111
|
+
setHover(false);
|
|
112
|
+
onChange();
|
|
113
|
+
},
|
|
114
|
+
checked,
|
|
115
|
+
style: checkboxStyle,
|
|
116
|
+
disabled: error !== void 0,
|
|
117
|
+
className: loading ? "checkbox__loading-spinner" : "",
|
|
118
|
+
"data-cy": "captcha-checkbox"
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
error ? /* @__PURE__ */ jsx(ResponsiveLabel, { htmFor: id, children: /* @__PURE__ */ jsx(
|
|
122
|
+
"a",
|
|
123
|
+
{
|
|
124
|
+
css: {
|
|
125
|
+
color: theme.palette.error.main
|
|
126
|
+
},
|
|
127
|
+
href: FAQ_LINK,
|
|
128
|
+
children: error
|
|
129
|
+
}
|
|
130
|
+
) }) : /* @__PURE__ */ jsx(ResponsiveLabel, { htmFor: id, children: labelText })
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
);
|
|
134
|
+
};
|
|
135
|
+
export {
|
|
136
|
+
Checkbox,
|
|
137
|
+
Checkbox as default
|
|
88
138
|
};
|
|
89
|
-
export default Checkbox;
|
|
90
|
-
//# sourceMappingURL=Checkbox.js.map
|