Make password field toggling work in IE8, and clean up a bunch of password CSS issues.

fixes #32886
props peterwilsoncc, adamsilverstein

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

src/wp-admin/css/forms.css

@@ -479,19 +479,19 @@ fieldset label,
 	opacity: 1;
 }
 
-#pass1.short {
+#pass1.short, #pass1-text.short {
 	border-color: #e35b5b;
 }
 
-#pass1.bad {
+#pass1.bad, #pass1-text.bad {
 	border-color: #f78b53;
 }
 
-#pass1.good {
+#pass1.good, #pass1-text.good {
 	border-color: #ffc733;
 }
 
-#pass1.strong {
+#pass1.strong, #pass1-text.strong {
 	border-color: #83c373;
 }
 
@@ -503,6 +503,20 @@ fieldset label,
 	padding-top: 8px;
 }
 
+#pass1-text,
+.show-password #pass1 {
+	display: none;
+}
+
+.show-password #pass1-text
+{
+	display: inline-block;
+}
+
+.form-table span.description.important {
+	font-size: 12px;
+}
+
 p.search-box {
 	float: right;
 	margin: 0;

src/wp-admin/css/install.css

@@ -205,13 +205,14 @@ submit {
 	background-color: #eee;
 	border: 1px solid #ddd;
 	color: #23282d;
+	margin: -2px 5px 5px 0px;
+	padding: 3px 5px;
+	text-align: center;
+	width: 218px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 	opacity: 0;
-	padding: 3px 5px;
-	text-align: center;
-	width: 218px;
 }
 
 #pass-strength-result.short {
@@ -238,19 +239,19 @@ submit {
 	opacity: 1;
 }
 
-[name="admin_password"].short {
+#pass1.short, #pass1-text.short {
 	border-color: #e35b5b;
 }
 
-[name="admin_password"].bad {
+#pass1.bad, #pass1-text.bad {
 	border-color: #f78b53;
 }
 
-[name="admin_password"].good {
+#pass1.good, #pass1-text.good {
 	border-color: #ffc733;
 }
 
-[name="admin_password"].strong {
+#pass1.strong, #pass1-text.strong {
 	border-color: #83c373;
 }
 
@@ -278,6 +279,20 @@ submit {
 	direction: ltr;
 }
 
+#pass1-text,
+.show-password #pass1 {
+	display: none;
+}
+
+.show-password #pass1-text
+{
+	display: inline-block;
+}
+
+.form-table span.description.important {
+	font-size: 12px;
+}
+
 
 /* localization */
 body.rtl,

src/wp-admin/install.php

