[wp-trac] [WordPress Trac] #42888: Add a "Show" button next to password fields on mobile

[WordPress Trac]

#42888: Add a "Show" button next to password fields on mobile
-------------------------------------------------+-------------------------
 Reporter:  johnbillion                          |       Owner:
     Type:  enhancement                          |      Status:  new
 Priority:  normal                               |   Milestone:  5.0
Component:  Login and Registration               |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  good-first-bug has-patch dev-        |     Focuses:  javascript
  feedback has-screenshots ux-feedback           |
-------------------------------------------------+-------------------------

Comment (by Iceable):

 42888-2.diff is based on 42888.diff, with the following changes:

 * Swapped `dashicons-visibility` and `dashicon-hidden` icons: the first
 patch was using icons to describe the current state of the field
 ("dashicon-hidden" when the password is hidden). Since the icon is a
 clickable button, I think it makes more sense to describe the action (i.e.
 click the "dashicons-visibility" icon to make the password visible). This
 is also consistent with the buttons that already exist in other places.

 * Changed `id="wp-show-login-pass"` to `class="wp-hide-pw"`, for
 consistency with the already existing "show/hide" buttons in other places.

 * Moved inline styles from first patch to `/wp-admin/css/login.css`.

 * Added some padding to the right password field. This prevents the
 password value and the icon from overlapping, in case of very long
 passwords.

 About other places where password are entered, as @audrasjb mentioned,
 this was a first iteration to test and validate the approach.
 If I'm not mistaken, the only other places where passwords are entered are
 the ones below and they already have a show/hide button:
 * `user-edit.php` (User profile page)
 * `user-new.php` (Add New User page)
 * `install.php` (Step 1 of the "5-minutes install")

 Though these are using the convoluted "IE8 friendly" implementation as
 @adamsilverstein explained in [#3] (thank you for providing background by
 the way, this makes more sense now!).

 So if the approach we are using here for `wp-login.php` is the way to go,
 we could take this opportunity to refactor them.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42888#comment:11>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform