Pull to refresh

Компоненты регистрации и авторизации в модальном окне (Битрикс)

Хочу рассказать о моем способе решения задачи с авторизацией в модальном окне (Битрикс). Перерыв кучу ссылок, так и не нашел более-менее изящного подхода, поэтому предлагаю вам свой велосипед.

Для начала создадим страничку, которая будет отдавать формы авторизации/регистрации/забытого пароля по параметру в адресной строке.

Итак, выделяем целый раздел /auth/

/auth/index.php
require $_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php";
$APPLICATION->AuthForm('', false, false);

Коротко об $APPLICATION->AuthForm — мы получаем отдельные компоненты по параметру в url. Напримерт /auth/?register=yes — выведет нам форму регистрации.

Дальше нам нужны модальные окна, для этого воспользуемся библиотекой Битрикс, а также нужен jquery
CJSCore::Init("popup", "jquery");

Теперь js. Все методы я завернул в один объект
var auth = {
	popup: null, //наш popup
	showPopup: function(url) {
		this.popup = BX.PopupWindowManager.create("modal_auth", '', {
			closeIcon: true,
			autoHide: true,
			offsetLeft: 0,
			offsetTop: 0,
			overlay : false,
			draggable: {restrict:true},
			closeByEsc: true,
			content: auth.getForm(url), //получаем контент из другого метода
			overlay: {backgroundColor: 'black', opacity: '10' },
			events: {
				onPopupClose: function(PopupWindow) {
					PopupWindow.destroy(); //удаление из DOM-дерева после закрытия
				}
			}
		});

		this.popup.show();	
	},
	getForm: function(url) { //отдаем форму по запросу
		var content = null;
		$.ajax({
			url: url,
			method: "GET",
			async: false,
			success: function (data) {
				content = data;
			}
		});
		return content;
	}
}

Дальше необходимо кастомизировать шаблоны компонентов:
system.auth.authorize
system.auth.forgotpasswd
system.auth.registration

Все ссылки приводим к виду
<a href="#" onclick="auth.set('/auth/?forgot_password=yes')" rel="nofollow"><b>Забыли свой пароль?</b></a>



и соответственно нам необходим метод для перехода между формами auth.set
set: function(url) {
	var form = auth.getForm(url);
	auth.popup.setContent(form); //заменим текущий контент модального окна
	auth.popup.adjustPosition(); //отцентруем
}

Все input[type=submit] превращаем в input[type=hidden]

и вставляем ссылки для сабмита форма:
<a href="#" onclick="auth.submit('/auth/', '.b-authorize')">Войти</a>

submit: function(url, form) {
	$.post(url, $(form).serialize()).done(function(data) { //заберем все поля формы и запросим контент
		auth.popup.setContent(data); //заменяем контент модального окна
	});
}

При желании можно обернуть в компонент и подключать в шаблоне сайта.
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.