@pwd-meter/vue 2.0.0
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/PasswordInput.vue.d.ts +23 -0
- package/dist/PasswordInput.vue.d.ts.map +1 -0
- package/dist/PasswordStrengthMeter.vue.d.ts +16 -0
- package/dist/PasswordStrengthMeter.vue.d.ts.map +1 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +168 -0
- package/dist/styles.css +82 -0
- package/dist/usePasswordStrength.d.ts +13 -0
- package/dist/usePasswordStrength.d.ts.map +1 -0
- package/package.json +45 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type GeneratePasswordOptions, type HibpOptions } from "@pwd-meter/core";
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
modelValue?: string;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
showMeter?: boolean;
|
|
6
|
+
showGenerate?: boolean;
|
|
7
|
+
checkPwned?: boolean;
|
|
8
|
+
hibpOptions?: HibpOptions;
|
|
9
|
+
generateOptions?: GeneratePasswordOptions;
|
|
10
|
+
};
|
|
11
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
12
|
+
"update:modelValue": (value: string) => any;
|
|
13
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
14
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
15
|
+
}>, {
|
|
16
|
+
checkPwned: boolean;
|
|
17
|
+
modelValue: string;
|
|
18
|
+
placeholder: string;
|
|
19
|
+
showMeter: boolean;
|
|
20
|
+
showGenerate: boolean;
|
|
21
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
22
|
+
export default _default;
|
|
23
|
+
//# sourceMappingURL=PasswordInput.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PasswordInput.vue.d.ts","sourceRoot":"","sources":["../src/PasswordInput.vue"],"names":[],"mappings":"AAwEA,OAAO,EAA8C,KAAK,uBAAuB,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI7H,KAAK,WAAW,GAAG;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,CAAC,EAAE,uBAAuB,CAAC;CAC3C,CAAC;;;;;;gBAHa,OAAO;gBAJP,MAAM;iBACL,MAAM;eACR,OAAO;kBACJ,OAAO;;AAmI1B,wBAQG"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type HibpOptions, type PasswordStrengthResult } from "@pwd-meter/core";
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
password: string;
|
|
4
|
+
result?: PasswordStrengthResult;
|
|
5
|
+
showSuggestions?: boolean;
|
|
6
|
+
showChecks?: boolean;
|
|
7
|
+
checkPwned?: boolean;
|
|
8
|
+
hibpOptions?: HibpOptions;
|
|
9
|
+
};
|
|
10
|
+
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
11
|
+
checkPwned: boolean;
|
|
12
|
+
showSuggestions: boolean;
|
|
13
|
+
showChecks: boolean;
|
|
14
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
15
|
+
export default _default;
|
|
16
|
+
//# sourceMappingURL=PasswordStrengthMeter.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PasswordStrengthMeter.vue.d.ts","sourceRoot":"","sources":["../src/PasswordStrengthMeter.vue"],"names":[],"mappings":"AAuEA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC5B,MAAM,iBAAiB,CAAC;AAGzB,KAAK,WAAW,GAAG;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;;gBAFa,OAAO;qBAFF,OAAO;gBACZ,OAAO;;AAqIxB,wBAOG"}
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("@pwd-meter/core");function m(s,o={}){const l=e.computed(()=>typeof s=="function"?s():s.value),p=e.computed(()=>{const n=e.unref(o);return{checkPwned:n.checkPwned??!1,debounceMs:n.debounceMs??400,hibp:n.hibp}}),a=e.ref(u.analyzePassword(l.value));let t=0;return e.watch([l,p],([n,r],d,i)=>{if(a.value=u.analyzePassword(n),!r.checkPwned||!n)return;a.value={...a.value,pwnedCheckPending:!0};const c=++t,w=window.setTimeout(async()=>{if(c!==t)return;const k=await u.analyzePasswordAsync(n,{checkPwned:!0,hibp:r.hibp});c===t&&(a.value=k)},r.debounceMs);i(()=>{window.clearTimeout(w),t+=1})},{immediate:!0}),a}function v(s){return{generate:o=>u.generateSecurePassword({...s,...o})}}const g={class:"ps-meter","aria-live":"polite"},_={class:"ps-meter__track","aria-hidden":"true"},f={class:"ps-meter__message"},y={key:0,class:"ps-meter__meta"},b={key:1,class:"ps-meter__checks"},P=["data-pass"],B=["data-pass"],V=["data-pass"],E=["data-pass"],S=["data-pass"],N={key:2,class:"ps-meter__feedback"},C={key:0,class:"ps-meter__warning"},h=e.defineComponent({__name:"PasswordStrengthMeter",props:{password:{},result:{},showSuggestions:{type:Boolean,default:!0},showChecks:{type:Boolean,default:!1},checkPwned:{type:Boolean,default:!1},hibpOptions:{}},setup(s){const o=s,l=e.computed(()=>o.result===void 0),p=e.computed(()=>({checkPwned:l.value?o.checkPwned:!1,hibp:l.value?o.hibpOptions:void 0})),a=m(()=>l.value?o.password:"",p),t=e.computed(()=>o.result??a.value),n=e.computed(()=>o.password?`${(t.value.score+1)/5*100}%`:"0%"),r=e.computed(()=>u.getStrengthColor(t.value.label));return(d,i)=>(e.openBlock(),e.createElementBlock("div",g,[e.createElementVNode("div",_,[e.createElementVNode("div",{class:"ps-meter__bar",style:e.normalizeStyle({width:n.value,backgroundColor:r.value})},null,4)]),e.createElementVNode("p",f,e.toDisplayString(e.unref(u.getStrengthMessage)(t.value)),1),s.password&&!t.value.isPwned&&!t.value.pwnedCheckPending?(e.openBlock(),e.createElementBlock("p",y," Estimated crack time: "+e.toDisplayString(t.value.crackTimeDisplay),1)):e.createCommentVNode("",!0),s.showChecks&&s.password?(e.openBlock(),e.createElementBlock("ul",b,[e.createElementVNode("li",{"data-pass":t.value.checks.length},"At least 12 characters",8,P),e.createElementVNode("li",{"data-pass":t.value.checks.lowercase},"Lowercase letter",8,B),e.createElementVNode("li",{"data-pass":t.value.checks.uppercase},"Uppercase letter",8,V),e.createElementVNode("li",{"data-pass":t.value.checks.number},"Number",8,E),e.createElementVNode("li",{"data-pass":t.value.checks.symbol},"Symbol",8,S)])):e.createCommentVNode("",!0),s.showSuggestions&&(t.value.feedback.warning||t.value.feedback.suggestions.length)?(e.openBlock(),e.createElementBlock("div",N,[t.value.feedback.warning?(e.openBlock(),e.createElementBlock("p",C,e.toDisplayString(t.value.feedback.warning),1)):e.createCommentVNode("",!0),e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value.feedback.suggestions,c=>(e.openBlock(),e.createElementBlock("li",{key:c},e.toDisplayString(c),1))),128))])])):e.createCommentVNode("",!0)]))}}),M={class:"ps-input"},O={class:"ps-input__row"},$=["value","placeholder"],D={id:"password-strength-message",class:"ps-sr-only"},G=e.defineComponent({__name:"PasswordInput",props:{modelValue:{default:""},placeholder:{default:"Enter password"},showMeter:{type:Boolean,default:!0},showGenerate:{type:Boolean,default:!0},checkPwned:{type:Boolean,default:!1},hibpOptions:{},generateOptions:{}},emits:["update:modelValue"],setup(s,{emit:o}){const l=s,p=o,a=e.ref(l.modelValue);e.watch(()=>l.modelValue,d=>{a.value=d});const t=e.computed(()=>({checkPwned:l.checkPwned,hibp:l.hibpOptions})),n=m(()=>a.value,t);function r(d){a.value=d,p("update:modelValue",d)}return(d,i)=>(e.openBlock(),e.createElementBlock("div",M,[e.createElementVNode("div",O,[e.createElementVNode("input",{class:"ps-input__field",type:"password",value:a.value,placeholder:s.placeholder,"aria-describedby":"password-strength-message",onInput:i[0]||(i[0]=c=>r(c.target.value))},null,40,$),s.showGenerate?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"ps-input__generate",onClick:i[1]||(i[1]=c=>r(e.unref(u.generateSecurePassword)(s.generateOptions)))}," Generate ")):e.createCommentVNode("",!0)]),s.showMeter?(e.openBlock(),e.createBlock(h,{key:0,password:a.value,result:e.unref(n)},null,8,["password","result"])):e.createCommentVNode("",!0),e.createElementVNode("span",D,e.toDisplayString(e.unref(u.getStrengthMessage)(e.unref(n))),1)]))}});exports.PasswordInput=G;exports.PasswordStrengthMeter=h;exports.usePasswordGenerator=v;exports.usePasswordStrength=m;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import PasswordInput from "./PasswordInput.vue";
|
|
2
|
+
import PasswordStrengthMeter from "./PasswordStrengthMeter.vue";
|
|
3
|
+
import { usePasswordGenerator, usePasswordStrength } from "./usePasswordStrength";
|
|
4
|
+
export { PasswordInput, PasswordStrengthMeter, usePasswordGenerator, usePasswordStrength };
|
|
5
|
+
export type { AnalyzePasswordOptions, GeneratePasswordOptions, HibpOptions, PasswordStrengthResult, PwnedPasswordResult, StrengthLabel, UsePasswordStrengthOptions, } from "./usePasswordStrength";
|
|
6
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,qBAAqB,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,CAAC;AAC3F,YAAY,EACV,sBAAsB,EACtB,uBAAuB,EACvB,WAAW,EACX,sBAAsB,EACtB,mBAAmB,EACnB,aAAa,EACb,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import { computed as i, unref as w, ref as g, watch as f, defineComponent as b, openBlock as r, createElementBlock as u, createElementVNode as o, normalizeStyle as O, toDisplayString as _, createCommentVNode as v, Fragment as V, renderList as M, createBlock as $ } from "vue";
|
|
2
|
+
import { analyzePassword as k, analyzePasswordAsync as E, generateSecurePassword as y, getStrengthColor as G, getStrengthMessage as P } from "@pwd-meter/core";
|
|
3
|
+
function S(s, a = {}) {
|
|
4
|
+
const l = i(() => typeof s == "function" ? s() : s.value), m = i(() => {
|
|
5
|
+
const n = w(a);
|
|
6
|
+
return {
|
|
7
|
+
checkPwned: n.checkPwned ?? !1,
|
|
8
|
+
debounceMs: n.debounceMs ?? 400,
|
|
9
|
+
hibp: n.hibp
|
|
10
|
+
};
|
|
11
|
+
}), t = g(k(l.value));
|
|
12
|
+
let e = 0;
|
|
13
|
+
return f(
|
|
14
|
+
[l, m],
|
|
15
|
+
([n, c], p, h) => {
|
|
16
|
+
if (t.value = k(n), !c.checkPwned || !n)
|
|
17
|
+
return;
|
|
18
|
+
t.value = { ...t.value, pwnedCheckPending: !0 };
|
|
19
|
+
const d = ++e, B = window.setTimeout(async () => {
|
|
20
|
+
if (d !== e)
|
|
21
|
+
return;
|
|
22
|
+
const C = await E(n, { checkPwned: !0, hibp: c.hibp });
|
|
23
|
+
d === e && (t.value = C);
|
|
24
|
+
}, c.debounceMs);
|
|
25
|
+
h(() => {
|
|
26
|
+
window.clearTimeout(B), e += 1;
|
|
27
|
+
});
|
|
28
|
+
},
|
|
29
|
+
{ immediate: !0 }
|
|
30
|
+
), t;
|
|
31
|
+
}
|
|
32
|
+
function Y(s) {
|
|
33
|
+
return {
|
|
34
|
+
generate: (a) => y({ ...s, ...a })
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
const I = {
|
|
38
|
+
class: "ps-meter",
|
|
39
|
+
"aria-live": "polite"
|
|
40
|
+
}, z = {
|
|
41
|
+
class: "ps-meter__track",
|
|
42
|
+
"aria-hidden": "true"
|
|
43
|
+
}, A = { class: "ps-meter__message" }, N = {
|
|
44
|
+
key: 0,
|
|
45
|
+
class: "ps-meter__meta"
|
|
46
|
+
}, R = {
|
|
47
|
+
key: 1,
|
|
48
|
+
class: "ps-meter__checks"
|
|
49
|
+
}, T = ["data-pass"], D = ["data-pass"], L = ["data-pass"], q = ["data-pass"], x = ["data-pass"], F = {
|
|
50
|
+
key: 2,
|
|
51
|
+
class: "ps-meter__feedback"
|
|
52
|
+
}, U = {
|
|
53
|
+
key: 0,
|
|
54
|
+
class: "ps-meter__warning"
|
|
55
|
+
}, j = /* @__PURE__ */ b({
|
|
56
|
+
__name: "PasswordStrengthMeter",
|
|
57
|
+
props: {
|
|
58
|
+
password: {},
|
|
59
|
+
result: {},
|
|
60
|
+
showSuggestions: { type: Boolean, default: !0 },
|
|
61
|
+
showChecks: { type: Boolean, default: !1 },
|
|
62
|
+
checkPwned: { type: Boolean, default: !1 },
|
|
63
|
+
hibpOptions: {}
|
|
64
|
+
},
|
|
65
|
+
setup(s) {
|
|
66
|
+
const a = s, l = i(() => a.result === void 0), m = i(() => ({
|
|
67
|
+
checkPwned: l.value ? a.checkPwned : !1,
|
|
68
|
+
hibp: l.value ? a.hibpOptions : void 0
|
|
69
|
+
})), t = S(
|
|
70
|
+
() => l.value ? a.password : "",
|
|
71
|
+
m
|
|
72
|
+
), e = i(() => a.result ?? t.value), n = i(() => a.password ? `${(e.value.score + 1) / 5 * 100}%` : "0%"), c = i(() => G(e.value.label));
|
|
73
|
+
return (p, h) => (r(), u("div", I, [
|
|
74
|
+
o("div", z, [
|
|
75
|
+
o("div", {
|
|
76
|
+
class: "ps-meter__bar",
|
|
77
|
+
style: O({ width: n.value, backgroundColor: c.value })
|
|
78
|
+
}, null, 4)
|
|
79
|
+
]),
|
|
80
|
+
o("p", A, _(w(P)(e.value)), 1),
|
|
81
|
+
s.password && !e.value.isPwned && !e.value.pwnedCheckPending ? (r(), u("p", N, " Estimated crack time: " + _(e.value.crackTimeDisplay), 1)) : v("", !0),
|
|
82
|
+
s.showChecks && s.password ? (r(), u("ul", R, [
|
|
83
|
+
o("li", {
|
|
84
|
+
"data-pass": e.value.checks.length
|
|
85
|
+
}, "At least 12 characters", 8, T),
|
|
86
|
+
o("li", {
|
|
87
|
+
"data-pass": e.value.checks.lowercase
|
|
88
|
+
}, "Lowercase letter", 8, D),
|
|
89
|
+
o("li", {
|
|
90
|
+
"data-pass": e.value.checks.uppercase
|
|
91
|
+
}, "Uppercase letter", 8, L),
|
|
92
|
+
o("li", {
|
|
93
|
+
"data-pass": e.value.checks.number
|
|
94
|
+
}, "Number", 8, q),
|
|
95
|
+
o("li", {
|
|
96
|
+
"data-pass": e.value.checks.symbol
|
|
97
|
+
}, "Symbol", 8, x)
|
|
98
|
+
])) : v("", !0),
|
|
99
|
+
s.showSuggestions && (e.value.feedback.warning || e.value.feedback.suggestions.length) ? (r(), u("div", F, [
|
|
100
|
+
e.value.feedback.warning ? (r(), u("p", U, _(e.value.feedback.warning), 1)) : v("", !0),
|
|
101
|
+
o("ul", null, [
|
|
102
|
+
(r(!0), u(V, null, M(e.value.feedback.suggestions, (d) => (r(), u("li", { key: d }, _(d), 1))), 128))
|
|
103
|
+
])
|
|
104
|
+
])) : v("", !0)
|
|
105
|
+
]));
|
|
106
|
+
}
|
|
107
|
+
}), H = { class: "ps-input" }, J = { class: "ps-input__row" }, K = ["value", "placeholder"], Q = {
|
|
108
|
+
id: "password-strength-message",
|
|
109
|
+
class: "ps-sr-only"
|
|
110
|
+
}, Z = /* @__PURE__ */ b({
|
|
111
|
+
__name: "PasswordInput",
|
|
112
|
+
props: {
|
|
113
|
+
modelValue: { default: "" },
|
|
114
|
+
placeholder: { default: "Enter password" },
|
|
115
|
+
showMeter: { type: Boolean, default: !0 },
|
|
116
|
+
showGenerate: { type: Boolean, default: !0 },
|
|
117
|
+
checkPwned: { type: Boolean, default: !1 },
|
|
118
|
+
hibpOptions: {},
|
|
119
|
+
generateOptions: {}
|
|
120
|
+
},
|
|
121
|
+
emits: ["update:modelValue"],
|
|
122
|
+
setup(s, { emit: a }) {
|
|
123
|
+
const l = s, m = a, t = g(l.modelValue);
|
|
124
|
+
f(
|
|
125
|
+
() => l.modelValue,
|
|
126
|
+
(p) => {
|
|
127
|
+
t.value = p;
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
const e = i(() => ({
|
|
131
|
+
checkPwned: l.checkPwned,
|
|
132
|
+
hibp: l.hibpOptions
|
|
133
|
+
})), n = S(() => t.value, e);
|
|
134
|
+
function c(p) {
|
|
135
|
+
t.value = p, m("update:modelValue", p);
|
|
136
|
+
}
|
|
137
|
+
return (p, h) => (r(), u("div", H, [
|
|
138
|
+
o("div", J, [
|
|
139
|
+
o("input", {
|
|
140
|
+
class: "ps-input__field",
|
|
141
|
+
type: "password",
|
|
142
|
+
value: t.value,
|
|
143
|
+
placeholder: s.placeholder,
|
|
144
|
+
"aria-describedby": "password-strength-message",
|
|
145
|
+
onInput: h[0] || (h[0] = (d) => c(d.target.value))
|
|
146
|
+
}, null, 40, K),
|
|
147
|
+
s.showGenerate ? (r(), u("button", {
|
|
148
|
+
key: 0,
|
|
149
|
+
type: "button",
|
|
150
|
+
class: "ps-input__generate",
|
|
151
|
+
onClick: h[1] || (h[1] = (d) => c(w(y)(s.generateOptions)))
|
|
152
|
+
}, " Generate ")) : v("", !0)
|
|
153
|
+
]),
|
|
154
|
+
s.showMeter ? (r(), $(j, {
|
|
155
|
+
key: 0,
|
|
156
|
+
password: t.value,
|
|
157
|
+
result: w(n)
|
|
158
|
+
}, null, 8, ["password", "result"])) : v("", !0),
|
|
159
|
+
o("span", Q, _(w(P)(w(n))), 1)
|
|
160
|
+
]));
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
export {
|
|
164
|
+
Z as PasswordInput,
|
|
165
|
+
j as PasswordStrengthMeter,
|
|
166
|
+
Y as usePasswordGenerator,
|
|
167
|
+
S as usePasswordStrength
|
|
168
|
+
};
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
.ps-meter,
|
|
2
|
+
.ps-input {
|
|
3
|
+
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
4
|
+
color: #0f172a;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.ps-input__row {
|
|
8
|
+
display: flex;
|
|
9
|
+
gap: 8px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ps-input__field {
|
|
13
|
+
flex: 1;
|
|
14
|
+
min-height: 42px;
|
|
15
|
+
border: 1px solid #cbd5e1;
|
|
16
|
+
border-radius: 8px;
|
|
17
|
+
padding: 0 12px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ps-input__generate {
|
|
21
|
+
min-height: 42px;
|
|
22
|
+
border: 0;
|
|
23
|
+
border-radius: 8px;
|
|
24
|
+
padding: 0 14px;
|
|
25
|
+
color: #fff;
|
|
26
|
+
background: #2563eb;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.ps-meter {
|
|
31
|
+
margin-top: 10px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ps-meter__track {
|
|
35
|
+
height: 8px;
|
|
36
|
+
border-radius: 999px;
|
|
37
|
+
background: #e2e8f0;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.ps-meter__bar {
|
|
42
|
+
height: 100%;
|
|
43
|
+
border-radius: inherit;
|
|
44
|
+
transition: width 0.2s ease, background-color 0.2s ease;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.ps-meter__message {
|
|
48
|
+
margin: 8px 0 0;
|
|
49
|
+
font-size: 0.92rem;
|
|
50
|
+
font-weight: 600;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.ps-meter__meta,
|
|
54
|
+
.ps-meter__warning,
|
|
55
|
+
.ps-meter__feedback {
|
|
56
|
+
margin: 6px 0 0;
|
|
57
|
+
color: #475569;
|
|
58
|
+
font-size: 0.86rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.ps-meter__checks {
|
|
62
|
+
margin: 8px 0 0;
|
|
63
|
+
padding-left: 18px;
|
|
64
|
+
color: #64748b;
|
|
65
|
+
font-size: 0.84rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.ps-meter__checks li[data-pass="true"] {
|
|
69
|
+
color: #15803d;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.ps-sr-only {
|
|
73
|
+
position: absolute;
|
|
74
|
+
width: 1px;
|
|
75
|
+
height: 1px;
|
|
76
|
+
padding: 0;
|
|
77
|
+
margin: -1px;
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
clip: rect(0, 0, 0, 0);
|
|
80
|
+
white-space: nowrap;
|
|
81
|
+
border: 0;
|
|
82
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type ComputedRef, type MaybeRef, type Ref } from "vue";
|
|
2
|
+
import { type AnalyzePasswordOptions, type GeneratePasswordOptions, type PasswordStrengthResult } from "@pwd-meter/core";
|
|
3
|
+
export type UsePasswordStrengthOptions = AnalyzePasswordOptions & {
|
|
4
|
+
debounceMs?: number;
|
|
5
|
+
};
|
|
6
|
+
export declare function usePasswordStrength(password: ComputedRef<string> | (() => string), options?: MaybeRef<UsePasswordStrengthOptions>): Ref<PasswordStrengthResult>;
|
|
7
|
+
export declare function usePasswordGenerator(defaultOptions?: GeneratePasswordOptions): {
|
|
8
|
+
generate: (options?: GeneratePasswordOptions) => string;
|
|
9
|
+
};
|
|
10
|
+
export { analyzePassword, analyzePasswordAsync, generateSecurePassword } from "@pwd-meter/core";
|
|
11
|
+
export { checkPwnedPassword } from "@pwd-meter/core";
|
|
12
|
+
export type { AnalyzePasswordOptions, GeneratePasswordOptions, HibpOptions, PasswordStrengthResult, PwnedPasswordResult, StrengthLabel, } from "@pwd-meter/core";
|
|
13
|
+
//# sourceMappingURL=usePasswordStrength.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePasswordStrength.d.ts","sourceRoot":"","sources":["../src/usePasswordStrength.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAC7F,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC5B,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,0BAA0B,GAAG,sBAAsB,GAAG;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,MAAM,CAAC,EAC9C,OAAO,GAAE,QAAQ,CAAC,0BAA0B,CAAM,GACjD,GAAG,CAAC,sBAAsB,CAAC,CA+C7B;AAED,wBAAgB,oBAAoB,CAAC,cAAc,CAAC,EAAE,uBAAuB;yBAEpD,uBAAuB;EAE/C;AAED,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EACV,sBAAsB,EACtB,uBAAuB,EACvB,WAAW,EACX,sBAAsB,EACtB,mBAAmB,EACnB,aAAa,GACd,MAAM,iBAAiB,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@pwd-meter/vue",
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "Vue composables and components for password strength checking.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Alen Joy <alenjoy333@gmail.com>",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/alenjoy333/Password-Strength-Checker.git",
|
|
10
|
+
"directory": "packages/vue"
|
|
11
|
+
},
|
|
12
|
+
"keywords": ["password", "vue", "composable", "security"],
|
|
13
|
+
"type": "module",
|
|
14
|
+
"main": "./dist/index.cjs",
|
|
15
|
+
"module": "./dist/index.js",
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
17
|
+
"exports": {
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"import": "./dist/index.js",
|
|
21
|
+
"require": "./dist/index.cjs"
|
|
22
|
+
},
|
|
23
|
+
"./styles.css": "./dist/styles.css"
|
|
24
|
+
},
|
|
25
|
+
"files": ["dist"],
|
|
26
|
+
"sideEffects": ["**/*.css"],
|
|
27
|
+
"scripts": {
|
|
28
|
+
"build": "vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json && cp src/styles.css dist/styles.css",
|
|
29
|
+
"clean": "rm -rf dist"
|
|
30
|
+
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"@pwd-meter/core": "2.0.0"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"vue": ">=3.3"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@vitejs/plugin-vue": "^5.2.4",
|
|
39
|
+
"tsup": "^8.5.0",
|
|
40
|
+
"typescript": "^5.8.3",
|
|
41
|
+
"vite": "^6.3.5",
|
|
42
|
+
"vue": "^3.5.17",
|
|
43
|
+
"vue-tsc": "^2.2.10"
|
|
44
|
+
}
|
|
45
|
+
}
|