account/change-password#

Trang đổi mật khẩu.

• Tệp giao diện: account/change-password.html
• Đường dẫn: /doi-mat-khau
• Controller: App\Modules\Account\AccountController::changePasswordPage

Ngoài những biến dưới đây, slot này còn nhận toàn bộ biến toàn cục.

Biến của trang#

Mã đầy đủ#

Toàn bộ tệp account/change-password.html của bộ giao diện mặc định. Chép về templates/<bộ giao diện của bạn>/account/change-password.html rồi sửa theo ý muốn.

<div class="container page-content page-content--narrow">
  <h1 class="page-title">Đổi mật khẩu</h1>
  <div class="account-layout">
    {% assign active_page = 'password' %}
    {% include 'account/_sidebar' %}
    <div class="account-main">
      {% if success_message %}
        <div class="alert alert--success">{{ success_message }}</div>
      {% endif %}
      {% if error_message %}
        <div class="alert alert--error">{{ error_message }}</div>
      {% endif %}

      <form action="/doi-mat-khau" method="post" class="account-form" id="change-password-form">
        <div style="position:absolute;left:-9999px;top:-9999px" aria-hidden="true">
          <label for="_hp">Leave this field empty</label>
          <input type="text" id="_hp" name="_hp" tabindex="-1" autocomplete="off">
        </div>

        <div class="form-group">
          <label for="current_password">Mật khẩu hiện tại *</label>
          <input type="password" id="current_password" name="current_password" required
                 class="form-input" placeholder="••••••••" autocomplete="current-password">
        </div>

        <div class="form-group">
          <label for="new_password">Mật khẩu mới *</label>
          <input type="password" id="new_password" name="new_password" required
                 class="form-input" placeholder="••••••••" autocomplete="new-password"
                 minlength="8">
        </div>

        <div class="form-group">
          <label for="new_password_confirm">Xác nhận mật khẩu mới *</label>
          <input type="password" id="new_password_confirm" name="new_password_confirm" required
                 class="form-input" placeholder="••••••••" autocomplete="new-password">
          <span id="pw-mismatch" class="form-hint form-hint--error" style="display:none">
            Mật khẩu xác nhận không khớp.
          </span>
        </div>

        <button type="submit" class="btn btn--primary">Đổi mật khẩu</button>
      </form>
    </div>
  </div>
</div>

<script>
(function () {
  var form = document.getElementById('change-password-form');
  var pw   = document.getElementById('new_password');
  var pwc  = document.getElementById('new_password_confirm');
  var hint = document.getElementById('pw-mismatch');

  function checkMatch() {
    if (pwc.value && pw.value !== pwc.value) {
      hint.style.display = '';
    } else {
      hint.style.display = 'none';
    }
  }

  pw.addEventListener('input', checkMatch);
  pwc.addEventListener('input', checkMatch);

  form.addEventListener('submit', function (e) {
    if (pw.value !== pwc.value) {
      e.preventDefault();
      hint.style.display = '';
      pwc.focus();
    }
  });
})();
</script>