📝 `Signup`

The Signup component renders a user registration form using the ZezoSignup UI component from @zezosoft/zezo-ott-react-ui-kit. It integrates with your API using zezoClient().auth.signUp() and handles user feedback and redirection.

✨ Features

✅ Built with ZezoSignup from the Zezo UI Kit
🔄 Uses React Query for mutation
🧠 Validates name, email, and password fields
🚀 Submits to zezoClient().auth.signUp()
🎨 Customizable with logoUrl and backgroundImageUrl
🔙 Handles back navigation with router.back()

🔌 Props

Prop	Type	Description
`onSubmit`	`(data: { name: string; email: string; password: string }) => void`	Called when the form is submitted with valid inputs.
`isLoading`	`boolean`	Shows a loading spinner while signup is in progress.
`goBack`	`() => void`	Function to handle back navigation, typically `router.back()`.
`logoUrl`	`string`	Optional logo shown at the top of the form.
`backgroundImageUrl`	`string`	Optional full-width background image.

📤 Behavior

✅ Validation

Name: Required
Email: Must be in a valid format (e.g. user@example.com)
Password: Minimum 8 characters

Calls:


zezoClient().auth.signUp({ name, email, password });

📦 Usage


"use client";
import React from "react";
import { useMutation } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { SignUp as ZezoSignup } from "@zezosoft/zezo-ott-react-ui-kit";
import { zezoClient } from "@/lib/zezoClient";
 
const Signup = () => {
  const router = useRouter();
 
  const mutation = useMutation({
    mutationKey: ["signup"],
    mutationFn: async ({
      name,
      email,
      password,
    }: {
      name: string;
      email: string;
      password: string;
    }) => {
      return zezoClient().auth.signUp({ name, email, password });
    },
    onSuccess: (data) => {
      if (data?.type === "success") {
        router.push("/");
      }
    },
    onError: () => {
      // Optional: Handle error globally
    },
  });
 
  const onSubmit = ({
    name,
    email,
    password,
  }: {
    name: string;
    email: string;
    password: string;
  }) => {
    if (!name || !email || !password) return;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) return;
    if (password.length < 8) return;
 
    mutation.mutate({ name, email, password });
  };
 
  return (
    <ZezoSignup
      onSubmit={onSubmit}
      isLoading={mutation.isPending}
      goBack={() => router.back()}
      logoUrl=""
      backgroundImageUrl=""
    />
  );
};
 
export default Signup;

🖼️ UI Preview

Here’s how the Signup component looks in action:

Signup UI

📝 Signup