ПОЛЬЗОВАТЕЛИ САЙТА / АВТОРИЗАЦИЯ НА САЙТЕ В МОДАЛЬНОМ ОКНЕ

Заметка создана: 18 ноября 2024 г.
Всплывающая форма для авторизации
HTML
<div id="login_form" class="modal">
    <div class="modal_title">Вход
для клиентов</div>
    <form method="post" action="/users/">
        <div class="line">
            <div class="name">Логин или e-mail </div>
            <input class="input" type="text" name="login" value="">
        </div>


        <div class="line">
            <div class="name">пароль</div>
            <input class="input" type="password" name="password" value="">
        </div>


        <div class="submit">
            <input class="submit_btn" type="submit" name="apply" value="Готово!">
        </div>
        <div class="forgot"><a href="/users/restore_password/">Забыли пароль?</a></div>
    </form>
    </div>
Скрипт ajax обработки авторизации на сайте добавляем в макет после кода формы
<script type="text/javascript">
     $(function(){
    $('#login_form [type="submit"]').bind('click', function(){
        var form = $(this).parents('form:eq(0)');
        form.parents('div:eq(0)').find('.alert-danger').remove();
        $.loadingScreen('show');


        $.ajax({
            url : form.attr('action') + '?ajaxapply=1',
            type : 'POST',
            data : form.serialize(),
            dataType : 'json',
            success :    function (ajaxData) {
                if (ajaxData.success == 1){
                    form.parents('.fancybox-skin:eq(0)').find('.fancybox-close').click();
                    $('.register').hide();
                    $('#authorization').empty().append($('<a>', {href:form.attr('action'), class:'fancy'}).text(' Здравствуйте, '+ajaxData.userName));
                }
                else{
                    if (ajaxData.error != undefined){
                        form.before($('<div>', {class: 'alert alert-danger', role:'alert'}).html(ajaxData.error));
                    }
                }
                $.loadingScreen('hide');
            },
            error : function (){$.loadingScreen('hide');return false}
        });

        return false;
    });
    });
    </script>
Добавляем код в настройки ТДС "Пользователи сайта" (в самое начало)
<?php
if (Core::moduleIsActive('siteuser'))
{
   $oSiteuser = Core_Entity::factory('Siteuser')->getCurrent();
   is_null($oSiteuser) && $oSiteuser = Core_Entity::factory('Siteuser');

// ADD АВТОРИЗАЦИЯ ВО ВСПЛЫВАЮЩЕМ ОКНЕ
    // Ajax Авторизация по логину и паролю
    if (Core_Array::getRequest('ajaxapply')){
        $oSiteuser = $oSiteuser->Site->Siteusers->getByLoginAndPassword(
            strval(Core_Array::getPost('login')), strval(Core_Array::getPost('password'))
        );


        if (!is_null($oSiteuser)){
            if ($oSiteuser->active){
                $expires = Core_Array::getPost('remember')
                    ? 2678400 // 31 день
                    : 86400; // 1 день
                $oSiteuser->setCurrent($expires);
            }
            else{
                $sError = 'Пользователь не активирован!';
            }
        }
        else{
            $sError = 'Введите корректный логин и пароль!';
        }
        $aResult = array();
        if (!empty($sError)){
            $aResult['error'] = $sError;
        }
        else{
            $aResult['success'] = 1;
            $aResult['userName'] = $oSiteuser->login;
        }
        echo json_encode($aResult);
        exit();
    }

Стили CSS

/*===== ДЛЯ МОДАЛЬНОГО ОКНА РЕГИСТРАЦИИ =====*/
.modal {background: #fff;padding: 35px 55px;width: 360px;border: 1px solid #dadada; display: none;}
.modal_title {color: #2a2735;font: 24px/25px RussoOne;margin-bottom: 35px;text-align: center;}
form .line {overflow:hidden; margin-bottom: 15px; }
.modal form .name, .form-group .name, .users .name {display:block; text-align: center;color: #38414c;font: 300 11px/11px Roboto;text-transform: uppercase;margin-bottom: 7px;}
.modal form .input, .form-group .input, .users .input {width: 100%;height: 43px;padding: 0 12px; color: #000; font: 14px Roboto;border: 1px solid #dadada;}
.submit {text-align: center; padding-top: 7px;}
.submit .submit_btn {display: inline-block;border-radius: 10px; border: none;border-bottom: 2px solid #e2c71b; border-right: 2px solid #e2c71b;height: 41px;color: #2a2735;font: 700 12px Roboto;text-transform: uppercase;
text-align: center; width: 161px;cursor: pointer;background: rgb(251,242,34);background: -moz-linear-gradient(top, rgba(251,242,34,1) 0%, rgba(250,223,32,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,242,34,1)), color-stop(100%,rgba(250,223,32,1))); background: -webkit-linear-gradient(top, rgba(251,242,34,1) 0%,rgba(250,223,32,1) 100%);
background: -o-linear-gradient(top, rgba(251,242,34,1) 0%,rgba(250,223,32,1) 100%); background: -ms-linear-gradient(top, rgba(251,242,34,1) 0%,rgba(250,223,32,1) 100%);
background: linear-gradient(to bottom, rgba(251,242,34,1) 0%,rgba(250,223,32,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbf222', endColorstr='#fadf20',GradientType=0 );}
.modal form .submit_btn:hover{background: rgb(251,240,33);background: -moz-linear-gradient(top, rgba(251,240,33,1) 0%, rgba(245,192,17,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,240,33,1)), color-stop(100%,rgba(245,192,17,1)));background: -webkit-linear-gradient(top, rgba(251,240,33,1) 0%,rgba(245,192,17,1) 100%);background: -o-linear-gradient(top, rgba(251,240,33,1) 0%,rgba(245,192,17,1) 100%);
background: -ms-linear-gradient(top, rgba(251,240,33,1) 0%,rgba(245,192,17,1) 100%);background: linear-gradient(to bottom, rgba(251,240,33,1) 0%,rgba(245,192,17,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbf021', endColorstr='#f5c011',GradientType=0 );}
.modal form .forgot{text-align: center;padding-top: 12px; font: 300 10px Roboto;margin-bottom: -20px;}
.modal form .forgot a{ color: #575756; }
.modal form .forgot a:hover{ text-decoration: none; }
.modal.thank, .modal2.thank, .modal2.error {background: #fbef21; height: 325px;vertical-align: middle; border: none;}
.fancybox-inner .modal.thank, .fancybox-inner .modal2.thank { display: table-cell !important; }
.modal.thank .modal_title, .modal2.thank .modal_title, .modal2.callback .modal_title { font-size: 27px; line-height: 28px; margin-bottom: 25px; }
.modal.thank .text, .modal2.thank .text, .modal2.error .text, .modal2.callback .text {color: #38414c;font: 300 15px/22px Roboto;text-align: center;text-transform: uppercase;vertical-align: middle;}
.modal.thank .text b, .modal2.thank .text b, .modal2.error .text b { text-transform: none; }
.modal form input[name='captcha'], .modal form .stars {width:50%; margin-left:25%;}
.modal form .stars {padding-left:10px;}
.modal-close {position: absolute; top: 14px;right: 12px; width: 23px;height: 22px;cursor: pointer;z-index: 8040;background: url(/images/close.png) 0 0 no-repeat;transition: transform 0.4s ease;}
.modal-close:hover {-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg);transform: rotate(360deg);}