HOSTCMS v.6
ПОЛЬЗОВАТЕЛИ САЙТА
АВТОРИЗАЦИЯ НА САЙТЕ В МОДАЛЬНОМ ОКНЕ
Всплывающая форма для авторизации
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);}
Авторизация Пользователя сайта на любой странице
Делаем Блок авторизации на сайте без перехода в Личный кабинет.
В шапку Основного Макета сайта добавляем код, который будет показывать кнопку с иконкой для открытия формы авторизации
<?php
// Если модуль пользователей сайта доступен
if (Core::moduleIsActive('siteuser'))
{
if (is_null(Core_Entity::factory('Siteuser')->getCurrent()))
{
?>
<button type="button" class="site_user me-3">
<span class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="17px"><path style="fill:#444" d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"/></svg></span>
<span class="small">Войти</span>
</button>
<div id="site_user_autorisation" class="d-none">
<form method="post" action="/users/">
<div><input type="text" name="login" id="login" class="form-control mb-2" placeholder="Логин" /></div>
<div><input type="password" name="password" id="password" class="form-control mb-2" placeholder="Пароль" /></div>
<div>
<button type="submit" name="apply" class="btn btn-primary btn-sm">Авторизоваться</button>
</div>
<a href="/users/registration/" class="small"> +Зарегистироваться</a>
</form>
</div>
<div id="site_user_autorisation" class="d-none">
</div>
<?php
}
else
{?>
<a class="site_user" href="/users/">
<span class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="18px"><path d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"/></svg></span>
<span class="small">Кабинет</span>
</a>
<?php
}
}
?>
В ТДС "ПользователиСайта" добавляем код
// 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();
}
//~END ADD
Пишем код jQuery, который будет у нас обрабатывать запрос на авторизацию с помощью ajax
$(function() {
$('#site_user_autorisation [type="submit"]').on('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;
});
});