@codejunkies/vue-pwned-password NPM

vue-pwned-password

Installation

npm install --save @codejunkies/vue-pwned-password
-or-
yarn add @codejunkies/vue-pwned-password

Demo

You can try a small demo of the component on CodeSandBox

Usage

<template>
  <div id="app">
    <pwned-password v-model="password" @checkcomplete="checkComplete"></pwned-password>
  </div>
</template>

<script>
import PwnedPassword from '@codejunkies/vue-pwned-password';

export default {
  name: 'app',
  data() {
    return {
      password: '',
    };
  },
  components: {
    PwnedPassword,
  },
  methods: {
    checkComplete(result) {
      if(result.compromised) {
        alert(`You should consider a diffrent password, this password has appeared ${result.appearances} times in password leaks.`) ;
      }
    }
  }
};
</script>

Events

The pwned-password component emits 2 events, one for every update to the field and one after the check is completed. The "checkcomplete" event returns two properits, one that indicates if the password is compromised or not, and a number that shows how many times the password has appeared in password leaks.

<pwned-password v-model="password" @checkcomplete="checkComplete" @input="handleInput"></pwned-password>

<script>
  methods: {
    checkComplete(result) {
      if(result.compromised) {
        alert(`You should consider a diffrent password, this password has appeared ${result.appearances} times in password leaks.`) ;
      }
    },
    handleInput(password) {
      console.log(`Input entered: ${password}`)
    }
  }

Props

Name	Type	Options	Default	Description
trigger	String	blur, change	blur	Choose when to trigger a check.
triggerTime	Number	-	500	Only if trigger option is change, how long to wait after last change to check password
showToggle	Boolean	true/false	true	Show icon to toggle between password and text
showPassword	Boolean	true/false	false	If you want to use your own toggle button (overrides "internal" toggle button)

Classes

The component will add diffrent classes to itself based on the status of the entered password.

Name	Description
password-compromised	The password has been checked and are compromised
password-uncompromised	The password has been checked but are not compromised
password-unchecked	The password has not yet been checked
password-checking	The password is being checked agaisnt havibeenpwned database

.pwned-password.password-compromised .pwned-password-input {
  border-color: #900;
}

.pwned-password.password-uncompromised .pwned-password-input {
  border-color: #090;
}

.pwned-password.password-checking .pwned-password-input {
  border-color: #009;
}

Bump version npm version patch -a -m "message" && git push --tags && npm run release