Логин, регистрация, восстановления пароля
Захотел сделать форму входу и регистрации как на сайте hi-news.ru (не реклама), скопировал js скрипт к себе на сайт
var $j = jQuery.noConflict(); var signHandler = function(e) { var $e = $j(e); var $r = $e.parents('#respond'); var $c = $e.parents('.comment:first'); if ($r.length) return $r; if ($c.length) return $c; return null } $j(function($j) { //new AuthDialog('sign-in'); /* Активация формы ответа */ if (location.hash) { if (location.hash.indexOf('respond') !== -1) { window.setTimeout(function() { $j('#respond form textarea').focus(); }, 2000); } if (location.hash.indexOf('comment-') !== -1) { $j(location.hash + ' a.comment-reply-link').click(); window.setTimeout(function() { $j('#respond form textarea').focus(); }, 2000); } } $j('ul.wp_menufication li.register a, #respond .register a').click(function() { new AuthDialog('sign-up', signHandler(this)); return false; }); $j('ul.wp_menufication li.login a, #respond .login a, a.comment-reply-login').click(function() { new AuthDialog('sign-in', signHandler(this)); return false; }); $j('form.sign-in .restore').live('click', function() { new AuthDialog('sign-lost'); return false; }); function AuthError($jselector, intShakes, intDistance, intDuration) { $jselector = $j($jselector); $jselector.each(function() { var $jcurrentLeft = parseInt($j(this).css('left'), 10); for (var x = 1; x <= intShakes; x++) { $j(this).animate({left: ($jcurrentLeft-intDistance)}, (((intDuration/intShakes)/4))) .animate({left: $jcurrentLeft+intDistance}, ((intDuration/intShakes)/2)) .animate({left: $jcurrentLeft}, (((intDuration/intShakes)/4))); } }); return $jselector; } $j('form.sign-in').live('submit', function() { var $jform = $j(this); var $jerror = $j('.error', $jform); var url = $jform.attr('action'); var type = $jform.attr('method'); if (!type) type = 'post'; var data = $jform.serialize(); $jerror.empty(); var redirect = false; $j.ajax({ async:false, url:url, dataType:'json', type:type, data:data, success: function(json) { if (json) { if (!json.success) { if (!json.error) json.error = 'Ошибка авторизации'; AuthError($jform.parent(), 2, 10, 250); $jerror.show().html(json.error); } else { redirect = true; } } } }); return redirect; }); $j('form.sign-lost').live('submit', function() { var $jform = $j(this); var $jerror = $j('.error', $jform); var url = $jform.attr('action'); var type = $jform.attr('method'); if (!type) type = 'post'; var data = $jform.serialize(); $jerror.empty(); var redirect = false; $j.ajax({ async:false, url:url, dataType:'json', type:type, data:data, success: function(json) { if (json) { if (!json.success) { if (!json.error) json.error = 'Неверное имя пользователя или e-mail'; if ($j.isArray(json.error)) { var errors = ''; for (var i = 0; i < json.error.length; i++) { errors += '<div>'+json.error[i]+'</div>'; } } AuthError($jform.parent(), 2, 10, 250); $jerror.show().html(json.error); } else { var $jdialog = new AuthDialog('sign-in'); if (json.message) { $jdialog.message(json.message); } } } } }); return false; }); $j('form.sign-up').live('submit', function() { var $jform = $j(this); var $jerror = $j('.error', $jform); var url = $jform.attr('action'); var type = $jform.attr('method'); if (!type) type = 'post'; var data = $jform.serialize(); $jerror.empty(); var redirect = false; $j.ajax({ async:false, url:url, dataType:'json', type:type, data:data, success: function(json) { if (json) { if (!json.success) { if (!json.error) json.error = ['Ошибка регистрации']; if ($j.isArray(json.error)) { var errors = ''; for (var i = 0; i < json.error.length; i++) { errors += '<div>'+json.error[i]+'</div>'; } } AuthError($jform.parent(), 2, 10, 250); $jerror.show().html(errors); } else { var $jdialog = new AuthDialog('sign-in'); if (json.message) { $jdialog.message(json.message); } } } } }); return false; }); }); /* Форма авторизации */ var AuthDialog = function(tab, handler) { var self = this; $j('.ui-widget-overlay, .ui-dialog-auth').remove(); var dialog = $j('<div class="ui-dialog-auth" />').appendTo('body'); var overlay = $j('<div class="ui-widget-overlay" />').appendTo('body'); dialog.fadeIn(); overlay.fadeIn().height($j(document).height()); if (tab == 'sign-in') $j(this.snippets.signIn).appendTo(dialog); if (tab == 'sign-lost') $j(this.snippets.signLost).appendTo(dialog); if (tab == 'sign-up') $j(this.snippets.signUp).appendTo(dialog); if (handler) { var redirect_to = $j('form input[name=redirect_to]', dialog); var iden = $j(handler).attr('id'); if (iden) { redirect_to.val(redirect_to.val().split('#').shift() + '#'+iden); } else { var anchor = parseInt($j(handler).position().top, 10); redirect_to.val(redirect_to.val().split('#').shift() + '#top'+anchor); } } dialog.css('top', $j(document).scrollTop() - 160 + $j(window).height() / 2 + 'px'); overlay.keypress(function(e) { if (27 == e.keyCode) { overlay.trigger('click'); } }); overlay.click(function() { //changeUserSwitchState(0); self.close(); }); return this; } AuthDialog.prototype.close = function() { $j('.ui-widget-overlay, .ui-dialog-auth').fadeOut(function() { $j('.ui-widget-overlay, .ui-dialog-auth').remove(); }); } AuthDialog.prototype.snippets = { signIn : '<form action="/wp-login.php?ajax" name="loginform" method="post" class="sign-in">' + '<div class="content">' + '<h2>Вход в систему</h2>' + '<input type="hidden" value="' + location.href + '" name="redirect_to">' + '<input type="hidden" value="1" name="testcookie">' + '<input name="log" placeholder="Логин" required>' + '<input name="pwd" type="password" placeholder="Пароль" required>' + '<label><input type="checkbox" name="rememberme" value="forever"> Запомнить пароль</label>' + '</div><div class="footer">' + '<button type="submit" name="wp-submit"><span>Войти</span></button>' + '<a class="restore" href="/wp-login.php?action=lostpassword">Забыли пароль?</a>' + '</div><div class="error"></div></form>', signLost : '<form action="/wp-login.php?action=lostpassword&ajax" name="restoreform" method="post" class="sign-lost">' + '<div class="content">' + '<h2>Восстановить пароль</h2>' + '<input type="hidden" value="" name="redirect_to">' + '<input name="user_login" placeholder="Имя пользователя или e-mail" required style="padding-left: 4px;padding-right: 4px;width:202px;">' + '<p>Инструкции придут на почту</p>' + '</div><div class="footer">' + '<button type="submit" name="wp-submit"><span>Отправить</span></button>' + '</div><div class="error"></div></form>', signUp : '<form action="/wp-login.php?action=register&ajax" name="registerform" method="post" class="sign-up">' + '<div class="content">' + '<h2>Регистрация</h2>' + '<input type="hidden" value="" name="redirect_to">' + '<input name="user_login" placeholder="Логин" required>' + '<input type="email" name="user_email" placeholder="Эл. почта" required>' + '<p>Пароль придёт на почту</p>' + '</div><div class="footer">' + '<button type="submit" name="wp-submit"><span>Отправить</span></button>' + '</div><div class="error"></div></form>' } AuthDialog.prototype.message = function(message) { $j('.ui-widget-overlay, .ui-dialog-auth .error').show().html('<div class="message">'+message+'</div>'); }
Форма входа выводиться нормально, но когда нажимаешь на кнопку "Отправить" ничего не происходит, а если перезагрузить страницу вручную, то нас показывает залогиненным
Это только JS часть, там в PHP все запросы еще нужно обрабатывать...
к сожалению форму не увидел - желательно при таких вопросах делать минимальные скрины , вот интегрировал такую - но она плохо работает с https, но если сайт на https, но у пользователя подписчика нет доступа в админ панель, а создана своя кастомная , то решение подходит
WordPress AJAX Login and Register without a Plugin
регистрацию - желательно через оригинальную страницу сделать (а в плагине удалить код отвечающий за данную функцию).
восстановление тоже - просто кнопку с сылкой в новом окне сделайте
кстати есть функция вывода кнопки на авторизацию с ссылко на возврат на текущую страницу - то есть вы вошли на какойто первый адрес, нажали авторизация , вас перекинуло на второй адрес, а после авторизации вернет на первый. (У KAMA так сделано - чтоб потом не искать и не возвращатся, у вордпресса эта функция есть но по дефолту отключена)