musicshare/apps/web/src/app/forgot-password/page.tsx

'use client';

import Link from 'next/link';
import { useState } from 'react';
import { api } from '@/lib/api';

export default function ForgotPasswordPage() {
  const [sentTo, setSentTo] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const email = String(new FormData(e.currentTarget).get('email') ?? '').trim();
    setBusy(true);
    setError(null);
    try {
      await api('/auth/forgot-password', { body: { email } });
      setSentTo(email);
    } catch (err) {
      setError((err as Error).message);
    }
    setBusy(false);
  };

  if (sentTo) {
    return (
      <div className="card form narrow">
        <h1>Check your email</h1>
        <p>
          If <strong>{sentTo}</strong> has a musicshare account, we&apos;ve sent it a link to choose a new password. It
          expires in an hour.
        </p>
        <p className="muted">Nothing there? Check your spam folder, or try again in a minute.</p>
        <Link href="/login" className="btn">
          Back to log in
        </Link>
      </div>
    );
  }

  return (
    <form className="card form narrow" onSubmit={onSubmit}>
      <h1>Reset your password</h1>
      <p className="muted">Enter the email you signed up with and we&apos;ll send you a link to choose a new password.</p>
      <label>
        Email
        <input name="email" type="email" required autoComplete="email" autoFocus />
      </label>
      {error && <p className="error">{error}</p>}
      <button className="btn btn-primary" disabled={busy}>
        {busy ? 'Sending…' : 'Send reset link'}
      </button>
      <p className="muted">
        Remembered it? <Link href="/login">Log in</Link>
      </p>
    </form>
  );
}