Add reveal/conceal password toggle on registration page
What does this MR do and why?
- Adds an
eye/eye-slash
button in the password field on the sign-up page to reveal/conceal your password. - Set a fixed height for
.input-icon-wrapper
, since icons inside this wrapper are aligned at 50% of it's height which gets mis-aligned if the input field has an error message. - Adds a
padding-right
to the password-input with the icon, to avoid overlapping of auto-fill icons that browsers/extensions add with theeye/eye-slash
Screenshots or screen recordings
Chrome
Chrome with 1Password autofill
Firefox
Safari
How to set up and validate locally
- Navigate to
http://localhost:3000/users/sign_up
and click on the eye/eye-slash button to reveal/conceal your password
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to gitlab-org/growth/ui-ux#90 (closed)
Edited by Hinam Mehra