Так, был немного занят, ну, начнем:
1. Как у вас будет появляться форма - это ваше дело. Можете сделать это на jQuery, который идет сразу в составе Concrete5, можно просто на чистом JavaScript без фреймворков, можно отключить jQuery и подключить MooTools - как вам угодно. Это не относится ни коим образом к Concrete5, это только манипуляции с CSS и DOM посредством JavaScript. Другое дело, AJAX-запросы в этом примере будут использовать jQuery, но это вы тоже можете изменить - разница в том, как они будут реализованы - совсем небольшая.
2. Сейчас будем делать для вас простейший пример.
2.1. Добавьте в шаблон, где у вас будет находиться ссылка типа "Войти" такой код (уберем OpenID и регистрацию):
- Код: Выделить всё
<div id="user-controls">
<?php
$u = new User();
if ($u->isRegistered()) {
?>
<a href="<?php echo DIR_REL ?>/index.php/profile/" class="profile-link"><span><?php echo $u->getUserName(); ?></span></a> |
<a href="<?php echo DIR_REL ?>/index.php/login/logout/" class="signout-link"><span>Выйти</span></a>
<?php
} else {
?>
<a href="login" class="signin"><span>Войти</span></a>
<fieldset id="signin_menu">
<form method="post" id="signin_form" action="<?php echo $this->url('/login', 'do_login')?>">
<div id="login-form-wrapper">
<p>
<label for="uName"><?php if (USER_REGISTRATION_WITH_EMAIL_ADDRESS == true) { ?>
Email адрес
<?php } else { ?>
Имя пользователя
<?php } ?></label>
<input id="uName" name="uName" <?php echo (isset($uName)?'value="'.$uName.'"':'');?> title="Имя пользователя" placeholder="Имя пользователя" required tabindex="1" type="text" />
</p>
<p>
<label for="uPassword">Пароль</label>
<input id="uPassword" name="uPassword" value="" title="Пароль" placeholder="Пароль" required tabindex="2" type="password" />
</p>
<p>
<input id="submit" name="submit" value="Войти" tabindex="3" type="submit" />
</p>
<p class="remember">
<input id="uMaintainLogin" name="uMaintainLogin" value="1" tabindex="4" type="checkbox" title="Автоматически входить при каждом посещении сайта в течении двух недель" />
<label for="uMaintainLogin">Запомнить меня</label>
</p>
</div>
<?php $rcID = isset($_REQUEST['rcID']) ? preg_replace('/<|>/', '', $_REQUEST['rcID']) : $rcID; ?>
<input type="hidden" name="rcID" value="<?php echo $rcID?>" />
</form>
</fieldset>
<?php } ?>
</div>
Этот код отображает в зависимости от того, авторизован ли пользователь, либо "Войти", либо Имя пользователя со ссылкой на профиль и ссылку "Выход". Да, тут же находится форма авторизации, невидимая (CSS display: none;).
2.2. Добавьте в CSS вашего шаблона следующий код:
- Код: Выделить всё
#user-controls {
margin:0 auto;
position: relative;
}
#user-controls a.signin {
background: #BCD2C2;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#user-controls a.signin:hover {
background: #9FC8A8;
color: #FFFFFF !important;
}
#user-panel a.signin {
position:relative;
margin-left:3px;
text-decoration: none!important;
}
a.signin span {
background-image:url("images/key-up.gif");
background-repeat:no-repeat;
background-position: 100% 50%;
padding: 4px 23px 6px 0;
}
#user-controls a.menu-open {
background:#9FC8A8!important;
color:#2F5231!important;
outline:none;
-moz-box-shadow: #999999 2px 2px 2px;
-webkit-box-shadow: #999999 2px 2px 2px;
-o-box-shadow: #999999 2px 2px 2px;
box-shadow: #999999 2px 2px 2px;
}
#small_signup {
display:inline;
float:none;
line-height:23px;
margin:25px 0 0;
width:170px;
}
a.signin.menu-open span {
background-image:url("images/key-down.gif");
color:#2F5231;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
-moz-box-shadow: #999999 2px 2px 2px;
-webkit-box-shadow: #999999 2px 2px 2px;
-o-box-shadow: #999999 2px 2px 2px;
box-shadow: #999999 2px 2px 2px;
display:none;
background-color:#9FC8A8;
position:absolute;
width:235px;
z-index:100;
border:1px transparent;
text-align:left;
padding: 7px;
top: 11px;
right: 0px;
margin-top:5px;
margin-right: 0px;
*margin-right: -1px;
color:#2F5231;
font-size:11px;
}
#login-form-wrapper {
background-color: #D2E5D6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px;
}
#signin_menu input[type=text], #signin_menu input[type=password] {
display:block;
width:203px;
}
#signin_menu p {
margin:0;
}
#signin_menu a {
color: #2F5231 !important;
}
#signin_menu label {
font-weight:normal;
}
#signin_menu p.remember {
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
clear:both;
margin:5px 0;
}
#signin_menu p a {
color:#2F5231!important;
}
2.3. Добавьте (можно вынести в отдельный файл, но для простоты в данный момент, просто добавьте этот код после 2.1) JavaScript со следующим содержанием:
- Код: Выделить всё
<script type="text/javascript">
$(document).ready(function() {
<?php
$u = new User();
if (!$u->isRegistered()) {
?>
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});
$("fieldset#signin_menu").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
<?php } ?>
});
</script>
В принципе - все готово. Но нет.
В данном случае, при неверном вводе пароля вас все равно перекинет на стандартную форму авторизации.
3. Нам нужно использовать AJAX авторизацию.
Продолжим:
Контроллеры регистрации и авторизации в Concrete5 уже сразу поддерживают AJAX-авторизацию, для того, чтобы она заработала, достаточно лишь передать параметр запроса format: 'JSON'.
Это можно даже посмотреть в самом контроллере авторизации Concrete5:
- Код: Выделить всё
public function do_login() {
................
if( $_REQUEST['format']=='JSON' ){
$jsonHelper=Loader::helper('json');
echo $jsonHelper->encode($loginData);
die;
}
}
Собственно, добавим код JavaScript ниже нашего текущего, по идее, нужно его добавить к существующему, да и вообще, как я уже говорил - вынести в отдельный файл, но для краткости и простоты просто добавляем дальше:
- Код: Выделить всё
<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function () {
$.ajax({
type: "POST",
url: '<?php echo $this->url('/login', 'do_login')?>',
data: {"format": 'JSON', },
dataType: "json",
beforeSend: function() {
},
success: function(data) {
if (data.success == 1) {
document.location.reload(true);
} else {
alert('Неверное имя пользователя или пароль.');
}
},
error: function(req, textStatus) {
alert('Ошибка соединения.');
}
});
return false;
});
});
</script>
Собственно, вот и все. Это простейший пример, обрезанный, без ссылки "Забыли пароль". Без регистрации (она же вам не нужна). Наворачивать, стилизовать, добавлять эффекты, а также, чтобы ошибка авторизации выводилась не через "alert();", а в красиво оформленный DIV и т.д. и т.п. - это уже ваша задача.
Если что - спрашивайте.