schemas/signupSchema.js

import * as yup from "yup";

export const signupSchema = yup.object({
  name: yup
    .string()
    .required("Name is required"),

  email: yup
    .string()
    .email("Invalid email address")
    .required("Email is required"),

  phone: yup
    .string()
    .matches(/^[0-9]{10}$/, "Phone number must be 10 digits")
    .required("Phone number is required"),

  password: yup
    .string()
    .min(6, "Password must be at least 6 characters")
    .required("Password is required"),
});

Signup.jsx

import { useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

import { signupSchema } from "../../../schemas/signupSchema";
import { signupUser } from "../../../services/authService";

function Signup() {
  const [successMessage, setSuccessMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: yupResolver(signupSchema),
    defaultValues: {
      name: "",
      email: "",
      phone: "",
      password: "",
    },
  });

  const onSubmit = async (data) => {
    setSuccessMessage("");
    setErrorMessage("");

    try {
      const response = await signupUser(data);

      setSuccessMessage(
        response.message || "Signup successful!"
      );

      reset();
    } catch (error) {
      setErrorMessage(
        error.message || "Signup failed. Please try again."
      );
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <h2>User Signup</h2>

        <div>
          <input
            type="text"
            placeholder="Name"
            {...register("name")}
          />
          <p>{errors.name?.message}</p>
        </div>

        <div>
          <input
            type="email"
            placeholder="Email"
            {...register("email")}
          />
          <p>{errors.email?.message}</p>
        </div>

        <div>
          <input
            type="text"
            placeholder="Phone"
            {...register("phone")}
          />
          <p>{errors.phone?.message}</p>
        </div>

        <div>
          <input
            type="password"
            placeholder="Password"
            {...register("password")}
          />
          <p>{errors.password?.message}</p>
        </div>

        <button
          type="submit"
          disabled={isSubmitting}
        >
          {isSubmitting ? "Signing Up..." : "Sign Up"}
        </button>
      </form>

      {successMessage && (
        <p style={{ color: "green" }}>
          {successMessage}
        </p>
      )}

      {errorMessage && (
        <p style={{ color: "red" }}>
          {errorMessage}
        </p>
      )}
    </>
  );
}

export default Signup;