components/ForgotPasswordForm.tsx

"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, SubmitHandler } from "react-hook-form";
import { z } from "zod";
import { Input } from "./ui/input";
import { Button } from "./ui/button";
import { Label } from "./ui/label";
import { sendResetEmail } from "@/utils/forgotPassword";
import { useState } from "react";

const schema = z.object({
  email: z.string().email("Email tidak valid"),
});

type FormFields = z.infer<typeof schema>;

export default function ForgotPasswordForm() {
  const [successMsg, setSuccessMsg] = useState<string | null>(null);
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm<FormFields>({ resolver: zodResolver(schema) });

  const onSubmit: SubmitHandler<FormFields> = async ({ email }) => {
    setSuccessMsg(null);
    const res = await sendResetEmail(email);
    if (!res.ok) {
      setError("root", { message: res.message });
      return;
    }
    setSuccessMsg(res.message);
  };

  return (
    <form className="flex flex-col gap-2" onSubmit={handleSubmit(onSubmit)}>
      <Label htmlFor="email" className="text-left">
        Email
      </Label>
      <Input id="email" type="email" placeholder="Email" {...register("email")} />
      {errors.email && (
        <div className="text-left text-xs text-red-500">{errors.email.message}</div>
      )}
      <Button disabled={isSubmitting} type="submit" className="mt-4 bg-orange-600 hover:bg-orange-800">
        {isSubmitting ? "Mengirim..." : "Kirim tautan reset"}
      </Button>
      {errors.root && (
        <div className="text-xs text-red-500">{errors.root.message}</div>
      )}
      {successMsg && (
        <div className="text-xs text-green-600">{successMsg}</div>
      )}
    </form>
  );
}