Refactor Password

pull/2940/head
Tuğçe Küçükoğlu 2022-09-05 10:47:48 +03:00
parent cdc029e472
commit 271fd62d8d
1 changed files with 40 additions and 34 deletions

View File

@ -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);
} }
}, },