ng-password-strength-visualizer

live example

inspired by

This component will display a pixelated image that will becomes less pixelated when the strength of the password rises.

Usage

<app-password-strength-visualizer [imageUrl]="'./myImage.png'"
  [password]="this.input$ | async" [visible]="this.showPasswordIndicator" (passwordStrengthChange)="this.show($event);">
</app-password-strength-visualizer>

| Property | Type | Description | | ---------------------- | :----: | --------------------------------------------------------------------------------: | | imageUrl | Input | The image that should be displayed | | visible | Input | Determine if the image currently is visible | | password | Input | The password that should be checked | | passwordStrengthChange | Output | Called for every changed password input and gives informations about the strength |

TODOs

• [ ] an option to inverse the function
• [ ] the image should resize proportional to the container