Changeset 33246

Timestamp:

07/13/2015 10:21:39 PM (11 years ago)

Author:

obenland

Message:

Passwords: New UI for install screen.

Also synchronises the use of pw_weak as an input name and removes trailing
periods from checkbox labels.

Props MikeHansenMe, adamsilverstein, obenland.
See #32589.

Location:

trunk/src

Files:

• wp-admin/css/install.css (modified) (4 diffs)
• wp-admin/install.php (modified) (4 diffs)
• wp-admin/user-edit.php (modified) (1 diff)
• wp-admin/user-new.php (modified) (3 diffs)
• wp-includes/pluggable.php (modified) (1 diff)

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

@@ -122 +122 @@
         margin-bottom: 9px;
         padding: 10px 20px 10px 0;
-        border-bottom: 8px solid #fff;
         font-size: 14px;
         vertical-align: top
@@ -172 +171 @@
 .form-table.install-success td {
         vertical-align: middle;
-        padding: 16px 20px 10px 0;
+        padding: 16px 20px 16px 0;
 }
 
@@ -199 +198 @@
 }
 
+.wp-hide-pw > .dashicons {
+        line-height: inherit;
+}
+
 #pass-strength-result {
         background-color: #eee;
-        border-color: #ddd !important;
-        border-style: solid;
-        border-width: 1px;
-        margin: 5px 5px 5px 0;
-        padding: 5px;
+        border: 1px solid #ddd;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        opacity: 0;
+        padding: 3px 5px;
         text-align: center;
-        width: 200px;
-        display: none;
+        width: 218px;
+}
+
+#pass-strength-result.short {
+        background-color: #ffa0a0;
+        border-color: #f04040;
+        opacity: 1;
 }
 
 #pass-strength-result.bad {
         background-color: #ffb78c;
-        border-color: #ff853c !important;
+        border-color: #ff853c;
+        opacity: 1;
 }
 
 #pass-strength-result.good {
         background-color: #ffec8b;
-        border-color: #ffcc00 !important;
-}
-
-#pass-strength-result.short {
-        background-color: #ffa0a0;
-        border-color: #f04040 !important;
+        border-color: #fc0;
+        opacity: 1;
 }
 
 #pass-strength-result.strong {
         background-color: #c3ff88;
-        border-color: #8dff1c !important;
+        border-color: #8dff1c;
+        opacity: 1;
+}
+
+[name="admin_password"].short {
+        border-color: #f04040;
+}
+
+[name="admin_password"].bad {
+        border-color: #ff853c;
+}
+
+[name="admin_password"].good {
+        border-color: #fc0;
+}
+
+[name="admin_password"].strong {
+        border-color: #8dff1c;
+}
+
+.pw-weak {
+        display: none;
 }
 
@@ -375 +402 @@
 }
 
