MODX - Login (Личный кабинет пользователя)

Урок, в котором рассмотрим, как в MODX Revolution можно на основании компонента Login создать ресурсы "Личный кабинет пользователя", "Изменение пароля", "Редактирование данных".

Страница "Изменение пароля"

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

Содержимое ресурса "Изменения пароля" (форма и сниппет ChangePassword):

[[!ChangePassword?
   &submitVar=`change-password`
   &placeholderPrefix=`cp.`
   &validateOldPassword=`1`
   &validate=`nospam:blank`
   &reloadOnSuccess=`0`
   &successMessage=`Ваш пароль успешно изменён`
]]

<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> Изменение пароля</div>
        <div class="panel-body">
          <div class="updprof-error">[[!+cp.error_message]]</div>
          <p>[[!+cp.successMessage]]</p>
          <form class="form-horizontal" action="[[~[[*id]]]]" method="post">
            <input type="hidden" name="nospam" value="">
            <div class="form-group">
              <label for="password_old" class="col-sm-4 control-label">Старый пароль</label>
              <div class="col-sm-8">
                <input type="password" name="password_old" id="password_old" value="[[+cp.password_old]]" class="form-control">
                <span class="help-block text-error">
                  [[!+cp.error.password_old]]
                </span>   
              </div>      
            </div>
            <div class="form-group">
              <label for="password_new" class="col-sm-4 control-label">Новый пароль</label>
              <div class="col-sm-8">
                <input type="password" name="password_new" id="password_new" value="[[+cp.password_new]]" class="form-control">
                <span class="help-block text-error">
                  [[!+cp.error.password_new]]
                </span>  
              </div>      
            </div>   
            <div class="form-group">
              <label for="password_new_confirm" class="col-sm-4 control-label">Введите новый пароль ещё раз</label>
              <div class="col-sm-8">
                <input type="password" name="password_new_confirm" id="password_new_confirm" value="[[+cp.password_new_confirm]]" class="form-control">
                <span class="help-block text-error">
                  [[!+cp.error.password_new_confirm]]
                </span>  
              </div>      
            </div>
            <input type="submit" value="Изменить пароль" name="change-password" id="change-password" class="btn btn-primary pull-right">
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
MODX Login - Форма изменения пароля пользователя
MODX Login - Форма изменения пароля пользователя
MODX Login - Валидация данных формы, предназначенной для изменения пароля пользователя
MODX Login - Валидация данных формы, предназначенной для изменения пароля пользователя
MODX Login - Успешное изменение пароля пользователя
MODX Login - Успешное изменение пароля пользователя

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

Имя параметра Описание
submitVar Ключ, значение которого проверяется, перед тем как сниппет ChangePassword начнёт обрабатывать форму. Если в качестве значения этого параметра указать пустую строку или false, то сниппет ChangePassword будет обрабатывать форму при получении любого Post запроса. Значение ключа: change-password.
placeholderPrefix Префикс, который будут иметь плейсхолдеры, устанавливаемые с помощью этого сниппета. Значение: cp..
validateOldPassword Указывает, требовать ли от пользователя ввод текущего пароля для успешного установления нового. Значение: 1 (да, требовать).
reloadOnSuccess Определяет необходимо ли перезагружать эту страницу (ресурс) после успешного установления нового пароля или нет. Если значение этого параметра установить равным 1, то данный сниппет перезагрузит эту страницу с параметром GET, предотвращающим повторную отправку данных на сервер. В противном случае (значение 0), сниппет ChangePassword выведет сообщение в плейсхолдер. Значение: 0 (вывести сообщение об успехе в плейсхолдер).
successMessage Если параметр reloadOnSuccess имеет значение 0, то данный сниппет выведет указанное в successMessage сообщение в плейсхолдер [prefix].successMessage. Значение: Ваш пароль успешно изменён.

Страница "Редактирование данных"

Эта страница предназначена для изменения данных пользователя, таких как полное имя (fullname), телефон (phone), мобильный телефон (mobilephone), адрес (address), страна (country), город (city), веб-сайт (website). Логику работы по обновлению данных пользователя выполняет сниппет UpdateProfile из пакета Login.

Содержимое ресурса "Редактирование данных" (сниппет UpdateProfile):

[[!UpdateProfile? &validate=`fullname:required`]]

