CIAgent/apps/web/app/reset-password/page.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense } from "react";
import { useForm } from "react-hook-form";
import { KeyRound, Loader2 } from "lucide-react";
import { z } from "zod";
import { FormField } from "@/components/ui/form-field";
import { PasswordField } from "@/components/ui/password-field";
import { PasswordStrengthMeter } from "@/components/ui/password-strength-meter";
import { authErrorMessage, useConfirmPasswordReset } from "@/hooks/use-auth";

const resetSchema = z.object({
  email: z.string().email("Enter a valid email address"),
  code: z
    .string()
    .length(6, "Enter the 6-digit code")
    .regex(/^\d{6}$/, "Digits only"),
  newPassword: z
    .string()
    .min(10, "Must be at least 10 characters")
    .refine((v) => /[a-zA-Z]/.test(v) && /\d/.test(v), {
      message: "Must contain at least one letter and one digit",
    }),
});

type ResetForm = z.infer<typeof resetSchema>;

function ResetPasswordCard() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const resetMutation = useConfirmPasswordReset();
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<ResetForm>({
    resolver: zodResolver(resetSchema),
    defaultValues: { email: searchParams.get("email") ?? "" },
  });

  const onSubmit = handleSubmit(async (values) => {
    try {
      await resetMutation.mutateAsync({
        email: values.email,
        code: values.code,
        new_password: values.newPassword,
      });
      router.push("/login?reset=1");
    } catch {
      // Surfaced via resetMutation.isError below.
    }
  });

  return (
    <div className="w-full max-w-sm animate-fade-in overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
      <div className="h-1.5 bg-gradient-to-r from-brand-500 via-brand-600 to-brand-700" />
      <div className="p-8">
        <div className="flex items-center gap-3">
          <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-600">
            <KeyRound className="h-4.5 w-4.5" aria-hidden />
          </span>
          <div>
            <h1 className="text-xl font-semibold text-slate-900">Choose a new password</h1>
            <p className="text-sm text-slate-600">Enter the code we emailed you.</p>
          </div>
        </div>

        <form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
          <FormField
            label="Email"
            type="email"
            autoComplete="email"
            {...register("email")}
            error={errors.email?.message}
          />
          <FormField
            label="Reset code"
            inputMode="numeric"
            autoComplete="one-time-code"
            maxLength={6}
            placeholder="123456"
            {...register("code", {
              onChange: (e) => {
                e.target.value = e.target.value.replace(/\D/g, "").slice(0, 6);
              },
            })}
            error={errors.code?.message}
          />
          <div>
            <PasswordField
              label="New password"
              autoComplete="new-password"
              hint="At least 10 characters, with a letter and a digit."
              {...register("newPassword")}
              error={errors.newPassword?.message}
            />
            <PasswordStrengthMeter password={watch("newPassword") ?? ""} />
          </div>

          {resetMutation.isError && (
            <p className="animate-fade-in text-sm text-red-600" role="alert">
              {authErrorMessage(resetMutation.error)}
            </p>
          )}

          <button
            type="submit"
            disabled={resetMutation.isPending}
            className="focus-ring inline-flex w-full items-center justify-center gap-2 rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
          >
            {resetMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
            {resetMutation.isPending ? "Resetting…" : "Reset password"}
          </button>
        </form>

        <p className="mt-6 text-center text-sm text-slate-600">
          <Link
            href="/login"
            className="font-medium text-brand-600 transition-colors duration-150 hover:text-brand-700"
          >
            Back to sign in
          </Link>
        </p>
      </div>
    </div>
  );
}

export default function ResetPasswordPage() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
      <Suspense fallback={null}>
        <ResetPasswordCard />
      </Suspense>
    </main>
  );
}