javascript WordPress自定义登录表单

Posted 2021-05-04

<?php
// Setup scripts for login form functionality
function ajax_login_init(){

    wp_register_script('ajax-login-script', get_stylesheet_directory_uri() . '/assets/js/ajax-login-script.js', array('jquery'), '1.0', true );
    wp_enqueue_script('ajax-login-script');

    wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => home_url().'/welcome/',
    ));

    // Enable the user with no privileges to run ajax_login() in AJAX
    add_action( 'wp_ajax_nopriv_as_ajax_login', 'as_ajax_login' );
}

// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}

// Add shortcode for WP login form
add_shortcode( 'login-form', 'load_custom_login_form' );
function load_custom_login_form() { ?>
    <form id="as-login-form" method="post">
        <p>
            <label for="username">Username</label>
            <input id="username" type="text" name="username" required="">
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" type="password" name="password" required="">
        </p>
        <p>
            <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>
        </p>
        <p>
            <input class="button" type="submit"  name="submit" value="Login">
        </p>
        <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>

        <p id="user-action-response"></p>
    </form>
    <?php
}


// Define WP action to process the form
function as_ajax_login(){
    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-login-nonce', 'security' );

    if(empty($_POST['username'] || $_POST['password'])) { // Server-side validation
        $response = array(
                        'status' => 0
                        ,'msg' => 'Some required information is missing. Please try again.'
                    );
    } else {
        // Nonce is checked, get the POST data and sign user on
        $info = array();
        $info['user_login'] = $_POST['username'];
        $info['user_password'] = $_POST['password'];
        $info['remember'] = true;

        $user_signon = wp_signon( $info, false );
        if ( is_wp_error($user_signon) ){
            $response = array(
                            'status' => 0
                            ,'msg' => 'Wrong username or password, Please provide correct information...'
                        );
        } else {
            $response = array(
                            'status' => 1
                            ,'msg' => 'Login successful, redirecting...'
                        );
        }
    }

    echo json_encode($response);
    exit;

}

jQuery(document).ready(function($) {

    // Perform AJAX login on form submit
    jQuery('#as-login-form').on('submit', function(e){
        event.preventDefault();
        $error = 0;

        var ajaxUrl = ajax_login_object.ajaxurl;
        var username = jQuery("#username").val();
        var password = jQuery("#password").val();
        var loginNounce = jQuery('#security').val();


        if(username == '') {
            $error = 1;
            jQuery("#user-action-response").html("Please provide your username.");
        }

        if(password == '') {
            $error = 1;
            jQuery("#user-action-response").html("Please provide your password.");
        }

        setTimeout(function() {
            jQuery('#user-action-response').fadeOut();
        }, 5000);

        if($error == 0) {

            jQuery.ajax({
    			type : "post"
    			,dataType : "json"
    			,url : ajaxUrl
    			,data : {
    				action : "as_ajax_login",
    	    		username: username,
    	    		password: password,
                    security: loginNounce,
            	},
            	beforeSend: function(){
            		console.log("Sending");
                    jQuery("#user-action-response").html("Sending user info, please wait...");
                    jQuery("#user-action-response").show();

            	},
            	success: function (response){
            		console.log(response.msg);
                    jQuery("#user-action-response").html(response.msg);

                    if(response.status == 1) {
                        jQuery("#user-action-response").addClass("alert-success");
                        location.reload();
                    } else {
                        jQuery("#user-action-response").addClass("alert-warning");
                        setTimeout(function() {
                            jQuery('#user-action-response').fadeOut();
                        }, 5000);

                    }
            	},
            	error: function(ts) {
                    console.log(ts.responseText)
                }

            });

        }
    });

});