kwikid-components-react
Version:
KwikID's Component Library in React
417 lines (411 loc) • 14.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Variants = exports.Sizes = exports.Default = exports.CustomStyling = exports.CharacterLengths = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireWildcard(require("react"));
var _Alert = _interopRequireDefault(require("../alert/Alert"));
var _Button = _interopRequireDefault(require("../button/Button"));
var _InputText = _interopRequireDefault(require("../inputs/input-text/InputText"));
var _Captcha = _interopRequireDefault(require("./Captcha"));
var _Captcha2 = require("./Captcha.constants");
var _Captcha3 = require("./Captcha.defaults");
var _Captcha4 = require("./Captcha.definition");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
* The Captcha component generates and displays a CAPTCHA (Completely Automated Public Turing test
* to tell Computers and Humans Apart) challenge. It's used to verify that user input is coming
* from a human rather than a bot.
*
* ## Usage
*
* ```jsx
* import { KwikUICaptcha } from 'react-kwikui';
*
* const [captchaText, setCaptchaText] = useState("");
*
* const handleCaptchaText = (text) => {
* setCaptchaText(text);
* };
*
* <KwikUICaptcha
* size="m"
* characterSize={6}
* isShowRefresh={true}
* getCaptchaText={handleCaptchaText}
* />
* ```
*/
var _default = exports.default = {
title: "KwikUI/Security/Captcha",
component: _Captcha.default,
parameters: {
componentSubtitle: "Human verification through visual challenge",
docs: {
description: {
component: "The Captcha component provides a visual challenge to differentiate between humans and automated bots."
}
},
a11y: {
config: {
rules: [{
id: "color-contrast",
enabled: true
}]
}
}
},
argTypes: {
size: {
control: "radio",
options: _Captcha2.KWIKUI__CAPTCHA_SIZE_OPTIONS,
description: "The size of the captcha",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Captcha3.KWIKUI__CAPTCHA__DEFAULTS.size
}
}
},
characterSize: {
control: {
type: "number",
min: 4,
max: 10
},
description: "Number of characters in the captcha",
table: {
type: {
summary: "number"
},
defaultValue: {
summary: _Captcha3.KWIKUI__CAPTCHA__DEFAULTS.characterSize
}
}
},
isShowRefresh: {
control: "boolean",
description: "Whether to show the refresh button",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Captcha3.KWIKUI__CAPTCHA__DEFAULTS.isShowRefresh
}
}
},
isRefreshCaptchaText: {
control: "boolean",
description: "Whether to refresh the captcha text",
table: {
type: {
summary: "boolean"
},
defaultValue: {
summary: _Captcha3.KWIKUI__CAPTCHA__DEFAULTS.isRefreshCaptchaText
}
}
},
captchaTextFromCanvas: {
description: "The text displayed in the captcha",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: "Generated string"
}
}
},
customStyles: {
control: "object",
description: "Custom styles for the component",
table: {
type: {
summary: "object"
},
defaultValue: {
summary: "{ container: {}, captchaCanvas: {}, refreshIcon: {} }"
}
}
},
getCaptchaText: {
description: "Callback function when captcha text is generated",
table: {
type: {
summary: "(captchaText: string) => void"
}
}
},
variant: {
control: "radio",
options: _Captcha2.KWIKUI__CAPTCHA_VARIANT_OPTIONS,
description: "The variant of the captcha",
table: {
type: {
summary: "string"
},
defaultValue: {
summary: _Captcha4.IKwikUICaptchaVariant.SIMPLIFIED
}
}
}
}
};
/**
* Template for rendering the Captcha component with validation
*/
const Template = args => {
const [userInput, setUserInput] = (0, _react.useState)("");
const [captchaText, setCaptchaText] = (0, _react.useState)("");
const [isCaptchaError, setIsCaptchaError] = (0, _react.useState)(false);
const [isCaptchaRerender, setIsCaptchaRerender] = (0, _react.useState)(false);
const [showAlert, setShowAlert] = (0, _react.useState)(false);
const onChangeInput = (id, value) => {
setUserInput(value);
};
const onChangeInputValidate = (id, value) => {
if ((0, _kwikidToolkit.isNotEmptyString)(value)) {
return {
isValid: true
};
}
return {
isValid: false
};
};
const handleReceivedCaptcha = value => {
setCaptchaText(value);
};
const handleCaptchaValidationSuccess = captcha => {
if (captcha === userInput) {
return true;
}
return false;
};
const handleCaptchaSubmit = () => {
const successValidation = handleCaptchaValidationSuccess(captchaText);
if (!successValidation) {
setIsCaptchaError(true);
setIsCaptchaRerender(!isCaptchaRerender);
} else {
setUserInput("");
setIsCaptchaError(false);
}
setShowAlert(true);
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: "1rem",
width: "max-content"
}
}, /*#__PURE__*/_react.default.createElement(_Captcha.default, _extends({}, args, {
captchaTextFromCanvas: captchaText,
getCaptchaText: handleReceivedCaptcha,
isRefreshCaptchaText: isCaptchaRerender
})), /*#__PURE__*/_react.default.createElement(_InputText.default, {
id: "captcha",
label: "Enter the text shown above",
placeholder: "Enter captcha",
onInput: onChangeInput,
onInputValidate: onChangeInputValidate,
value: userInput,
customStyles: {
container: {
width: "250px"
}
}
}), /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: handleCaptchaSubmit
}, "Verify Captcha"), showAlert && /*#__PURE__*/_react.default.createElement(_Alert.default, {
key: "captcha-alert",
id: "captcha-alert",
message: isCaptchaError ? "Incorrect captcha entered. Please try again." : "Captcha validation successful!",
variant: isCaptchaError ? "error" : "success",
position: "bottom-left",
autoCloseTime: 3000,
onClose: () => {
setShowAlert(false);
}
}));
};
/**
* Default captcha implementation
*/
const Default = exports.Default = Template.bind({});
Default.args = _objectSpread(_objectSpread({}, _Captcha3.KWIKUI__CAPTCHA__DEFAULTS), {}, {
isShowRefresh: true
});
Default.parameters = {
docs: {
description: {
story: "Default captcha with standard settings and validation."
}
}
};
/**
* Captcha with different sizes
*/
const Sizes = args => {
const handleCaptchaText = text => {
console.log("Captcha text:", text);
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Small Size"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "s",
characterSize: 6,
isShowRefresh: true,
getCaptchaText: handleCaptchaText
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Medium Size (Default)"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "m",
characterSize: 6,
isShowRefresh: true,
getCaptchaText: handleCaptchaText
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Large Size"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "l",
characterSize: 6,
isShowRefresh: true,
getCaptchaText: handleCaptchaText
})));
};
exports.Sizes = Sizes;
Sizes.parameters = {
docs: {
description: {
story: "Captcha in different sizes to fit various UI contexts."
}
}
};
/**
* Captcha with different character lengths
*/
const CharacterLengths = args => {
const handleCaptchaText = text => {
console.log("Captcha text:", text);
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "4 Characters"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "m",
characterSize: 4,
isShowRefresh: true,
getCaptchaText: handleCaptchaText
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "6 Characters (Default)"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "m",
characterSize: 6,
isShowRefresh: true,
getCaptchaText: handleCaptchaText
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "8 Characters"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "m",
characterSize: 8,
isShowRefresh: true,
getCaptchaText: handleCaptchaText
})));
};
exports.CharacterLengths = CharacterLengths;
CharacterLengths.parameters = {
docs: {
description: {
story: "Captcha with different numbers of characters for varying security levels."
}
}
};
/**
* Captcha with custom styling
*/
const CustomStyling = exports.CustomStyling = Template.bind({});
CustomStyling.args = _objectSpread(_objectSpread({}, _Captcha3.KWIKUI__CAPTCHA__DEFAULTS), {}, {
isShowRefresh: true,
customStyles: {
container: {
border: "2px solid #3B82F6",
borderRadius: "8px",
padding: "8px"
},
captchaCanvas: {
backgroundColor: "#F3F4F6",
borderRadius: "4px"
},
refreshIcon: {
color: "#3B82F6",
fontSize: "20px"
}
}
});
CustomStyling.parameters = {
docs: {
description: {
story: "Captcha with custom styling for better integration with your design system."
}
}
};
/**
* Captcha with different variants
*/
const Variants = args => {
const handleCaptchaText = text => {
console.log("Captcha text:", text);
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "2rem"
}
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Simplified (Default)"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "m",
characterSize: 6,
isShowRefresh: true,
getCaptchaText: handleCaptchaText,
variant: "simplified"
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Standard"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "m",
characterSize: 6,
isShowRefresh: true,
getCaptchaText: handleCaptchaText,
variant: "standard"
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Noisy"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "m",
characterSize: 6,
isShowRefresh: true,
getCaptchaText: handleCaptchaText,
variant: "noisy"
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Distorted"), /*#__PURE__*/_react.default.createElement(_Captcha.default, {
size: "m",
characterSize: 6,
isShowRefresh: true,
getCaptchaText: handleCaptchaText,
variant: "distorted"
})));
};
exports.Variants = Variants;
Variants.parameters = {
docs: {
description: {
story: "Different captcha variants with increasing levels of complexity."
}
}
};