FormPassword Forms

---
interface Props {
  heading?: string;
  subtext?: string;
  submitLabel?: string;
  mode?: "request" | "reset";
  loginHref?: string;
}

const {
  heading = "Wachtwoord vergeten?",
  subtext = "Vul je e-mailadres in en we sturen je een link om je wachtwoord opnieuw in te stellen.",
  submitLabel = "Resetlink versturen",
  mode = "request",
  loginHref = "/inloggen",
} = Astro.props;
---

<div class="fpw-wrap">
  <div class="fpw-header">
    <div class="fpw-icon" aria-hidden="true">🔐</div>
    {heading && <h1 class="fpw-heading">{heading}</h1>}
    {subtext && <p class="fpw-subtext">{subtext}</p>}
  </div>
  <form class="fpw-form" onsubmit="return false;" novalidate>
    {mode === "request" && (
      <div class="fpw-field">
        <label class="fpw-label" for="fpw-email">E-mailadres *</label>
        <input class="fpw-input" type="email" id="fpw-email" name="email" placeholder="jij@bedrijf.nl" required autocomplete="email" />
      </div>
    )}
    {mode === "reset" && (
      <>
        <div class="fpw-field">
          <label class="fpw-label" for="fpw-new">Nieuw wachtwoord *</label>
          <input class="fpw-input" type="password" id="fpw-new" name="new_password" placeholder="Minimaal 8 tekens" required autocomplete="new-password" />
          <span class="fpw-hint">Gebruik minimaal 8 tekens, een cijfer en een hoofdletter.</span>
        </div>
        <div class="fpw-field">
          <label class="fpw-label" for="fpw-confirm">Herhaal wachtwoord *</label>
          <input class="fpw-input" type="password" id="fpw-confirm" name="confirm_password" placeholder="••••••••" required autocomplete="new-password" />
        </div>
      </>
    )}
    <button class="fpw-submit" type="submit">{submitLabel}</button>
    <a class="fpw-back" href={loginHref}>← Terug naar inloggen</a>
  </form>
</div>

<style>
  .fpw-wrap {
    max-width: 420px; margin: 0 auto; padding: 2.5rem;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.06);
  }
  .fpw-header { text-align: center; margin-bottom: 2rem; }
  .fpw-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
  .fpw-heading { font-size: 1.5rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 0.4rem; }
  .fpw-subtext { font-size: 0.875rem; color: #666; margin: 0; line-height: 1.5; }
  .fpw-form { display: flex; flex-direction: column; gap: 1.25rem; }
  .fpw-field { display: flex; flex-direction: column; gap: 0.4rem; }
  .fpw-label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
  .fpw-input {
    padding: 0.75rem 1rem; border: 1.5px solid #ddd; border-radius: 8px;
    font-size: 0.95rem; color: var(--color-primary, #0a0a0a); background: #fff;
    transition: border-color 0.2s; font-family: inherit; box-sizing: border-box;
  }
  .fpw-input:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
  .fpw-hint { font-size: 0.75rem; color: #999; }
  .fpw-submit {
    padding: 0.9rem; background: var(--color-accent, #6366f1); color: #fff;
    border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: opacity 0.2s;
  }
  .fpw-submit:hover { opacity: 0.88; }
  .fpw-back { display: block; text-align: center; font-size: 0.875rem; color: #666; text-decoration: none; }
  .fpw-back:hover { color: var(--color-accent, #6366f1); }
</style>