web-dev-qa-db-ja.com

Wp-login.phpパスワードのリセットページにパスワードの確認を確認フィールドを追加

私はWordPressのWebサイトに取り組んでいますが、パスワードリセット画面/wp-login.php?action=rpを変更したいのですが。現時点では、パスワードのリセット画面でユーザーの新しいパスワードが生成されます。私はConfirm Passwordフィールドを追加し、それを必須フィールドにします。

私はwp-login.phpファイルで関連するコードを見つけたと思います、そしてそれはパスワード確認オプションがあるように見えますが、私はそれを表示させる方法を知りません。

<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

pass2入力を表示するのは魅力的ですが、それだけでは不十分です。

/wp-admin/js/user-profile.jsファイルでは、bindPass1()がそれをpass1にバインドしているため書き込みができません。 pass2入力はbindPasswordForm()で$('.user-pass2-wrap').hide();に隠されます

代わりに、パスワードを検証するために独自の入力フィールドを追加することができます。

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

それを検証するためにvalidate_password_resetフックを使います。

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

これはwp-login.phpファイルにあるのと同じコードを使用しているだけです。

ミスマッチがあるとき、これはアイスランド語でそれがどのように見えるかです：

reset 

プラグイン

以下にプラグインを作成します。

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

そのファイルに次のコードを追加します。

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

それから通常どおりバックエンドからプラグインを起動します。

2
birgire

彼の答えに追加された非常に便利な プラグインコード@birgire に加えて、パスワードリセットページで（パスワードフィールドにタイプしたように）パスワードテキストを隠すのも役に立つかもしれません。このコードでは、とにかく「パスワードの確認」フィールドがありますので、入力時にパスワードを表示しても意味がありません。

WordPressコアが[パスワードの確認]フィールドを追加しないのは、主に、WordPressが入力時にパスワードテキストを表示しているためです。 [パスワードの確認]フィールドはその機能の代わりになるもので、ユーザーが他の人の前に入力しているときに非常に便利です（より安全）。

だから、私はあなたが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 );

もちろん、この場合WordPressはあなたのためにパスワードを自動生成しません。なぜならユーザーはそれを見て＆Confirm Passwordフィールドにそれをタイプすることができないからです。 。

とにかく、これを使いたいのなら、最後のプラグインコードは次のようになります。

<?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