Урок, в котором рассмотрим создание страниц "Авторизация" и "Восстановление пароля" с помощью компонента Login.

Страница "Авторизация"

Страница "Авторизация" предназначена для отображения пользователю формы входа на сайт, а также HTML-фрагмента с помощью которого он может выйти из системы. Всё логику работы по авторизации пользователя выполняет сниппет Login.

Содержимое ресурса "Авторизация" (сниппет Login):

[[!Login? 
  &tplType=`modChunk`
  &loginTpl=`myLoginChunk`
  &logoutTpl=`myLogoutChunk`
  &errTpl=`lgnErrTpl` 
  &redirectToPrior=`1`
]]
MODX Login - Процесс авторизации пользователя
MODX Login - Процесс авторизации пользователя

Описание используемых параметров сниппета Login:

Имя параметра Описание
tplType Тип шаблона для loginTpl и logoutTpl. Значение: modChunk.
loginTpl Шаблон формы для авторизации (входа) пользователя.
logoutTpl Шаблон, который отображается авторизованному пользователю.
errTpl Шаблон, который отображается пользователю при возникновении ошибки.
redirectToPrior Если установлено значение 1, то перенаправляет пользователя на предыдущую страницу (HTTP_REFERER) после успешного входа.

Содержимое чанка myLoginChunk (шаблон формы входа):

<div class="container">
  <div class="row">
    <div class="col-md-8 col-lg-6">
      <div class="panel panel-primary">
        <div class="panel-heading"><i class="glyphicon glyphicon-edit"></i> [[+actionMsg]]</div>
        <div class="panel-body">
          <p class="text-danger">[[+errors]]</p>
          <form class="form-horizontal" action="[[~[[*id]]]]" method="post">
            <div class="form-group">
              <label for="username" class="col-sm-4 control-label">[[%login.username]]</label>
              <div class="col-sm-8">
                <input type="text" name="username" class="form-control" id="username">
              </div>      
            </div>
            <div class="form-group">
              <label for="password" class="col-sm-4 control-label">[[%login.password]]</label>
              <div class="col-sm-8">
                <input type="password" name="password" class="form-control" id="password">
              </div>      
            </div>              
            <input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" />
            <input class="loginLoginValue" type="hidden" name="service" value="login">
            <input type="submit" value="[[+actionMsg]]" name="Login" id="Login" class="btn btn-primary pull-right">
          </form>
          <div class="clearfix"></div>
          <hr style="margin-top:10x;margin-bottom:5px;">
          <p><a href="[[~32]]" class="btn btn-link pull-right">Забыли пароль?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
MODX Login - Форма входа
MODX Login - Форма входа

Содержимое чанка myLgnErrTpl (шаблон ошибки):

<p class="error">[[+msg]]</p>
MODX Login - Форма входа (ошибка)
MODX Login - Форма входа (ошибка)

Содержимое чанка myLogoutChunk (шаблон, которой отображается авторизированному пользователю; используется для выхода из системы):

<div class="container">
  <div class="row">
    <div class="col-md-5">
      <div class="panel panel-primary">
        <div class="panel-heading"><i class="glyphicon glyphicon-user"></i> Пользователь</div>
        <div class="panel-body">
          <div class="loginMessage">[[+errors]]</div>
          Имя пользователя: [[!+modx.user.username]]
          <hr style="margin-top:8px; margin-bottom:8px;">
          <div class="row">
            <div class="col-xs-6" style="margin-bottom:8px;">
              <i class="glyphicon glyphicon-off"></i> <a href="[[+logoutUrl]]" title="[[+actionMsg]]">[[+actionMsg]]</a>
            </div>
            <div class="col-xs-6" style="margin-bottom:8px;">
              <i class="glyphicon glyphicon-pencil"></i> <a href="[[~33]]" title="Изменение пароля">Изменение пароля</a>
            </div>
            <div class="col-xs-6" style="margin-bottom:8px;">
              <i class="glyphicon glyphicon-home"></i> <a href="[[~30]]" title="Личный кабинет">Личный кабинет</a>
            </div>
            <div class="col-xs-6" style="margin-bottom:8px;">
              <i class="glyphicon glyphicon-cog"></i> <a href="[[~34]]" title="Редактирование данных">Редактирование данных</a>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>
MODX Login - Форма выхода
MODX Login - Форма выхода

Страница "Восстановление пароля"

Страница "Восстановления пароля" используется для тех случаев, когда пользователь забыл пароль и хочет его сбросить. Переход на данную страницу осуществляется с помощью ссылки "Забыли пароль?", которая расположена ниже формы авторизации.

Этот ресурс выполняет следующие действия:

  • отображает пользователю форму, с помощью которой он может потребовать выполнить сброс пароля;
  • отправляет письмо (после успешной обработки формы) на email. Письмо содержит ссылку, с помощью которой пользователь может выполнить сброс своего пароля. На этой странице вышеперечисленные действия выполняет сниппет ForgotPassword;
  • отображает сообщение (если пользователь перешёл на эту страницу с помощью ссылки из письма), с помощью которой пользователь сможет выполнить сброс пароля. Эти действия на странице (установку нового пароля и отображение результата сброса) выполняет сниппет ResetPassword.

Содержимое ресурса "Восстановления пароля" (сниппет ForgotPassword и ResetPassword):

