Show/hide password UI using an eye icon

[rebeccaturner17]

Please, can someone investigate for me / conversion team how much work it would be for us to use our own 'eye' icon instead of a checkbox for password form fields?

We are working on the Conversion Buy Flow project.

Attached is the wireframe proposed change. If this is possible I can create the proper icon later.

[gvonkoss]

We've decided to put this on hold, the eye icon would overlap with icons that lastpass etc automatically add to the field, so may revisit this with UXD further down the line

[notlee]

Mark Limb asked about this pattern for the app. The login page they are working on has "so many options at present. Check boxes, links, primary, secondary CTA's, that it makes the UI very confusing". This is the pattern we currently use to review a password:

An eye icon can be tricky to do well though. You have to fight with browser plugins and native browser features.

For example LastPass icons are placed in that part of the field. To avoid that the eye icon should be a suffix of the input, not laid over it as in the mockup above. I wonder if that was Google's reasoning here:

Some browsers like Edge have a native eye icon to hide/show the password — users could end up with two eye icons. We already display our own hide/show option alongside any default reveal icon, so I'm not too worried about this. In the instance of Edge, we can use -ms-reveal to hide the default reveal button so there are not two -- or even better, could we hide our own implementation given -ms-reveal is supported?

[JakeChampion]

FT.com now do the same as the Google screenshot Lee posted above, having the eye icon to the right of the input:

The FT app website does not have a show password fuctionality:

[notlee]

Depends on https://github.com/Financial-Times/origami/issues/718