Создание удобной формы авторизации в MODX Revolution с помощью Login

Создадим сегодня вход на сайт с помощью сниппета Login. Для таких целей я обычно использую Loginza, но для моей задачи понадобился именно Login.

Требования к уроку:

В этом уроке я буду использовать Twitter Bootstrap modal JS для всплывающего окна входа, чтобы пользователь не переключался на страницу входа, а потом переходил назад.
Итак пропишем в нашем шаблоне пути к необходимым библиотекам.

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script src="/assets/components/themebootstrap/js/bootstrap.min.js" type="text/javascript"></script> <link href="/assets/components/themebootstrap/css/bootstrap.css" rel="stylesheet"> <link href="/assets/components/themebootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">

Если вы установили шаблон Bootstrap, то там уже всё прописано в чанке Head. Модальное окно будет вызывать кнопка "Вход", создадим код кнопки и код модального окна, в которое вставим вызов сниппета Login:

Код
<a data-toggle="modal" href="#myModal" class="btn">Вход</a> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; "> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button> </div> <div class="modal-body"> [[!Login?]] </div>
Обратите внимание, что сниппет !Login вызывается некешированно!

Кнопка вход запускает модальное окно - контейнер с id="myModal". Более детально можете рассмотреть настройку модального окна в документации по modal.js внизу поста ссылка.
Далее нам хотелось бы, чтобы для вошедшего пользователя модальное окно не всплывало, а была просто кнопка "Выход" и при клике на неё пользователь выходил. Из документации Login получаем код кнопки:

Код
<a href="[[~21? &service=logout]]" title="Logout">Logout</a>
× 21 - это ИД ресурса, где находится вызов сниппета Login

При входе пользователь получает user.id с определённым значением, для анонимного пользователя (Anonymouse) данное значение user.id=0. Воспользуемся этим и переделаем код нашей кнопки, используя условные фильтры вывода:

Код
[[!+modx.user.id:is=`0`:then=`<a data-toggle="modal" href="#myModal" class="btn">Вход</a>`:else=`<a class="btn" href="[[~21? &service=logout]]">Выход</a>`]]

Вот и все!

3482