Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 1 month 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 (over 7 years ago)
Default Branch: develop
Last Pushed: 2021-06-29T17:19:53.000Z (about 3 years ago)
Last Synced: 2024-04-24T01:20:31.805Z (5 months ago)
Topics: password, password-safety, password-strength-meter, vue, vuejs, vuejs2, zxcvbn
Language: JavaScript
Size: 2.33 MB
Stars: 562
Watchers: 15
Forks: 67
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