vue-password-strength-meter

by apertureless

πŸ” Password strength meter based on zxcvbn in vue.js

477 Stars 49 Forks Last release: 5 months ago (v1.7.2) MIT License 108 Commits 23 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

πŸ”“ vue-password-strength-meter

Build Status npm version vue2 license

ko-fi

Interactive password strength meter based on zxcvbn for vue.js

πŸ”“

πŸ“Ί Demo

Demo here

πŸ”§ Install

yarn add vue-password-strength-meter zxcvbn

πŸ‘ˆ Usage


πŸ‘ˆ With events

With custom input

Props

| Prop | Type | Default Value | Description |----------|:-------------:|------|------| | secureLength | Number | 7 | password min length | | badge | Boolean | true | display password count badge | | toggle | Boolean | false | show button to toggle password visibility | | showPassword | Boolean | false | If you are not using the

toggle
button you can directly show / hide the password with this prop | | defaultClass | String | Passwordfield | input field class | | disabledClass | String | Passwordfield--disabled | disabled input field class | | errorClass | String | Passwordbadge--error | error class for password count badge | | successClass | String | Passwordbadge--success | success class for password count badge | | strengthMeterClass | String | Passwordstrength-meter | strength-meter class | | strengthMeterFillClass | String | Passwordstrength-meter--fill | strength-meter class for individual data fills | | showStrengthMeter | Boolean | true | Hide the Strength Meter if you want to implement your own | | strengthMeterOnly | Boolean | false | Hides the built-in input if you want to implement your own | | labelHide | String | 'Hide Password' | Label for the hide icon | labelShow | String | 'Show Password' | Label for the show icon | userInputs | Array | empty array | Array of strings that zxcvbn will treat as an extra dictionary | referenceValue | String | 'input' | Prop to change the
ref
of the input. This way you can have the input outside of the component.

Events

Show / Hide Password

  • @show
    will be emitted if showing the password
  • @hide
    will be emitted if hiding the password
  • @score
    will return the zxcvbn score (Integer from 0-4) β„Ή
  • @feedback
    will return an zxcvbn feedback object with
    suggestion
    and
    warning

πŸ’… Customizing

You can customize the styling of the input field, badge and strength-meter by passing your own css classes to

defaultClass
,
strengthMeterClass
etc.

Build Setup

# install dependencies
npm install

serve with hot reload at localhost:8080

npm run dev

build for production with minification

npm run build

run unit tests

npm run unit

run all tests

npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Support

Buy Me A Coffee

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.