p-password not showing password strength indicator

[peril]

When using passowrd component, the feedback line indicator is not displaying in the Freya theme

code examples: https://www.primefaces.org/primeng/showcase/#/password

Try: <p-password [(ngModel)]="value2"></p-password>

The password meter progress bar is missing.

Not sure if this is a Freya issue, but not working in my theme. Everything else displays such as the words "weak", "strong" etc..

[merve7]

Hi,

I tried but didn't replicate your issue (added ss the below);


Please, make sure that don't override the below classes;


Also, what is your primeng version?

Best regards,
Merve Özçifçi

[peril]

Hmm, i Get this.





I upgraded to the latest version of primeng@11.4.5, doesn;t seem to help.

Sorry a bit of a newbie question but how do i check if the classes are overridden?

[merve7]

Hi,
You can search classes in your stylesheet or you can use developer tools.

Do you check your theme variable file has the below variables? If not, could you add and try again?

Code: Select all

//password
$passwordMeterBg:$shade300 !default;
$passwordWeakBg:#ea5455 !default;
$passwordMediumBg:#ff9f42 !default;
$passwordStrongBg:#29c76f !default;

[ShevchenkoTaras]

use this.

:host ::ng-deep .p-password input {
width: 15rem;
}

:host ::ng-deep .p-password-panel .p-password-meter .p-password-strength.weak {
background: #D32F2F;
}

:host ::ng-deep .p-password-panel .p-password-meter .p-password-strength.medium {
background: #FBC02D;
}

:host ::ng-deep .p-password-panel .p-password-meter .p-password-strength.strong {
background: #689F38;
}