I’m working on a WordPress website and I’d like to modify the password reset screen /wp-login.php?action=rp
. Currently, the password reset screen generates a new password for the user and I want to add a Confirm Password
field and make it a required field.
I think I’ve found the relevant code in the wp-login.php
file and it looks like there is a confirm password option but I don’t know how to get it to appear.
<form name="resetpassform" id="resetpassform" action="<?php echo esc_url( network_site_url( 'wp-login.php?action=resetpass', 'login_post' ) ); ?>" method="post" autocomplete="off">
<input type="hidden" id="user_login" value="<?php echo esc_attr( $rp_login ); ?>" autocomplete="off" />
<div class="user-pass1-wrap">
<p>
<label for="pass1"><?php _e( 'New password' ) ?></label>
</p>
<div class="wp-pwd">
<span class="password-input-wrapper">
<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" aria-describedby="pass-strength-result" />
</span>
<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
</div>
</div>
<p class="user-pass2-wrap">
<label for="pass2"><?php _e( 'Confirm new password' ) ?></label><br />
<input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
</p>
<p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
<br class="clear" />
<?php
/**
* Fires following the 'Strength indicator' meter in the user password reset form.
*
* @since 3.9.0
*
* @param WP_User $user User object of the user whose password is being reset.
*/
do_action( 'resetpass_form', $user );
?>
<input type="hidden" name="rp_key" value="<?php echo esc_attr( $rp_key ); ?>" />
<p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e('Reset Password'); ?>" /></p>
</form>
2 Answers
It’s tempting to unhide the pass2
input but that’s not enough.
In the file /wp-admin/js/user-profile.js
the bindPass1()
binds it to pass1
that makes writing to it not possible. The pass2
input is then hidden in bindPasswordForm()
with $('.user-pass2-wrap').hide();
We can instead add our own input field to validate the password.
First we add it via the resetpass_form
action:
add_action( 'resetpass_form', function( $user )
{ ?> <p class="user-wpse-pass2-wrap">
<label for="wpse-pass2"><?php _e( 'Confirm new password' ) ?></label><br />
<input type="password" name="wpse-pass2" id="wpse-pass2" class="input"
size="20" value="" autocomplete="off" />
</p> <?php
} );
Then we use the validate_password_reset
hook to validate it:
add_action( 'validate_password_reset', function( $errors )
{
if ( isset( $_POST['pass1'] ) && $_POST['pass1'] != $_POST['wpse-pass2'] )
$errors->add( 'password_reset_mismatch', __( 'The passwords do not match.' ) );
} );
This is just using similar code as we have in the wp-login.php
file.
This is how it looks in Icelandic, when there’s a mismatch:
Plugin
Create the plugin under:
/wp-content/plugins/wpse-confirm-password/wpse-confirm-password.php
and add the following code into that file:
<?php
/**
* Plugin Name: Confirm New Login Password
* Plugin URI: http://wordpress.stackexchange.com/a/262607/26350
*/
add_action( 'resetpass_form', function( $user )
{ ?> <p class="user-wpse-pass2-wrap">
<label for="wpse-pass2"><?php _e( 'Confirm new password' ) ?></label><br />
<input type="password" name="wpse-pass2" id="wpse-pass2" class="input"
size="20" value="" autocomplete="off" />
</p> <?php
} );
add_action( 'validate_password_reset', function( $errors )
{
if ( isset( $_POST['pass1'] ) && $_POST['pass1'] != $_POST['wpse-pass2'] )
$errors->add( 'password_reset_mismatch', __( 'The passwords do not match.' ) );
} );
Then activate the plugin from the backend as usual.