web-dev-qa-db-fra.com

Ajouter le champ Confirmer le mot de passe dans la page de réinitialisation du mot de passe wp-login.php

Je travaille sur un site Web WordPress et j'aimerais modifier l'écran de réinitialisation du mot de passe /wp-login.php?action=rp. Actuellement, l'écran de réinitialisation du mot de passe génère un nouveau mot de passe pour l'utilisateur et je souhaite ajouter un champ Confirm Password et en faire un champ obligatoire.

Je pense avoir trouvé le code approprié dans le fichier wp-login.php et il semble qu'il existe une option de confirmation du mot de passe, mais je ne sais pas comment le faire apparaître.

<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>
loginpasswordlost-password
4
zzMzz

Il est tentant de dévoiler l'entrée pass2 mais cela ne suffit pas.

Dans le fichier /wp-admin/js/user-profile.js, la bindPass1() le lie à pass1, ce qui rend l’écriture impossible. L'entrée pass2 est ensuite masquée dans bindPasswordForm() avec $('.user-pass2-wrap').hide();

Nous pouvons plutôt ajouter notre propre champ de saisie pour valider le mot de passe.

D'abord, nous l'ajoutons via l'action resetpass_form:

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
} );

Ensuite, nous utilisons le hook validate_password_reset pour le valider:

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.' ) );
} );

Ceci utilise simplement un code similaire à celui que nous avons dans le fichier wp-login.php.

Voici à quoi ça ressemble en islandais, quand il y a un décalage:

 reset 

Plugin

Créez le plugin sous:

/wp-content/plugins/wpse-confirm-password/wpse-confirm-password.php

et ajoutez le code suivant dans ce fichier:

<?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.' ) );
} );

Activez ensuite le plugin depuis le backend comme d’habitude.

2
birgire

En plus du très utile Plugin CODE @birgire ajouté dans sa réponse , il peut également être utile de masquer le texte du mot de passe (lorsque vous tapez dans le champ mot de passe) sur la page de réinitialisation du mot de passe. Comme avec ce CODE, nous aurons quand même le champ Confirmer le mot de passe, il n’a aucun sens de montrer le mot de passe au fur et à mesure que vous tapez.

La raison pour laquelle le noyau WordPress n'ajoute pas de champ Confirmer le mot de passe est principalement due au fait que WordPress affiche déjà le texte du mot de passe au fur et à mesure que vous le tapez. Le champ Confirmer le mot de passe est le remplacement de cette fonctionnalité et peut être très utile (plus sécurisé) lorsque l'utilisateur tape devant quelqu'un d'autre.

Donc, je vous suggère d'ajouter le code suivant en plus du code de plugin de birgire:

add_action( 'login_enqueue_scripts', function ()
{
    if ( ! wp_script_is( 'jquery', 'done' ) ) {
        wp_enqueue_script( 'jquery' );
    }
    // this line basically hides the password text
    wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){ jQuery( "#pass1" ).data( "reveal", 0 ); });' );
}, 1 );

Bien entendu, dans ce cas, WordPress ne générera pas automatiquement le mot de passe pour vous, car il est évident que le fait de générer automatiquement le mot de passe puis de cacher le mot de passe n'a pas de sens, car les utilisateurs ne pourront pas le voir et le taper dans le champ Confirmer le mot de passe .

Quoi qu'il en soit, si vous voulez utiliser cela, alors le code final du plugin deviendra:

<?php
/**
 * Plugin Name: Confirm New Login Password
 * Plugin URI:  https://wordpress.stackexchange.com/a/262851/110572
 */

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.' ) );
} );

add_action( 'login_enqueue_scripts', function ()
{
    if ( ! wp_script_is( 'jquery', 'done' ) ) {
        wp_enqueue_script( 'jquery' );
    }
    wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){ jQuery( "#pass1" ).data( "reveal", 0 ); });' );
}, 1 );
1
Fayaz