password-strength
password-strength copied to clipboard
Have green color as "100% strong password"
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.
https://github.com/angular-material-extensions/password-strength/blob/9e033f8d992470fb3396e4cfb8d0f577e0dd8b7d/src/module/component/mat-password-strength/mat-password-strength.component.ts#L85
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Γ©
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 π»
@andreElrico this has been solved π The new version will be released soon
@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 π»
v3.8.0 is now live π
@AnthonyNahas This isnβt working in 4.0.1 has anything changed?
Thanks in advance for your help.
Not working anymore
I've just updated the angular and material dependencies ...
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 π»