diff --git a/apps/landing/.env.example b/apps/landing/.env.example index 4b73e25..2e688ee 100644 --- a/apps/landing/.env.example +++ b/apps/landing/.env.example @@ -1 +1,2 @@ -NEXT_PUBLIC_API_URL= \ No newline at end of file +NEXT_PUBLIC_API_URL= +NEXT_PUBLIC_TURNSTILE_SITEKEY=1x00000000000000000000AA \ No newline at end of file diff --git a/apps/landing/src/app/(auth)/signup/_actions/signup-action.ts b/apps/landing/src/app/(auth)/signup/_actions/signup-action.ts index a43aa4a..35750fd 100644 --- a/apps/landing/src/app/(auth)/signup/_actions/signup-action.ts +++ b/apps/landing/src/app/(auth)/signup/_actions/signup-action.ts @@ -2,6 +2,7 @@ import { z } from 'zod'; import { fetchPostSignin } from '../_http/fetch-post-signup'; +import { fetchPostverifyTurnstile } from '../_http/fetch-post-verify-turnstile'; import { signupValidationSchema } from '../_validation/signup-validation'; export async function SignupAction( @@ -9,7 +10,13 @@ export async function SignupAction( ) { const validRequest = signupValidationSchema.parse(request); - const data = await fetchPostSignin({ ...validRequest }); + const isCapchaValidationValid = await fetchPostverifyTurnstile( + validRequest.token + ); + + if (!isCapchaValidationValid) throw new Error('Failed to verify captcha'); + + const data = await fetchPostSignin(validRequest); return data; } diff --git a/apps/landing/src/app/(auth)/signup/_components/signup-form.tsx b/apps/landing/src/app/(auth)/signup/_components/signup-form.tsx index dcad592..40fe83f 100644 --- a/apps/landing/src/app/(auth)/signup/_components/signup-form.tsx +++ b/apps/landing/src/app/(auth)/signup/_components/signup-form.tsx @@ -11,9 +11,10 @@ import { Input, } from '@components'; import { zodResolver } from '@hookform/resolvers/zod'; +import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'; import { useMutation } from '@tanstack/react-query'; import { useRouter } from 'next/navigation'; -import { useState } from 'react'; +import { useRef, useState } from 'react'; import { useForm } from 'react-hook-form'; import { LuLoader } from 'react-icons/lu'; import { z } from 'zod'; @@ -26,11 +27,31 @@ import { export function SignupForm() { const router = useRouter(); + const ref = useRef(null); + const [step, setStep] = useState(1); const [stepOneData, setStepOneData] = useState | null>(null); + const firstForm = useForm>({ + resolver: zodResolver(stepOneSignupValidationSchema), + defaultValues: { + email: '', + phone_number: '', + fullname: '', + password: '', + confirm_password: '', + }, + }); + + const secondForm = useForm>({ + resolver: zodResolver(stepTwoSignupValidationSchema), + defaultValues: { + token: '', + }, + }); + const { mutate, isPending, error } = useMutation({ mutationFn: async (data: z.infer) => { const result = await SignupAction(data); @@ -44,27 +65,8 @@ export function SignupForm() { router.push(`/verification?ref=${email}`); }, onError: () => { - secondForm.reset(); - }, - }); - - const firstForm = useForm>({ - resolver: zodResolver(stepOneSignupValidationSchema), - defaultValues: { - email: '', - fullname: '', - password: '', - confirm_password: '', - }, - }); - - const secondForm = useForm>({ - resolver: zodResolver(stepTwoSignupValidationSchema), - defaultValues: { - phone_number: '', - referral_code: '', - referred_by: '', - student_type: '', + ref.current?.reset(); + secondForm.resetField('token'); }, }); @@ -119,6 +121,20 @@ export function SignupForm() { )} /> + ( + + Nomor Telepon + + + + + + )} + /> + )} - ( - - Nomor Telepon - - - - - - )} - /> - -
- ( - - Kode Referral - - - - - - )} - /> - - ( - - Referrer - - - - - - )} - /> -
- - ( - - Status - - - - - - )} + secondForm.setValue('token', token)} + options={{ + theme: 'light', + size: 'flexible', + language: 'id', + }} />
@@ -237,8 +206,7 @@ export function SignupForm() {