v-password-strength-meter v1.0.4
Password Strength Meter For Vue
To display the strength of the password with a visual feedback.
Password Strength Meter use zxcvbn to estimate the strength of the password and also provide a visual feedback with suggestions and warning messages.
This lib was developed based on the following tutorial.
How then is password strength measured? Dropbox developed an algorithm for a realistic password strength estimator inspired by password crackers. This algorithm is packaged in a Javascript library called zxcvbn. In addition, the package contains a dictionary of commonly used English words, names and passwords.
Need lib for Angular 2+? Click here
Demo
<VPasswordStrengthMeter :password="password"></VPasswordStrengthMeter>Get Started
Step 1: Install v-password-strength-meter
npm install v-password-strength-meter --saveStep 2: Import Password Strength Meter into your app
....
import VPasswordStrengthMeter from 'v-password-strength-meter';
export default {
name: "app",
components: {
VPasswordStrengthMeter: VPasswordStrengthMeter
},Step 3: use the PasswordStrengthMeter component in your component template
<VPasswordStrengthMeter :password="password"/>API
| option | bind | type | default | description |
|---|---|---|---|---|
| password | props | string | - | password to calculate its strength |
| minPasswordLength | props | number | 8 | min length of password to calculate the strength |
| enableFeedback | props | boolean | false | to show/hide the suggestions and warning messages |
| colors | props | string[] | 'darkred', 'orangered', 'orange', 'yellowgreen', 'green' | to overide the meter colors, password strength range is 0 - 4, for strength 0 equals first color in the array and so on |
| strengthChange | \$emit | number | - | emits the strength of the provided password in number -> range 0 - 4 |