UNPKG

password-validator-lib

Version:

A reusable password validator component for React

24 lines (23 loc) 13.8 kB
(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)}})(); (function(b,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],o):(b=typeof globalThis<"u"?globalThis:b||self,o(b.PasswordValidatorLib={},b.React))})(this,function(b,o){"use strict";var F={exports:{}},w={};/** * @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 L;function M(){if(L)return w;L=1;var s=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function A(l,u,a){var E=null;if(a!==void 0&&(E=""+a),u.key!==void 0&&(E=""+u.key),"key"in u){a={};for(var v in u)v!=="key"&&(a[v]=u[v])}else a=u;return u=a.ref,{$$typeof:s,type:l,key:E,ref:u!==void 0?u:null,props:a}}return w.Fragment=d,w.jsx=A,w.jsxs=A,w}var P={};/** * @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 U;function q(){return U||(U=1,process.env.NODE_ENV!=="production"&&function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case N:return"Fragment";case y:return"Profiler";case B:return"StrictMode";case te:return"Suspense";case ae:return"SuspenseList";case ne: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 O:return"Portal";case n:return(e.displayName||"Context")+".Provider";case S:return(e._context.displayName||"Context")+".Consumer";case k:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case se:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case _:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function d(e){return""+e}function A(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,c=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.",c),d(e)}}function l(e){if(e===N)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===_)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function u(){var e=I.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function E(e){if(X.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function v(e,r){function t(){Z||(Z=!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 x(){var e=s(this.type);return J[e]||(J[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 p(e,r,t,c,g,f,Y,G){return t=f.ref,e={$$typeof:T,type:e,key:r,props:f,_owner:g},(t!==void 0?t:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):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 C(e,r,t,c,g,f,Y,G){var i=r.children;if(i!==void 0)if(c)if(le(i)){for(c=0;c<i.length;c++)j(i[c]);Object.freeze&&Object.freeze(i)}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 j(i);if(X.call(r,"key")){i=s(e);var R=Object.keys(r).filter(function(ce){return ce!=="key"});c=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",H[i+c]||(R=0<R.length?"{"+R.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} />`,c,i,R,i),H[i+c]=!0)}if(i=null,t!==void 0&&(A(t),i=""+t),E(r)&&(A(r.key),i=""+r.key),"key"in r){t={};for(var D in r)D!=="key"&&(t[D]=r[D])}else t=r;return i&&v(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,i,f,g,u(),t,Y,G)}function j(e){typeof e=="object"&&e!==null&&e.$$typeof===T&&e._store&&(e._store.validated=1)}var h=o,T=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),S=Symbol.for("react.consumer"),n=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),te=Symbol.for("react.suspense"),ae=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),ne=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),I=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,le=Array.isArray,V=console.createTask?console.createTask:function(){return null};h={"react-stack-bottom-frame":function(e){return e()}};var Z,J={},W=h["react-stack-bottom-frame"].bind(h,a)(),z=V(l(a)),H={};P.Fragment=N,P.jsx=function(e,r,t,c,g){var f=1e4>I.recentlyCreatedOwnerStacks++;return C(e,r,t,!1,c,g,f?Error("react-stack-top-frame"):W,f?V(l(e)):z)},P.jsxs=function(e,r,t,c,g){var f=1e4>I.recentlyCreatedOwnerStacks++;return C(e,r,t,!0,c,g,f?Error("react-stack-top-frame"):W,f?V(l(e)):z)}}()),P}process.env.NODE_ENV==="production"?F.exports=M():F.exports=q();var m=F.exports;const Q=(s,d)=>{const A={specialChar:/[!@#$%^&*]/.test(s),digit:/\d/.test(s),uppercase:/[A-Z]/.test(s),noConsecutive:!/(.)\1/.test(s)};return Object.fromEntries(d.map(l=>[l,A[l]]))},K="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==",$="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==",ee=s=>({specialChar:"Contains special character (!@#$%^&*)",digit:"Contains a number",uppercase:"Contains an uppercase letter",noConsecutive:"No consecutive letters"})[s],re=({options:s,customRules:d=[],onValidChange:A,customStyles:l={},label:u="Password"})=>{const[a,E]=o.useState(""),[v,x]=o.useState(!1),[p,C]=o.useState(!1),[j,h]=o.useState(!1),T=o.useMemo(()=>Q(a,s),[a,s]),O=o.useMemo(()=>d.map(n=>({message:n.message,isValid:n.validate(a)})),[a,d]);o.useEffect(()=>{if(A){const n=Object.values(T).every(Boolean)&&O.every(k=>k.isValid);A(a,n)}},[T,O,a,A]);const N=o.useCallback(n=>{E(n.target.value),p||C(!0)},[p]),B=o.useCallback(()=>x(!0),[]),y=o.useCallback(()=>{a===""&&(x(!1),C(!1))},[a]),S=o.useCallback(()=>h(n=>!n),[]);return m.jsxs("div",{className:`relative w-full max-w-sm ${l.container||""}`,children:[m.jsxs("div",{className:"relative",children:[m.jsx("input",{id:"password",onChange:N,onFocus:B,onBlur:y,type:j?"text":"password",value:a,className:`input-field ${l.input||""}`}),m.jsx("label",{htmlFor:"password",className:`label ${v||a?"top-1 text-xs text-[#7395cf]":"top-4 text-base text-gray-400"} ${l.label||""}`,children:u}),m.jsx("button",{type:"button",onClick:S,className:`show-password ${l.button||""}`,children:m.jsx("img",{src:j?$:K,alt:"Toggle password visibility",className:"show-password-icon"})})]}),m.jsxs("ul",{className:`list ${l.list||""}`,children:[s.map(n=>m.jsx("li",{className:`${p?T[n]?"valid":"invalid":"neutral"} ${l.listItem||""}`,children:ee(n)},n)),O.map((n,k)=>m.jsx("li",{className:`${p?n.isValid?"valid":"invalid":"neutral"} ${l.listItem||""}`,children:n.message},`custom-${k}`))]})]})};b.PasswordValidator=re,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});