Логин, регистрация, восстановления пароля
Захотел сделать форму входу и регистрации как на сайте 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 так сделано - чтоб потом не искать и не возвращатся, у вордпресса эта функция есть но по дефолту отключена)