Password meter dynamic changes problem solved
parent
67320fb0d8
commit
2172c7206d
|
@ -177,6 +177,7 @@ export default {
|
|||
onFocus(event) {
|
||||
this.focused = true;
|
||||
if (this.feedback) {
|
||||
this.setPasswordMeter(this.modelValue)
|
||||
this.overlayVisible = true;
|
||||
}
|
||||
|
||||
|
@ -184,6 +185,7 @@ export default {
|
|||
},
|
||||
onBlur(event) {
|
||||
this.focused = false;
|
||||
|
||||
if (this.feedback) {
|
||||
this.overlayVisible = false;
|
||||
}
|
||||
|
@ -193,39 +195,8 @@ export default {
|
|||
onKeyUp(event) {
|
||||
if (this.feedback) {
|
||||
const value = event.target.value;
|
||||
let label = null;
|
||||
let meter = null;
|
||||
|
||||
switch (this.testStrength(value)) {
|
||||
case 1:
|
||||
label = this.weakText;
|
||||
meter = {
|
||||
strength: 'weak',
|
||||
width: '33.33%'
|
||||
};
|
||||
break;
|
||||
|
||||
case 2:
|
||||
label = this.mediumText;
|
||||
meter = {
|
||||
strength: 'medium',
|
||||
width: '66.66%'
|
||||
};
|
||||
break;
|
||||
|
||||
case 3:
|
||||
label = this.strongText;
|
||||
meter = {
|
||||
strength: 'strong',
|
||||
width: '100%'
|
||||
};
|
||||
break;
|
||||
|
||||
default:
|
||||
label = this.promptText;
|
||||
meter = null;
|
||||
break;
|
||||
}
|
||||
const {meter,label} = this.checkPasswordStrength(value);
|
||||
|
||||
this.meter = meter;
|
||||
this.infoText = label;
|
||||
|
@ -241,6 +212,50 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
setPasswordMeter() {
|
||||
debugger
|
||||
if(!this.feedback || !this.modelValue) return;
|
||||
|
||||
const {meter,label} = this.checkPasswordStrength(this.modelValue);
|
||||
this.meter = meter;
|
||||
this.infoText = label;
|
||||
if (!this.overlayVisible) {
|
||||
this.overlayVisible = true;
|
||||
}
|
||||
},
|
||||
checkPasswordStrength(value) {
|
||||
let label = null;
|
||||
let meter = null;
|
||||
switch (this.testStrength(value)) {
|
||||
case 1:
|
||||
label = this.weakText;
|
||||
meter = {
|
||||
strength: 'weak',
|
||||
width: '33.33%'
|
||||
};
|
||||
break;
|
||||
case 2:
|
||||
label = this.mediumText;
|
||||
meter = {
|
||||
strength: 'medium',
|
||||
width: '66.66%'
|
||||
};
|
||||
break;
|
||||
case 3:
|
||||
label = this.strongText;
|
||||
meter = {
|
||||
strength: 'strong',
|
||||
width: '100%'
|
||||
};
|
||||
break;
|
||||
default:
|
||||
label = this.promptText;
|
||||
meter = null;
|
||||
break;
|
||||
}
|
||||
|
||||
return { label, meter };
|
||||
},
|
||||
bindScrollListener() {
|
||||
if (!this.scrollHandler) {
|
||||
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input.$el, () => {
|
||||
|
|
Loading…
Reference in New Issue