pn-new-crm/src/app/(auth)/reset-password/page.tsx

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { BrandedAuthShell } from '@/components/shared/branded-auth-shell';
import { FormErrorSummary } from '@/components/forms/form-error-summary';
import { useFormScrollToError } from '@/hooks/use-form-scroll-to-error';
import { cn } from '@/lib/utils';

const resetSchema = z.object({
  email: z.string().email('Please enter a valid email address'),
});

type ResetFormData = z.infer<typeof resetSchema>;

export default function ResetPasswordPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [submitted, setSubmitted] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<ResetFormData>({
    resolver: zodResolver(resetSchema),
  });
  const submitWithScroll = useFormScrollToError(handleSubmit, errors);

  // If the user landed here from a stale email link that points to
  // `/reset-password?token=…` instead of `/set-password?token=…`, hand
  // them off to the set-password form (the one that actually knows how
  // to consume the token). New emails should point straight at
  // `/set-password`, but old links live in inboxes for a long time.
  useEffect(() => {
    const token = searchParams.get('token');
    if (token) {
      router.replace(`/set-password?token=${encodeURIComponent(token)}`);
    }
  }, [router, searchParams]);

  async function onSubmit(data: ResetFormData) {
    setIsLoading(true);
    try {
      // Better-auth's request-link endpoint is `/api/auth/request-password-reset`.
      // `/api/auth/reset-password` is the *consume-token* endpoint and silently
      // rejects an email-only payload, which is why the old code appeared to
      // "succeed" without ever sending mail.
      const response = await fetch('/api/auth/request-password-reset', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: data.email, redirectTo: '/set-password' }),
      });

      // Treat 400 "user not found" as success so we don't leak whether the
      // account exists - the success copy says "if an account exists…".
      // Anything else (5xx, network) surfaces as a real error.
      if (!response.ok && response.status !== 400) {
        toast.error('Something went wrong. Please try again.');
        return;
      }

      setSubmitted(true);
    } catch {
      toast.error('Something went wrong. Please try again.');
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <BrandedAuthShell>
      <div className="text-center mb-6">
        <h1 className="text-xl font-semibold text-gray-900">Reset your password</h1>
        <p className="text-sm text-gray-500 mt-1">We&apos;ll email you a link</p>
      </div>

      {submitted ? (
        <div className="space-y-4 text-center">
          <p className="font-medium text-gray-900">Check your email</p>
          <p className="text-sm text-gray-500">
            If an account exists for that email address, we have sent a password reset link. Please
            check your inbox and spam folder.
          </p>
          <Link
            href="/login"
            className="inline-block text-sm text-[#0058b3] underline-offset-2 underline hover:no-underline"
          >
            Back to sign in
          </Link>
        </div>
      ) : (
        <form onSubmit={submitWithScroll(onSubmit)} className="space-y-4" noValidate>
          <FormErrorSummary errors={errors} labels={{ email: 'Email' }} />
          <div className="space-y-1.5">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              autoComplete="email"
              placeholder="you@example.com"
              disabled={isLoading}
              className={cn(errors.email && 'border-destructive focus-visible:ring-destructive')}
              {...register('email')}
            />
            {errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
          </div>

          <Button
            type="submit"
            className="w-full bg-[#007bff] hover:bg-[#0069d9] text-white"
            disabled={isLoading}
          >
            {isLoading ? 'Sending…' : 'Send reset link'}
          </Button>

          <p className="text-center text-sm text-gray-500">
            Remember your password?{' '}
            <Link
              href="/login"
              className="text-[#0058b3] underline-offset-2 underline hover:no-underline"
            >
              Sign in
            </Link>
          </p>
        </form>
      )}
    </BrandedAuthShell>
  );
}