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.



git-svn-id: https://develop.svn.wordpress.org/trunk@33246 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Konstantin Obenland 2015-07-13 22:21:39 +00:00
parent ce8944600a
commit 05c4803450
5 changed files with 105 additions and 38 deletions

View File

@ -121,7 +121,6 @@ textarea {
.form-table td {
margin-bottom: 9px;
padding: 10px 20px 10px 0;
border-bottom: 8px solid #fff;
font-size: 14px;
vertical-align: top
}
@ -171,7 +170,7 @@ submit {
.form-table.install-success td {
vertical-align: middle;
padding: 16px 20px 10px 0;
padding: 16px 20px 16px 0;
}
.form-table.install-success td p {
@ -198,36 +197,64 @@ submit {
font-family: Consolas, Monaco, monospace;
}
.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;
}
#pass-strength-result.bad {
background-color: #ffb78c;
border-color: #ff853c !important;
}
#pass-strength-result.good {
background-color: #ffec8b;
border-color: #ffcc00 !important;
width: 218px;
}
#pass-strength-result.short {
background-color: #ffa0a0;
border-color: #f04040 !important;
border-color: #f04040;
opacity: 1;
}
#pass-strength-result.bad {
background-color: #ffb78c;
border-color: #ff853c;
opacity: 1;
}
#pass-strength-result.good {
background-color: #ffec8b;
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;
}
.message {
@ -374,6 +401,11 @@ body.language-chooser {
vertical-align: top;
}
.button-secondary.hide-if-no-js,
.hide-if-no-js {
display: none;
}
/**
* HiDPI Displays
*/

View File

@ -71,7 +71,8 @@ function display_header( $body_classes = '' ) {
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'WordPress &rsaquo; Installation' ); ?></title>
<?php
wp_admin_css( 'install', true );
wp_admin_css( 'install', true );
wp_admin_css( 'dashicons', true );
?>
</head>
<body class="wp-core-ui<?php echo $body_classes ?>">
@ -128,16 +129,44 @@ function display_setup_form( $error = null ) {
</td>
</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>
<?php endif; ?>
@ -148,10 +177,10 @@ function display_setup_form( $error = null ) {
</tr>
<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>
<?php
@ -323,5 +352,10 @@ if ( !wp_is_mobile() ) {
<?php } ?>
<?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>

View File

@ -483,8 +483,8 @@ if ( $show_password_fields ) :
<tr class="pw-weak">
<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>
</td>

View File

@ -394,7 +394,7 @@ if ( apply_filters( 'show_password_fields', true ) ) : ?>
<th scope="row">
<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>
<td>
@ -413,7 +413,7 @@ if ( apply_filters( 'show_password_fields', true ) ) : ?>
</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 /* 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" />
</td>
@ -423,7 +423,7 @@ if ( apply_filters( 'show_password_fields', true ) ) : ?>
<td>
<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>
</tr>

View File

@ -2107,8 +2107,9 @@ function wp_rand( $min = 0, $max = 0 ) {
$rnd_value .= sha1($rnd_value);
$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 );
}
}
// Take the first 8 digits for our value