324 lines
13 KiB
TypeScript
324 lines
13 KiB
TypeScript
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<typeof formSchema>;
|
|
|
|
export const Route = createLazyFileRoute("/register/")({
|
|
component: RegisterPage,
|
|
});
|
|
|
|
export default function RegisterPage() {
|
|
const [errorFields, setErrorFields] = useState<Partial<Record<keyof FormSchema, string>> | null>(null);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const form = useForm<FormSchema>({
|
|
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 (
|
|
<div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
|
|
{/* Bagian Gambar */}
|
|
<div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-start absolute -top-56 lg:top-0 left-0 lg:-translate-x-[400px] overflow-hidden lg:overflow-visible">
|
|
<div className="flex absolute border border-slate-300 rounded-2xl w-[480px] h-[455px] lg:w-[800px] lg:h-[900px] lg:top-11 items-center justify-center -rotate-[19deg] lg:-rotate-[12deg]">
|
|
<div className="flex absolute border border-slate-400 rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
|
|
<div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
|
|
<div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-3/5 h-3/5">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div className="absolute top-6 left-6 text-base font-bold z-20">
|
|
Amati
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 flex flex-col md:flex-row items-center justify-center pt-[151.2px] lg:pt-[82.4px] lg:pl-[224px] md:justify-center lg:justify-end space-x-12 px-6 md:px-0 z-20">
|
|
|
|
{/* Form column */}
|
|
<div className="w-[306px] max-w-lg md:w-1/2 mx-auto md:mx-20">
|
|
|
|
{/* Title and Already have an account */}
|
|
<div className="mb-12 h-[75px]">
|
|
<h1 className="h-[51px] text-[33px] lg:text-[42px] font-extrabold leading-[56px] tracking-[-0.8px] text-left">Register an Account</h1>
|
|
<p className="w-[229.5px] text-sm md:text-sm leading-[15.944px] tracking-[-0.8px] text-[#00000099]">
|
|
Already have an account?{' '}
|
|
<a href="/login" className="text-blue-500 font-semibold hover:text-blue-800">
|
|
Sign In now
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
|
|
{errorMessage && (
|
|
<Alert variant="destructive">
|
|
<p>{errorMessage}</p>
|
|
</Alert>
|
|
)}
|
|
|
|
{Object.keys(errorFields || {}).length > 0 && (
|
|
<Alert variant="destructive">
|
|
{Object.values(errorFields || {}).map((msg, idx) => (
|
|
<p key={idx}>{msg}</p>
|
|
))}
|
|
</Alert>
|
|
)}
|
|
|
|
{/* Form fields */}
|
|
<div className="space-y-4">
|
|
<FormField name="name" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Full Name</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Insert your full name according to Citizenship Card"
|
|
{...field}
|
|
className={`${form.formState.errors.name ? "border-red-500" : ""
|
|
} text-sm md:text-base`}
|
|
style={{ width: "100%" }}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField name="username" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Username</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Username"
|
|
{...field}
|
|
className={form.formState.errors.username ? "border-red-500" : ""}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField name="email" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Email</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="email"
|
|
placeholder="eg; user@mail.com"
|
|
{...field}
|
|
className={form.formState.errors.email ? "border-red-500" : ""}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField name="password" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Password</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="password"
|
|
placeholder="******"
|
|
{...field}
|
|
className={form.formState.errors.password ? "border-red-500" : ""}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField name="companyName" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Company Name</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Company Name"
|
|
{...field}
|
|
className={form.formState.errors.companyName ? "border-red-500" : ""}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField name="position" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Position</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Position"
|
|
{...field}
|
|
className={form.formState.errors.position ? "border-red-500" : ""}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField name="workExperience" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Work Experience</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Work Experience"
|
|
{...field}
|
|
className={form.formState.errors.workExperience ? "border-red-500" : ""}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField name="address" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Address</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Address"
|
|
{...field}
|
|
className={form.formState.errors.address ? "border-red-500" : ""}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField name="phoneNumber" render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="font-bold text-sm">Phone Number</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Phone Number"
|
|
{...field}
|
|
className={form.formState.errors.phoneNumber ? "border-red-500" : ""}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)} />
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="terms"
|
|
render={() => (
|
|
<FormItem>
|
|
<FormControl>
|
|
<div className="flex items-center space-x-0.5 pb-10">
|
|
<Checkbox
|
|
checked={!!form.watch("terms")}
|
|
onCheckedChange={(checked) => 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"
|
|
/>
|
|
<label
|
|
htmlFor="terms"
|
|
className="text-sm font-normal leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[#00000099] p-2 rounded"
|
|
>
|
|
I am agree to Terms and Services
|
|
</label>
|
|
</div>
|
|
</FormControl>
|
|
{form.formState.errors.terms && (
|
|
<FormMessage>{form.formState.errors.terms.message}</FormMessage>
|
|
)}
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-4 pb-6">
|
|
<div className="flex justify-end">
|
|
<Button
|
|
type="submit"
|
|
style={{ backgroundColor: "#2555FF", color: "white" }}
|
|
className="w-full flex items-center justify-between text-base font-medium md:w-auto"
|
|
>
|
|
<span className="flex-grow text-left">Create Account</span>
|
|
<TbArrowNarrowRight className="ml-12 h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |