Forms

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"
import { Label } from "./components/ui/label"

// ① Rules: write all the validation rules in one place
const schema = z.object({
  email: z.email("Enter a valid email address"),
  password: z.string().min(8, "Use at least 8 characters").regex(/[0-9]/, "Include at least one number"),
})

// Build the type of the form values from the rules
type FormValues = z.infer<typeof schema>

export default function App() {
  // Set up the form (the rules are passed in through zodResolver)
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({ resolver: zodResolver(schema) })

  // Called only when every rule passes
  const onSubmit = (values: FormValues) => {
    alert("Logged in: " + values.email)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4 p-5">
      <div className="flex flex-col gap-2">
        <Label htmlFor="email">Email</Label>
        {/* ② Connect: hook the input up to the form */}
        <Input id="email" {...register("email")} />
        {/* ③ Report: show the error when a rule fails */}
        {errors.email && (
          <p className="text-sm text-destructive">{errors.email.message}</p>
        )}
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" {...register("password")} />
        {errors.password && (
          <p className="text-sm text-destructive">{errors.password.message}</p>
        )}
      </div>

      <Button type="submit">Log in</Button>
    </form>
  )
}