{% extends "base.html" %}
{% block title %}Reset your password{% endblock %}

{% block chrome %}{% endblock %}

{% block content %}
<form class="card" id="forgot-form">
  <h1>Reset your password</h1>
  <p class="muted">We'll email you a link. It works once and expires in an hour.</p>

  <label>Email
    <input type="email" name="email" autocomplete="username" required autofocus>
  </label>
  <button type="submit" id="forgot-submit">Send the link</button>
  <p class="muted"><a href="/login">Back to sign in</a></p>
</form>

{# The same words whatever happened. Whether an address has an account is
   exactly what this form must not reveal, so the page cannot say "sent" in one
   case and "no such account" in the other - see api_password_reset_request. #}
<div class="card" id="forgot-done" hidden>
  <h1>Check your inbox</h1>
  <p>If that address has an account with a password, a reset link is on its way.</p>
  <p class="muted">Signed up with Google? There is no password to reset - use the
     Google button on the <a href="/login">sign-in page</a>.</p>
</div>
{% endblock %}

{% block scripts %}
<script>
  const form = document.getElementById("forgot-form");
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    document.getElementById("forgot-submit").disabled = true;
    await api.post("/api/password/reset/request",
                   { email: new FormData(form).get("email") });
    form.hidden = true;
    document.getElementById("forgot-done").hidden = false;
  });
</script>
{% endblock %}