{#-
  set_password.html — set a password from an invite or reset link. Inherits
  the auth contract. Backend: GET/POST /set-password (app.py). The `token`
  comes from the query string on GET and is echoed back in a hidden field on
  POST; auth.set_password(token, password) consumes it and activates the
  account. Shared by both the invite and reset flows.
-#}
{% extends "layout_auth.html" %}

{% block title %}Set password{% endblock %}

{% block eyebrow %}<span class="fbb-eyebrow">Account access</span>{% endblock %}
{% block heading %}Set your password{% endblock %}
{% block subheading %}
  <p class="fbb-muted">Choose a password to activate your account.</p>
{% endblock %}

{% block auth_body %}
  <form id="set-password-form" class="fbb-stack" method="post" action="{{ url_for('set_password') }}" data-fbb-loading data-fbb-veil>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    {#- Echo the single-use token back to the POST. -#}
    <input type="hidden" name="token" value="{{ token }}">

    <div class="fbb-field">
      <label class="fbb-label" for="password">New password</label>
      <div class="fbb-input-group">
        <input class="fbb-input" id="password" name="password" type="password"
               autocomplete="new-password" required minlength="{{ password_min_length }}" autofocus placeholder="At least {{ password_min_length }} characters">
        <button class="fbb-input-affix" type="button" data-fbb-reveal="#password" aria-label="Show password">
          <svg class="fbb-icon"><use href="{{ sprite }}#eye"></use></svg>
        </button>
      </div>
    </div>

    <div class="fbb-field" id="confirm-field">
      <label class="fbb-label" for="confirm">Confirm password</label>
      <input class="fbb-input" id="confirm" type="password"
             autocomplete="new-password" required placeholder="Repeat your password">
      <span class="fbb-error fbb-hidden" id="confirm-error">
        <svg class="fbb-icon fbb-icon-sm"><use href="{{ sprite }}#alert-circle"></use></svg>
        Passwords don't match.
      </span>
    </div>

    <button class="fbb-btn fbb-btn-primary fbb-btn-block" type="submit">
      <svg class="fbb-icon"><use href="{{ sprite }}#shield-check"></use></svg>
      Set password
    </button>
  </form>
{% endblock %}

{% block auth_foot %}
  <a href="{{ url_for('login') }}">Back to sign in</a>
{% endblock %}

{% block scripts %}
  <script nonce="{{ csp_nonce() }}">
    (function () {
      var form = document.getElementById("set-password-form");
      var pw = document.getElementById("password");
      var confirm = document.getElementById("confirm");
      var field = document.getElementById("confirm-field");
      var error = document.getElementById("confirm-error");
      form.addEventListener("submit", function (e) {
        if (pw.value !== confirm.value) {
          e.preventDefault();
          field.classList.add("is-invalid");
          error.classList.remove("fbb-hidden");
          confirm.focus();
          var btn = form.querySelector('[type="submit"]');
          if (btn) { btn.classList.remove("is-loading"); btn.disabled = false; }
          fabbro.loading(false);
        }
      });
      confirm.addEventListener("input", function () {
        if (confirm.value === pw.value) {
          field.classList.remove("is-invalid");
          error.classList.add("fbb-hidden");
        }
      });
    })();
  </script>
{% endblock %}