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
parent
41361625fa
commit
549163d3e9
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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' );
|
||||
}
|
||||
}
|
||||
} )();
|
||||
|
|
@ -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)})}();
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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' );
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue