Fixed #932 - Reimplement password strength ui
parent
c30f84b063
commit
288d7b6b43
|
@ -6,8 +6,10 @@
|
||||||
<div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible">
|
<div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible">
|
||||||
<slot name="header"></slot>
|
<slot name="header"></slot>
|
||||||
<slot name="content">
|
<slot name="content">
|
||||||
<div class="p-password-meter" :style="{'background-position': meterPosition}"></div>
|
<div class="p-password-meter">
|
||||||
<div class="p-password-info">{{infoText}}</div>
|
<div :class="strengthClass" :style="{'width': meter ? meter.width : ''}"></div>
|
||||||
|
</div>
|
||||||
|
<div className="p-password-info">{{infoText}}</div>
|
||||||
</slot>
|
</slot>
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
@ -67,7 +69,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
overlayVisible: false,
|
overlayVisible: false,
|
||||||
meterPosition: '',
|
meter: null,
|
||||||
infoText: null,
|
infoText: null,
|
||||||
focused: false,
|
focused: false,
|
||||||
unmasked: false
|
unmasked: false
|
||||||
|
@ -170,31 +172,40 @@ export default {
|
||||||
if (this.feedback) {
|
if (this.feedback) {
|
||||||
let value = event.target.value;
|
let value = event.target.value;
|
||||||
let label = null;
|
let label = null;
|
||||||
let meterPos = null;
|
let meter = null;
|
||||||
|
|
||||||
switch (this.testStrength(value)) {
|
switch (this.testStrength(value)) {
|
||||||
case 1:
|
case 1:
|
||||||
label = this.weakText;
|
label = this.weakText;
|
||||||
meterPos = '0px -10px';
|
meter = {
|
||||||
|
strength: 'weak',
|
||||||
|
width: '33.33%'
|
||||||
|
};
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 2:
|
case 2:
|
||||||
label = this.mediumText;
|
label = this.mediumText;
|
||||||
meterPos = '0px -20px';
|
meter = {
|
||||||
|
strength: 'medium',
|
||||||
|
width: '66.66%'
|
||||||
|
};
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 3:
|
case 3:
|
||||||
label = this.strongText;
|
label = this.strongText;
|
||||||
meterPos = '0px -30px';
|
meter = {
|
||||||
|
strength: 'strong',
|
||||||
|
width: '100%'
|
||||||
|
};
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
label = this.promptText;
|
label = this.promptText;
|
||||||
meterPos = '0px 0px';
|
meter = null;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.meterPosition = meterPos;
|
this.meter = meter;
|
||||||
this.infoText = label;
|
this.infoText = label;
|
||||||
|
|
||||||
if (!this.overlayVisible) {
|
if (!this.overlayVisible) {
|
||||||
|
@ -257,6 +268,9 @@ export default {
|
||||||
toggleIconClass() {
|
toggleIconClass() {
|
||||||
return this.unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';
|
return this.unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';
|
||||||
},
|
},
|
||||||
|
strengthClass() {
|
||||||
|
return `p-password-strength ${this.meter ? this.meter.strength : ''}`;
|
||||||
|
},
|
||||||
inputType() {
|
inputType() {
|
||||||
return this.unmasked ? 'text' : 'password';
|
return this.unmasked ? 'text' : 'password';
|
||||||
},
|
},
|
||||||
|
@ -300,6 +314,12 @@ export default {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-password-strength {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
transition: width 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
.p-fluid .p-password {
|
.p-fluid .p-password {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue