wikijs-fork/client/components/common/password-strength.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>