Ticket #3534: 3534.3.diff
File 3534.3.diff, 12.9 KB (added by , 20 months ago) |
---|
-
src/js/_enqueues/admin/password-toggle.js
1 /** 2 * Adds functionality for password visibility buttons to toggle between text and password input types. 3 * 4 * @since 6.3.0 5 * @output wp-admin/js/password-toggle.js 6 */ 7 8 ( function () { 9 var toggleElements, status, input, icon, label, __ = wp.i18n.__; 10 11 toggleElements = document.querySelectorAll( '.pwd-toggle' ); 12 13 toggleElements.forEach( function (toggle) { 14 toggle.classList.remove( 'hide-if-no-js' ); 15 toggle.addEventListener( 'click', togglePassword ); 16 } ); 17 18 function togglePassword() { 19 status = this.getAttribute( 'data-toggle' ); 20 input = this.parentElement.children.namedItem( 'pwd' ); 21 icon = this.getElementsByClassName( 'dashicons' )[ 0 ]; 22 label = this.getElementsByClassName( 'text' )[ 0 ]; 23 24 if ( 0 === parseInt( status, 10 ) ) { 25 this.setAttribute( 'data-toggle', 1 ); 26 this.setAttribute( 'aria-label', __( 'Hide password' ) ); 27 input.setAttribute( 'type', 'text' ); 28 label.innerHTML = __( 'Hide' ); 29 icon.classList.remove( 'dashicons-visibility' ); 30 icon.classList.add( 'dashicons-hidden' ); 31 } else { 32 this.setAttribute( 'data-toggle', 0 ); 33 this.setAttribute( 'aria-label', __( 'Show password' ) ); 34 input.setAttribute( 'type', 'password' ); 35 label.innerHTML = __( 'Show' ); 36 icon.classList.remove( 'dashicons-hidden' ); 37 icon.classList.add( 'dashicons-visibility' ); 38 } 39 } 40 } )(); -
src/wp-admin/css/forms.css
Property changes on: src/js/_enqueues/admin/password-toggle.js ___________________________________________________________________ Added: svn:eol-style ## -0,0 +1 ## +native \ No newline at end of property
547 547 548 548 .wp-generate-pw { 549 549 margin-top: 1em; 550 position: relative; 550 551 } 551 552 553 .wp-pwd button { 554 height: min-content; 555 } 556 557 .wp-pwd button.pwd-toggle .dashicons { 558 position: relative; 559 top: 0.25rem; 560 } 561 552 562 .wp-pwd { 553 563 margin-top: 1em; 554 564 position: relative; … … 640 650 opacity: 1; 641 651 } 642 652 653 .password-input-wrapper { 654 display: inline-block; 655 } 656 643 657 .password-input-wrapper input { 644 658 font-family: Consolas, Monaco, monospace; 645 659 } … … 1630 1644 padding: 8px; 1631 1645 } 1632 1646 1647 .password-input-wrapper { 1648 display: block; 1649 } 1650 1633 1651 p.search-box { 1634 1652 float: none; 1635 1653 position: absolute; -
src/wp-admin/css/install.css
131 131 font-size: 14px; 132 132 text-align: left; 133 133 padding: 10px 20px 10px 0; 134 width: 1 40px;134 width: 115px; 135 135 vertical-align: top; 136 136 } 137 137 … … 145 145 font-size: 11px; 146 146 } 147 147 148 .form-table .setup-description { 149 margin: 4px 0 0; 150 line-height: 1.6; 151 } 152 148 153 .form-table input { 149 154 line-height: 1.33333333; 150 155 font-size: 15px; … … 151 156 padding: 3px 5px; 152 157 } 153 158 159 .wp-pwd { 160 margin-top: 0; 161 } 162 163 .form-table .wp-pwd { 164 display: flex; 165 column-gap: 4px; 166 } 167 168 .form-table .password-input-wrapper { 169 width: 100%; 170 } 171 154 172 input, 155 173 submit { 156 174 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; … … 161 179 .form-table input[type=url], 162 180 .form-table input[type=password], 163 181 #pass-strength-result { 164 width: 218px;182 width: 100%; 165 183 } 166 184 167 185 .form-table th p { … … 286 304 box-sizing: border-box; 287 305 } 288 306 307 #pwd { 308 padding-right: 2.5rem; 309 } 310 289 311 .wp-pwd #pass1 { 290 312 padding-right: 50px; 291 313 } -
src/wp-admin/install.php
140 140 <td> 141 141 <div class="wp-pwd"> 142 142 <?php $initial_password = isset( $_POST['admin_password'] ) ? stripslashes( $_POST['admin_password'] ) : wp_generate_password( 18 ); ?> 143 <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" /> 143 <div class="password-input-wrapper"> 144 <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" /> 145 <div id="pass-strength-result" aria-live="polite"></div> 146 </div> 144 147 <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' ); ?>"> 145 148 <span class="dashicons dashicons-hidden"></span> 146 149 <span class="text"><?php _e( 'Hide' ); ?></span> 147 150 </button> 148 <div id="pass-strength-result" aria-live="polite"></div>149 151 </div> 150 152 <p><span class="description important hide-if-no-js"> 151 153 <strong><?php _e( 'Important:' ); ?></strong> -
src/wp-admin/setup-config.php
223 223 <table class="form-table" role="presentation"> 224 224 <tr> 225 225 <th scope="row"><label for="dbname"><?php _e( 'Database Name' ); ?></label></th> 226 <td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" placeholder="wordpress"<?php echo $autofocus; ?>/> </td>227 < td id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></td>226 <td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" placeholder="wordpress"<?php echo $autofocus; ?>/> 227 <p id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></p></td> 228 228 </tr> 229 229 <tr> 230 230 <th scope="row"><label for="uname"><?php _e( 'Username' ); ?></label></th> 231 <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>232 < td id="uname-desc"><?php _e( 'Your database username.' ); ?></td>231 <td><input name="uname" id="uname" type="text" aria-describedby="uname-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" /> 232 <p id="uname-desc"><?php _e( 'Your database username.' ); ?></p></td> 233 233 </tr> 234 234 <tr> 235 235 <th scope="row"><label for="pwd"><?php _e( 'Password' ); ?></label></th> 236 <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> 237 <td id="pwd-desc"><?php _e( 'Your database password.' ); ?></td> 236 <td> 237 <div class="wp-pwd"> 238 <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" /> 239 <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' ); ?>"> 240 <span class="dashicons dashicons-visibility"></span> 241 <span class="text"><?php _e( 'Show' ); ?></span> 242 </button> 243 </div> 244 <p id="pwd-desc"><?php _e( 'Your database password.' ); ?></p> 245 </td> 238 246 </tr> 239 247 <tr> 240 248 <th scope="row"><label for="dbhost"><?php _e( 'Database Host' ); ?></label></th> 241 <td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" /> </td>242 < tdid="dbhost-desc">249 <td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" /> 250 <p id="dbhost-desc"> 243 251 <?php 244 252 /* translators: %s: localhost */ 245 253 printf( __( 'You should be able to get this info from your web host, if %s does not work.' ), '<code>localhost</code>' ); 246 254 ?> 247 </ td>255 </p></td> 248 256 </tr> 249 257 <tr> 250 258 <th scope="row"><label for="prefix"><?php _e( 'Table Prefix' ); ?></label></th> 251 <td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" /> </td>252 < td id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></td>259 <td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" /> 260 <p id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></p></td> 253 261 </tr> 254 262 </table> 255 263 <?php … … 260 268 <p class="step"><input name="submit" type="submit" value="<?php echo htmlspecialchars( __( 'Submit' ), ENT_QUOTES ); ?>" class="button button-large" /></p> 261 269 </form> 262 270 <?php 271 wp_print_scripts( 'password-toggle' ); 263 272 break; 264 273 265 274 case 2: -
src/wp-admin/user-edit.php
643 643 <input type="hidden" value=" " /><!-- #24364 workaround --> 644 644 <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button> 645 645 <div class="wp-pwd hide-if-js"> 646 < spanclass="password-input-wrapper">646 <div class="password-input-wrapper"> 647 647 <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" /> 648 </span> 648 <div style="display:none" id="pass-strength-result" aria-live="polite"></div> 649 </div> 649 650 <button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>"> 650 651 <span class="dashicons dashicons-hidden" aria-hidden="true"></span> 651 652 <span class="text"><?php _e( 'Hide' ); ?></span> … … 654 655 <span class="dashicons dashicons-no" aria-hidden="true"></span> 655 656 <span class="text"><?php _e( 'Cancel' ); ?></span> 656 657 </button> 657 <div style="display:none" id="pass-strength-result" aria-live="polite"></div>658 658 </div> 659 659 </td> 660 660 </tr> -
src/wp-admin/user-new.php
570 570 <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate password' ); ?></button> 571 571 <div class="wp-pwd"> 572 572 <?php $initial_password = wp_generate_password( 24 ); ?> 573 < spanclass="password-input-wrapper">573 <div class="password-input-wrapper"> 574 574 <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" /> 575 </span> 575 <div style="display:none" id="pass-strength-result" aria-live="polite"></div> 576 </div> 576 577 <button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>"> 577 578 <span class="dashicons dashicons-hidden" aria-hidden="true"></span> 578 579 <span class="text"><?php _e( 'Hide' ); ?></span> 579 580 </button> 580 <div style="display:none" id="pass-strength-result" aria-live="polite"></div>581 581 </div> 582 582 </td> 583 583 </tr> -
src/wp-includes/script-loader.php
1171 1171 ); 1172 1172 $scripts->set_translations( 'password-strength-meter' ); 1173 1173 1174 $scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 ); 1175 $scripts->set_translations( 'password-toggle' ); 1176 1174 1177 $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 ); 1175 1178 $scripts->set_translations( 'application-passwords' ); 1176 1179