vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #932 - Reimplement password strength ui

pull/938/head
mertsincan 2021-02-03 13:28:16 +03:00
parent c30f84b063
commit 288d7b6b43
1 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/password/Password.vue
View File

@ -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
@ -111,7 +113,7 @@ export default {
} }
else { else {
DomHandler.relativePosition(this.overlay, this.$refs.input.$el); DomHandler.relativePosition(this.overlay, this.$refs.input.$el);
} }
}, },
appendContainer() { appendContainer() {
if (this.appendTo) { if (this.appendTo) {
@ -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;
} }