NextChair/src/features/auth/components/register-form.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import Link from "next/link";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { registerAction } from "@/features/auth/actions/register";
import { registerSchema, type RegisterInput } from "@/features/auth/schemas";

export function RegisterForm() {
  const [formError, setFormError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm<RegisterInput>({
    resolver: zodResolver(registerSchema),
  });

  const onSubmit = async (data: RegisterInput) => {
    setFormError(null);
    const formData = new FormData();
    Object.entries(data).forEach(([key, value]) => formData.set(key, value ?? ""));

    const result = await registerAction(formData);

    // A successful call redirects server-side and never resolves here with
    // success: true in practice, but we still handle it for completeness.
    if (!result.success) {
      setFormError(result.error ?? "Something went wrong. Please try again.");
      if (result.fieldErrors) {
        for (const [field, messages] of Object.entries(result.fieldErrors)) {
          if (messages?.[0]) {
            setError(field as keyof RegisterInput, { message: messages[0] });
          }
        }
      }
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <Input
          label="First Name"
          placeholder="Alex"
          error={errors.firstName?.message}
          {...register("firstName")}
        />
        <Input
          label="Last Name"
          placeholder="Chen"
          error={errors.lastName?.message}
          {...register("lastName")}
        />
      </div>
      <Input
        label="Email Address"
        type="email"
        placeholder="name@example.com"
        error={errors.email?.message}
        {...register("email")}
      />
      <Input
        label="Phone Number (optional)"
        type="tel"
        placeholder="+44 7700 900000"
        error={errors.phone?.message}
        {...register("phone")}
      />
      <Input
        label="Password"
        type="password"
        placeholder="••••••••"
        error={errors.password?.message}
        {...register("password")}
      />
      <Input
        label="Confirm Password"
        type="password"
        placeholder="••••••••"
        error={errors.confirmPassword?.message}
        {...register("confirmPassword")}
      />

      {formError && (
        <p role="alert" className="text-danger text-sm font-medium">
          {formError}
        </p>
      )}

      <p className="text-muted px-1 text-[10px] leading-relaxed">
        By creating an account, you agree to our{" "}
        <a href="#" className="underline">
          Terms of Service
        </a>{" "}
        and{" "}
        <a href="#" className="underline">
          Privacy Policy
        </a>
        .
      </p>

      <Button type="submit" className="mt-4 w-full" isLoading={isSubmitting}>
        Sign Up
      </Button>

      <p className="text-muted mt-10 text-center text-sm">
        Already have an account?{" "}
        <Link href="/sign-in" className="border-ink text-ink border-b font-bold">
          Log in
        </Link>
      </p>
    </form>
  );
}