diff --git a/apps/console/src/pages/auth/RegisterPage.tsx b/apps/console/src/pages/auth/RegisterPage.tsx index 385dc052b..9bf7163fc 100644 --- a/apps/console/src/pages/auth/RegisterPage.tsx +++ b/apps/console/src/pages/auth/RegisterPage.tsx @@ -1,25 +1,30 @@ -import { useState } from "react"; import { Link, useNavigate } from "react-router"; import { Button, Field, useToast } from "@probo/ui"; import { useTranslate } from "@probo/i18n"; -import { useMutation } from "@tanstack/react-query"; +import { z } from "zod"; +import { useFormWithSchema } from "/hooks/useFormWithSchema"; +import { usePageTitle } from "@probo/hooks"; import { buildEndpoint } from "/providers/RelayProviders"; -interface RegisterData { - email: string; - password: string; - fullName: string; -} +const schema = z.object({ + email: z.string().email(), + password: z.string().min(8), + fullName: z.string().min(2), +}); export default function RegisterPage() { - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [fullName, setFullName] = useState(""); const { __ } = useTranslate(); - const { toast } = useToast(); const navigate = useNavigate(); + const { toast } = useToast(); + const { register, handleSubmit, formState } = useFormWithSchema(schema, { + defaultValues: { + email: "", + password: "", + fullName: "", + }, + }); - const registerUser = async (data: RegisterData) => { + const onSubmit = handleSubmit(async (data) => { const response = await fetch( buildEndpoint("/api/console/v1/auth/register"), { @@ -32,132 +37,82 @@ export default function RegisterPage() { } ); + // Registration failed if (!response.ok) { const errorData = await response.json().catch(() => ({})); - return { - success: false, - error: errorData.message || __("Registration failed"), - }; - } - - return { success: true, data: await response.json() }; - }; - - const registerMutation = useMutation({ - mutationFn: registerUser, - onSuccess: (result) => { - if (result.success) { - toast({ - title: __("Success"), - description: __("Account created successfully"), - variant: "success", - }); - navigate("/", { replace: true }); - } else { - toast({ - title: __("Error"), - description: result.error, - variant: "error", - }); - } - }, - onError: () => { toast({ - title: __("Error"), - description: __("Registration failed"), - variant: "error", - }); - }, - }); - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - - if (!email || !password || !fullName) { - toast({ - title: __("Error"), - description: __("Full name, email, and password are required"), + title: __("Registration failed"), + description: errorData.message || __("Registration failed"), variant: "error", }); return; } - registerMutation.mutate({ - email, - password, - fullName, + toast({ + title: __("Success"), + description: __("Account created successfully"), + variant: "success", }); - }; + navigate("/", { replace: true }); + }); + + usePageTitle(__("Sign up")); return ( - <> -
- {__("Enter your information to create an account")} -
-- {__("Already have an account?")}{" "} - - {__("Log in here")} - -
-+ {__("Enter your information to create an account")} +
+ {__("Already have an account?")}{" "} + + {__("Log in here")} + +
+