Upgrade/Install: Show/hide toggle on password fields.

Add a show/hide toggle for new passwords in initial user creation and database access during install and setup process using the same model as on user profiles. Add a new password toggle script. Change setup config table to two columns, matching the install table layout.

Props xmarcos, matt, markjaquith, nazgul, akbigdog, intoxination, rob1n, MichaelH, empireoflight, rmccue, markoheijnen, r0uter, amansurov, bi0xid, DrewAPicture, Narthur, wpnook, markparnell, costdev, clorith, ryokuhi, sabernhardt, bgoewert, ironprogrammer, adeltahri, joedolson, mukesh27, audrasjb, sergeybiryukov.
Fixes #3534.
Built from https://develop.svn.wordpress.org/trunk@56008


git-svn-id: http://core.svn.wordpress.org/trunk@55520 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2023-06-23 23:09:29 +00:00
parent 41361625fa
commit 549163d3e9
16 changed files with 164 additions and 28 deletions

View File

@ -548,6 +548,16 @@ fieldset label,
.wp-generate-pw {
margin-top: 1em;
position: relative;
}
.wp-pwd button {
height: min-content;
}
.wp-pwd button.pwd-toggle .dashicons {
position: relative;
top: 0.25rem;
}
.wp-pwd {
@ -641,6 +651,10 @@ fieldset label,
opacity: 1;
}
.password-input-wrapper {
display: inline-block;
}
.password-input-wrapper input {
font-family: Consolas, Monaco, monospace;
}
@ -1631,6 +1645,10 @@ table.form-table td .updated p {
padding: 8px;
}
.password-input-wrapper {
display: block;
}
p.search-box {
float: none;
position: absolute;

File diff suppressed because one or more lines are too long

View File

@ -547,6 +547,16 @@ fieldset label,
.wp-generate-pw {
margin-top: 1em;
position: relative;
}
.wp-pwd button {
height: min-content;
}
.wp-pwd button.pwd-toggle .dashicons {
position: relative;
top: 0.25rem;
}
.wp-pwd {
@ -640,6 +650,10 @@ fieldset label,
opacity: 1;
}
.password-input-wrapper {
display: inline-block;
}
.password-input-wrapper input {
font-family: Consolas, Monaco, monospace;
}
@ -1630,6 +1644,10 @@ table.form-table td .updated p {
padding: 8px;
}
.password-input-wrapper {
display: block;
}
p.search-box {
float: none;
position: absolute;

File diff suppressed because one or more lines are too long

View File

@ -132,7 +132,7 @@ textarea {
font-size: 14px;
text-align: right;
padding: 10px 0 10px 20px;
width: 140px;
width: 115px;
vertical-align: top;
}
@ -146,12 +146,30 @@ textarea {
font-size: 11px;
}
.form-table .setup-description {
margin: 4px 0 0;
line-height: 1.6;
}
.form-table input {
line-height: 1.33333333;
font-size: 15px;
padding: 3px 5px;
}
.wp-pwd {
margin-top: 0;
}
.form-table .wp-pwd {
display: flex;
column-gap: 4px;
}
.form-table .password-input-wrapper {
width: 100%;
}
input,
submit {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@ -162,7 +180,7 @@ submit {
.form-table input[type=url],
.form-table input[type=password],
#pass-strength-result {
width: 218px;
width: 100%;
}
.form-table th p {
@ -287,6 +305,10 @@ body.rtl,
box-sizing: border-box;
}
#pwd {
padding-left: 2.5rem;
}
.wp-pwd #pass1 {
padding-left: 50px;
}

File diff suppressed because one or more lines are too long

View File

@ -131,7 +131,7 @@ textarea {
font-size: 14px;
text-align: left;
padding: 10px 20px 10px 0;
width: 140px;
width: 115px;
vertical-align: top;
}
@ -145,12 +145,30 @@ textarea {
font-size: 11px;
}
.form-table .setup-description {
margin: 4px 0 0;
line-height: 1.6;
}
.form-table input {
line-height: 1.33333333;
font-size: 15px;
padding: 3px 5px;
}
.wp-pwd {
margin-top: 0;
}
.form-table .wp-pwd {
display: flex;
column-gap: 4px;
}
.form-table .password-input-wrapper {
width: 100%;
}
input,
submit {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@ -161,7 +179,7 @@ submit {
.form-table input[type=url],
.form-table input[type=password],
#pass-strength-result {
width: 218px;
width: 100%;
}
.form-table th p {
@ -286,6 +304,10 @@ body.rtl,
box-sizing: border-box;
}
#pwd {
padding-right: 2.5rem;
}
.wp-pwd #pass1 {
padding-right: 50px;
}

