Changeset 33362

Timestamp:

07/22/2015 04:55:17 PM (9 years ago)

Author:

markjaquith

Message:

Make password field toggling work in IE8, and clean up a bunch of password CSS issues.

fixes #32886
props peterwilsoncc, adamsilverstein

Location:

trunk/src/wp-admin

Files:

• css/forms.css (modified) (2 diffs)
• css/install.css (modified) (3 diffs)
• install.php (modified) (2 diffs)
• js/user-profile.js (modified) (7 diffs)

trunk/src/wp-admin/css/forms.css

@@ -480 +480 @@
 }
 
-#pass1.short {
+#pass1.short, #pass1-text.short {
     border-color: #e35b5b;
 }
 
-#pass1.bad {
+#pass1.bad, #pass1-text.bad {
     border-color: #f78b53;
 }
 
-#pass1.good {
+#pass1.good, #pass1-text.good {
     border-color: #ffc733;
 }
 
-#pass1.strong {
+#pass1.strong, #pass1-text.strong {
     border-color: #83c373;
 }
@@ -502 +502 @@
 .indicator-hint {
     padding-top: 8px;
+}
+
+#pass1-text,
+.show-password #pass1 {
+    display: none;
+}
+
+.show-password #pass1-text
+{
+    display: inline-block;
+}
+
+.form-table span.description.important {
+    font-size: 12px;
 }
 

trunk/src/wp-admin/css/install.css

@@ -206 +206 @@
     border: 1px solid #ddd;
     color: #23282d;
+    margin: -2px 5px 5px 0px;
+    padding: 3px 5px;
+    text-align: center;
+    width: 218px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     opacity: 0;
-    padding: 3px 5px;
-    text-align: center;
-    width: 218px;
 }
 
@@ -239 +240 @@
 }
 
-[name="admin_password"].short {
+#pass1.short, #pass1-text.short {
     border-color: #e35b5b;
 }
 
-[name="admin_password"].bad {
+#pass1.bad, #pass1-text.bad {
     border-color: #f78b53;
 }
 
-[name="admin_password"].good {
+#pass1.good, #pass1-text.good {
     border-color: #ffc733;
 }
 
-[name="admin_password"].strong {
+#pass1.strong, #pass1-text.strong {
     border-color: #83c373;
 }
@@ -277 +278 @@
 #pass2 {
     direction: ltr;
+}
+
+#pass1-text,
+.show-password #pass1 {
+    display: none;
+}
+
+.show-password #pass1-text
+{
+    display: inline-block;
+}
+
+.form-table span.description.important {
+    font-size: 12px;
 }
 

trunk/src/wp-admin/install.php

@@ -138 +138 @@
             </th>
             <td>
-                <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">
+                <div class="">
                     <?php $initial_password = wp_generate_password( 24 ); ?>
                     <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
@@ -148 +147 @@
                     <div id="pass-strength-result" aria-live="polite"></div>
                 </div>
-                <p><span class="description hide-if-no-js"><?php _e( 'A password reset link will be sent to you via email.' ); ?></span></p>
+                <p><span class="description important hide-if-no-js">
+                <strong><?php _e( 'Important:' )?></strong> <?php _e( 'You will need this password to log in, please store it in a secure location.' ); ?></span></p>
             </td>
         </tr>

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

@@ -1 @@
-/* global ajaxurl, pwsL10n, userProfileL10n */
+/* global ajaxurl, pwsL10n */
 (function($){
     $(function(){
@@ -14 +14 @@
             pw_submitbtn_new = $( '#createusersub' ),
             pw_checkbox = $('.pw-checkbox'),
-            pw_weak = $('.pw-weak')
-        ;
-
+            pw_weak = $('.pw-weak'),
+            // Set up a text version of the password input
+            newField = document.createElement( 'input');
+            newField.type = 'text';
+
+            var pwFieldText = $( newField );
+
+        if ( pw_field.length > 0 ) {
+            pwFieldText
+                .attr( {
+                    'id':           'pass1-text',
+                    'name':         'pass1-text',
+                    'autocomplete': 'off'
+                } )
+                .addClass( pw_field[0].className )
+                .data( 'pw', pw_field.data( 'pw' ) )
+                .val( pw_field.val() );
+
+            pw_field
+                .wrap( '<span class="password-input-wrapper"></span>' )
+                .after( pwFieldText );
+        }
+
+        var pwWrapper = pw_field.parent();
         var generatePassword = window.generatePassword = function() {
             if ( typeof zxcvbn !== 'function' ) {
@@ -23 +44 @@
                 pw_field.val( pw_field.data( 'pw' ) );
                 pw_field.trigger( 'propertychange' );
-                pw_field.attr( 'type', 'text' ).focus();
-                pw_field[0].setSelectionRange(100, 100);
+                pwWrapper.addClass( 'show-password' );
             }
         };
@@ -32 +52 @@
         pw_togglebtn.show();
         pw_generatebtn.show();
-
         if ( pw_field.data( 'reveal' ) == 1 ) {
             generatePassword();
@@ -39 +58 @@
         parentform.on('submit', function(){
             pw_field2.val( pw_field.val() );
-            pw_field.attr('type', 'password');
-        });
+            pwWrapper.removeClass( 'show-password' );
+        });
+
+        pwFieldText.on( 'input', function(){
+            pw_field.val( pwFieldText.val() );
+            pw_field.trigger( 'propertychange' );
+        } );
 
 
@@ -46 +70 @@
             setTimeout( function(){
                 var cssClass = pw_strength.attr('class');
-                pw_field.removeClass( 'short bad good strong' );
+                pwFieldText.val( pw_field.val() );
+                pw_field.add(pwFieldText).removeClass( 'short bad good strong' );
                 if ( 'undefined' !== typeof cssClass ) {
-                    pw_field.addClass( cssClass );
+                    pw_field.add(pwFieldText).addClass( cssClass );
                     if ( cssClass == 'short' || cssClass == 'bad' ) {
                         if ( ! pw_checkbox.attr( 'checked' ) ) {
@@ -89 +114 @@
             pw_line.show();
             generatePassword();
-        });
+            _.defer( function() {
+                pwFieldText.focus();
+                if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
+                    pwFieldText[0].setSelectionRange( 0, 100 );
+                }
+            }, 0 );
+
+        });
+
 
         pw_togglebtn.on( 'click', function() {
             var show = pw_togglebtn.attr( 'data-toggle' );
             if ( show == 1 ) {
-                pw_field.attr( 'type', 'text' );
+                pwWrapper.addClass( 'show-password' );
                 pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide })
                     .find( '.text' ).text( userProfileL10n.hide )
                 ;
+                pwFieldText.focus();
+                if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) {
+                    pwFieldText[0].setSelectionRange( 0, 100 );
+                }
             } else {
-                pw_field.attr( 'type', 'password' );
+                pwWrapper.removeClass( 'show-password' );
                 pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow })
-                    .find( '.text' ).text( userProfileL10n.show )
-                ;
-            }
-            pw_field.focus();
-            pw_field[0].setSelectionRange(100, 100);
+                    .find( '.text' ).text( userProfileL10n.show );
+                pw_field.focus();
+                if ( ! _.isUndefined( pw_field[0].setSelectionRange ) ) {
+                    pw_field[0].setSelectionRange( 0, 100 );
+                }
+            }
+
         });
     });