{% extends "base.html" %} {% block title %}Recover Account — PassKeeper{%
endblock %} {% block body_class %}auth-page{% endblock %} {% block body %}
<div class="auth-container">
  <div class="auth-card">
    <div class="auth-logo">
      <span class="logo-icon">🔒</span>
      <span class="logo-text">PassKeeper</span>
    </div>

    <!-- Step 1: Email + Recovery Code -->
    <div id="recover-step-1">
      <h1 class="auth-title">Recover your account</h1>
      <p class="auth-step-hint">
        Enter your email and the recovery code you saved when you set up account
        recovery.
      </p>
      <form id="recover-form-step1" novalidate>
        <p id="recover-error-1" class="form-error hidden"></p>
        <div class="form-group">
          <label for="recover-email">Email address</label>
          <input
            type="email"
            id="recover-email"
            name="email"
            required
            autocomplete="email"
            placeholder="you@example.com"
          />
        </div>
        <div class="form-group">
          <label for="recover-code">Recovery code</label>
          <input
            type="text"
            id="recover-code"
            name="recovery_code"
            required
            autocomplete="off"
            placeholder="xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx"
            class="input-monospace"
          />
        </div>
        <button
          type="submit"
          class="btn-primary btn-full"
          data-loading-text="Verifying…"
        >
          Verify recovery code
        </button>
      </form>
      <p class="auth-footer">
        Remember your password? <a href="/login">Sign in</a>
      </p>
    </div>

    <!-- Step 2: Set new master password (hidden until step 1 verified) -->
    <div id="recover-step-2" class="hidden">
      <h1 class="auth-title">Set a new master password</h1>
      <p class="auth-step-hint">
        Your recovery code is valid. Choose a new master password — your vault
        will be re-encrypted automatically.
      </p>
      <form id="recover-form-step2" novalidate>
        <p id="recover-error-2" class="form-error hidden"></p>
        <div class="form-group">
          <label for="recover-new-pass">New master password</label>
          <div class="input-with-toggle">
            <input
              type="password"
              id="recover-new-pass"
              name="new_password"
              required
              autocomplete="new-password"
              placeholder="Minimum 12 characters"
            />
            <button
              type="button"
              class="btn-show-pass"
              id="toggle-recover-pass"
              aria-label="Toggle password visibility"
            >
              👁
            </button>
          </div>
        </div>
        <div class="form-group">
          <label for="recover-confirm-pass">Confirm new password</label>
          <input
            type="password"
            id="recover-confirm-pass"
            name="confirm_password"
            required
            autocomplete="new-password"
            placeholder="Repeat new password"
          />
        </div>
        <button
          type="submit"
          class="btn-primary btn-full"
          data-loading-text="Recovering account…"
        >
          Recover account
        </button>
      </form>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='js/crypto.js') }}"></script>
<script src="{{ url_for('static', filename='js/recover.js') }}"></script>
{% endblock %}