password-validator-lib
Version:
A reusable password validator component for React
391 lines (390 loc) • 17.3 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".invalid{color:#cb5255}.neutral{color:#616161;transition:all .3s ease-in-out}.valid{color:#aedfad;text-decoration:line-through;transition:all .3s ease-in-out}.input-field{margin-bottom:1rem;display:block;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));padding:1.5rem .75rem .5rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.input-field:focus{--tw-border-opacity: 1;border-color:rgb(115 149 207 / var(--tw-border-opacity, 1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgb(115 149 207 / var(--tw-ring-opacity, 1))}.label{position:absolute;left:.75rem;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.show-password{position:absolute;right:.75rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));cursor:pointer}.top-4{top:1rem}.top-1{top:.25rem}.show-password-icon{height:1.25rem;width:1.25rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.list{list-style-type:disc;padding-left:1.25rem}")),document.head.appendChild(t)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
import ae, { useState as k, useMemo as W, useEffect as se, useCallback as x } from "react";
var V = { exports: {} }, j = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var z;
function ne() {
if (z) return j;
z = 1;
var s = Symbol.for("react.transitional.element"), A = Symbol.for("react.fragment");
function u(o, i, a) {
var g = null;
if (a !== void 0 && (g = "" + a), i.key !== void 0 && (g = "" + i.key), "key" in i) {
a = {};
for (var b in i)
b !== "key" && (a[b] = i[b]);
} else a = i;
return i = a.ref, {
$$typeof: s,
type: o,
key: g,
ref: i !== void 0 ? i : null,
props: a
};
}
return j.Fragment = A, j.jsx = u, j.jsxs = u, j;
}
var O = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var H;
function oe() {
return H || (H = 1, process.env.NODE_ENV !== "production" && function() {
function s(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === ee ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case P:
return "Fragment";
case B:
return "Profiler";
case F:
return "StrictMode";
case M:
return "Suspense";
case Q:
return "SuspenseList";
case $:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case w:
return "Portal";
case n:
return (e.displayName || "Context") + ".Provider";
case y:
return (e._context.displayName || "Context") + ".Consumer";
case C:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case K:
return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
case U:
r = e._payload, e = e._init;
try {
return s(e(r));
} catch {
}
}
return null;
}
function A(e) {
return "" + e;
}
function u(e) {
try {
A(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
l
), A(e);
}
}
function o(e) {
if (e === P) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === U)
return "<...>";
try {
var r = s(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function i() {
var e = I.A;
return e === null ? null : e.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function g(e) {
if (L.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function b(e, r) {
function t() {
_ || (_ = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function N() {
var e = s(this.type);
return X[e] || (X[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function E(e, r, t, l, m, d, Y, G) {
return t = d.ref, e = {
$$typeof: p,
type: e,
key: r,
props: d,
_owner: m
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: N
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: Y
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: G
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function R(e, r, t, l, m, d, Y, G) {
var c = r.children;
if (c !== void 0)
if (l)
if (re(c)) {
for (l = 0; l < c.length; l++)
T(c[l]);
Object.freeze && Object.freeze(c);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else T(c);
if (L.call(r, "key")) {
c = s(e);
var h = Object.keys(r).filter(function(te) {
return te !== "key";
});
l = 0 < h.length ? "{key: someKey, " + h.join(": ..., ") + ": ...}" : "{key: someKey}", J[c + l] || (h = 0 < h.length ? "{" + h.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
l,
c,
h,
c
), J[c + l] = !0);
}
if (c = null, t !== void 0 && (u(t), c = "" + t), g(r) && (u(r.key), c = "" + r.key), "key" in r) {
t = {};
for (var D in r)
D !== "key" && (t[D] = r[D]);
} else t = r;
return c && b(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), E(
e,
c,
d,
m,
i(),
t,
Y,
G
);
}
function T(e) {
typeof e == "object" && e !== null && e.$$typeof === p && e._store && (e._store.validated = 1);
}
var v = ae, p = Symbol.for("react.transitional.element"), w = Symbol.for("react.portal"), P = Symbol.for("react.fragment"), F = Symbol.for("react.strict_mode"), B = Symbol.for("react.profiler"), y = Symbol.for("react.consumer"), n = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), Q = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), U = Symbol.for("react.lazy"), $ = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), I = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, re = Array.isArray, S = console.createTask ? console.createTask : function() {
return null;
};
v = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var _, X = {}, q = v["react-stack-bottom-frame"].bind(
v,
a
)(), Z = S(o(a)), J = {};
O.Fragment = P, O.jsx = function(e, r, t, l, m) {
var d = 1e4 > I.recentlyCreatedOwnerStacks++;
return R(
e,
r,
t,
!1,
l,
m,
d ? Error("react-stack-top-frame") : q,
d ? S(o(e)) : Z
);
}, O.jsxs = function(e, r, t, l, m) {
var d = 1e4 > I.recentlyCreatedOwnerStacks++;
return R(
e,
r,
t,
!0,
l,
m,
d ? Error("react-stack-top-frame") : q,
d ? S(o(e)) : Z
);
};
}()), O;
}
process.env.NODE_ENV === "production" ? V.exports = ne() : V.exports = oe();
var f = V.exports;
const le = (s, A) => {
const u = {
specialChar: /[!@#$%^&*]/.test(s),
digit: /\d/.test(s),
uppercase: /[A-Z]/.test(s),
noConsecutive: !/(.)\1/.test(s)
};
return Object.fromEntries(
A.map((o) => [o, u[o]])
);
}, ce = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABLlJREFUWIXtll1sFFUUx3/nznYL5cMgoCBEhXbb3Z2220L5iCYkNVGDmCIgDUaN+mII+FwlEaL4QEDfxMSQmCiYGEKFABJjjFaJgOJS+jXb3Z2WqktUEGzSmtJud+b6sLPNstLyEQkv/F9mcv73nPO/Z+aec+Eu7uIOQ27VsTUef0A5xgwA13D6FwWDv99WAT/a9vSStGwAGjT6EWBGwZJ+hBPiypGhYr1/eSAw8L8IiPb23uMbcbeIZjMwtYC+4j0nF9gHBT4Y8rPjekLGFaC1lo7uno1o3gZme+ZereVzQ3N4xO8k6yoqLgFEE4lZxqhRIdAgop8FFnrrL2r0tkg4sEdE9A0LaLXt2UaaT4CVnsnSsD0SLmsWERegNXbuIUO7IQBHVPei8MJfPeGqo7u3Ea23AaFsEjmW9jkv5wRPKOBsV+8SJe4hYB4wouGt/ovn36uvr88AtHX11Ctxd2pkSYHraVE0VYcC3wO0tLT4Zt4/7w2tZSvgB86LkmeqQ2VnxhXQ1mU/KUIzMFVDj1JqbXWotDPHt8fsTWjeBxTgAHGPCgIG4Gj0azVm+YdjG7KSNQo5CCwA/lGi11aFy7/O8WosuGU3iHCU7I/2rXL8S/OTt3X11I8l1+xVrjEvYgYqI2ag0odvPrAPMATZ3RFLrsj51ZrlbaM+dylwHJjqavnibCy56qoKtFs9j4E+BkwCjpT4aQwEAiP51emwkqc1sgTN3khl4CWugQ7L3qfhBeCniBlYns+dTKUmTxm40gzyFDDsuqysrQp8J+3x+AIc42dgJtBS4mdlYXJvzTnA8eGbb5oL/ryWgGgsNrdIF6UAwxHj4dyPmYNlWX5H/Ee15gmg3xW1TOEYzV7yM8WGs7owOYDOGOXea3y85AB14fAfAgkA5TgVhbxpmumhItYDrcAMpd3PFHDN83mbMZZTYTjrgUvA4hHHOGzbdvF/VhuZhPcatKy+OeNFjcZiczVUABQpFS/kLcvyl4xyAFgM/O2Kek5FgsE+raURGAbqh0ZpPplKXdVaa0OhX4DTgJEhs2s8AT5d9C7Z43jKNEt/y+dOplKTHYoPet//ioheUxsutRVATWVZi3b1eiCN5ukpA8Nfdnd3z8wPIIomsmf/xQ7L3heNxebm77zNsj8VeB5wNKrpqsokErOmDIx8pdGrgLQg66rD5cehoBF1xpKPu1oOku0FfS56ba1Z3pbj26zkRkF2e7t0gKRHledsgmyqNsv25Hy6uhIRR9Qhso1oENSaiFn6zdjGCsvY2dlb5yr3EDAfSIvod9JDAzvr6upGATpiyRVayy5gWYHrKY1qqjFLfwCIRqNF/pLpr+e14pQoWTNhK84vmT9jfOyVDCCO1turzcD+3DCyrN4HR71hZGiJVVWVpSA7jDpj9gaNbCXbogGO+lXmlVAodLkw14TjuD1mvyrIduA+z9wH0qyRI67fTSwKBP6C7PRUaVUhOKtB1pEtN8AFhDerQ2Uf3dQ4zkf2JsQWDZuBaQX0sPecVGAfBHYXG86OYDA4OFH8G76SxePxaSOu0YimAXiUbPfMx2XghIbDkwznwPUS37SAQlhW35wRMvcCFLnG5aqqhRduNdZd3MUdxb8T0+n01ISXHQAAAABJRU5ErkJggg==", ie = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAABGJJREFUWIXtlluIlGUYx3/Pd3Bcj5WkqV3UNqvrfM7OeqCDJiKCsYYX0V6EgaDGboURYRB2gCBCgkgidCusTCUwlKUL29olVNCQWHTn8I27+41iGKRGVq66NDPf93QxMzE7OzN6kzf5v3xPv+f9P+/7vC/c0f9dcjsg8XhmJpZ+Czoac+atKO8zbhP8B2AJIhMr+61bXejU4OAcMzDbUFYCEeABYCqgwDXgvCJJg+CYBFZPNNp4qQy+EEiRkycr171pCpLJzLLA0DeBNYB5i/HmgcNAGHCAFHlZHYuFL99yAPHBwfniG9sVearYlAWOg/QoctJGL+bz13/N5XJZ277rbmxtBF2BGutAl5UFWxNeM4ABd3ijIDuBBmBEhV2mb+6IRhsv3WzrRduPAgvK4YnEcGNLy7xzdQM4cuSIdc+993chPFdsOuhP4MXFTU2/lcZ4nhe6kdVOkPUUcmsImgJ25c2g1/TN7ynlvAR3M22KdqN0tTjhrSISjAugv7/fthumfwW0A38j0hGLhPeOcWZoaC5547BArIYBOcCmwvZ42tuM0lXsO5gb/Wv90qVLc1C8hqoq9sRpe4vwPwKV1ZVwz/NCZfALqLaHTH+aRXaGIC8Vh42DA8QiTZ8FAWuAEaB9QsP0j0t9BkDyjPcGIs8A1xDWLloYPlG5tRtZ7SzBLbKtsYXzDjU3N4/k8yFL0c7isJoHblG06ahirAWuK2xKpLzXAIy4O/yIqrwNqIpsiEWaTlZ3V56lYNcrjuNcgTFFZkzOB1zPqbZCq/PQcRXZDKDCO/G0t9hA+BQwBXa0RsLd1eFAofgQsoLeevCEm2kzkL5ai7RGwgdAPgRsVT63UBGAQCVfBw7FdPm+b9eCJ5PnZgX43RRqRm2paun4G0YgzwN5EX01nhp+us60FIBPaH01OEBgBk8AodLYaoq7XjvCy0Aegg4jGg3/iOjrgIHIvgH37OPVJgraBaDoR9Xg8XhmJqrbi4P3V1vjdCqzHNgDiMJbrc78nwyAlgVN76PsBhqE4LuEm2mrnJw3g14K9xwqbI+nMxuw9DQwBzhlaXZ35fzEGW+lIXoYmAzsi0XC70ExryKiLU64E9gHTFb0m4Sb2aKqUtpdscKNuecJN9MWGP7PqH5Zgvumv85xnDFnYMAd3qgBvcB04MCVy79sEhEtmFWmr1XN5vTZnaV7rdBnGLJNA91TafuA6zkG0qfoVCCJsN/S7O5yeDJ5bpYa+a7SgybIJ79fvrBl1apV/x74qo9Rws10KPpB0a6S6r5q5epPp2fbam8FOoEpwA1EXqisrjUDAIinvUdRTlBIU9nOhx42DKPBDKyhSZP48+rVq6ZOmDLXUP8+AnlMhTZgOYXPjgKHLGSb44Qz1ThVA6hXZBTtpnDV6slH6AHerV1ZCxr3JasFL/TqFJAvQBcDs4EZFD4eIwjnQV1VjtnYPU7kwYs3CRKo4kDc9fqBJePh/42q/Ip1FKH/dsDv6I4A/gHBzhl5IMh+jgAAAABJRU5ErkJggg==", ue = (s) => ({
specialChar: "Contains special character (!@#$%^&*)",
digit: "Contains a number",
uppercase: "Contains an uppercase letter",
noConsecutive: "No consecutive letters"
})[s], de = ({
options: s,
customRules: A = [],
onValidChange: u,
customStyles: o = {},
label: i = "Password"
}) => {
const [a, g] = k(""), [b, N] = k(!1), [E, R] = k(!1), [T, v] = k(!1), p = W(
() => le(a, s),
[a, s]
), w = W(
() => A.map((n) => ({
message: n.message,
isValid: n.validate(a)
})),
[a, A]
);
se(() => {
if (u) {
const n = Object.values(p).every(Boolean) && w.every((C) => C.isValid);
u(a, n);
}
}, [p, w, a, u]);
const P = x(
(n) => {
g(n.target.value), E || R(!0);
},
[E]
), F = x(() => N(!0), []), B = x(() => {
a === "" && (N(!1), R(!1));
}, [a]), y = x(
() => v((n) => !n),
[]
);
return /* @__PURE__ */ f.jsxs("div", { className: `relative w-full max-w-sm ${o.container || ""}`, children: [
/* @__PURE__ */ f.jsxs("div", { className: "relative", children: [
/* @__PURE__ */ f.jsx(
"input",
{
id: "password",
onChange: P,
onFocus: F,
onBlur: B,
type: T ? "text" : "password",
value: a,
className: `input-field ${o.input || ""}`
}
),
/* @__PURE__ */ f.jsx(
"label",
{
htmlFor: "password",
className: `label ${b || a ? "top-1 text-xs text-[#7395cf]" : "top-4 text-base text-gray-400"} ${o.label || ""}`,
children: i
}
),
/* @__PURE__ */ f.jsx(
"button",
{
type: "button",
onClick: y,
className: `show-password ${o.button || ""}`,
children: /* @__PURE__ */ f.jsx(
"img",
{
src: T ? ie : ce,
alt: "Toggle password visibility",
className: "show-password-icon"
}
)
}
)
] }),
/* @__PURE__ */ f.jsxs("ul", { className: `list ${o.list || ""}`, children: [
s.map((n) => /* @__PURE__ */ f.jsx(
"li",
{
className: `${E ? p[n] ? "valid" : "invalid" : "neutral"} ${o.listItem || ""}`,
children: ue(n)
},
n
)),
w.map((n, C) => /* @__PURE__ */ f.jsx(
"li",
{
className: `${E ? n.isValid ? "valid" : "invalid" : "neutral"} ${o.listItem || ""}`,
children: n.message
},
`custom-${C}`
))
] })
] });
};
export {
de as PasswordValidator
};