MODX - Login (Авторизация пользователей)

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

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

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

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

[[!Login? 
  &tplType=`modChunk`
  &loginTpl=`myLoginChunk`
  &logoutTpl=`myLogoutChunk`
  &errTpl=`lgnErrTpl` 
  &redirectToPrior=`1`
]]

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

Содержимое чанка 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>

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

<p class="error">[[+msg]]</p>

Содержимое чанка 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>

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

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

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

• отображает пользователю форму, с помощью которой он может потребовать выполнить сброс пароля;
• отправляет письмо (после успешной обработки формы) на 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`
]]

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

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

Содержимое чанка 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>

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

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

Содержимое чанка 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>

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

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

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

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