[[!ResetPassword:empty=`
  [[!ForgotPassword?  
    &resetResourceId=`[[*id]]`
    &loginResourceId=`29`
    &tpl=`mylgnForgotPassTpl`
    &sentTpl=`mylgnForgotPassSentTpl`
    &emailTpl=`mylgnForgotPassEmail`
    &emailSubject=`Восстановление пароля`
  ]]`? &tpl=`mylgnResetPassTpl`
       &expiredTpl=`mylgnExpiredTpl`
       &loginResourceId=`29`
]]
MODX Login - Процесс восстановления пароля пользователя
MODX Login - Процесс восстановления пароля пользователя

Описание используемых параметров сниппета ForgotPassword:

Имя параметра Описание
tpl Шаблон формы для восстановления пароля. Значение: mylgnForgotPassTpl
emailTpl Шаблон письма с инструкцией по восстановлению пароля, отправляемый пользователю. Значение: mylgnForgotPassEmail.
emailSubject Тема письма. Значение: Восстановление пароля.
sentTpl Шаблон сообщения, которое необходимо показать пользователю при удачной отправки email. Значение: mylgnForgotPassSentTpl.
loginResourceId Ресурс, на который необходимо направить пользователя после успешного подтверждения. Значение: 29.
resetResourceId Идентификатор ресурса, в котором расположен сниппет ResetPassword. Значение: [[*id]].

Описание используемых параметров сниппета ResetPassword:

Имя параметра Описание
tpl Шаблон сообщения, содержащий информацию о сбросе пароля. Значение: mylgnResetPassTpl.
tplType Тип шаблона tpl. Значение: modChunk.
loginResourceId Ресурс, на который необходимо направить пользователя после успешного выполнения сброса пароля. Значение: 29.
expiredTpl Шаблон сообщения о том, что пароль уже был сброшен или срок действия ссылки истёк. Значение mylgnExpiredTpl.

Содержимое чанка mylgnForgotPassTpl (шаблон, которой отображает пользователю форму для восстановления пароля):

<div class="container">
  <div class="row">
    <div class="col-md-8 col-lg-6">
      <div class="panel panel-primary">
        <div class="panel-heading"><i class="glyphicon glyphicon-erase"></i> [[%login.forgot_password]]</div>
        <div class="panel-body">
          <div class="text-danger">[[+loginfp.errors]]</div>
          
          <form class="form-horizontal" action="[[~[[*id]]]]" method="post">
            <div class="form-group">
              <label for="username" class="col-sm-4 control-label">[[%login.username]]</label>
              <div class="col-sm-8">
                <input type="text" name="username" class="form-control" id="username" value="[[+loginfp.post.username]]">
              </div>      
            </div>
            <p>[[%login.or_forgot_username]]</p>
            <div class="form-group">
              <label for="username" class="col-sm-4 control-label">[[%login.email]]</label>
              <div class="col-sm-8">
                <input type="text" name="email" class="form-control" id="email" value="[[+loginfp.post.email]]">
              </div>      
            </div>            
            <input class="returnUrl" type="hidden" name="returnUrl" value="[[+loginfp.request_uri]]" />
            <input class="loginFPService" type="hidden" name="login_fp_service" value="forgotpassword" />
            <input type="submit" value="[[%login.reset_password]]" name="login_fp" id="login_fp" class="btn btn-primary pull-right">            
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
MODX Login - Форма для восстановления пароля
MODX Login - Форма для восстановления пароля

Содержимое чанка mylgnForgotPassSentTpl (шаблон, которой отображает пользователю сообщение об успешной отправке почты):

<p>Инструкция по сбросу пароля была отправлена на Ваш почтовый адрес ([[+email]]).</p>
MODX Login - Сообщение об успешной отправке почты пользователю для восстановления пароля
MODX Login - Сообщение об успешной отправке почты пользователю для восстановления пароля

Содержимое чанка mylgnForgotPassEmail (шаблон письма для восстановления пароля):

<p>Здравствуйте.</p>
<p>Для активации нового пароля, пожалуйста, перейдите по следующей ссылке:</p>
<p><a href="[[+confirmUrl]]">[[+confirmUrl]]</a></p>
<p>В случае успеха, вы можете использовать следующий пароль для входа:</p>
<p><strong>Имя: </strong>[[+username]]</p>
<p><strong>Пароль: </strong> [[+password]]</p>
<p>Если Вы не запрашивали это сообщение, то просто проигнорируйте его.</p>

<p>Спасибо,<br>
<em>Администратор сайта</em></p>
MODX Login - Письмо содержащее имя и новый пароль пользователя, а также ссылку, активирующую данный пароль.
MODX Login - Письмо содержащее имя и новый пароль пользователя, а также ссылку, активирующую данный пароль

Содержимое чанка mylgnResetPassTpl (шаблон сообщения о результате сброса пароля):

<div class="loginResetPass">
<p class="loginResetPassHeader">[[+username]],</p>
<p class="loginResetPassText">Ваш пароль успешно сброшен. Пожалуйста перейдите на страницу <a href="[[+loginUrl]]">"Авторизация"</a> для входа.</p>  
</div>
MODX Login - Сообщение об успешном сбросе пароля.
MODX Login - Сообщение об успешном сбросе пароля

Содержимое чанка mylgnExpiredTpl (шаблон сообщения о том, что пароль уже был сброшен или срок действия ссылки истёк):

<p><strong>Информация о сбросе пароля</strong></p>
<p>Ваш пароль уже сброшен или срок действия ссылки уже истёк. Если вам нужно сбросить пароль, то перейдите по следующей <a href="[[~32]]">ссылке</a>.</p>
MODX Login - Сообщение об успешном сбросе пароля.
MODX Login - Сообщение о том, что пароль уже был сброшен или срок действия ссылки истёк