Урок 23. Создание удобной формы входа с помощью Login

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

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

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

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

Обратите внимание, что сниппет !Login вызывается некешированно!

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

× 21 - это ИД ресурса, где находится вызов сниппета Login

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

Источники и документация, что я пользовался при создании урока и просто читаю последнее время вместо художественной литературы:

  • справка по modal.js
  • Условные фильтры вывода
  • Login
  • Theme.Bootstrap
  • Demo