Login and Registration: Add a "Show password" button on the login page.

The ability for users to see the password they're typing improves usability and accessibility of the login users flow.

- brings the login screen in line with the same feature already used in the New User, Edit User, and Reset Password pages
- improves association of labels and input fields by using explicit association with `for` / `id` attributes
- slightly increases the "Remember me" label font size

Props johnbillion, Iceable, audrasjb, joyously, adamsilverstein, boemedia, DrewAPicture, shadyvb, birgire, peterwilsoncc, pento, anevins, davidbaumwald, whyisjake, afercia.
Fixes #42888.


git-svn-id: https://develop.svn.wordpress.org/trunk@46256 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/forms.css

@@ -1500,9 +1500,9 @@ table.form-table td .updated p {
 		position: relative;
 	}
 
-	.wp-pwd [type="text"],
-	.wp-pwd [type="password"] {
-		padding-right: 88px;
+	/* Needs higher specificity than normal input type text and password. */
+	#profile-page .form-table #pass1 {
+		padding-right: 90px;
 	}
 
 	.wp-pwd button.button {

src/wp-admin/css/install.css

@@ -301,6 +301,17 @@ body.rtl,
 		box-sizing: border-box;
 	}
 
+	.wp-pwd #pass1 {
+		padding-right: 50px;
+	}
+
+	.wp-pwd .button.wp-hide-pw {
+		right: 0;
+	}
+
+	#pass-strength-result {
+		width: 100%;
+	}
 }
 
 body.language-chooser {

src/wp-admin/css/login.css

@@ -37,10 +37,6 @@ a:focus {
 		0 0 2px 1px rgba(30, 140, 190, 0.8);
 }
 
-.ie8 a:focus {
-	outline: #5b9dd9 solid 1px;
-}
-
 p {
 	line-height: 1.5;
 }
@@ -75,14 +71,6 @@ p {
 	padding: 0;
 }
 
-.login .password-input-wrapper {
-	position: relative;
-}
-
-.login .input.password-input {
-	margin: 0;
-}
-
 .login .input::-ms-clear {
 	display: none;
 }
@@ -91,7 +79,7 @@ p {
 	margin-bottom: 15px;
 }
 
-.login .button.button-secondary {
+.login .button.wp-hide-pw {
 	background: transparent;
 	border: 1px solid transparent;
 	box-shadow: none;
@@ -102,25 +90,37 @@ p {
 	padding: 5px 9px;
 	position: absolute;
 	right: 0;
-	top: 0;
+	top: 3px;
 }
 
-.login .button.button-secondary:hover {
+.login .button.wp-hide-pw:hover {
 	background: transparent;
 }
 
-.login .button.button-secondary:focus {
+.login .button.wp-hide-pw:focus {
 	background: transparent;
 	border-color: #5b9dd9;
 	box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
 }
 
-.login .button.button-secondary:active {
+.login .button.wp-hide-pw:active {
 	background: transparent;
 	box-shadow: none;
 	transform: none;
 }
 
+.login .button.wp-hide-pw .dashicons {
+	top: 4px;
+}
+
+.login .wp-pwd {
+	position: relative;
+}
+
+.no-js .hide-if-no-js {
+	display: none;
+}
+
 .login form {
 	margin-top: 20px;
 	margin-left: 0;
@@ -195,9 +195,10 @@ p {
 	font-size: 14px;
 }
 
-.login form .forgetmenot label {
-	font-size: 12px;
-	line-height: 1.58333333;
+.login .forgetmenot label,
+.login .pw-weak label {
+	line-height: 1.5;
+	vertical-align: baseline;
 }
 
 .login h1 {
@@ -270,16 +271,18 @@ p {
 }
 
 .login form .input,
-.login input[type="text"] {
+.login input[type="text"],
+.login input[type="password"] {
 	font-size: 24px;
 	width: 100%;
 	padding: 5px;
-	margin: 2px 6px 16px 0;
+	margin: 3px 6px 16px 0;
 }
 
-.login-action-rp form .input,
-.login-action-rp input[type="text"] {
-	padding: 5px 45px 5px 5px;
+.js.login input.password-input,
+.js.login-action-rp form .input,
+.js.login-action-rp input[type="text"] {
+	padding-right: 45px;
 }
 
 .login form .input,
@@ -288,14 +291,9 @@ p {
 	background: #fbfbfb;
 }
 
-.ie7 .login form .input,
-.ie8 .login form .input {
-	font-family: sans-serif;
-}
-
-.login-action-rp input[type="text"] {
-	box-shadow: none;
-	margin: 0;
+.js.login-action-rp input[type="text"],
+.js.login-action-rp input[type="password"] {
+	margin-bottom: 0;
 }
 
 .login #pass-strength-result {