ForgotPasswordPage.tsx

import { useState, FormEvent } from 'react';
import { Link } from 'react-router-dom';
import { Mail, ArrowLeft } from 'lucide-react';
import { authApi } from '../../api/auth';
import { LoadingSpinner } from '../../components/ui/LoadingSpinner';

export function ForgotPasswordPage() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError('');
    setSubmitting(true);
    try {
      await authApi.forgotPassword(email);
      setSubmitted(true);
    } catch (err: any) {
      setError(err.response?.data?.error || 'Something went wrong. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center bg-surface-50 p-8">
      <div className="w-full max-w-md rounded-2xl border border-surface-200 bg-white p-8 shadow-sm">
        <Link
          to="/auth/login"
          className="mb-6 flex items-center gap-2 text-sm font-medium text-surface-400 hover:text-surface-600 transition-colors"
        >
          <ArrowLeft size={16} />
          Back to sign in
        </Link>

        <h1 className="text-2xl font-bold text-surface-900">Forgot your password?</h1>
        <p className="mt-2 text-sm text-surface-500">
          Enter the email associated with your account and we'll send you a reset link.
        </p>

        {submitted ? (
          <div className="mt-6 rounded-lg bg-success/10 p-4 text-sm text-surface-700">
            If an account exists for <span className="font-medium">{email}</span>, a password
            reset link has been sent. The link expires in 1 hour — check your inbox (and spam
            folder).
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="mt-6 space-y-5">
            {error && (
              <div className="rounded-lg bg-error/10 p-4 text-sm text-error">{error}</div>
            )}
            <div>
              <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-surface-700">
                Email
              </label>
              <div className="relative">
                <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-500" />
                <input
                  id="email"
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full rounded-lg border border-gray-300 bg-white py-3 pl-10 pr-4 text-sm text-gray-900 outline-none transition-colors placeholder:text-gray-400 focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
                  placeholder="you@company.com"
                  required
                  autoFocus
                />
              </div>
            </div>
            <button
              type="submit"
              disabled={submitting}
              className="w-full rounded-lg bg-brand-600 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-50"
            >
              {submitting ? <LoadingSpinner size="sm" /> : 'Send reset link'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}