Contents
Description:
Password strength meter in VueJs is an indicator, that shows the strength of the password entered by the user. It can be either in text form or in a graphical form.
vue-simple-password-meter is a simple and light-weight password strength meter, written in vanilla JS.
How to use it?
1. Install the vue-simple-password-meter library using npm.
npm install vue-simple-password-meter –save
2. Then, import the component in your file. Like following:
import passwordMeter from “vue-simple-password-meter”;
3. Here is the code, that will show the strength of the password.
export default {
components: { passwordMeter },
data: () => ({
passwordValue: null,
score: null
}),
methods: {
onScore({ score, strength }) {
console.log(score); // from 0 to 4
console.log(strength); // one of : ‘risky’, ‘guessable’, ‘weak’, ‘safe’ , ‘secure’
this.score = score;
}
}
};
4. Now, create the fields by using v-model and send it to the component using password prop.
<template>
<form>
<label for=”password”>Password</label>
<input id=”password” type=”password” v-model=”passwordValue” />
<span v-if=”score === 0″>Use better password</span>
<password-meter :password=”passwordValue” @score=”onScore” />
</form>
</template>
5. You can customize the bar or, these CSS styles globally and change each state color and style.
.po-password-strength-bar {
border-radius: 2px;
transition: all 0.2s linear;
height: 5px;
margin-top: 8px;
}
.po-password-strength-bar.risky {
background-color: #f95e68;
width: 10%;
}
.po-password-strength-bar.guessable {
background-color: #fb964d;
width: 32.5%;
}
.po-password-strength-bar.weak {
background-color: #fdd244;
width: 55%;
}
.po-password-strength-bar.safe {
background-color: #b0dc53;
width: 77.5%;
}
.po-password-strength-bar.secure {
background-color: #35cc62;
width: 100%;
}
The post Implement Beautiful Password Strength Meter In VueJS appeared first on Lipku.com.
Permanent link to this post here
