@prosopo/procaptcha-pow 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/ProcaptchaPoW.cjs +1 -1
- package/dist/cjs/components/ProcaptchaWidget.cjs +132 -0
- package/dist/cjs/index.cjs +1 -1
- package/dist/components/Captcha.d.ts +1 -3
- package/dist/components/Captcha.d.ts.map +1 -1
- package/dist/components/Captcha.js +1 -57
- package/dist/components/Captcha.js.map +1 -1
- package/dist/components/ProcaptchaPoW.d.ts.map +1 -1
- package/dist/components/ProcaptchaPoW.js +1 -1
- package/dist/components/ProcaptchaPoW.js.map +1 -1
- package/dist/components/ProcaptchaWidget.d.ts +4 -0
- package/dist/components/ProcaptchaWidget.d.ts.map +1 -0
- package/dist/components/ProcaptchaWidget.js +62 -0
- package/dist/components/ProcaptchaWidget.js.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +14 -13
- package/dist/cjs/components/Captcha.cjs +0 -122
|
@@ -4,6 +4,6 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
4
4
|
const webComponents = require("@prosopo/web-components");
|
|
5
5
|
const react = require("react");
|
|
6
6
|
const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
|
|
7
|
-
const ProcaptchaWidget = react.lazy(async () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./
|
|
7
|
+
const ProcaptchaWidget = react.lazy(async () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./ProcaptchaWidget.cjs"))));
|
|
8
8
|
const ProcaptchaPow = (props) => /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(webComponents.ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: /* @__PURE__ */ jsxRuntime.jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) });
|
|
9
9
|
exports.ProcaptchaPow = ProcaptchaPow;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
3
|
+
const procaptchaCommon = require("@prosopo/procaptcha-common");
|
|
4
|
+
const webComponents = require("@prosopo/web-components");
|
|
5
|
+
const react = require("react");
|
|
6
|
+
const Manager = require("../Services/Manager.cjs");
|
|
7
|
+
const Procaptcha = (props) => {
|
|
8
|
+
const config = props.config;
|
|
9
|
+
const themeColor = config.theme === "light" ? "light" : "dark";
|
|
10
|
+
const theme = props.config.theme === "light" ? webComponents.lightTheme : webComponents.darkTheme;
|
|
11
|
+
const callbacks = props.callbacks || {};
|
|
12
|
+
const [state, _updateState] = procaptchaCommon.useProcaptcha(react.useState, react.useRef);
|
|
13
|
+
const updateState = procaptchaCommon.buildUpdateState(state, _updateState);
|
|
14
|
+
const manager = react.useRef(Manager.Manager(config, state, updateState, callbacks));
|
|
15
|
+
const captchaRef = react.useRef(null);
|
|
16
|
+
react.useEffect(() => {
|
|
17
|
+
const element = captchaRef.current;
|
|
18
|
+
if (!element) return;
|
|
19
|
+
const form = element.closest("form");
|
|
20
|
+
if (!form) return;
|
|
21
|
+
const handleSubmit = () => {
|
|
22
|
+
manager.current.resetState();
|
|
23
|
+
};
|
|
24
|
+
form.addEventListener("submit", handleSubmit);
|
|
25
|
+
return () => {
|
|
26
|
+
form.removeEventListener("submit", handleSubmit);
|
|
27
|
+
};
|
|
28
|
+
}, []);
|
|
29
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: captchaRef, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
style: {
|
|
33
|
+
maxWidth: webComponents.WIDGET_MAX_WIDTH,
|
|
34
|
+
maxHeight: "100%",
|
|
35
|
+
overflowX: "auto"
|
|
36
|
+
},
|
|
37
|
+
children: /* @__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: [
|
|
38
|
+
" ",
|
|
39
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
40
|
+
"div",
|
|
41
|
+
{
|
|
42
|
+
style: {
|
|
43
|
+
padding: webComponents.WIDGET_PADDING,
|
|
44
|
+
border: webComponents.WIDGET_BORDER,
|
|
45
|
+
backgroundColor: theme.palette.background.default,
|
|
46
|
+
borderColor: theme.palette.grey[300],
|
|
47
|
+
borderRadius: webComponents.WIDGET_BORDER_RADIUS,
|
|
48
|
+
display: "flex",
|
|
49
|
+
alignItems: "center",
|
|
50
|
+
flexWrap: "wrap",
|
|
51
|
+
justifyContent: "space-between",
|
|
52
|
+
minHeight: `${webComponents.WIDGET_INNER_HEIGHT}px`,
|
|
53
|
+
overflow: "hidden"
|
|
54
|
+
},
|
|
55
|
+
children: [
|
|
56
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
style: { display: "inline-flex", flexDirection: "column" },
|
|
60
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
style: {
|
|
64
|
+
display: "flex",
|
|
65
|
+
justifyContent: "flex-start",
|
|
66
|
+
alignItems: "center",
|
|
67
|
+
flexWrap: "wrap"
|
|
68
|
+
},
|
|
69
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
style: {
|
|
73
|
+
display: "flex",
|
|
74
|
+
alignItems: "center",
|
|
75
|
+
justifyContent: "center",
|
|
76
|
+
flexDirection: "column",
|
|
77
|
+
verticalAlign: "middle"
|
|
78
|
+
},
|
|
79
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
80
|
+
"div",
|
|
81
|
+
{
|
|
82
|
+
style: {
|
|
83
|
+
display: "flex"
|
|
84
|
+
},
|
|
85
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: state.loading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
webComponents.LoadingSpinner,
|
|
87
|
+
{
|
|
88
|
+
themeColor,
|
|
89
|
+
"aria-label": "Loading spinner"
|
|
90
|
+
}
|
|
91
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
92
|
+
webComponents.Checkbox,
|
|
93
|
+
{
|
|
94
|
+
checked: state.isHuman,
|
|
95
|
+
onChange: manager.current.start,
|
|
96
|
+
themeColor,
|
|
97
|
+
labelText: "I am human",
|
|
98
|
+
"aria-label": "human checkbox"
|
|
99
|
+
}
|
|
100
|
+
) })
|
|
101
|
+
}
|
|
102
|
+
)
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
),
|
|
109
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
110
|
+
"div",
|
|
111
|
+
{
|
|
112
|
+
style: { display: "inline-flex", flexDirection: "column" },
|
|
113
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
114
|
+
"a",
|
|
115
|
+
{
|
|
116
|
+
href: webComponents.WIDGET_URL,
|
|
117
|
+
target: "_blank",
|
|
118
|
+
"aria-label": webComponents.WIDGET_URL_TEXT,
|
|
119
|
+
rel: "noreferrer",
|
|
120
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(webComponents.Logo, { themeColor, "aria-label": "Prosopo logo" }) })
|
|
121
|
+
}
|
|
122
|
+
)
|
|
123
|
+
}
|
|
124
|
+
)
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
)
|
|
128
|
+
] }) }) })
|
|
129
|
+
}
|
|
130
|
+
) });
|
|
131
|
+
};
|
|
132
|
+
module.exports = Procaptcha;
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
require("./components/
|
|
3
|
+
require("./components/ProcaptchaWidget.cjs");
|
|
4
4
|
const ProcaptchaPoW = require("./components/ProcaptchaPoW.cjs");
|
|
5
5
|
exports.ProcaptchaPow = ProcaptchaPoW.ProcaptchaPow;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Captcha.d.ts","sourceRoot":"","sources":["../../src/components/Captcha.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Captcha.d.ts","sourceRoot":"","sources":["../../src/components/Captcha.tsx"],"names":[],"mappings":""}
|
|
@@ -1,58 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { buildUpdateState, useProcaptcha } from "@prosopo/procaptcha-common";
|
|
3
|
-
import { Checkbox, ContainerDiv, LoadingSpinner, Logo, WIDGET_BORDER, WIDGET_BORDER_RADIUS, WIDGET_DIMENSIONS, WIDGET_INNER_HEIGHT, WIDGET_PADDING, WIDGET_URL, WIDGET_URL_TEXT, WidthBasedStylesDiv, darkTheme, lightTheme, } from "@prosopo/web-components";
|
|
4
|
-
import { useEffect, useRef, useState } from "react";
|
|
5
|
-
import { Manager } from "../Services/Manager.js";
|
|
6
|
-
const Procaptcha = (props) => {
|
|
7
|
-
const config = props.config;
|
|
8
|
-
const themeColor = config.theme === "light" ? "light" : "dark";
|
|
9
|
-
const theme = props.config.theme === "light" ? lightTheme : darkTheme;
|
|
10
|
-
const callbacks = props.callbacks || {};
|
|
11
|
-
const [state, _updateState] = useProcaptcha(useState, useRef);
|
|
12
|
-
const updateState = buildUpdateState(state, _updateState);
|
|
13
|
-
const manager = useRef(Manager(config, state, updateState, callbacks));
|
|
14
|
-
const captchaRef = useRef(null);
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
const element = captchaRef.current;
|
|
17
|
-
if (!element)
|
|
18
|
-
return;
|
|
19
|
-
const form = element.closest("form");
|
|
20
|
-
if (!form)
|
|
21
|
-
return;
|
|
22
|
-
const handleSubmit = () => {
|
|
23
|
-
manager.current.resetState();
|
|
24
|
-
};
|
|
25
|
-
form.addEventListener("submit", handleSubmit);
|
|
26
|
-
return () => {
|
|
27
|
-
form.removeEventListener("submit", handleSubmit);
|
|
28
|
-
};
|
|
29
|
-
}, []);
|
|
30
|
-
return (_jsx("div", { ref: captchaRef, children: _jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: _jsx(ContainerDiv, { children: _jsx(WidthBasedStylesDiv, { children: _jsxs("div", { style: WIDGET_DIMENSIONS, "data-cy": "button-human", children: [" ", _jsxs("div", { style: {
|
|
31
|
-
padding: WIDGET_PADDING,
|
|
32
|
-
border: WIDGET_BORDER,
|
|
33
|
-
backgroundColor: theme.palette.background.default,
|
|
34
|
-
borderColor: theme.palette.grey[300],
|
|
35
|
-
borderRadius: WIDGET_BORDER_RADIUS,
|
|
36
|
-
display: "flex",
|
|
37
|
-
alignItems: "center",
|
|
38
|
-
flexWrap: "wrap",
|
|
39
|
-
justifyContent: "space-between",
|
|
40
|
-
minHeight: `${WIDGET_INNER_HEIGHT}px`,
|
|
41
|
-
overflow: "hidden",
|
|
42
|
-
}, children: [_jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: _jsx("div", { style: {
|
|
43
|
-
display: "flex",
|
|
44
|
-
justifyContent: "flex-start",
|
|
45
|
-
alignItems: "center",
|
|
46
|
-
flexWrap: "wrap",
|
|
47
|
-
}, children: _jsx("div", { style: {
|
|
48
|
-
display: "flex",
|
|
49
|
-
alignItems: "center",
|
|
50
|
-
justifyContent: "center",
|
|
51
|
-
flexDirection: "column",
|
|
52
|
-
verticalAlign: "middle",
|
|
53
|
-
}, children: _jsx("div", { style: {
|
|
54
|
-
display: "flex",
|
|
55
|
-
}, children: _jsx("div", { style: { flex: 1 }, children: state.loading ? (_jsx(LoadingSpinner, { themeColor: themeColor, "aria-label": "Loading spinner" })) : (_jsx(Checkbox, { checked: state.isHuman, onChange: manager.current.start, themeColor: themeColor, labelText: "I am human", "aria-label": "human checkbox" })) }) }) }) }) }), _jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: _jsx("a", { href: WIDGET_URL, target: "_blank", "aria-label": WIDGET_URL_TEXT, rel: "noreferrer", children: _jsx("div", { style: { flex: 1 }, children: _jsx(Logo, { themeColor: themeColor, "aria-label": "Prosopo logo" }) }) }) })] })] }) }) }) }) }));
|
|
56
|
-
};
|
|
57
|
-
export default Procaptcha;
|
|
1
|
+
export {};
|
|
58
2
|
//# sourceMappingURL=Captcha.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Captcha.js","sourceRoot":"","sources":["../../src/components/Captcha.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Captcha.js","sourceRoot":"","sources":["../../src/components/Captcha.tsx"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProcaptchaPoW.d.ts","sourceRoot":"","sources":["../../src/components/ProcaptchaPoW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAevD,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAErE,QAAA,MAAM,gBAAgB,EAAE,mBAAmB,CAE1C,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,YAAY,
|
|
1
|
+
{"version":3,"file":"ProcaptchaPoW.d.ts","sourceRoot":"","sources":["../../src/components/ProcaptchaPoW.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAevD,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAErE,QAAA,MAAM,gBAAgB,EAAE,mBAAmB,CAE1C,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,YAAY,CACd,CAAC;AAEtD,eAAO,MAAM,aAAa,UAAW,eAAe,qDAInD,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { ProcaptchaPlaceholder } from "@prosopo/web-components";
|
|
3
3
|
import { Suspense, lazy } from "react";
|
|
4
|
-
const ProcaptchaWidget = lazy(async () => import("./
|
|
4
|
+
const ProcaptchaWidget = lazy(async () => import("./ProcaptchaWidget.js"));
|
|
5
5
|
export const ProcaptchaPow = (props) => (_jsx(Suspense, { fallback: _jsx(ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: _jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) }));
|
|
6
6
|
//# sourceMappingURL=ProcaptchaPoW.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProcaptchaPoW.js","sourceRoot":"","sources":["../../src/components/ProcaptchaPoW.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAchE,OAAO,EAA4B,QAAQ,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAKjE,MAAM,gBAAgB,GAGlB,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"ProcaptchaPoW.js","sourceRoot":"","sources":["../../src/components/ProcaptchaPoW.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAchE,OAAO,EAA4B,QAAQ,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAKjE,MAAM,gBAAgB,GAGlB,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,CACxD,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,qBAAqB,IAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,GAAI,YAC1E,KAAC,gBAAgB,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,GAC5D,CACX,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProcaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/ProcaptchaWidget.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAkCtD,QAAA,MAAM,UAAU,UAAW,eAAe,qDA4HzC,CAAC;AACF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { buildUpdateState, useProcaptcha } from "@prosopo/procaptcha-common";
|
|
3
|
+
import { Checkbox, ContainerDiv, LoadingSpinner, Logo, WIDGET_BORDER, WIDGET_BORDER_RADIUS, WIDGET_DIMENSIONS, WIDGET_INNER_HEIGHT, WIDGET_MAX_WIDTH, WIDGET_PADDING, WIDGET_URL, WIDGET_URL_TEXT, WidthBasedStylesDiv, darkTheme, lightTheme, } from "@prosopo/web-components";
|
|
4
|
+
import { useEffect, useRef, useState } from "react";
|
|
5
|
+
import { Manager } from "../Services/Manager.js";
|
|
6
|
+
const Procaptcha = (props) => {
|
|
7
|
+
const config = props.config;
|
|
8
|
+
const themeColor = config.theme === "light" ? "light" : "dark";
|
|
9
|
+
const theme = props.config.theme === "light" ? lightTheme : darkTheme;
|
|
10
|
+
const callbacks = props.callbacks || {};
|
|
11
|
+
const [state, _updateState] = useProcaptcha(useState, useRef);
|
|
12
|
+
const updateState = buildUpdateState(state, _updateState);
|
|
13
|
+
const manager = useRef(Manager(config, state, updateState, callbacks));
|
|
14
|
+
const captchaRef = useRef(null);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
const element = captchaRef.current;
|
|
17
|
+
if (!element)
|
|
18
|
+
return;
|
|
19
|
+
const form = element.closest("form");
|
|
20
|
+
if (!form)
|
|
21
|
+
return;
|
|
22
|
+
const handleSubmit = () => {
|
|
23
|
+
manager.current.resetState();
|
|
24
|
+
};
|
|
25
|
+
form.addEventListener("submit", handleSubmit);
|
|
26
|
+
return () => {
|
|
27
|
+
form.removeEventListener("submit", handleSubmit);
|
|
28
|
+
};
|
|
29
|
+
}, []);
|
|
30
|
+
return (_jsx("div", { ref: captchaRef, children: _jsx("div", { style: {
|
|
31
|
+
maxWidth: WIDGET_MAX_WIDTH,
|
|
32
|
+
maxHeight: "100%",
|
|
33
|
+
overflowX: "auto",
|
|
34
|
+
}, children: _jsx(ContainerDiv, { children: _jsx(WidthBasedStylesDiv, { children: _jsxs("div", { style: WIDGET_DIMENSIONS, "data-cy": "button-human", children: [" ", _jsxs("div", { style: {
|
|
35
|
+
padding: WIDGET_PADDING,
|
|
36
|
+
border: WIDGET_BORDER,
|
|
37
|
+
backgroundColor: theme.palette.background.default,
|
|
38
|
+
borderColor: theme.palette.grey[300],
|
|
39
|
+
borderRadius: WIDGET_BORDER_RADIUS,
|
|
40
|
+
display: "flex",
|
|
41
|
+
alignItems: "center",
|
|
42
|
+
flexWrap: "wrap",
|
|
43
|
+
justifyContent: "space-between",
|
|
44
|
+
minHeight: `${WIDGET_INNER_HEIGHT}px`,
|
|
45
|
+
overflow: "hidden",
|
|
46
|
+
}, children: [_jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: _jsx("div", { style: {
|
|
47
|
+
display: "flex",
|
|
48
|
+
justifyContent: "flex-start",
|
|
49
|
+
alignItems: "center",
|
|
50
|
+
flexWrap: "wrap",
|
|
51
|
+
}, children: _jsx("div", { style: {
|
|
52
|
+
display: "flex",
|
|
53
|
+
alignItems: "center",
|
|
54
|
+
justifyContent: "center",
|
|
55
|
+
flexDirection: "column",
|
|
56
|
+
verticalAlign: "middle",
|
|
57
|
+
}, children: _jsx("div", { style: {
|
|
58
|
+
display: "flex",
|
|
59
|
+
}, children: _jsx("div", { style: { flex: 1 }, children: state.loading ? (_jsx(LoadingSpinner, { themeColor: themeColor, "aria-label": "Loading spinner" })) : (_jsx(Checkbox, { checked: state.isHuman, onChange: manager.current.start, themeColor: themeColor, labelText: "I am human", "aria-label": "human checkbox" })) }) }) }) }) }), _jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: _jsx("a", { href: WIDGET_URL, target: "_blank", "aria-label": WIDGET_URL_TEXT, rel: "noreferrer", children: _jsx("div", { style: { flex: 1 }, children: _jsx(Logo, { themeColor: themeColor, "aria-label": "Prosopo logo" }) }) }) })] })] }) }) }) }) }));
|
|
60
|
+
};
|
|
61
|
+
export default Procaptcha;
|
|
62
|
+
//# sourceMappingURL=ProcaptchaWidget.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProcaptchaWidget.js","sourceRoot":"","sources":["../../src/components/ProcaptchaWidget.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prosopo/procaptcha-pow",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"author": "PROSOPO LIMITED <info@prosopo.io>",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -24,22 +24,23 @@
|
|
|
24
24
|
"build": "tsc --build --verbose",
|
|
25
25
|
"build:cjs": "npx vite --config vite.cjs.config.ts build"
|
|
26
26
|
},
|
|
27
|
-
"browserslist": [
|
|
27
|
+
"browserslist": [
|
|
28
|
+
"> 0.5%, last 2 versions, not dead"
|
|
29
|
+
],
|
|
28
30
|
"dependencies": {
|
|
29
31
|
"@emotion/react": "^11.11.1",
|
|
30
|
-
"@prosopo/account": "2.0.
|
|
32
|
+
"@prosopo/account": "2.0.1",
|
|
31
33
|
"@polkadot/api": "10.13.1",
|
|
32
34
|
"@polkadot/keyring": "12.6.2",
|
|
33
35
|
"@polkadot/rpc-provider": "10.13.1",
|
|
34
|
-
"@prosopo/api": "2.0.
|
|
35
|
-
|
|
36
|
-
"@prosopo/
|
|
37
|
-
"@prosopo/
|
|
38
|
-
"@prosopo/procaptcha": "2.0.
|
|
39
|
-
"@prosopo/
|
|
40
|
-
"@prosopo/
|
|
41
|
-
"@prosopo/
|
|
42
|
-
"@prosopo/web-components": "2.0.0",
|
|
36
|
+
"@prosopo/api": "2.0.1",
|
|
37
|
+
"@prosopo/common": "2.0.1",
|
|
38
|
+
"@prosopo/contract": "2.0.1",
|
|
39
|
+
"@prosopo/procaptcha": "2.0.1",
|
|
40
|
+
"@prosopo/procaptcha-common": "2.0.1",
|
|
41
|
+
"@prosopo/types": "2.0.1",
|
|
42
|
+
"@prosopo/util": "2.0.1",
|
|
43
|
+
"@prosopo/web-components": "2.0.1",
|
|
43
44
|
"react": "^18.3.1"
|
|
44
45
|
},
|
|
45
46
|
"overrides": {
|
|
@@ -50,7 +51,7 @@
|
|
|
50
51
|
}
|
|
51
52
|
},
|
|
52
53
|
"devDependencies": {
|
|
53
|
-
"@prosopo/config": "2.0.
|
|
54
|
+
"@prosopo/config": "2.0.1",
|
|
54
55
|
"tslib": "2.6.2",
|
|
55
56
|
"typescript": "5.1.6"
|
|
56
57
|
},
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
3
|
-
const procaptchaCommon = require("@prosopo/procaptcha-common");
|
|
4
|
-
const webComponents = require("@prosopo/web-components");
|
|
5
|
-
const react = require("react");
|
|
6
|
-
const Manager = require("../Services/Manager.cjs");
|
|
7
|
-
const Procaptcha = (props) => {
|
|
8
|
-
const config = props.config;
|
|
9
|
-
const themeColor = config.theme === "light" ? "light" : "dark";
|
|
10
|
-
const theme = props.config.theme === "light" ? webComponents.lightTheme : webComponents.darkTheme;
|
|
11
|
-
const callbacks = props.callbacks || {};
|
|
12
|
-
const [state, _updateState] = procaptchaCommon.useProcaptcha(react.useState, react.useRef);
|
|
13
|
-
const updateState = procaptchaCommon.buildUpdateState(state, _updateState);
|
|
14
|
-
const manager = react.useRef(Manager.Manager(config, state, updateState, callbacks));
|
|
15
|
-
const captchaRef = react.useRef(null);
|
|
16
|
-
react.useEffect(() => {
|
|
17
|
-
const element = captchaRef.current;
|
|
18
|
-
if (!element) return;
|
|
19
|
-
const form = element.closest("form");
|
|
20
|
-
if (!form) return;
|
|
21
|
-
const handleSubmit = () => {
|
|
22
|
-
manager.current.resetState();
|
|
23
|
-
};
|
|
24
|
-
form.addEventListener("submit", handleSubmit);
|
|
25
|
-
return () => {
|
|
26
|
-
form.removeEventListener("submit", handleSubmit);
|
|
27
|
-
};
|
|
28
|
-
}, []);
|
|
29
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: captchaRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: /* @__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: [
|
|
30
|
-
" ",
|
|
31
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
32
|
-
"div",
|
|
33
|
-
{
|
|
34
|
-
style: {
|
|
35
|
-
padding: webComponents.WIDGET_PADDING,
|
|
36
|
-
border: webComponents.WIDGET_BORDER,
|
|
37
|
-
backgroundColor: theme.palette.background.default,
|
|
38
|
-
borderColor: theme.palette.grey[300],
|
|
39
|
-
borderRadius: webComponents.WIDGET_BORDER_RADIUS,
|
|
40
|
-
display: "flex",
|
|
41
|
-
alignItems: "center",
|
|
42
|
-
flexWrap: "wrap",
|
|
43
|
-
justifyContent: "space-between",
|
|
44
|
-
minHeight: `${webComponents.WIDGET_INNER_HEIGHT}px`,
|
|
45
|
-
overflow: "hidden"
|
|
46
|
-
},
|
|
47
|
-
children: [
|
|
48
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
49
|
-
"div",
|
|
50
|
-
{
|
|
51
|
-
style: { display: "inline-flex", flexDirection: "column" },
|
|
52
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
53
|
-
"div",
|
|
54
|
-
{
|
|
55
|
-
style: {
|
|
56
|
-
display: "flex",
|
|
57
|
-
justifyContent: "flex-start",
|
|
58
|
-
alignItems: "center",
|
|
59
|
-
flexWrap: "wrap"
|
|
60
|
-
},
|
|
61
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
62
|
-
"div",
|
|
63
|
-
{
|
|
64
|
-
style: {
|
|
65
|
-
display: "flex",
|
|
66
|
-
alignItems: "center",
|
|
67
|
-
justifyContent: "center",
|
|
68
|
-
flexDirection: "column",
|
|
69
|
-
verticalAlign: "middle"
|
|
70
|
-
},
|
|
71
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
-
"div",
|
|
73
|
-
{
|
|
74
|
-
style: {
|
|
75
|
-
display: "flex"
|
|
76
|
-
},
|
|
77
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: state.loading ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
78
|
-
webComponents.LoadingSpinner,
|
|
79
|
-
{
|
|
80
|
-
themeColor,
|
|
81
|
-
"aria-label": "Loading spinner"
|
|
82
|
-
}
|
|
83
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
84
|
-
webComponents.Checkbox,
|
|
85
|
-
{
|
|
86
|
-
checked: state.isHuman,
|
|
87
|
-
onChange: manager.current.start,
|
|
88
|
-
themeColor,
|
|
89
|
-
labelText: "I am human",
|
|
90
|
-
"aria-label": "human checkbox"
|
|
91
|
-
}
|
|
92
|
-
) })
|
|
93
|
-
}
|
|
94
|
-
)
|
|
95
|
-
}
|
|
96
|
-
)
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
),
|
|
101
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
102
|
-
"div",
|
|
103
|
-
{
|
|
104
|
-
style: { display: "inline-flex", flexDirection: "column" },
|
|
105
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
106
|
-
"a",
|
|
107
|
-
{
|
|
108
|
-
href: webComponents.WIDGET_URL,
|
|
109
|
-
target: "_blank",
|
|
110
|
-
"aria-label": webComponents.WIDGET_URL_TEXT,
|
|
111
|
-
rel: "noreferrer",
|
|
112
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(webComponents.Logo, { themeColor, "aria-label": "Prosopo logo" }) })
|
|
113
|
-
}
|
|
114
|
-
)
|
|
115
|
-
}
|
|
116
|
-
)
|
|
117
|
-
]
|
|
118
|
-
}
|
|
119
|
-
)
|
|
120
|
-
] }) }) }) }) });
|
|
121
|
-
};
|
|
122
|
-
module.exports = Procaptcha;
|