+.button-secondary.hide-if-no-js,
+.hide-if-no-js {
+        display: none;
+}
+
 /**
  * HiDPI Displays

trunk/src/wp-admin/install.php

@@ -72 +72 @@
         <title><?php _e( 'WordPress &rsaquo; Installation' ); ?></title>
         <?php
-        wp_admin_css( 'install', true );
+                wp_admin_css( 'install', true );
+                wp_admin_css( 'dashicons', true );
         ?>
 </head>
@@ -129 +130 @@
                 </tr>
                 <?php if ( ! $user_table ) : ?>
-                <tr>
+                <tr class="form-field form-required user-pass1-wrap">
                         <th scope="row">
-                                <label for="pass1"><?php _e('Password, twice'); ?></label>
-                                <p><?php _e('A password will be automatically generated for you if you leave this blank.'); ?></p>
+                                <label for="pass1">
+                                        <?php _e( 'Password' ); ?>
+                                        <span class="description hide-if-js"><?php _e( '(required)' ); ?></span>
+                                </label>
                         </th>
                         <td>
-                                <input name="admin_password" type="password" id="pass1" size="25" value="" />
-                                <p><input name="admin_password2" type="password" id="pass2" size="25" value="" /></p>
-                                <div id="pass-strength-result"><?php _e('Strength indicator'); ?></div>
-                                <p><?php echo wp_get_password_hint(); ?></p>
+                                <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">
+                                        <?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 ); ?>" />
+                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
+                                                <span class="dashicons dashicons-visibility"></span>
+                                                <span class="text">hide</span>
+                                        </button>
+                                        <div id="pass-strength-result"></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>
+                        </td>
+                </tr>
+                <tr class="form-field form-required user-pass2-wrap hide-if-js">
+                        <th scope="row">
+                                <label for="pass2"><?php _e( 'Repeat Password' ); ?>
+                                        <span class="description"><?php _e( '(required)' ); ?></span>
+                                </label>
+                        </th>
+                        <td>
+                                <input name="admin_password2" type="password" id="pass2" autocomplete="off" />
+                        </td>
+                </tr>
+                <tr class="pw-weak">
+                        <th scope="row"><?php _e( 'Confirm Password' ); ?></th>
+                        <td>
+                                <label>
+                                        <input type="checkbox" name="pw_weak" class="pw-checkbox" />
+                                        <?php _e( 'Confirm use of weak password' ); ?>
+                                </label>
                         </td>
                 </tr>
@@ -149 +178 @@
                 <tr>
                         <th scope="row"><?php _e( 'Privacy' ); ?></th>
-                        <td colspan="2"><label><input type="checkbox" name="blog_public" id="blog_public" value="1" <?php checked( $blog_public ); ?> /> <?php _e( 'Allow search engines to index this site.' ); ?></label></td>
+                        <td colspan="2"><label><input type="checkbox" name="blog_public" id="blog_public" value="1" <?php checked( $blog_public ); ?> /> <?php _e( 'Allow search engines to index this site' ); ?></label></td>
                 </tr>
         </table>
-        <p class="step"><input type="submit" name="Submit" value="<?php esc_attr_e( 'Install WordPress' ); ?>" class="button button-large" /></p>
+        <p class="step"><?php submit_button( __( 'Install WordPress' ), 'large', 'Submit', false, array( 'id' => 'submit' ) ); ?></p>
         <input type="hidden" name="language" value="<?php echo isset( $_REQUEST['language'] ) ? esc_attr( $_REQUEST['language'] ) : ''; ?>" />
 </form>
@@ -324 +353 @@
 <?php wp_print_scripts( 'user-profile' ); ?>
 <?php wp_print_scripts( 'language-chooser' ); ?>
+<script type="text/javascript">
+jQuery( function( $ ) {
+        $( '.hide-if-no-js' ).removeClass( 'hide-if-no-js' );
+} );
+</script>
 </body>
 </html>

trunk/src/wp-admin/user-edit.php

@@ -484 +484 @@
         <th><?php _e( 'Confirm Password' ); ?></th>
         <td>
-                <label for="pw-weak">
-                        <input type="checkbox" name="pw-weak" class="pw-checkbox" id="pw-weak" />
+                <label for="pw_weak">
+                        <input type="checkbox" name="pw_weak" class="pw-checkbox" id="pw-weak" />
                         <?php _e( 'Confirm use of weak password' ); ?>
                 </label>

trunk/src/wp-admin/user-new.php

@@ -395 +395 @@
                         <label for="pass1">
                                 <?php _e( 'Password' ); ?>
-                                <span class="description hide-if-js"><?php /* translators: password input field */_e( '(required)' ); ?></span>
+                                <span class="description hide-if-js"><?php _e( '(required)' ); ?></span>
                         </label>
                 </th>
@@ -414 +414 @@
         </tr>
         <tr class="form-field form-required user-pass2-wrap hide-if-js">
-                <th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php /* translators: password input field */_e('(required)'); ?></span></label></th>
+                <th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php _e( '(required)' ); ?></span></label></th>
                 <td>
                 <input name="pass2" type="password" id="pass2" autocomplete="off" />
@@ -424 +424 @@
                         <label for="pw-weak">
                                 <input type="checkbox" name="pw-weak" class="pw-checkbox" id="pw-weak" />
-                                <?php _e( 'Confirm use of weak password.' ); ?>
+                                <?php _e( 'Confirm use of weak password' ); ?>
                         </label>
                 </td>

trunk/src/wp-includes/pluggable.php

@@ -2108 +2108 @@
                 $rnd_value .= sha1($rnd_value . $seed);
                 $seed = md5($seed . $rnd_value);
-                if ( ! defined( 'WP_SETUP_CONFIG' ) )
-                        set_transient('random_seed', $seed);
+                if ( ! defined( 'WP_SETUP_CONFIG' ) && ! defined( 'WP_INSTALLING' ) ) {
+                        set_transient( 'random_seed', $seed );
+                }
         }