Simplify and improve password forms
A new component for entering passwords has been introduced. It's used by the login, register and password-reset views and offers a better UX and a strength check for new passwords. The second field for entering password again has been removed. To let users control if the entered password is correct, a button for showing/hiding the password has been added. To ensure that new passwords are strong enough a password strength check has been added. The following states for entering a new password are possible:
- Password is not entered yet: 'Password required' (error)
- Password is shorter than 8 characters: 'Please use at least 8 characters' (error)
- Password contains at least 8 characters but has a strength level of 1: 'Please use a strong password' (error)
- Password has a strength of level 2: 'Sufficient password' (warning)
- Password has a strength of level 3 or higher: 'Strong password' (success)
Usage of PasswordEntryComponent
:
Template:
<!-- some html-->
<app-password-entry [checkStrength]="true" [isNew]="true" [preFill]="'new_password'"></app-password-entry>
...
Component:
@ViewChild(PasswordEntryComponent) passwordEntry: PasswordEntryComponent;
...
const password = this.passwordEntry.getPassword();
Closes #788 (closed)
Edited by Lukas Weingarten