{% extends "base.html" %}

{% block page_title %}{{ title | default(value="Forgot 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="Forgot password") }}</h1>
    {% if message %}
    <div class="info-alert"><div class="info-message">{{ message }}</div></div>
    {% endif %}
    {% if error %}
    <div class="error-alert"><div class="error-message">{{ error }}</div></div>
    {% endif %}
    <form class="auth-password-form" method="post" action="/plugins/password-login/forgot" data-json-form="1">
        <label class="auth-field mb-4 block">
            <span>Email</span>
            <input class="blocks-input mt-1 w-full" type="email" name="email" autocomplete="email" required>
        </label>
        <button type="submit" class="blocks-button blocks-button-primary min-h-11 w-full">Send reset link</button>
    </form>
    <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) {
          var msg = (j && j.message) ? j.message : 'If an account exists for that email, a reset link has been sent.';
          window.location.href = '/plugins/password-login/forgot?message=' + encodeURIComponent(msg);
        })
        .catch(function () {
          window.location.href = '/plugins/password-login/forgot?error=' + encodeURIComponent('Request failed');
        });
    });
  });
})();
</script>
{% endblock %}