WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!

Логин, регистрация, восстановления пароля

Захотел сделать форму входу и регистрации как на сайте 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>');
}

Форма входа выводиться нормально, но когда нажимаешь на кнопку "Отправить" ничего не происходит, а если перезагрузить страницу вручную, то нас показывает залогиненным

Заметки к вопросу:
Kama 5.9 лет назад

Это только JS часть, там в PHP все запросы еще нужно обрабатывать...

0
Jaeger
5.9 лет назад
  • 1
    kolshix779 paxtoy.com

    к сожалению форму не увидел - желательно при таких вопросах делать минимальные скрины , вот интегрировал такую - но она плохо работает с https, но если сайт на https, но у пользователя подписчика нет доступа в админ панель, а создана своя кастомная , то решение подходит

    WordPress AJAX Login and Register without a Plugin

    регистрацию - желательно через оригинальную страницу сделать (а в плагине удалить код отвечающий за данную функцию).
    восстановление тоже - просто кнопку с сылкой в новом окне сделайте

    кстати есть функция вывода кнопки на авторизацию с ссылко на возврат на текущую страницу - то есть вы вошли на какойто первый адрес, нажали авторизация , вас перекинуло на второй адрес, а после авторизации вернет на первый. (У KAMA так сделано - чтоб потом не искать и не возвращатся, у вордпресса эта функция есть но по дефолту отключена)

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация