/vue-password-strength-meter

🔐 Password strength meter based on zxcvbn in vue.js

Primary LanguageJavaScriptMIT LicenseMIT

🔓 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

<template>
  <password v-model="password"/>
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    })
  }
</script>

👈 With events

<template>
  <password
    v-model="password"
    :toggle="true"
    @score="showScore"
    @feedback="showFeedback"
  />
</template>

<script>
  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)
      }
    }
  }
</script>

With custom input

<template>
  <div>
    <input type="password" v-model="password">
    <password v-model="password" :strength-meter-only="true"/>
  </div>
</template>

<script>
  import Password from 'vue-password-strength-meter'
  export default {
    components: { Password },
    data: () => ({
      password: null
    })
  }
</script>

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

# 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