@@ -137,8 +137,7 @@ function display_setup_form( $error = null ) {
 				</label>
 			</th>
 			<td>
-				<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
+				<div class="">
-				<div class="wp-pwd hide-if-js">
 					<?php $initial_password = wp_generate_password( 24 ); ?>
 					<input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
 					<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
@@ -147,7 +146,8 @@ function display_setup_form( $error = null ) {
 					</button>
 					<div id="pass-strength-result" aria-live="polite"></div>
 				</div>
-				<p><span class="description hide-if-no-js"><?php _e( 'A password reset link will be sent to you via email.' ); ?></span></p>
+				<p><span class="description important hide-if-no-js">
+				<strong><?php _e( 'Important:' )?></strong> <?php _e( 'You will need this password to log in, please store it in a secure location.' ); ?></span></p>
 			</td>
 		</tr>
 		<tr class="form-field form-required user-pass2-wrap hide-if-js">

src/wp-admin/js/user-profile.js

@@ -1,4 +1,4 @@
-/* global ajaxurl, pwsL10n, userProfileL10n */
+/* global ajaxurl, pwsL10n */
 (function($){
 	$(function(){
 		var pw_new = $('.user-pass1-wrap'),
@@ -13,17 +13,37 @@
 			pw_submitbtn_edit = $('#submit'),
 			pw_submitbtn_new = $( '#createusersub' ),
 			pw_checkbox = $('.pw-checkbox'),
-			pw_weak = $('.pw-weak')
+			pw_weak = $('.pw-weak'),
-		;
+			// Set up a text version of the password input
+			newField = document.createElement( 'input');
+			newField.type = 'text';
 
+			var pwFieldText = $( newField );
+
+		if ( pw_field.length > 0 ) {
+			pwFieldText
+				.attr( {
+					'id':           'pass1-text',
+					'name':         'pass1-text',
+					'autocomplete': 'off'
+				} )
+				.addClass( pw_field[0].className )
+				.data( 'pw', pw_field.data( 'pw' ) )
+				.val( pw_field.val() );
+
+			pw_field
+				.wrap( '<span class="password-input-wrapper"></span>' )
+				.after( pwFieldText );
+		}
+
+		var pwWrapper = pw_field.parent();
 		var generatePassword = window.generatePassword = function() {
 			if ( typeof zxcvbn !== 'function' ) {
 				setTimeout( generatePassword, 50 );
 			} else {
 				pw_field.val( pw_field.data( 'pw' ) );
 				pw_field.trigger( 'propertychange' );
-				pw_field.attr( 'type', 'text' ).focus();
+				pwWrapper.addClass( 'show-password' );
-				pw_field[0].setSelectionRange(100, 100);
 			}
 		};
 
@@ -31,23 +51,28 @@
 		pw_line.hide();
 		pw_togglebtn.show();
 		pw_generatebtn.show();
-
 		if ( pw_field.data( 'reveal' ) == 1 ) {
 			generatePassword();
 		}
 
 		parentform.on('submit', function(){
 			pw_field2.val( pw_field.val() );
-			pw_field.attr('type', 'password');
+			pwWrapper.removeClass( 'show-password' );
 		});
 
+		pwFieldText.on( 'input', function(){
+			pw_field.val( pwFieldText.val() );
+			pw_field.trigger( 'propertychange' );
+		} );
+
 
 		pw_field.on('input propertychange', function(){
 			setTimeout( function(){
 				var cssClass = pw_strength.attr('class');
-				pw_field.removeClass( 'short bad good strong' );
+				pwFieldText.val( pw_field.val() );
+				pw_field.add(pwFieldText).removeClass( 'short bad good strong' );
 				if ( 'undefined' !== typeof cssClass ) {
-					pw_field.addClass( cssClass );
+					pw_field.add(pwFieldText).addClass( cssClass );
 					if ( cssClass == 'short' || cssClass == 'bad' ) {
 						if ( ! pw_checkbox.attr( 'checked' ) ) {
 							pw_submitbtn_new.attr( 'disabled','disabled' );
@@ -88,23 +113,37 @@
 			pw_generatebtn.hide();
 			pw_line.show();
 			generatePassword();
+			_.defer( function() {
+				pwFieldText.focus();
+				if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
+					pwFieldText[0].setSelectionRange( 0, 100 );
+				}
+			}, 0 );
+
 		});
 
+
 		pw_togglebtn.on( 'click', function() {
 			var show = pw_togglebtn.attr( 'data-toggle' );
 			if ( show == 1 ) {
-				pw_field.attr( 'type', 'text' );
+				pwWrapper.addClass( 'show-password' );
 				pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
 					.find( '.text' ).text( userProfileL10n.hide )
 				;
+				pwFieldText.focus();
+				if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
+					pwFieldText[0].setSelectionRange( 0, 100 );
+				}
 			} else {
-				pw_field.attr( 'type', 'password' );
+				pwWrapper.removeClass( 'show-password' );
 				pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
-					.find( '.text' ).text( userProfileL10n.show )
+					.find( '.text' ).text( userProfileL10n.show );
-				;
+				pw_field.focus();
+				if ( ! _.isUndefined( pw_field[0].setSelectionRange ) ) {
+					pw_field[0].setSelectionRange( 0, 100 );
+				}
 			}
-			pw_field.focus();
+
-			pw_field[0].setSelectionRange(100, 100);
 		});
 	});