feat: add signup page
This commit is contained in:
arraysid
@@ -0,0 +1,15 @@
|
|||||||
|
'use server';
|
||||||
|
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { fetchPostSignin } from '../_http/fetch-post-signup';
|
||||||
|
import { signupValidationSchema } from '../_validation/signup-validation';
|
||||||
|
|
||||||
|
export async function SignupAction(
|
||||||
|
request: z.infer<typeof signupValidationSchema>
|
||||||
|
) {
|
||||||
|
const validRequest = signupValidationSchema.parse(request);
|
||||||
|
|
||||||
|
const data = await fetchPostSignin({ ...validRequest });
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
@@ -0,0 +1,255 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
Input,
|
||||||
|
} from '@components';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { LuLoader } from 'react-icons/lu';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import { SignupAction } from '../_actions/signup-action';
|
||||||
|
import {
|
||||||
|
signupValidationSchema,
|
||||||
|
stepOneSignupValidationSchema,
|
||||||
|
stepTwoSignupValidationSchema,
|
||||||
|
} from '../_validation/signup-validation';
|
||||||
|
|
||||||
|
export function SignupForm() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [step, setStep] = useState(1);
|
||||||
|
const [stepOneData, setStepOneData] = useState<z.infer<
|
||||||
|
typeof stepOneSignupValidationSchema
|
||||||
|
> | null>(null);
|
||||||
|
|
||||||
|
const { mutate, isPending, error } = useMutation({
|
||||||
|
mutationFn: async (data: z.infer<typeof signupValidationSchema>) => {
|
||||||
|
const result = await SignupAction(data);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...result,
|
||||||
|
email: data.email,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onSuccess: ({ email }) => {
|
||||||
|
router.push(`/verification?ref=${email}`);
|
||||||
|
},
|
||||||
|
onError: () => {
|
||||||
|
secondForm.reset();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const firstForm = useForm<z.infer<typeof stepOneSignupValidationSchema>>({
|
||||||
|
resolver: zodResolver(stepOneSignupValidationSchema),
|
||||||
|
defaultValues: {
|
||||||
|
email: '',
|
||||||
|
fullname: '',
|
||||||
|
password: '',
|
||||||
|
confirm_password: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const secondForm = useForm<z.infer<typeof stepTwoSignupValidationSchema>>({
|
||||||
|
resolver: zodResolver(stepTwoSignupValidationSchema),
|
||||||
|
defaultValues: {
|
||||||
|
phone_number: '',
|
||||||
|
referral_code: '',
|
||||||
|
referred_by: '',
|
||||||
|
student_type: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFirstSubmit = (
|
||||||
|
values: z.infer<typeof stepOneSignupValidationSchema>
|
||||||
|
) => {
|
||||||
|
setStepOneData(values);
|
||||||
|
setStep(2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSecondSubmit = (
|
||||||
|
values: z.infer<typeof stepTwoSignupValidationSchema>
|
||||||
|
) => {
|
||||||
|
if (stepOneData) {
|
||||||
|
mutate({ ...stepOneData, ...values });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{step === 1 && (
|
||||||
|
<Form {...firstForm}>
|
||||||
|
<form
|
||||||
|
onSubmit={firstForm.handleSubmit(handleFirstSubmit)}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={firstForm.control}
|
||||||
|
name="fullname"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Full Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Nama Lengkap" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={firstForm.control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="emailmu@mail.com" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={firstForm.control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input type="password" placeholder="••••••••" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={firstForm.control}
|
||||||
|
name="confirm_password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Confirm Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input type="password" placeholder="••••••••" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-[#5fbaef] hover:bg-[#22a5f1]"
|
||||||
|
>
|
||||||
|
Selanjutnya
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{step === 2 && (
|
||||||
|
<Form {...secondForm}>
|
||||||
|
<form
|
||||||
|
onSubmit={secondForm.handleSubmit(handleSecondSubmit)}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
{error && (
|
||||||
|
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm">
|
||||||
|
{(error as Error).message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={secondForm.control}
|
||||||
|
name="phone_number"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Nomor Telepon</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="081234567890" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex gap-x-4">
|
||||||
|
<FormField
|
||||||
|
control={secondForm.control}
|
||||||
|
name="referral_code"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Kode Referral</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="ABCD" maxLength={4} {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={secondForm.control}
|
||||||
|
name="referred_by"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Referrer</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Referral ID" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={secondForm.control}
|
||||||
|
name="student_type"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Status</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="e.g., Undergraduate" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => setStep(1)}
|
||||||
|
>
|
||||||
|
Kembali
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={isPending}
|
||||||
|
className="flex items-center gap-2 hover:bg-[#5fbaef] bg-[#22a5f1]"
|
||||||
|
>
|
||||||
|
{isPending ? (
|
||||||
|
<LuLoader className="h-5 w-5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
'Daftar'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { fetcher } from '@/lib/fetcher';
|
||||||
|
import { SignupValidationSchema } from '../_validation/signup-validation';
|
||||||
|
|
||||||
|
export async function fetchPostSignin({
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
fullname,
|
||||||
|
phone_number,
|
||||||
|
student_type,
|
||||||
|
referral_code,
|
||||||
|
referred_by,
|
||||||
|
}: SignupValidationSchema) {
|
||||||
|
const { data, error, response } = await fetcher.POST('/v1/auth/register', {
|
||||||
|
body: {
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
fullname,
|
||||||
|
phone_number,
|
||||||
|
student_type,
|
||||||
|
referral_code,
|
||||||
|
referred_by,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw new Error(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Someting went wrong, please try again later');
|
||||||
|
}
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
export const stepOneSignupValidationSchema = z
|
||||||
|
.object({
|
||||||
|
email: z
|
||||||
|
.string({
|
||||||
|
required_error: 'Email tidak boleh kosong',
|
||||||
|
invalid_type_error: 'Email harus berupa string',
|
||||||
|
})
|
||||||
|
.min(1, 'Email tidak boleh kosong')
|
||||||
|
.email('Email harus valid'),
|
||||||
|
fullname: z
|
||||||
|
.string({
|
||||||
|
required_error: 'Nama tidak boleh kosong',
|
||||||
|
invalid_type_error: 'Nama harus berupa string',
|
||||||
|
})
|
||||||
|
.min(1, 'Nama tidak boleh kosong')
|
||||||
|
.max(50, 'Nama tidak boleh lebih dari 50 karakter'),
|
||||||
|
password: z
|
||||||
|
.string({
|
||||||
|
required_error: 'Password tidak boleh kosong',
|
||||||
|
invalid_type_error: 'Password harus berupa string',
|
||||||
|
})
|
||||||
|
.min(1, 'Password tidak boleh kosong')
|
||||||
|
.min(8, 'Password harus lebih dari 8 karakter')
|
||||||
|
.max(50, 'Password tidak boleh lebih dari 50 karakter')
|
||||||
|
.regex(
|
||||||
|
/(?=.*[A-Z])/,
|
||||||
|
'Password harus mengandung setidaknya satu huruf kapital'
|
||||||
|
)
|
||||||
|
.regex(
|
||||||
|
/(?=.*[a-z])/,
|
||||||
|
'Password harus mengandung setidaknya satu huruf kecil'
|
||||||
|
)
|
||||||
|
.regex(/(?=.*\d)/, 'Password harus mengandung setidaknya satu angka')
|
||||||
|
.regex(
|
||||||
|
/(?=.*[!@#$%^&*()_\-+={}[\]|\\:;"'<>,.?/~`])/,
|
||||||
|
'Password harus mengandung setidaknya satu karakter spesial'
|
||||||
|
),
|
||||||
|
confirm_password: z
|
||||||
|
.string({
|
||||||
|
required_error: 'Konfirmasi password tidak boleh kosong',
|
||||||
|
})
|
||||||
|
.min(1, 'Konfirmasi password tidak boleh kosong')
|
||||||
|
.max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
|
||||||
|
})
|
||||||
|
.refine((data) => data.password === data.confirm_password, {
|
||||||
|
message: 'Password dan Konfirmasi Password harus sama',
|
||||||
|
path: ['confirm_password'],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const stepTwoSignupValidationSchema = z.object({
|
||||||
|
phone_number: z
|
||||||
|
.string({
|
||||||
|
required_error: 'Nomor telepon tidak boleh kosong',
|
||||||
|
invalid_type_error: 'Nomor telepon harus berupa string',
|
||||||
|
})
|
||||||
|
.min(10, 'Nomor telepon tidak boleh kurang dari 10 karakter')
|
||||||
|
.max(15, 'Nomor telepon tidak boleh lebih dari 15 karakter')
|
||||||
|
.regex(/^\d+$/, 'Nomor telepon hanya boleh berisi angka'),
|
||||||
|
referral_code: z
|
||||||
|
.string()
|
||||||
|
.max(4, 'Kode referral tidak boleh lebih dari 4 karakter')
|
||||||
|
.optional(),
|
||||||
|
referred_by: z
|
||||||
|
.string()
|
||||||
|
.max(50, 'Kode referral tidak boleh lebih dari 50 karakter')
|
||||||
|
.optional(),
|
||||||
|
student_type: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const signupValidationSchema = stepOneSignupValidationSchema.and(
|
||||||
|
stepTwoSignupValidationSchema
|
||||||
|
);
|
||||||
|
export type SignupValidationSchema = z.infer<typeof signupValidationSchema>;
|
||||||
@@ -1,9 +1,23 @@
|
|||||||
|
import { LogoSimple } from '@/app/_components/logo';
|
||||||
import { Metadata } from 'next';
|
import { Metadata } from 'next';
|
||||||
|
import { SignupForm } from './_components/signup-form';
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'IMPHNEN - Signin',
|
title: 'IMPHNEN - Signup',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return <></>;
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<LogoSimple />
|
||||||
|
|
||||||
|
<p className="text-muted-foreground text-center text-sm sm:text-base">
|
||||||
|
Buat akunmu sekarang
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SignupForm />
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user