Skip to content

Add reveal/conceal password toggle on registration page

Hinam Mehra requested to merge 90-add-reveal-conceal-password-toggle into master

What does this MR do and why?

  1. Adds an eye/eye-slash button in the password field on the sign-up page to reveal/conceal your password.
  2. 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.
  3. Adds a padding-right to the password-input with the icon, to avoid overlapping of auto-fill icons that browsers/extensions add with the eye/eye-slash

Screenshots or screen recordings

Chrome

password-tooltips

Chrome with 1Password autofill

autofill-chrome

Firefox

firefox

Safari

safari

How to set up and validate locally

  1. 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.

Related to gitlab-org/growth/ui-ux#90 (closed)

Edited by Hinam Mehra

Merge request reports