From feffc8f826fe4fbe759f034b71475dc93f8f294a Mon Sep 17 00:00:00 2001 From: abiyasa05 Date: Wed, 4 Sep 2024 09:45:43 +0700 Subject: [PATCH] create: index.lazy.tsx for register --- .../src/routes/register/index.lazy.tsx | 324 ++++++++++++++++++ 1 file changed, 324 insertions(+) create mode 100644 apps/frontend/src/routes/register/index.lazy.tsx diff --git a/apps/frontend/src/routes/register/index.lazy.tsx b/apps/frontend/src/routes/register/index.lazy.tsx new file mode 100644 index 0000000..d10cb3d --- /dev/null +++ b/apps/frontend/src/routes/register/index.lazy.tsx @@ -0,0 +1,324 @@ +import { createLazyFileRoute, useNavigate } from "@tanstack/react-router"; +import { useState } from "react"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { z } from "zod"; +import { Input } from '@/shadcn/components/ui/input.tsx'; +import { Button } from '@/shadcn/components/ui/button.tsx'; +import { Alert } from '@/shadcn/components/ui/alert.tsx'; +import { Checkbox } from "@/shadcn/components/ui/checkbox"; +import { Form, FormField, FormControl, FormLabel, FormMessage, FormItem } from '@/shadcn/components/ui/form.tsx'; +import { TbArrowNarrowRight } from 'react-icons/tb'; +import client from "../../honoClient"; + +// Define the schema for validation +const formSchema = z.object({ + name: z.string().min(1, "This field is required"), + username: z.string().min(1, "This field is required"), + email: z.string().email("Invalid email address").min(1, "This field is required"), + password: z.string().min(6, "Password must be at least 6 characters long"), + companyName: z.string().min(1, "This field is required"), + position: z.string().min(1, "This field is required"), + workExperience: z.string().min(1, "This field is required"), + address: z.string().min(1, "This field is required"), + phoneNumber: z.string().min(1, "This field is required"), + terms: z.boolean().refine((val) => val, "You must agree to the terms and services"), +}); + +// Define the form type +type FormSchema = z.infer; + +export const Route = createLazyFileRoute("/register/")({ + component: RegisterPage, +}); + +export default function RegisterPage() { + const [errorFields, setErrorFields] = useState> | null>(null); + const [errorMessage, setErrorMessage] = useState(null); + + const navigate = useNavigate(); + + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues: { + name: "", + username: "", + email: "", + password: "", + companyName: "", + position: "", + workExperience: "", + address: "", + phoneNumber: "", + terms: false, + }, + }); + + const handleSubmit = async (values: FormSchema) => { + try { + const res = await client.register.$post({ + json: values, + }); + + if (res.ok) { + // Redirect to login page on success + navigate({ to: "/login", replace: true }); + } else { + // Handle non-200 responses from backend + const errorData = await res.json(); + throw new Error(errorData.message || "An unknown error occurred"); + } + } catch (error: any) { + const message = error.message; + + if (message.includes("Email or username has been registered")) { + setErrorFields({ + email: "Email is already registered", + username: "Username is already registered", + }); + } else if (message.includes("Phone number has been registered")) { + setErrorFields({ + phoneNumber: "Phone number is already registered", + }); + } else { + setErrorMessage(message); + } + } + }; + + return ( +
+ {/* Bagian Gambar */} +
+
+
+
+
+
+
+
+
+
+ + {/* Title */} +
+ Amati +
+ + {/* Main content */} +
+ + {/* Form column */} +
+ + {/* Title and Already have an account */} +
+

Register an Account

+

+ Already have an account?{' '} + + Sign In now + +

+
+ +
+ + {errorMessage && ( + +

{errorMessage}

+ + )} + + {Object.keys(errorFields || {}).length > 0 && ( + + {Object.values(errorFields || {}).map((msg, idx) => ( +

{msg}

+ ))} + + )} + + {/* Form fields */} +
+ ( + + Full Name + + + + + + )} /> + + ( + + Username + + + + + + )} /> + + ( + + Email + + + + + + )} /> + + ( + + Password + + + + + + )} /> + + ( + + Company Name + + + + + + )} /> + + ( + + Position + + + + + + )} /> + + ( + + Work Experience + + + + + + )} /> + + ( + + Address + + + + + + )} /> + + ( + + Phone Number + + + + + + )} /> + + ( + + +
+ form.setValue("terms", !!checked)} + className={`border ${form.formState.errors.terms ? "border-red-500" : "border-[#00000099]"}`} + onChange={form.register("terms").onChange} + onBlur={form.register("terms").onBlur} + name="terms" + ref={form.register("terms").ref} + id="terms" + /> + +
+ + {form.formState.errors.terms && ( + {form.formState.errors.terms.message} + )} + + )} + /> +
+ +
+
+ +
+
+
+ +
+
+
+ ); +} \ No newline at end of file