Skip to content

Simplify and improve password forms

Lukas Weingarten requested to merge password-strength into master

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:

  1. Password is not entered yet: 'Password required' (error)
  2. Password is shorter than 8 characters: 'Please use at least 8 characters' (error)
  3. Password contains at least 8 characters but has a strength level of 1: 'Please use a strong password' (error)
  4. Password has a strength of level 2: 'Sufficient password' (warning)
  5. 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

Merge request reports