New password change/set UI.

* Generate the password for the user
* More tightly integrate password strength meter
* Warn on weak passwords

see #32589

props MikeHansenMe, adamsilverstein, binarykitten

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

src/wp-admin/css/forms.css

@@ -401,6 +401,11 @@ input[type="number"].small-text {
 	color: #777;
 }
 
+button.wp-hide-pw > .dashicons {
+	position: relative;
+	top: 3px;
+}
+
 label,
 #your-profile label + a {
 	vertical-align: middle;
@@ -434,34 +439,58 @@ fieldset label,
 #pass-strength-result {
 	background-color: #eee;
 	border: 1px solid #ddd;
-	float: left;
+	margin: -2px 5px 5px 1px;
-	margin: 13px 5px 5px 1px;
 	padding: 3px 5px;
 	text-align: center;
-	width: 200px;
+	width: 25em;
-	display: none;
+	box-sizing: border-box;
+	opacity: 0;
 }
 
 #pass-strength-result.short {
+	opacity: 1;
 	background-color: #ffa0a0;
 	border-color: #f04040;
 }
 
 #pass-strength-result.bad {
+	opacity: 1;
 	background-color: #ffb78c;
 	border-color: #ff853c;
 }
 
 #pass-strength-result.good {
+	opacity: 1;
 	background-color: #ffec8b;
 	border-color: #fc0;
 }
 
 #pass-strength-result.strong {
+	opacity: 1;
 	background-color: #c3ff88;
 	border-color: #8dff1c;
 }
 
+#pass1.short {
+	border-color: #f04040;
+}
+
+#pass1.bad {
+	border-color: #ff853c;
+}
+
+#pass1.good {
+	border-color: #fc0;
+}
+
+#pass1.strong {
+	border-color: #8dff1c;
+}
+
+.pw-weak{
+	display:none;
+}
+
 .indicator-hint {
 	padding-top: 8px;
 }

src/wp-admin/includes/user.php

@@ -176,7 +176,7 @@ function edit_user( $user_id = 0 ) {
 		$user_id = wp_update_user( $user );
 	} else {
 		$user_id = wp_insert_user( $user );
-		wp_new_user_notification( $user_id, isset( $_POST['send_password'] ) ? wp_unslash( $pass1 ) : '' );
+		wp_new_user_notification( $user_id );
 	}
 	return $user_id;
 }

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

