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

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

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

Итак, выделяем целый раздел /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); //заменяем контент модального окна
	});
}

При желании можно обернуть в компонент и подключать в шаблоне сайта.