File diff suppressed because one or more lines are too long

View File

@ -140,12 +140,14 @@ function display_setup_form( $error = null ) {
<td>
<div class="wp-pwd">
<?php $initial_password = isset( $_POST['admin_password'] ) ? stripslashes( $_POST['admin_password'] ) : wp_generate_password( 18 ); ?>
<div class="password-input-wrapper">
<input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
<div id="pass-strength-result" aria-live="polite"></div>
</div>
<button type="button" class="button wp-hide-pw hide-if-no-js" data-start-masked="<?php echo (int) isset( $_POST['admin_password'] ); ?>" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
<span class="dashicons dashicons-hidden"></span>
<span class="text"><?php _e( 'Hide' ); ?></span>
</button>
<div id="pass-strength-result" aria-live="polite"></div>
</div>
<p><span class="description important hide-if-no-js">
<strong><?php _e( 'Important:' ); ?></strong>

View File

@ -0,0 +1,40 @@
/**
* Adds functionality for password visibility buttons to toggle between text and password input types.
*
* @since 6.3.0
* @output wp-admin/js/password-toggle.js
*/
( function () {
var toggleElements, status, input, icon, label, __ = wp.i18n.__;
toggleElements = document.querySelectorAll( '.pwd-toggle' );
toggleElements.forEach( function (toggle) {
toggle.classList.remove( 'hide-if-no-js' );
toggle.addEventListener( 'click', togglePassword );
} );
function togglePassword() {
status = this.getAttribute( 'data-toggle' );
input = this.parentElement.children.namedItem( 'pwd' );
icon = this.getElementsByClassName( 'dashicons' )[ 0 ];
label = this.getElementsByClassName( 'text' )[ 0 ];
if ( 0 === parseInt( status, 10 ) ) {
this.setAttribute( 'data-toggle', 1 );
this.setAttribute( 'aria-label', __( 'Hide password' ) );
input.setAttribute( 'type', 'text' );
label.innerHTML = __( 'Hide' );
icon.classList.remove( 'dashicons-visibility' );
icon.classList.add( 'dashicons-hidden' );
} else {
this.setAttribute( 'data-toggle', 0 );
this.setAttribute( 'aria-label', __( 'Show password' ) );
input.setAttribute( 'type', 'password' );
label.innerHTML = __( 'Show' );
icon.classList.remove( 'dashicons-hidden' );
icon.classList.add( 'dashicons-visibility' );
}
}
} )();

2
wp-admin/js/password-toggle.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/*! This file is auto-generated */
!function(){var t,e,s,i,a=wp.i18n.__;function d(){t=this.getAttribute("data-toggle"),e=this.parentElement.children.namedItem("pwd"),s=this.getElementsByClassName("dashicons")[0],i=this.getElementsByClassName("text")[0],0===parseInt(t,10)?(this.setAttribute("data-toggle",1),this.setAttribute("aria-label",a("Hide password")),e.setAttribute("type","text"),i.innerHTML=a("Hide"),s.classList.remove("dashicons-visibility"),s.classList.add("dashicons-hidden")):(this.setAttribute("data-toggle",0),this.setAttribute("aria-label",a("Show password")),e.setAttribute("type","password"),i.innerHTML=a("Show"),s.classList.remove("dashicons-hidden"),s.classList.add("dashicons-visibility"))}document.querySelectorAll(".pwd-toggle").forEach(function(t){t.classList.remove("hide-if-no-js"),t.addEventListener("click",d)})}();

View File

@ -223,33 +223,41 @@ switch ( $step ) {
<table class="form-table" role="presentation">
<tr>
<th scope="row"><label for="dbname"><?php _e( 'Database Name' ); ?></label></th>
<td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" placeholder="wordpress"<?php echo $autofocus; ?>/></td>
<td id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></td>
<td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" placeholder="wordpress"<?php echo $autofocus; ?>/>
<p id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></p></td>
</tr>
<tr>
<th scope="row"><label for="uname"><?php _e( 'Username' ); ?></label></th>
<td><input name="uname" id="uname" type="text" aria-describedby="uname-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" /></td>
<td id="uname-desc"><?php _e( 'Your database username.' ); ?></td>
<td><input name="uname" id="uname" type="text" aria-describedby="uname-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" />
<p id="uname-desc"><?php _e( 'Your database username.' ); ?></p></td>
</tr>
<tr>
<th scope="row"><label for="pwd"><?php _e( 'Password' ); ?></label></th>
<td><input name="pwd" id="pwd" type="text" aria-describedby="pwd-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" spellcheck="false" /></td>
<td id="pwd-desc"><?php _e( 'Your database password.' ); ?></td>
<td>
<div class="wp-pwd">
<input name="pwd" id="pwd" type="password" class="regular-text" data-reveal="1" aria-describedby="pwd-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" spellcheck="false" />
<button type="button" class="button pwd-toggle hide-if-no-js" data-toggle="0" data-start-masked="1" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
<span class="dashicons dashicons-visibility"></span>
<span class="text"><?php _e( 'Show' ); ?></span>
</button>
</div>
<p id="pwd-desc"><?php _e( 'Your database password.' ); ?></p>
</td>
</tr>
<tr>
<th scope="row"><label for="dbhost"><?php _e( 'Database Host' ); ?></label></th>
<td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" /></td>
<td id="dbhost-desc">
<td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" />
<p id="dbhost-desc">
<?php
/* translators: %s: localhost */
printf( __( 'You should be able to get this info from your web host, if %s does not work.' ), '<code>localhost</code>' );
?>
</td>
</p></td>
</tr>
<tr>
<th scope="row"><label for="prefix"><?php _e( 'Table Prefix' ); ?></label></th>
<td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" /></td>
<td id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></td>
<td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" />
<p id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></p></td>
</tr>
</table>
<?php
@ -260,6 +268,7 @@ switch ( $step ) {
<p class="step"><input name="submit" type="submit" value="<?php echo htmlspecialchars( __( 'Submit' ), ENT_QUOTES ); ?>" class="button button-large" /></p>
</form>
<?php
wp_print_scripts( 'password-toggle' );
break;
case 2:

View File

@ -643,9 +643,10 @@ switch ( $action ) {
<input type="hidden" value=" " /><!-- #24364 workaround -->
<button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
<div class="wp-pwd hide-if-js">
<span class="password-input-wrapper">
<div class="password-input-wrapper">
<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="new-password" spellcheck="false" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
</span>
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
</div>
<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
<span class="text"><?php _e( 'Hide' ); ?></span>
@ -654,7 +655,6 @@ switch ( $action ) {
<span class="dashicons dashicons-no" aria-hidden="true"></span>
<span class="text"><?php _e( 'Cancel' ); ?></span>
</button>
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
</div>
</td>
</tr>

View File

@ -570,14 +570,14 @@ if ( current_user_can( 'create_users' ) ) {
<button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate password' ); ?></button>
<div class="wp-pwd">
<?php $initial_password = wp_generate_password( 24 ); ?>
<span class="password-input-wrapper">
<div class="password-input-wrapper">
<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
</span>
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
</div>
<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
<span class="text"><?php _e( 'Hide' ); ?></span>
</button>
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
</div>
</td>
</tr>

View File

@ -1171,6 +1171,9 @@ function wp_default_scripts( $scripts ) {
);
$scripts->set_translations( 'password-strength-meter' );
$scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 );
$scripts->set_translations( 'password-toggle' );
$scripts->add( 'application-passwords', "/wp-admin/js/application-passwords$suffix.js", array( 'jquery', 'wp-util', 'wp-api-request', 'wp-date', 'wp-i18n', 'wp-hooks' ), false, 1 );
$scripts->set_translations( 'application-passwords' );

View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.3-alpha-56007';
$wp_version = '6.3-alpha-56008';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.