@@ -1,5 +1,110 @@
 /* global ajaxurl, pwsL10n */
 (function($){
+	$(function(){
+		var pw_new = $('.user-pass1-wrap'),
+			pw_line = pw_new.find('.wp-pwd'),
+			pw_field = $('#pass1'),
+			pw_field2 = $('#pass2'),
+			pw_togglebtn = pw_new.find('.wp-hide-pw'),
+			pw_generatebtn = pw_new.find('button.wp-generate-pw'),
+			pw_2 = $('.user-pass2-wrap'),
+			parentform = pw_new.closest('form'),
+			pw_strength = $('#pass-strength-result'),
+			pw_submitbtn_edit = $('#submit'),
+			pw_submitbtn_new = $( '#createusersub' ),
+			pw_checkbox = $('.pw-checkbox'),
+			pw_weak = $('.pw-weak')
+		;
+
+		generatePassword = function() {
+			pw_field.val( pw_field.data( 'pw' ) );
+			pw_field.trigger( 'propertychange' );
+			pw_field.attr( 'type', 'text' ).focus();
+			pw_field[0].setSelectionRange(100, 100);
+		};
+
+		pw_2.hide();
+		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');
+		});
+
+
+		pw_field.on('input propertychange', function(){
+			setTimeout( function(){
+				var cssClass = pw_strength.attr('class');
+				pw_field.removeClass( 'short bad good strong' );
+				if ( 'undefined' !== typeof cssClass ) {
+					pw_field.addClass( cssClass );
+					if ( cssClass == 'short' || cssClass == 'bad' ) {
+						if ( ! pw_checkbox.attr( 'checked' ) ) {
+							pw_submitbtn_new.attr( 'disabled','disabled' );
+							pw_submitbtn_edit.attr( 'disabled','disabled' );
+						}
+						pw_weak.show();
+					} else {
+						pw_submitbtn_new.removeAttr( 'disabled' );
+						pw_submitbtn_edit.removeAttr( 'disabled' );
+						pw_weak.hide();
+					}
+				}
+			}, 1 );
+		} );
+
+		pw_checkbox.change( function() {
+			if ( pw_checkbox.attr( 'checked' ) ) {
+				pw_submitbtn_new.removeAttr( 'disabled' );
+				pw_submitbtn_edit.removeAttr( 'disabled' );
+			} else {
+				pw_submitbtn_new.attr( 'disabled','disabled' );
+				pw_submitbtn_edit.attr( 'disabled','disabled' );
+			}
+		} );
+
+		/**
+		 * Fix a LastPass mismatch issue, LastPass only changes pass2.
+		 *
+		 * This fixes the issue by copying any changes from the hidden
+		 * pass2 field to the pass1 field.
+		 */
+		pw_field2.on( 'input propertychange', function() {
+			pw_field.val( pw_field2.val() );
+			pw_field.trigger( 'propertychange' );
+		} );
+
+		pw_new.on( 'click', 'button.wp-generate-pw', function(){
+			pw_generatebtn.hide();
+			pw_line.show();
+			generatePassword();
+		});
+
+		pw_togglebtn.on( 'click', function() {
+			var show = pw_togglebtn.attr( 'data-toggle' );
+			if ( show == 1 ) {
+				pw_field.attr( 'type', 'text' );
+				pw_togglebtn.attr( 'data-toggle', 0 )
+					.find( '.text' )
+						.text( 'hide' )
+				;
+			} else {
+				pw_field.attr( 'type', 'password' );
+				pw_togglebtn.attr( 'data-toggle', 1 )
+					.find( '.text' )
+						.text( 'show' )
+				;
+			}
+			pw_field.focus();
+			pw_field[0].setSelectionRange(100, 100);
+		});
+	});
 
 	function check_pass_strength() {
 		var pass1 = $('#pass1').val(), pass2 = $('#pass2').val(), strength;

src/wp-admin/user-edit.php

@@ -462,27 +462,33 @@ if ( $show_password_fields ) :
 	<th><label for="pass1"><?php _e( 'New Password' ); ?></label></th>
 	<td>
 		<input class="hidden" value=" " /><!-- #24364 workaround -->
-		<input type="password" name="pass1" id="pass1" class="regular-text" size="16" value="" autocomplete="off" />
+		<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Generate new password' ); ?></button>
-		<p class="description"><?php _e( 'If you would like to change the password type a new one. Otherwise leave this blank.' ); ?></p>
+		<div class="wp-pwd hide-if-js">
+			<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" />
+			<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
+				<span class="dashicons dashicons-visibility"></span>
+				<span class="text">hide</span>
+			</button>
+			<div style="display:none" id="pass-strength-result"></div>
+		</div>
 	</td>
 </tr>
-<tr class="user-pass2-wrap">
+<tr class="user-pass2-wrap hide-if-js">
 	<th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th>
 	<td>
-	<input name="pass2" type="password" id="pass2" class="regular-text" size="16" value="" autocomplete="off" />
+	<input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" />
 	<p class="description"><?php _e( 'Type your new password again.' ); ?></p>
-	<br />
+	</td>
-	<div id="pass-strength-result"><?php _e( 'Strength indicator' ); ?></div>
+</tr>
-	<p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
+<tr class="pw-weak">
+	<th><label for="pw-weak"><?php _e( 'Confirm Password' ); ?></label></th>
+	<td>
+	<input type="checkbox" name="pw-weak" class="pw-checkbox" />
+	<?php _e( 'Confirm use of weak password' ); ?>
 	</td>
 </tr>
 <?php endif; ?>
 
-<?php
-// This is a temporary hook for WordPress 4.3 development. Do not use it or document it.
-do_action( '__temp_password_field', $profileuser );
-?>
-
 <?php
 if ( IS_PROFILE_PAGE && count( $sessions->get_all() ) === 1 ) : ?>
 	<tr class="user-sessions-wrap hide-if-no-js">

src/wp-admin/user-new.php

@@ -190,7 +190,7 @@ get_current_screen()->set_help_sidebar(
 );
 
 wp_enqueue_script('wp-ajax-response');
-wp_enqueue_script('user-profile');
+wp_enqueue_script( 'user-profile' );
 
 /**
  * Filter whether to enable user auto-complete for non-super admins in Multisite.
@@ -355,7 +355,7 @@ $new_user_lastname = $creating && isset( $_POST['last_name'] ) ? wp_unslash( $_P
 $new_user_email = $creating && isset( $_POST['email'] ) ? wp_unslash( $_POST['email'] ) : '';
 $new_user_uri = $creating && isset( $_POST['url'] ) ? wp_unslash( $_POST['url'] ) : '';
 $new_user_role = $creating && isset( $_POST['role'] ) ? wp_unslash( $_POST['role'] ) : '';
-$new_user_send_password = $creating && isset( $_POST['send_password'] ) ? wp_unslash( $_POST['send_password'] ) : '';
+$new_user_send_password = $creating && isset( $_POST['send_password'] ) ? wp_unslash( $_POST['send_password'] ) : true;
 $new_user_ignore_pass = $creating && isset( $_POST['noconfirmation'] ) ? wp_unslash( $_POST['noconfirmation'] ) : '';
 
 ?>
@@ -390,25 +390,40 @@ $new_user_ignore_pass = $creating && isset( $_POST['noconfirmation'] ) ? wp_unsl
  * @param bool $show Whether to show the password fields. Default true.
  */
 if ( apply_filters( 'show_password_fields', true ) ) : ?>
-	<tr class="form-field form-required">
+	<tr class="form-field form-required user-pass1-wrap">
-		<th scope="row"><label for="pass1"><?php _e('Password'); ?> <span class="description"><?php /* translators: password input field */_e('(required)'); ?></span></label></th>
+		<th scope="row">
+			<label for="pass1">
+				<?php _e( 'Password' ); ?>
+				<span class="description hide-if-js"><?php /* translators: password input field */_e( '(required)' ); ?></span>
+			</label>
+		</th>
 		<td>
 			<input class="hidden" value=" " /><!-- #24364 workaround -->
-			<input name="pass1" type="password" id="pass1" autocomplete="off" />
+			<button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
+			<div class="wp-pwd hide-if-js">
+				<?php $initial_password = wp_generate_password( 24 ); ?>
+				<input type="password" name="pass1" id="pass1" class="regular-text" value="<?php echo esc_attr( $initial_password ); ?>" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" />
+				<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
+					<span class="dashicons dashicons-visibility"></span>
+					<span class="text">hide</span>
+				</button>
+				<div style="display:none" id="pass-strength-result"></div>
+			</div>
+			<p><span class="description"><?php _e( 'A password reset link will be sent to the user via email' ); ?></span></p>
 		</td>
 	</tr>
-	<tr class="form-field form-required">
+	<tr class="form-field form-required user-pass2-wrap hide-if-js">
-		<th scope="row"><label for="pass2"><?php _e('Repeat Password'); ?> <span class="description"><?php /* translators: password input field */_e('(required)'); ?></span></label></th>
+		<th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php /* translators: password input field */_e('(required)'); ?></span></label></th>
 		<td>
 		<input name="pass2" type="password" id="pass2" autocomplete="off" />
-		<br />
-		<div id="pass-strength-result"><?php _e('Strength indicator'); ?></div>
-		<p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
 		</td>
 	</tr>
-	<tr>
+	<tr class="pw-weak">
-		<th scope="row"><?php _e('Send Password?') ?></th>
+		<th><label for="pw-weak"><?php _e( 'Confirm Password' ); ?></label></th>
-		<td><label for="send_password"><input type="checkbox" name="send_password" id="send_password" value="1" <?php checked( $new_user_send_password ); ?> /> <?php _e('Send this password to the new user by email.'); ?></label></td>
+		<td>
+			<input type="checkbox" name="pw-weak" class="pw-checkbox" />
+			<?php _e( 'Confirm use of weak password' ); ?>
+		</td>
 	</tr>
 <?php endif; ?>
 <?php } // !is_multisite ?>

