📧 Email Login

The EmailLoginPage component provides a clean, functional email/password login screen using:

✅ ZezoEmailLogin from @zezosoft/zezo-ott-react-ui-kit
🔐 API login via zezoClient().auth.login(...)
🔄 React Query for managing mutation state

✅ Example Usage


"use client";
 
import { useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import { EmailLogin as ZezoEmailLogin } from "@zezosoft/zezo-ott-react-ui-kit";
import { zezoClient } from "@/lib/zezoClient";
 
export default function EmailLoginPage() {
  const router = useRouter();
 
  const loginMutation = useMutation({
    mutationFn: (payload: { email: string; password: string }) =>
      zezoClient().auth.login(payload),
    onSuccess: (data) => {
      if (data?.data?.id) {
        router.push("/");
      }
    },
  });
 
  const handleSubmit = ({ email = "", password = "" }) => {
    if (!email.trim() || !password.trim()) return;
    loginMutation.mutate({ email: email.trim(), password: password.trim() });
  };
 
  return (
    <ZezoEmailLogin
      onSubmit={handleSubmit}
      isLoading={loginMutation.isPending}
      goBack={() => router.back()}
    />
  );
}

Prop	Type	Required	Description
`onSubmit`	`(form: { email: string; password: string }) => void`	✅ Yes	Called when the user submits the login form
`isLoading`	`boolean`	❌ No	Displays a loading spinner on the submit button
`goBack`	`() => void`	❌ No	Optional function to navigate back (e.g., `router.back()`)
`error`	`string`	❌ No	Optional error message to show inside the form

🖼️ UI Preview

Email Login Preview