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

В этой статье изучим, как в MODX на основании компонента Login создать личный кабинет пользователя, форму для изменения пароля и обновления профиля.

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

1. Регистрация пользователей
2. Авторизация пользователей

Изменение пароля

Изменение пароля будем выполнять на соответствующей странице, созданной нами в предыдущей статье.

Для этого откроем ресурс «Изменение пароля» и поместим в его содержимое форму и вызов сниппета ChangePassword. С помощью него мы будем выполнять действия, связанные с изменением пароля.

Содержимое ресурса:

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

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">Изменение пароля</div>
    <div class="card-body">
      [[!+cp.error_message:notempty=`<div class="alert alert-danger" role="alert">[[!+cp.error_message]]</div>`]]
      [[!+cp.successMessage:notempty=`<div class="alert alert-success" role="alert">[[!+cp.successMessage:striptags]]</div>`]]
      <form class="form" action="[[~[[*id]]]]" method="post">
        <input type="hidden" name="nospam" value="">
        <div class="mb-3">
          <label for="password_old" class="form-label">Старый пароль</label>
          <input type="password" class="form-control[[!+cp.error.password_old:notempty=` is-invalid`]]" name="password_old" id="password_old" value="[[+cp.password_old]]">
          <div class="invalid-feedback">[[!+cp.error.password_old]]</div>
        </div>
        <div class="mb-3">
          <label for="password_new" class="form-label">Новый пароль</label>
          <input type="password" class="form-control[[!+cp.error.password_new:notempty=` is-invalid`]]" name="password_new" id="password_new" value="[[+cp.password_new]]">
          <div class="invalid-feedback">[[!+cp.error.password_new]]</div>
        </div>
        <div class="mb-3">
          <label for="password_new_confirm" class="form-label">Введите новый пароль ещё раз</label>
          <input type="password" class="form-control[[!+cp.error.password_new_confirm:notempty=` is-invalid`]]" name="password_new_confirm" id="password_new_confirm" value="[[+cp.password_new_confirm]]">
          <div class="invalid-feedback">[[!+cp.error.password_new_confirm]]</div>
        </div>
        <input type="submit" class="btn btn-primary" name="change-password" id="change-password" value="Изменить пароль">
      </form>
    </div>
  </div>
</div>

Вид формы для изменения пароля:

В коде, приведённом выше, форма написана на последней версии Bootstrap. Кроме этого, это касается также других форм, приведённых в этой статье.

Отображение ошибок при валидации данных формы:

Сообщение об успешном смене пароля:

Описание некоторых параметров сниппета ChangePassword:

Обновление профиля пользователя

На странице «Редактирование данных» пользователь может изменить данные своего профиля. В данном случае: fullname (полное имя), phone (телефон), country (страна) и website (веб-сайт). Содержимое ресурса будет включать форму и сниппет UpdateProfile из пакета Login для её обработки.

Содержимое ресурса:

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

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">Редактирование данных</div>
    <div class="card-body">
      [[+login.update_success:is=`1`:then=`<div class="alert alert-success" role="alert">[[%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]</div>`:else=`[[+error.message:notempty=`<div class="updprof-error alert alert-danger" role="alert">[[+error.message]]</div>`]]`]]
      <form class="form" action="[[~[[*id]]]]" method="post">
        <input type="hidden" name="nospam" value="">
        <div class="mb-3">
          <label for="fullname" class="form-label">[[!%login.fullname? &namespace=`login` &topic=`updateprofile`]]</label>
          <input type="text" name="fullname" class="form-control[[+error.fullname:notempty=` is-invalid`]]" id="fullname" value="[[+fullname]]">
          <div class="invalid-feedback">[[+error.fullname]]</div>
        </div>
        <div class="mb-3">
          <label for="phone" class="form-label">[[!%login.phone]]</label>
          <input type="text" name="phone" class="form-control[[+error.phone:notempty=` is-invalid`]]" id="phone" value="[[+phone]]">
          <div class="invalid-feedback">[[+error.phone]]</div>
        </div>
        <div class="mb-3">
          <label for="country" class="form-label">[[!%login.country]]</label>
          <input type="text" name="country" class="form-control[[+error.country:notempty=` is-invalid`]]" id="country" value="[[+country]]">
          <div class="invalid-feedback">[[+error.country]]</div>
        </div>
        <div class="mb-3">
          <label for="website" class="form-label">[[!%login.website]]</label>
          <input type="text" name="website" class="form-control[[+error.website:notempty=` is-invalid`]]" id="website" value="[[+website]]">
          <div class="invalid-feedback">[[+error.website]]</div>
        </div>
        <input type="submit" class="btn btn-primary" value="[[!%login.update_profile]]" name="login-updprof-btn" id="login-updprof-btn">
      </form>
    </div>
  </div>
</div>

Вид формы для обновления данных в профиле:

Описание некоторых параметров сниппета UpdateProfile:

Личный кабинет пользователя

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

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

Содержимое ресурса:

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

<div class="container pt-3">
  <div class="card text-dark bg-white mx-auto mb-3" style="max-width: 30rem;">
    <div class="card-header">Личный кабинет пользователя</div>
    <div class="card-body">
      <ul class="list-group">
        <li class="list-group-item">Имя пользователя: <span class="fw-bold">[[+usr.username]]</span></li>
        <li class="list-group-item">Телефон: <span class="fw-bold">[[+usr.phone]]</span></li>
        <li class="list-group-item">Email: <span class="fw-bold">[[+usr.email]]</span></li>
        <li class="list-group-item">Страна: <span class="fw-bold">[[+usr.country]]</span></li>
        <li class="list-group-item">Веб-сайт: <span class="fw-bold">[[+usr.website]]</span></li>
        <a class="list-group-item list-group-item-primary list-group-item-action" href="[[~7]]">Изменение пароля</a>
        <a class="list-group-item list-group-item-primary list-group-item-action" href="[[~8]]">Редактирование данных</a>
      </ul>
    </div>
  </div>
</div>

В этом HTML-коде вывод списка оформлен с помощью компонента Bootstrap List group.

Описание некоторых параметров сниппета Profile:

Следующая тема: Добавление фото пользователю с использованием MODX Login.