src/wp-includes/default-constants.php

@@ -92,6 +92,9 @@ function wp_initial_constants() {
 	if ( !defined('SHORTINIT') )
 		define('SHORTINIT', false);
 
+	// Constants for features added to WP that should short-circuit their plugin implementations
+	define( 'WP_FEATURE_BETTER_PASSWORDS', true );
+
 	// Constants for expressing human-readable intervals
 	// in their respective number of seconds.
 	define( 'MINUTE_IN_SECONDS', 60 );

src/wp-includes/pluggable.php

@@ -1690,9 +1690,9 @@ if ( !function_exists('wp_new_user_notification') ) :
  * @since 2.0.0
  *
  * @param int    $user_id        User ID.
- * @param string $plaintext_pass Optional. The user's plaintext password. Default empty.
  */
-function wp_new_user_notification($user_id, $plaintext_pass = '') {
+function wp_new_user_notification($user_id) {
+	global $wpdb;
 	$user = get_userdata( $user_id );
 
 	// The blogname option is escaped with esc_html on the way into the database in sanitize_option
@@ -1705,14 +1705,26 @@ function wp_new_user_notification($user_id, $plaintext_pass = '') {
 
 	@wp_mail(get_option('admin_email'), sprintf(__('[%s] New User Registration'), $blogname), $message);
 
-	if ( empty($plaintext_pass) )
+	// Generate something random for a password reset key.
-		return;
+	$key = wp_generate_password( 20, false );
+
+	do_action( 'retrieve_password_key', $user->user_login, $key );
+
+	// Now insert the key, hashed, into the DB.
+	if ( empty( $wp_hasher ) ) {
+		require_once ABSPATH . WPINC . '/class-phpass.php';
+		$wp_hasher = new PasswordHash( 8, true );
+	}
+	$hashed = time() . ':' . $wp_hasher->HashPassword( $key );
+	$wpdb->update( $wpdb->users, array( 'user_activation_key' => $hashed ), array( 'user_login' => $user->user_login ) );
+
+	$message = sprintf(__('Username: %s'), $user->user_login) . "\r\n\r\n";
+	$message .= __('To set your password, visit the following address:') . "\r\n\r\n";
+	$message .= '<' . network_site_url("wp-login.php?action=rp&key=$key&login=" . rawurlencode($user->user_login), 'login') . ">\r\n\r\n";
 
-	$message  = sprintf(__('Username: %s'), $user->user_login) . "\r\n";
-	$message .= sprintf(__('Password: %s'), $plaintext_pass) . "\r\n";
 	$message .= wp_login_url() . "\r\n";
 
-	wp_mail($user->user_email, sprintf(__('[%s] Your username and password'), $blogname), $message);
+	wp_mail($user->user_email, sprintf(__('[%s] Your username and password info'), $blogname), $message);
 
 }
 endif;

src/wp-includes/script-loader.php

@@ -365,7 +365,7 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'password-strength-meter', "/wp-admin/js/password-strength-meter$suffix.js", array( 'jquery', 'zxcvbn-async' ), false, 1 );
 	did_action( 'init' ) && $scripts->localize( 'password-strength-meter', 'pwsL10n', array(
-		'empty' => __('Strength indicator'),
+		'empty' => __(' '),
 		'short' => __('Very weak'),
 		'bad' => __('Weak'),
 		/* translators: password strength */

src/wp-includes/user.php

@@ -2409,7 +2409,7 @@ function _wp_get_user_contactmethods( $user = null ) {
  * @return string The password hint text.
  */
 function wp_get_password_hint() {
-	$hint = __( 'Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ % ^ & ).' );
+	$hint = __( 'Hint: The password should be at least twelve characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ % ^ & ).' );
 
 	/**
 	 * Filter the text describing the site's password complexity policy.
@@ -2615,7 +2615,7 @@ function register_new_user( $user_login, $user_email ) {
 
 	update_user_option( $user_id, 'default_password_nag', true, true ); //Set up the Password change nag.
 
-	wp_new_user_notification( $user_id, $user_pass );
+	wp_new_user_notification( $user_id );
 
 	return $user_id;
 }

src/wp-login.php

@@ -652,13 +652,15 @@ case 'rp' :
 <form name="resetpassform" id="resetpassform" action="<?php echo esc_url( network_site_url( 'wp-login.php?action=resetpass', 'login_post' ) ); ?>" method="post" autocomplete="off">
 	<input type="hidden" id="user_login" value="<?php echo esc_attr( $rp_login ); ?>" autocomplete="off" />
 
-	<p>
+	<p class="user-pass1-wrap">
-		<label for="pass1"><?php _e('New password') ?><br />
+		<label for="pass1"><?php _e('New password') ?></label><br />
-		<input type="password" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" /></label>
+		<div class="wp-pwd">
+			<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" />
+		</div>
 	</p>
-	<p>
+	<p class="user-pass2-wrap">
-		<label for="pass2"><?php _e('Confirm new password') ?><br />
+		<label for="pass2"><?php _e('Confirm new password') ?></label><br />
-		<input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" /></label>
+		<input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
 	</p>
 
 	<div id="pass-strength-result" class="hide-if-no-js"><?php _e('Strength indicator'); ?></div>