Ajax login вход регистрация

Ajax

В файл functious.php


function ajax_login_init(){

/* Подключаем скрипт для авторизации */
 wp_register_script('ajax-login-script', get_template_directory_uri() . '/js/ajax-login-script.js', array('jquery') );
 wp_enqueue_script('ajax-login-script');

/* Локализуем параметры скрипта */
 wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
 'ajaxurl' => admin_url( 'admin-ajax.php' ),
 'redirecturl' => $_SERVER['REQUEST_URI'],
 'loadingmessage' => __('Проверяются данные, секундочку...')
 ));

// Разрешаем запускать функцию ajax_login() пользователям
 add_action( 'wp_ajax_ajaxlogin'       , 'ajax_login' ); // Для зарегистрированных пользователей
 add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' ); // Для не зарегистрированных пользователей
 }

// Выполняем авторизацию только если пользователь не вошел
 if (!is_user_logged_in()) {
 add_action('init', 'ajax_login_init');
 }

function ajax_login(){

// Первым делом проверяем параметр безопасности
 check_ajax_referer( 'ajax-login-nonce', 'security' );

// Получаем данные из полей формы и проверяем их
 $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) ){
 echo json_encode(array('loggedin'=>false, 'message'=>__('Неправильный логин или пароль!')));
 } else {
 echo json_encode(array('loggedin'=>true, 'message'=>__('Отлично! Идет перенаправление...')));
 }

wp_die();
 }

В Файл style.css


.login_box {
 float: right;
 width: 330px;
 margin: 0 0 30px 0;
 background-color: #f6f4f4;
 }
 /* Form */
 #login{
 padding: 30px 10px 35px 10px;
 position: relative;
 }
 .status_login {
 display: none;
 position: absolute;
 top: 5px;
 left: 10px;
 text-align: center;
 font-size: 12px;
 color: #666;
 }
 .line {
 position: relative;
 }
 .line i {
 position: absolute;
 left: 10px;
 top: 5px;
 color: #999999;
 font-size: 18px;
 }
 .line .input_text {
 display: block;
 height: 30px;
 margin: 0 0 10px;
 font-size: 15px;
 padding-left: 45px;
 box-shadow: 0 1px rgba(255,255,255,1);
 border: 1px solid #ccc;
 background-color: rgb(255,255,255);
 }
 .line .input_text:focus {
 outline: none;
 border-color: #ff9900;
 }
 #login input:-webkit-autofill {
 background-color: rgb(255,255,255) !important;
 -webkit-box-shadow:0 0 0 50px white inset;
 }
 .submit_button {
 display: block;
 height: 30px;
 float: left;
 margin: 0 30px 0 0;
 position: relative;
 border: none;
 background-color: #1688CA;
 border-bottom: 1px solid #fff;
 border-top: 1px solid #0071AD;
 background-image: -moz-linear-gradient(top, #3382AF, #1688CA);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3382AF), to(#1688CA));
 background-image: -webkit-linear-gradient(top, #3382AF, #1688CA);
 background-image: -o-linear-gradient(top, #3382AF, #1688CA);
 background-image: linear-gradient(top, #3382AF, #1688CA);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3382AF', endColorstr='#ff1688CA', GradientType=0);
 cursor: pointer;
 font-size: 14px;
 color: #f6f6f6;
 }
 /* User Login */
 .login_link {
 float: right;
 display: block;
 font-size: 13px;
 margin: 5px 0 0;
 text-shadow: 0 1px white;
 }
 .login_link a {
 padding: 0 5px;
 }
 .login_box img {
 float: left;
 margin: 10px 15px 10px 20px;
 }
 .login_box .user_aside {
 float: left;
 margin: 10px 0 0 0;
 }
 .user_aside .user_name {
 display: block;
 padding: 3px 0;
 }
 .user_aside .user_name strong {
 text-shadow: 0 1px white;
 }
 .user_aside a {
 text-shadow: 0 1px white;
 font-size: 13px;
 }
 .user_aside a:hover,
 .login_link a:hover {
 text-decoration: underline;
 }

В шаблон страницы


<div class="login_box">

<?php global $user_ID, $user_identity, $user_level;

if (is_user_logged_in()) {
 echo get_avatar( $user_ID, 50 ); ?>

<div class="user_aside">
 <span class="user_name">Привет <strong><em><?php echo $user_identity; ?></em></strong></span>
 <!-- <a class="login_button" href="<?php //bloginfo('url'); ?>/wp-admin/">Консоль</a> -->
 <a class="login_button" href="<?php bloginfo('url'); ?>/wp-admin/profile.php">Профиль</a>
 <a class="logout_button" href="<?php echo wp_logout_url( $_SERVER['REQUEST_URI'] ); ?>">Выйти</a>
 </div>

<?php }

else { ?>
 <form id="login" action="login" method="post">
 <p class="status_login"></p>

<div class="line">
 <i class="fa fa-user"></i>
 <input id="username" class="input_text" type="text" placeholder="Ваш логин" name="username" />
 </div>

<div class="line">
 <i class="fa fa-key"></i>
 <input id="password" class="input_text" type="password" placeholder="Ваш пароль" name="password" />
 </div>

<div class="line" style="display: none;">
 <input name="rememberme" type="checkbox" id="my-rememberme" checked="checked" value="forever" />
 </div>

<div class="line cf">
 <input class="submit_button" type="submit" value="Войти" name="submit">
 <div class="login_link">
 <a class="reg_link" href="<?php bloginfo('url'); ?>/wp-login.php?action=register">Регистрация</a> /
 <a class="lost_pass_link" href="<?php bloginfo('url'); ?>/wp-login.php?action=lostpassword">Забыли пароль?</a>
 </div>
 </div>

<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>

</form>
 <?php } ?>
 </div>

В файл ajax-login-script.js


jQuery(document).ready(function($) {
$('.login_box #login').on('submit', function(e){
 $('.login_box .status_login').show().text(ajax_login_object.loadingmessage);
 $.ajax({
 type: 'POST',
 dataType: 'json',
 url: ajax_login_object.ajaxurl,
 data: {
 'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
 'username': $('.login_box #username').val(),
 'password': $('.login_box #password').val(),
 'security': $('.login_box #security').val()
 },
 success: function(data){
 $('.login_box .status_login').text(data.message);
 if (data.loggedin == true){
 document.location.href = ajax_login_object.redirecturl;
 }
 }
 });
 e.preventDefault();
 });

});

Об авторе

Ремонт компьютеров, создание web сайтов
Напишите свой комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

4 × 5 =