Refactor Password
parent
cdc029e472
commit
271fd62d8d
|
@ -200,12 +200,13 @@ export default {
|
||||||
return level;
|
return level;
|
||||||
},
|
},
|
||||||
onInput(event) {
|
onInput(event) {
|
||||||
this.$emit('update:modelValue', event.target.value)
|
this.$emit('update:modelValue', event.target.value);
|
||||||
},
|
},
|
||||||
onFocus(event) {
|
onFocus(event) {
|
||||||
this.focused = true;
|
this.focused = true;
|
||||||
|
|
||||||
if (this.feedback) {
|
if (this.feedback) {
|
||||||
this.setPasswordMeter(this.modelValue)
|
this.setPasswordMeter(this.modelValue);
|
||||||
this.overlayVisible = true;
|
this.overlayVisible = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -223,14 +224,12 @@ export default {
|
||||||
onKeyUp(event) {
|
onKeyUp(event) {
|
||||||
if (this.feedback) {
|
if (this.feedback) {
|
||||||
const value = event.target.value;
|
const value = event.target.value;
|
||||||
|
const { meter, label } = this.checkPasswordStrength(value);
|
||||||
const {meter,label} = this.checkPasswordStrength(value);
|
|
||||||
|
|
||||||
this.meter = meter;
|
this.meter = meter;
|
||||||
this.infoText = label;
|
this.infoText = label;
|
||||||
|
|
||||||
//escape
|
if (event.code === 'Escape') {
|
||||||
if (event.which === 27) {
|
|
||||||
this.overlayVisible && (this.overlayVisible = false);
|
this.overlayVisible && (this.overlayVisible = false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -241,11 +240,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setPasswordMeter() {
|
setPasswordMeter() {
|
||||||
if(!this.feedback || !this.modelValue) return;
|
if (!this.modelValue) return;
|
||||||
|
|
||||||
|
const { meter, label } = this.checkPasswordStrength(this.modelValue);
|
||||||
|
|
||||||
const {meter,label} = this.checkPasswordStrength(this.modelValue);
|
|
||||||
this.meter = meter;
|
this.meter = meter;
|
||||||
this.infoText = label;
|
this.infoText = label;
|
||||||
|
|
||||||
if (!this.overlayVisible) {
|
if (!this.overlayVisible) {
|
||||||
this.overlayVisible = true;
|
this.overlayVisible = true;
|
||||||
}
|
}
|
||||||
|
@ -253,33 +254,37 @@ export default {
|
||||||
checkPasswordStrength(value) {
|
checkPasswordStrength(value) {
|
||||||
let label = null;
|
let label = null;
|
||||||
let meter = null;
|
let meter = null;
|
||||||
|
|
||||||
switch (this.testStrength(value)) {
|
switch (this.testStrength(value)) {
|
||||||
case 1:
|
case 1:
|
||||||
label = this.weakText;
|
label = this.weakText;
|
||||||
meter = {
|
meter = {
|
||||||
strength: 'weak',
|
strength: 'weak',
|
||||||
width: '33.33%'
|
width: '33.33%'
|
||||||
};
|
};
|
||||||
break;
|
break;
|
||||||
case 2:
|
|
||||||
label = this.mediumText;
|
case 2:
|
||||||
meter = {
|
label = this.mediumText;
|
||||||
strength: 'medium',
|
meter = {
|
||||||
width: '66.66%'
|
strength: 'medium',
|
||||||
};
|
width: '66.66%'
|
||||||
break;
|
};
|
||||||
case 3:
|
break;
|
||||||
label = this.strongText;
|
|
||||||
meter = {
|
case 3:
|
||||||
strength: 'strong',
|
label = this.strongText;
|
||||||
width: '100%'
|
meter = {
|
||||||
};
|
strength: 'strong',
|
||||||
break;
|
width: '100%'
|
||||||
default:
|
};
|
||||||
label = this.promptText;
|
break;
|
||||||
meter = null;
|
|
||||||
break;
|
default:
|
||||||
}
|
label = this.promptText;
|
||||||
|
meter = null;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
return { label, meter };
|
return { label, meter };
|
||||||
},
|
},
|
||||||
|
@ -309,6 +314,7 @@ export default {
|
||||||
this.overlayVisible = false;
|
this.overlayVisible = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener('resize', this.resizeListener);
|
window.addEventListener('resize', this.resizeListener);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue