{% extends "base.html" %}

{% block page_title %}{{ title | default(value="Reset password") }}{% endblock %}

{% block content %}
<div class="login-container mx-auto w-full max-w-md px-4 py-8 sm:px-6">
    <h1>{{ title | default(value="Reset password") }}</h1>
    {% if error %}
    <div class="error-alert"><div class="error-message">{{ error }}</div></div>
    {% endif %}
    {% if message %}
    <div class="info-alert"><div class="info-message">{{ message }}</div></div>
    {% else %}
    <form class="auth-password-form" method="post" action="/plugins/password-login/reset" data-json-form="1">
        <input type="hidden" name="token" value="{{ token | default(value='') }}">
        <label class="auth-field mb-4 block">
            <span>New password</span>
            <input class="blocks-input mt-1 w-full" type="password" name="password" autocomplete="new-password" required minlength="{{ min_password_length | default(value=8) }}">
        </label>
        <button type="submit" class="blocks-button blocks-button-primary min-h-11 w-full">Update password</button>
    </form>
    {% endif %}
    <p class="auth-links"><a href="/auth/login">Back to sign in</a></p>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  document.querySelectorAll('form[data-json-form]').forEach(function (form) {
    form.addEventListener('submit', function (ev) {
      ev.preventDefault();
      var action = form.getAttribute('action');
      var body = {};
      new FormData(form).forEach(function (v, k) { body[k] = v; });
      fetch(action, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify(body)
      }).then(function (r) { return r.json(); })
        .then(function (j) {
          if (j && j.redirect) { window.location.href = j.redirect; return; }
          if (j && j.message) {
            window.location.href = '/plugins/password-login/reset?message=' + encodeURIComponent(j.message);
            return;
          }
          if (j && j.error) {
            var token = body.token || '';
            window.location.href = '/plugins/password-login/reset?token=' + encodeURIComponent(token) + '&error=' + encodeURIComponent(j.error);
            return;
          }
          window.location.href = '/auth/login';
        })
        .catch(function () {
          window.location.href = '/plugins/password-login/reset?error=' + encodeURIComponent('Request failed');
        });
    });
  });
})();
</script>
{% endblock %}