Have green color as "100% strong password"

[andreElrico]

I understand the design of returning the primary color here. However my primary color is not green.
How can I make the "primary color" green? This is probably a material flaw by not having a success color.

password-strength/src/module/component/mat-password-strength/mat-password-strength.component.ts

Line 85 in 9e033f8

get color(): string {

I solved this problem by adding global styles css:

mat-password-strength mat-progress-bar.mat-progress-bar.mat-primary > div.mat-progress-bar-primary.mat-progress-bar-fill.mat-progress-bar-element::after {
    background-color: #155724;
}

mat-password-strength mat-progress-bar.mat-progress-bar.mat-primary > div.mat-progress-bar-secondary.mat-progress-bar-fill.mat-progress-bar-element::after {
    background-color: #155724;
}

mat-password-strength-info > mat-card  > mat-card-content > div.info-row > mat-icon.mat-icon.mat-primary {
    color: #155724;
}

Is there a way or any plans on making a API that styles a 100% save password green?

Something like

@Input() savePasswordGreen: boolean

Best wishes,
André

[AnthonyNahas]

Currently, we are only supporting the native colors of the material palette that has been selected. I can understand that a completely valid password should has a green color. I will take this feature in consideration for the next release!

Thanks for suggesting that 🍻

[AnthonyNahas]

@andreElrico this has been solved 👍
The new version will be released soon

[AnthonyNahas]

@andreElrico I've just implemented this feature 🎉

I will publish in few minutes v3.8.0

To use always the green color for a strong password.. just add the green css class to
the mat-password-strength like the following example:

<mat-password-strength #passwordComponent
                       class="green"
                       [password]="password.value">
</mat-password-strength>

Thanks again for requesting this feature, this could be interesting to integration in ngx-auth-firebaseui

cheers 🍻

[AnthonyNahas]

v3.8.0 is now live 👍

[crismani]

@AnthonyNahas This isn’t working in 4.0.1 has anything changed?

Thanks in advance for your help.

[bleuscyther]

Not working anymore

[AnthonyNahas]

I've just updated the angular and material dependencies ...

[AnthonyNahas]

I have tried to fix that.. apparently the angular material team change some css classes related to the material progress bar..

I think, I need some help asap to fix that 💯 Please feel free to pull a new request for changes

thank you 🍻