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 ( - <> - {__("Sign up")} - Probo - -
-
-

{__("Sign up")}

-

- {__("Enter your information to create an account")} -

-
- -
- ) => - setFullName(e.target.value) - } - required - /> - - ) => - setEmail(e.target.value) - } - required - /> - - ) => - setPassword(e.target.value) - } - required - /> - - - - -
-

- {__("Already have an account?")}{" "} - - {__("Log in here")} - -

-
+
+
+

{__("Sign up")}

+

+ {__("Enter your information to create an account")} +

- + +
+ + + + + + + + + +
+

+ {__("Already have an account?")}{" "} + + {__("Log in here")} + +

+
+
); }