ResetPasswordPage.tsx

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

export function ResetPasswordPage() {
  const [searchParams] = useSearchParams();
  const token = searchParams.get('token') || '';
  const navigate = useNavigate();

  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setError('');
    if (password !== confirm) {
      setError('Passwords do not match.');
      return;
    }
    setSubmitting(true);
    try {
      await authApi.resetPassword(token, password);
      setSuccess(true);
      setTimeout(() => navigate('/auth/login'), 2500);
    } catch (err: any) {
      setError(err.response?.data?.error || 'Reset failed. The link may have expired.');
    } 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">Choose a new password</h1>
        <p className="mt-2 text-sm text-surface-500">
          Minimum 8 characters with at least two of: uppercase, lowercase, digits, symbols.
        </p>

        {!token ? (
          <div className="mt-6 rounded-lg bg-error/10 p-4 text-sm text-error">
            Missing reset token. Please use the link from your email, or{' '}
            <Link to="/auth/forgot-password" className="font-medium underline">
              request a new one
            </Link>
            .
          </div>
        ) : success ? (
          <div className="mt-6 rounded-lg bg-success/10 p-4 text-sm text-surface-700">
            Password reset successfully. Redirecting you to sign in…
          </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="password" className="mb-1.5 block text-sm font-medium text-surface-700">
                New password
              </label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-500" />
                <input
                  id="password"
                  type={showPassword ? 'text' : 'password'}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full rounded-lg border border-gray-300 bg-white py-3 pl-10 pr-10 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="••••••••"
                  minLength={8}
                  required
                  autoFocus
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 flex min-h-[44px] min-w-[44px] items-center justify-center rounded p-1.5 text-surface-400 hover:text-surface-600"
                >
                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                </button>
              </div>
            </div>
            <div>
              <label htmlFor="confirm" className="mb-1.5 block text-sm font-medium text-surface-700">
                Confirm new password
              </label>
              <div className="relative">
                <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-500" />
                <input
                  id="confirm"
                  type={showPassword ? 'text' : 'password'}
                  value={confirm}
                  onChange={(e) => setConfirm(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="••••••••"
                  minLength={8}
                  required
                />
              </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" /> : 'Reset password'}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}