{% extends "base.html" %}
{% block title %}Recovery codes & devices · SD RMM{% endblock %}
{% block content %}
<div class="container" style="max-width:640px;margin:2rem auto;">
  <h1>Account security</h1>

  <div class="card" style="margin:1rem 0;padding:1rem 1.25rem;">
    <h2 style="margin-top:0;">Change password</h2>
    {% if pw_msg %}<p style="color:#3fb950;margin:0 0 .75rem;">{{ pw_msg }}</p>{% endif %}
    {% if pw_err %}<p style="color:#f85149;margin:0 0 .75rem;">{{ pw_err }}</p>{% endif %}
    <p class="muted small">Your authenticator (2FA) is not affected by changing your password.</p>
    <form method="post" action="/account/password" autocomplete="off">
      <p style="margin:.5rem 0;">
        <label>Current password<br>
          <input type="password" name="current_password" required autocomplete="current-password"
                 style="width:100%;padding:.5rem;box-sizing:border-box;"></label>
      </p>
      <p style="margin:.5rem 0;">
        <label>New password <span class="muted small">(min 10 characters)</span><br>
          <input type="password" name="new_password" minlength="10" required autocomplete="new-password"
                 style="width:100%;padding:.5rem;box-sizing:border-box;"></label>
      </p>
      <p style="margin:.5rem 0;">
        <label>Confirm new password<br>
          <input type="password" name="confirm_password" minlength="10" required autocomplete="new-password"
                 style="width:100%;padding:.5rem;box-sizing:border-box;"></label>
      </p>
      <button type="submit" class="btn btn-primary">Change password</button>
    </form>
  </div>

  <h2 style="margin:1.5rem 0 0;">Recovery codes &amp; trusted devices</h2>

  {% if new_codes %}
  <div class="card" style="border:2px solid #2b6fd6;margin:1rem 0;padding:1rem 1.25rem;">
    <h2 style="margin-top:0;">Your new recovery codes</h2>
    <p class="muted">Save these somewhere safe <strong>now</strong> &mdash; each works once if you lose your
      authenticator, and they are shown <strong>only this once</strong>. Generating a new set replaces them all.</p>
    <pre style="font-family:ui-monospace,monospace;font-size:1.05rem;line-height:1.9;background:#0f1419;color:#e6e6e6;padding:1rem 1.25rem;border-radius:8px;letter-spacing:1px;">{% for c in new_codes %}{{ c }}
{% endfor %}</pre>
    <p class="muted small">Store them in your password manager. Treat them like passwords.</p>
  </div>
  {% endif %}

  <div class="card" style="margin:1rem 0;padding:1rem 1.25rem;">
    <h2 style="margin-top:0;">Recovery codes</h2>
    <p>You have <strong>{{ remaining }}</strong> unused recovery code{{ '' if remaining == 1 else 's' }} remaining.</p>
    <p class="muted small">Recovery codes let you sign in if you lose your authenticator &mdash; you enter one in
      place of a 6-digit code. Regenerating invalidates any previous set.</p>
    <form method="post" action="/mfa/recovery"
          onsubmit="return confirm('Generate a new set of recovery codes? Any existing codes stop working.');">
      <button type="submit" class="btn btn-primary">{{ 'Generate recovery codes' if remaining == 0 else 'Regenerate recovery codes' }}</button>
    </form>
  </div>

  <div class="card" style="margin:1rem 0;padding:1rem 1.25rem;">
    <h2 style="margin-top:0;">Trusted devices</h2>
    <p class="muted small">When you tick &ldquo;Remember this device&rdquo; at sign-in, that device skips the
      second factor for 30 days (your password is still required every time). Sign out of all remembered
      devices below.</p>
    <form method="post" action="/mfa/forget-devices"
          onsubmit="return confirm('Forget all trusted devices? Every device will need a code again next sign-in.');">
      <button type="submit" class="btn">Forget all trusted devices</button>
    </form>
  </div>

  <p style="margin-top:1rem;"><a href="/dashboard">&larr; Back to dashboard</a></p>
</div>
{% endblock %}