@elsikora/x-captcha-react
Version:
React components for X-Captcha service
63 lines (59 loc) • 4.31 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var i18n = require('../i18n/i18n.js');
require('../i18n/translations/index.js');
var generateThemeVariables_utility = require('../utility/generate-theme-variables.utility.js');
var CaptchaWidget = require('./CaptchaWidget.js');
var captchaForm_module = require('../styles/captcha-form.module.css.js');
/**
* Form component with integrated captcha and modern styling
* @param {ICaptchaFormProperties} props - The properties
* @returns {React.ReactElement} The captcha form
*/
const CaptchaForm = ({ apiUrl, children, className = "", language, onSubmit, publicKey, submitButtonText, theme, ...captchaProperties }) => {
const [token, setToken] = react.useState(null);
const [error, setError] = react.useState(null);
const [isHovering, setIsHovering] = react.useState(false);
const [isFocused, setIsFocused] = react.useState(false);
// eslint-disable-next-line @elsikora/react/1/naming-convention/use-state
const [translate] = react.useState(() => {
const detectedLanguage = language ?? i18n.detectLanguage();
return i18n.createTranslator(detectedLanguage);
});
// Generate CSS variables from theme props
const themeVariables = react.useMemo(() => generateThemeVariables_utility.GenerateThemeVariables(theme), [theme]);
const defaultSubmitText = submitButtonText ?? "Submit";
const handleVerify = react.useCallback((newToken) => {
setToken(newToken);
setError(null);
}, []);
const handleError = react.useCallback((errorMessage) => {
setToken(null);
setError(errorMessage);
}, []);
const handleSubmit = react.useCallback((event) => {
event.preventDefault();
if (!token) {
setError(translate("pleaseCompleteCaptcha"));
return;
}
onSubmit(token, event);
}, [token, onSubmit, translate]);
const buttonClasses = [captchaForm_module.default["x-captcha-submit-button"], token ? captchaForm_module.default["x-captcha-submit-button-active"] : captchaForm_module.default["x-captcha-submit-button-disabled"], token && isHovering ? captchaForm_module.default["x-captcha-submit-button-hover"] : "", token && isFocused ? captchaForm_module.default["x-captcha-submit-button-focus"] : ""].filter(Boolean).join(" ");
return (jsxRuntime.jsxs("form", { className: `${captchaForm_module.default["x-captcha-form"]} ${className}`, onSubmit: handleSubmit, style: themeVariables, children: [children ? jsxRuntime.jsx("div", { className: captchaForm_module.default["x-captcha-children-container"], children: children }) : jsxRuntime.jsx(jsxRuntime.Fragment, {}), jsxRuntime.jsx("div", { className: captchaForm_module.default["x-captcha-captcha-container"], children: jsxRuntime.jsx(CaptchaWidget.CaptchaWidget, { apiUrl: apiUrl, language: language, onError: handleError, onVerify: handleVerify, publicKey: publicKey, theme: theme, ...captchaProperties }) }), error && (jsxRuntime.jsxs("div", { className: captchaForm_module.default["x-captcha-error"], children: [jsxRuntime.jsx("span", { className: captchaForm_module.default["x-captcha-error-icon"], children: jsxRuntime.jsxs("svg", { fill: "none", height: "16", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", width: "16", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }), jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), jsxRuntime.jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })] }) }), error] })), jsxRuntime.jsx("button", { className: buttonClasses, disabled: !token, onBlur: () => {
if (token)
setIsFocused(false);
}, onFocus: () => {
if (token)
setIsFocused(true);
}, onMouseEnter: () => {
if (token)
setIsHovering(true);
}, onMouseLeave: () => {
if (token)
setIsHovering(false);
}, type: "submit", children: defaultSubmitText })] }));
};
exports.CaptchaForm = CaptchaForm;
//# sourceMappingURL=CaptchaForm.js.map