80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
|
<template lang="pug">
|
||
|
|
.password-strength
|
||
|
|
v-progress-linear(
|
||
|
|
:color='passwordStrengthColor'
|
||
|
|
v-model='passwordStrength'
|
||
|
|
height='2'
|
||
|
|
)
|
||
|
|
.caption(v-if='!hideText', :class='passwordStrengthColor + "--text"') {{passwordStrengthText}}
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import zxcvbn from 'zxcvbn'
|
||
|
|
import _ from 'lodash'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
hideText: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
passwordStrength: 0,
|
||
|
|
passwordStrengthColor: 'grey',
|
||
|
|
passwordStrengthText: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value(newValue) {
|
||
|
|
this.checkPasswordStrength(newValue)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
checkPasswordStrength: _.debounce(function (pwd) {
|
||
|
|
if (!pwd || pwd.length < 1) {
|
||
|
|
this.passwordStrength = 0
|
||
|
|
this.passwordStrengthColor = 'grey'
|
||
|
|
this.passwordStrengthText = ''
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const strength = zxcvbn(pwd)
|
||
|
|
this.passwordStrength = _.round((strength.score + 1 ) / 5 * 100)
|
||
|
|
if (this.passwordStrength <= 20) {
|
||
|
|
this.passwordStrengthColor = 'red'
|
||
|
|
this.passwordStrengthText = 'Very Weak'
|
||
|
|
} else if (this.passwordStrength <= 40) {
|
||
|
|
this.passwordStrengthColor = 'orange'
|
||
|
|
this.passwordStrengthText = 'Weak'
|
||
|
|
} else if (this.passwordStrength <= 60) {
|
||
|
|
this.passwordStrengthColor = 'teal'
|
||
|
|
this.passwordStrengthText = 'Average'
|
||
|
|
} else if (this.passwordStrength <= 80) {
|
||
|
|
this.passwordStrengthColor = 'green'
|
||
|
|
this.passwordStrengthText = 'Strong'
|
||
|
|
} else {
|
||
|
|
this.passwordStrengthColor = 'green'
|
||
|
|
this.passwordStrengthText = 'Very Strong'
|
||
|
|
}
|
||
|
|
}, 100)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
|
||
|
|
.password-strength > .caption {
|
||
|
|
width: 100%;
|
||
|
|
left: 0;
|
||
|
|
margin: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: calc(100% + 5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|