Introduce a Cancel button and onUnload warning for password changes.

fixes #33079
props johnjamesjacoby

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

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

@@ -7,6 +7,7 @@
 			pw_field2 = $('#pass2'),
 			pw_togglebtn = pw_new.find('.wp-hide-pw'),
 			pw_generatebtn = pw_new.find('button.wp-generate-pw'),
+			pw_cancelbtn = pw_new.find('button.wp-cancel-pw'),
 			pw_2 = $('.user-pass2-wrap'),
 			parentform = pw_new.closest('form'),
 			pw_strength = $('#pass-strength-result'),
@@ -14,8 +15,10 @@
 			pw_submitbtn_new = $( '#createusersub' ),
 			pw_checkbox = $('.pw-checkbox'),
 			pw_weak = $('.pw-weak'),
+			pw_update_lock = false,
 			// Set up a text version of the password input
 			newField = document.createElement( 'input');
+
 			newField.type = 'text';
 
 			var pwFieldText = $( newField );
@@ -56,6 +59,7 @@
 		}
 
 		parentform.on('submit', function(){
+			pw_update_lock = false;
 			pw_field2.val( pw_field.val() );
 			pwWrapper.removeClass( 'show-password' );
 		});
@@ -110,6 +114,7 @@
 		} );
 
 		pw_new.on( 'click', 'button.wp-generate-pw', function(){
+			pw_update_lock = true;
 			pw_generatebtn.hide();
 			pw_line.show();
 			generatePassword();
@@ -119,9 +124,17 @@
 					pwFieldText[0].setSelectionRange( 0, 100 );
 				}
 			}, 0 );
-
 		});
 
+		pw_submitbtn_edit.on( 'click', function() {
+			pw_update_lock = false;
+		});
+
+		pw_cancelbtn.on( 'click', function() {
+			pw_update_lock = false;
+			pw_generatebtn.show();
+			pw_line.hide();
+		});
 
 		pw_togglebtn.on( 'click', function() {
 			var show = pw_togglebtn.attr( 'data-toggle' );
@@ -145,6 +158,13 @@
 			}
 
 		});
+
+		/* Warn the user if password was generated but not saved */
+		$( window ).on( 'beforeunload', function() {
+			if ( true === pw_update_lock ) {
+				return userProfileL10n.warn;
+			}
+		} );
 	});
 
 	function check_pass_strength() {

src/wp-admin/user-edit.php

@@ -469,6 +469,9 @@ if ( $show_password_fields ) :
 				<span class="dashicons dashicons-visibility"></span>
 				<span class="text"><?php _e( 'Hide' ); ?></span>
 			</button>
+			<button type="button" class="button button-secondary wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
+				<span class="text"><?php _e( 'Cancel' ); ?></span>
+			</button>
 			<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
 		</div>
 	</td>

src/wp-admin/user-new.php

@@ -407,6 +407,9 @@ if ( apply_filters( 'show_password_fields', true ) ) : ?>
 					<span class="dashicons dashicons-visibility"></span>
 					<span class="text"><?php _e( 'Hide' ); ?></span>
 				</button>
+				<button type="button" class="button button-secondary wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
+					<span class="text"><?php _e( 'Cancel' ); ?></span>
+				</button>
 				<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
 			</div>
 			<p><span class="description"><?php _e( 'A password reset link will be sent to the user via email.' ); ?></span></p>

src/wp-includes/script-loader.php

@@ -374,8 +374,10 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter', 'wp-util' ), false, 1 );
 	did_action( 'init' ) && $scripts->localize( 'user-profile', 'userProfileL10n', array(
-		'show' => __( 'Show' ),
-		'hide' => __( 'Hide' ),
+		'warn'     => __( 'Your new password has not been saved.' ),
+		'show'     => __( 'Show' ),
+		'hide'     => __( 'Hide' ),
+		'cancel'   => __( 'Cancel' ),
 		'ariaShow' => esc_attr__( 'Show password' ),
 		'ariaHide' => esc_attr__( 'Hide password' ),
 	) );