Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/apertureless/vue-password-strength-meter
🔐 Password strength meter based on zxcvbn in vue.js
https://github.com/apertureless/vue-password-strength-meter
password password-safety password-strength-meter vue vuejs vuejs2 zxcvbn
Last synced: about 5 hours ago
JSON representation
🔐 Password strength meter based on zxcvbn in vue.js
- Host: GitHub
- URL: https://github.com/apertureless/vue-password-strength-meter
- Owner: apertureless
- License: mit
- Created: 2017-01-14T15:40:22.000Z (about 8 years ago)
- Default Branch: develop
- Last Pushed: 2021-06-29T17:19:53.000Z (over 3 years ago)
- Last Synced: 2024-10-29T17:14:04.258Z (3 months ago)
- Topics: password, password-safety, password-strength-meter, vue, vuejs, vuejs2, zxcvbn
- Language: JavaScript
- Size: 2.33 MB
- Stars: 567
- Watchers: 15
- Forks: 68
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue - vue-password-strength-meter - password-strength-meter?style=social) - 交互式密码强度计 (实用库)
- awesome-github-vue - vue-password-strength-meter - 交互式密码强度计 (实用库)
- awesome - vue-password-strength-meter - 交互式密码强度计 (实用库)
- awesome-github-vue - vue-password-strength-meter - 交互式密码强度计 (实用库)
README
# 🔓 vue-password-strength-meter
[![Build Status](https://travis-ci.org/apertureless/vue-password-strength-meter.svg?branch=master)](https://travis-ci.org/apertureless/vue-password-strength-meter)
[![npm version](https://badge.fury.io/js/vue-password-strength-meter.svg)](https://badge.fury.io/js/vue-password-strength-meter)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-password-strength-meter/blob/master/LICENSE.txt)[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)
Interactive password strength meter based on [zxcvbn](https://github.com/dropbox/zxcvbn) for vue.js
## 📺 Demo
[Demo here](https://apertureless.github.io/vue-password-strength-meter/)
## 🔧 Install
`yarn add vue-password-strength-meter zxcvbn`
## 👈 Usage
```javascript
import Password from 'vue-password-strength-meter'
export default {
components: { Password },
data: () => ({
password: null
})
}```
## 👈 With events```javascript
import Password from 'vue-password-strength-meter'
export default {
components: { Password },
data: () => ({
password: null
}),
methods: {
showFeedback ({suggestions, warning}) {
console.log('🙏', suggestions)
console.log('⚠', warning)
},
showScore (score) {
console.log('💯', score)
}
}
}```
### With custom input
```html
import Password from 'vue-password-strength-meter'
export default {
components: { Password },
data: () => ({
password: null
})
}```
## 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 | Password__field | input field class |
| disabledClass | String | Password__field--disabled | disabled input field class |
| errorClass | String | Password__badge--error | error class for password count badge |
| successClass | String | Password__badge--success | success class for password count badge |
| strengthMeterClass | String | Password__strength-meter | strength-meter class |
| strengthMeterFillClass | String | Password__strength-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) [ℹ] (https://github.com/dropbox/zxcvbn#usage)
- `@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
``` bash
# 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](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
## Support