вход   

Авторизация в модальном окне BX

весь список раздела "Модули, компоненты, файлы"


html + php
<?if ($USER->IsAuthorized()):?>
   <a href="<?=$APPLICATION->GetCurPage()?>?logout=yes" rel="nofollow">Выход</a>
<?else:?>
    <?$jsAuthVariable = \Bitrix\Main\Security\Random::getString(20)?>
   <a href="#" onclick="<?=$jsAuthVariable?>.showPopup('/test/auth/')" rel="nofollow">Авторизация</a><br>
   <a href="#" onclick="<?=$jsAuthVariable?>.showPopup('/test/auth/?register=yes')" rel="nofollow">Регистрация</a><br>
   <a href="#" onclick="<?=$jsAuthVariable?>.showPopup('/test/auth/?forgot_password=yes')" rel="nofollow">Забыли свой пароль?</a>
<?endif?>

JS
    let  = {
            id: "modal_auth",
            popup: null,
            /**
             * 1. Обработка ссылок в форме модального окна для добавления в ссылку события onclick и выполнения
             * перехода по ссылке через запрос новой формы через AJAX
             * 2. Установка на форму обработчика onsubmit вместо стандартного перехода
             */
            convertLinks: function() {
                let links = $("#" + this.id + " a");
                links.each(function (i) {
                    $(this).attr('onclick', ".set('" + $(this).attr('href') + "')");
                });
                links.attr('href', '#');

                let form = $("#" + this.id + " form");
                form.attr('onsubmit', ".submit('" + form.attr('action') + "');return false;");
            },
            /**
             * Вывод модального окна с формой на странице при клике по ссылке
             * @param url - url с параметрами для определения какую форму показать
             */
            showPopup: function(url) {
                let app = this;
                this.popup = BX.PopupWindowManager.create(this.id, '', {
                    closeIcon: true,
                    autoHide: true,
                    draggable: {
                        restrict: true
                    },
                    closeByEsc: true,
                    content: this.getForm(url),
                    overlay: {
                        backgroundColor: 'black',
                        opacity: '20'
                    },
                    events: {
                        onPopupClose: function(PopupWindow) {
                            PopupWindow.destroy(); //удаление из DOM-дерева после закрытия
                        },
                        onAfterPopupShow: function (PopupWindow) {
                            app.convertLinks();
                        }
                    }
                });

                this.popup.show();
            },
            /**
             * Получение формы при открытии модального окна или при переходе по ссылке
             * @param url - url с параметрами для определения какую форму показать
             * @returns string - html код формы
             */
            getForm: function(url) {
                let content = null;
                url += (url.includes("?") ? '&' : '?') + 'ajax_mode=Y';
                BX.ajax({
                    url: url,
                    method: 'GET',
                    dataType: 'html',
                    async: false,
                    preparePost: false,
                    start: true,
                    processData: false, // Ошибка при переходе по ссылкам в форме
                    skipAuthCheck: true,
                    onsuccess: function(data) {
                        let html = BX.processHTML(data);
                        content = html.HTML;
                    },
                    onfailure: function(html, e) {
                        console.error('getForm onfailure html', html, e, this);
                    }
                });

                return content;
            },
            /**
             * Получение формы при переходе по ссылке и вывод её в модальном окне
             * @param url - url с параметрами ссылки
             */
            set: function(url) {
                let form = this.getForm(url);
                this.popup.setContent(form);
                this.popup.adjustPosition();
                this.convertLinks();
            },
            /**
             * Отправка данных формы и получение новой формы в ответе
             * @param url - url с параметрами ссылки
             */
            submit: function(url) {
                let app = this;
                let form = document.querySelector("#" + this.id + " form");
                let data = BX.ajax.prepareForm(form).data;
                data.ajax_mode = 'Y';

                BX.ajax({
                    url: url,
                    data: data,
                    method: 'POST',
                    preparePost: true,
                    dataType: 'html',
                    async: false,
                    start: true,
                    processData: true,
                    skipAuthCheck: true,
                    onsuccess: function(data) {
                        let html = BX.processHTML(data);
                        app.popup.setContent(html.HTML);
                        app.convertLinks();
                    },
                    onfailure: function(html, e) {
                        console.error('getForm onfailure html', html, e, this);
                    }
                });
            }
        };