Improve UX when registering with or updating to a blocked weak password
🎨 Figma design file
Problem
The default error messages are displayed if a form is submitted which attempts to set a user's password to one which is weak.
Original MR here: Blocks weak passwords on sign up or password ch... (!86310 - merged) including a thread on the topic of UI/UX
Other password complexity rules may be configured: our UX should tie in with those too. https://docs.gitlab.com/ee/user/profile/user_passwords.html#password-requirements
Current State
This is on my local GDK instance:
To decide: what NEEDS to be done before the FF is enabled?
-
Current State
Option 0: (serverside only) return a validation error on submit- Advantages: no new API or frontend code
- Disadvantage: users are able to submit invalid forms, error message is ugly
- Option 1: Reimplement all the backend logic in javascript, and check pre-submit
- Advantages: probably faster since there's no network request
- Disadvantages:
- backend and frontend validation logic must be kept in sync
- must both have specs,
- two sources of truth,
- performance impact of loading 4000 hardcoded weak passwords on the registration page
- Option 2: Add an API to validate password, and check pre-submit
- Advantages:
- single source of truth for password validation (incl. length, complexity, weak passwords, etc)
- can likely copy the
GET /users/USERNAME/exists
pattern (high urgency, rate limited, unauthenticated controller endpoint; form validation javascript)
- Disadvantages:
- waiting on a network request
- perhaps needing to disable the register button until that call comes back,
- need to make sure that API endpoint is handling the password as safely as our other registration endpoints
- mitigation on perceivable user impact might be that users also already need to do a CAPTCHA most of the time (on .com at least), so there's already a delay between completing the form and clicking submit
- Advantages:
- Option 3: Add a link / help text
- Advantages: can be paired with any of the above options, is easy to code
- Disadvantages: (maybe??) clutters the sign up form
Option 3 example:
Real feedback
We should be more transparent about password requirements on the registration flow. The only requirement is that it should be 8 characters but [person] ran into issues because [their] password was "too simple"
https://gitlab.com/gitlab-org/gitlab/-/issues/383285#note_1182995380
Edited by Daniel Mora