Add pressable eye in password input to display wrong password

[aulamber]

Addressed issue: Users can make a typing mistake when entering their password. An error message is then displayed, but the user cannot know where they made a mistake in entering their password since it is hidden.

Proposed solution: Inside the input (in the right side of it), add an eye icon and when the user presses on it, show the previously hidden password (attention: when the user presses, not click, so that when the user stops touching the eye icon, the password is hidden once again).

Example:

• Current behavior

• Proposed solution

1. without pressing the eye:

2. while pressing the eye

---

This PR currently has none of the required changelog labels.

A reviewer can add one of: T-Deprecation, T-Enhancement, T-Defect, T-Task to indicate what type of change this is, or add Type: [enhancement/defect/task] to the description and I'll add them for you.

[t3chguy]

How does this look on browsers/environments which already have this feature natively?

Edit:

Not great

[aulamber]

How does this look on browsers/environments which already have this feature natively?

Edit:

Not great

Can you tell us where you reproduce this double eye, on which browser(s) and environment(s)? For the microsoft eye (the one in your screenshot it seems), we could hide their eye, with this code:

input::-ms-reveal {
  display:none;
}

[t3chguy]

Can you tell us where you reproduce this double eye, on which browser(s) and environment(s)?

The above was Edge on Windows 11

cc @gsouquet as you mentioned Compound input fields will have a password reveal