<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> Редактирование данных</div>
        <div class="panel-body">
          <div class="updprof-error">[[+error.message]]</div>
          [[+login.update_success:is=`1`:then=`[[%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]`]]
          <form action="[[~[[*id]]]]" method="post" class="form-horizontal">
            <input type="hidden" name="nospam" value="">
            <div class="form-group">
              <label for="fullname" class="col-sm-4 control-label">[[!%login.fullname? &namespace=`login` &topic=`updateprofile`]]</label>
              <div class="col-sm-8">
                <input type="text" name="fullname" class="form-control" id="fullname" value="[[+fullname]]">
                <span class="help-block text-error">
                  [[+error.fullname]]
                </span>        
              </div>      
            </div>
            <div class="form-group">
              <label for="phone" class="col-sm-4 control-label">[[!%login.phone]]</label>
              <div class="col-sm-8">
                <input type="text" name="phone" class="form-control" id="phone" value="[[+phone]]">
                <span class="help-block text-error">
                  [[+error.phone]]
                </span>        
              </div>      
            </div> 
            <div class="form-group">
              <label for="mobilephone" class="col-sm-4 control-label">[[!%login.mobilephone]]</label>
              <div class="col-sm-8">
                <input type="text" name="mobilephone" class="form-control" id="mobilephone" value="[[+mobilephone]]">
                <span class="help-block text-error">
                  [[+error.mobilephone]]
                </span>        
              </div>      
            </div> 
            <div class="form-group">
              <label for="address" class="col-sm-4 control-label">[[!%login.address]]</label>
              <div class="col-sm-8">
                <input type="text" name="address" class="form-control" id="address" value="[[+address]]">
                <span class="help-block text-error">
                  [[+error.address]]
                </span>        
              </div>      
            </div>  
            <div class="form-group">
              <label for="country" class="col-sm-4 control-label">[[!%login.country]]</label>
              <div class="col-sm-8">
                <input type="text" name="country" class="form-control" id="country" value="[[+country]]">
                <span class="help-block text-error">
                  [[+error.country]]
                </span>        
              </div>      
            </div>   
            <div class="form-group">
              <label for="city" class="col-sm-4 control-label">[[!%login.city]]</label>
              <div class="col-sm-8">
                <input type="text" name="city" class="form-control" id="city" value="[[+city]]">
                <span class="help-block text-error">
                  [[+error.city]]
                </span>        
              </div>      
            </div>  
            <div class="form-group">
              <label for="website" class="col-sm-4 control-label">[[!%login.website]]</label>
              <div class="col-sm-8">
                <input type="text" name="website" class="form-control" id="website" value="[[+website]]">
                <span class="help-block text-error">
                  [[+error.website]]
                </span>        
              </div>      
            </div>  
            <div class="clearfix"></div>
            <input type="submit" value="[[!%login.update_profile]]" name="login-updprof-btn" id="login-updprof-btn" class="btn btn-primary pull-right">
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
MODX Login - Форма с помощью которой пользователь может обновить свои персональные данные
MODX Login - Форма с помощью которой пользователь может обновить свои персональные данные

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

Имя параметра Описание
submitVar Имя кнопки submit, которая отправляет форму обновления профиля пользователя на сервер. Значение по умолчанию: login-updprof-btn
validate Список (через запятую) полей для валидации (проверки). Указывается так: имя:валидатор (например, username: required, email:required). Валидаторы можно соединять в цепочки. Например, email:email:required.

Страница "Личный кабинет"

На этой странице будем отображать сведения из профиля пользователя, а также кнопки, с помощью которых пользователь может перейти на страницы "Изменения пароля" и "Редактирование данных". Для получения данных пользователя будем использовать сниппет Profile.

Сниппет Profile предназначен для установки в виде плейсхолдеров полей профиля текущего или указанного пользователя. Используя эти плейсхолдеры можно достаточно просто вывести необходимую информацию из профиля в нужные места на странице.

Содержимое ресурса "Личный кабинет" (сниппет Profile):

[[!Profile? &prefix=`usr.`]]

<div class="panel panel-primary">
  <div class="panel-heading"><i class="glyphicon glyphicon-edit"></i> Личный кабинет пользователя</div>
    <div class="panel-body">
      <p>Имя пользователя: [[+usr.username]]</p>
      <p>Телефон: [[+usr.phone]]</p>
      <p>Мобильный телефон: [[+usr.mobilephone]]</p>
      <p>Email: [[+usr.email]]</p>
      <hr>
      <p>Адрес: [[+usr.address]]</p>
      <p>Страна: [[+usr.country]]</p>
      <p>Город: [[+usr.city]]</p>
      <p>Веб-сайт: [[+usr.website]]</p>
      <hr>
      <div class="col-xs-6" style="margin-bottom:8px;">
       <i class="glyphicon glyphicon-pencil"></i> <a href="[[~14]]" title="Изменение пароля">Изменение пароля</a>
      </div>
      <div class="col-xs-6" style="margin-bottom:8px;">
        <i class="glyphicon glyphicon-cog"></i> <a href="[[~15]]" title="Редактирование данных">Редактирование данных</a>
      </div>
    </div>
  </div>
</div>
MODX Login - Личный кабинет пользователя
MODX Login - Личный кабинет пользователя

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

Имя параметра Описание
prefix Префикс, который будут иметь плейсхолдеры, установленные этим сниппетом.
user Необязательный параметр. Предназначен для указания пользователя, данные которого необходимо вывести. Задаётся параметр посредством указания идентификатора (id) или имени (username) пользователя. По умолчанию: текущий пользователь.
useExtended Определяет необходимо ли устанавливать все расширяемые поля пользователя в качестве плейсхолдеров. Значение по умолчанию: 1 (да, необходимо).


   MODX Revo 0    3239 +1

Комментарии (7)

  1. Waelastik # 0
    Все отлично, спасибо за уроки.
    А как привязать к профилю аватарку?
    А после вывести ее в комментарии в Тикетах?

    1. Александр Мальцев # 0
      Этот момент рассмотрим немного позже… В отдельной статье.
    2. Егор К. # 0
      Спасибо за информацию.
      Очень помогла!
      1. Александр # 0
        Так должно быть или это ошибка:
        &prefix=`usr.`
        А в писание используемых параметров user?
        1. Александр Мальцев # 0
          Данный параметр (&prefix) — это префикс для плейсхолдеров ([[+usr.username]], [[+usr.phone]] и др.).
          А параметр user необходимо указывать тогда, когда Вы хотите получить данные определённого пользователя. Но в данном случае он не нужен, т.к. он по умолчанию возвращает данные текущего пользователя. А это как раз то, что нужно в данном случае.
        2. Александр # 0
          А по Office можете подсказать?
          1. Александр Мальцев # 0
            Можно, но это не относиться к данной статье. Лучше это сделать в разделе «Вопросы».

          Вы должны авторизоваться, чтобы оставлять комментарии.