feat: landing auth integration & landing ui improvements (#33)
* feat: setup openapi libs for landing * feat: seperate landing layouts * feat: movee landing providers * feat: add auth layout * feat: implement cookie management for access and refresh tokens * feat: replace Inter font with Bai Jamjuree in layout and add font utility * feat: add signin * feat: add Poppins font to the font utility * feat: expand theme colors in index.css for improved styling options * feat: update dependencies and enhance button and form components with new variants and context * feat: move old components to __old__ dir * feat: add react query support * feat: hide the footer * fix: header style * feat: replace Image component with LogoSimple in Header and update Logo component to accept props * fix: update label for tutorial stat in hero-stats.json * feat: implement EventsPage component with event listing and details * feat: add signup button and page * feat: add HERO_CONTENT data and integrate into Hero component * fix: update navigations import to uppercase and add missing Testimoni entry * feat: implement testimonials display and add submission page * fix: correct link path for testimonial submission * feat: add communites component and integrate social links from JSON data * fix: adjust grid gap in Communities component for better layout * fix: update font imports in layout components for consistency * fix: replace text logo with LogoSimple component in Footer and restore Footer in Layout * feat: add TestimonialSection component and update testimonials data * fix: update section ID from 'komunitas' to 'community' for consistency * feat: add CTASection component with interactive elements and background pattern * fix: update join URL in hero content for consistency * fix: update text in CTASection for improved emphasis and consistency * feat: add CommunitySection component and integrate it into the main page * feat: update Footer component to use dynamic navigation and social links * feat: implement HeroSection component with dynamic content and animations * refactor: replace hardcoded testimonials with dynamic data from JSON * feat: add signup page * feat: integrate Turnstile captcha verification in signup process * feat: implement verification page * feat: add signin link to the signup page * feat: add "Forgot Password?" link to the signin form * refactor: clean up unused ThemeProvider code and CSS variables * feat: add base styles for borders and background to improve UI consistency * feat: implement forgot password functionality with validation and UI components * fix: update password validation rules for clarity and consistency * feat: enable rich colors for Toaster component in layout * feat: implement reset password functionality with validation and UI components * feat: implement Turnstile captcha verification for forgot password and signup actions * refactor: remove console log and enhance error handling in signin and resend OTP actions * feat: add navigation entries for Roadmap and Artikel sections * feat: create initial Page component for articles section * feat: update footer component with additional social media links and icons * feat: remove all unused components in landing * chore: add @radix-ui/react-label deps * feat: wrap VerificationTabs in Suspense * feat: update .env.example to include TURNSTILE_SECRET_KEY and correct NEXT_PUBLIC_TURNSTILE_SITEKEY
This commit is contained in:
Rasyid
@@ -0,0 +1,86 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
SiCplusplus,
|
||||
SiCss3,
|
||||
SiGo,
|
||||
SiHtml5,
|
||||
SiJavascript,
|
||||
SiPhp,
|
||||
SiPython,
|
||||
SiRuby,
|
||||
SiRust,
|
||||
SiSwift,
|
||||
SiTypescript,
|
||||
} from 'react-icons/si';
|
||||
|
||||
export function AnimatedBackground() {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
const iconColorMap = useMemo(
|
||||
() => [
|
||||
{ Icon: SiJavascript, color: '#F7DF1E' },
|
||||
{ Icon: SiTypescript, color: '#3178C6' },
|
||||
{ Icon: SiPython, color: '#3776AB' },
|
||||
{ Icon: SiCplusplus, color: '#00599C' },
|
||||
{ Icon: SiRuby, color: '#CC342D' },
|
||||
{ Icon: SiSwift, color: '#F05138' },
|
||||
{ Icon: SiRust, color: '#000000' },
|
||||
{ Icon: SiGo, color: '#00ADD8' },
|
||||
{ Icon: SiPhp, color: '#777BB4' },
|
||||
{ Icon: SiHtml5, color: '#E34F26' },
|
||||
{ Icon: SiCss3, color: '#1572B6' },
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
const getRandom = (min: number, max: number) =>
|
||||
Math.random() * (max - min) + min;
|
||||
|
||||
const floatingIcons = useMemo(() => {
|
||||
if (!isClient) return [];
|
||||
|
||||
return Array.from({ length: 40 }).map((_, i) => {
|
||||
const { Icon, color } = iconColorMap[i % iconColorMap.length];
|
||||
return (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="pointer-events-none absolute"
|
||||
style={{
|
||||
top: `${getRandom(0, 100)}%`,
|
||||
left: `${getRandom(0, 100)}%`,
|
||||
fontSize: `${getRandom(16, 32)}px`,
|
||||
color: color,
|
||||
opacity: getRandom(0.1, 0.2),
|
||||
rotate: getRandom(-180, 180),
|
||||
}}
|
||||
animate={{
|
||||
y: [0, getRandom(-100, 100), 0],
|
||||
x: [0, getRandom(-50, 50), 0],
|
||||
rotate: getRandom(-180, 180),
|
||||
}}
|
||||
transition={{
|
||||
duration: getRandom(15, 25),
|
||||
repeat: Infinity,
|
||||
repeatType: 'loop',
|
||||
ease: 'easeInOut',
|
||||
}}
|
||||
>
|
||||
<Icon className="h-full w-full" />
|
||||
</motion.div>
|
||||
);
|
||||
});
|
||||
}, [isClient, iconColorMap]);
|
||||
|
||||
if (!isClient) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-0 overflow-hidden">{floatingIcons}</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
export async function fetchPostverifyTurnstile(
|
||||
token: string,
|
||||
remoteIp?: string
|
||||
): Promise<boolean> {
|
||||
const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
|
||||
const params = new URLSearchParams({
|
||||
secret: String(process.env.TURNSTILE_SECRET_KEY),
|
||||
response: token,
|
||||
});
|
||||
if (remoteIp) {
|
||||
params.append('remoteip', remoteIp);
|
||||
}
|
||||
|
||||
const res = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: params.toString(),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
console.error('Turnstile verify HTTP error', res.status);
|
||||
return false;
|
||||
}
|
||||
|
||||
const data = (await res.json()) as TurnstileVerifyResponse;
|
||||
if (!data.success) {
|
||||
console.warn('Turnstile failure', data['error-codes']);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
interface TurnstileVerifyResponse {
|
||||
success: boolean;
|
||||
challenge_ts: string;
|
||||
hostname: string;
|
||||
'error-codes'?: string[];
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
'use server';
|
||||
|
||||
import { fetcher } from '@/lib/fetcher';
|
||||
import { getRemoteIp } from '@/lib/headers';
|
||||
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
|
||||
import {
|
||||
forgotPasswordValidationSchema,
|
||||
ForgotPasswordValidationType,
|
||||
} from '../_validation/forgot-password-validation';
|
||||
|
||||
export async function ForgotPasswordAction(
|
||||
request: ForgotPasswordValidationType
|
||||
) {
|
||||
const validRequest = forgotPasswordValidationSchema.parse(request);
|
||||
const remoteIp = await getRemoteIp();
|
||||
|
||||
const isCapchaValid = await fetchPostverifyTurnstile(
|
||||
validRequest.token,
|
||||
remoteIp
|
||||
);
|
||||
|
||||
if (!isCapchaValid) throw new Error('Failed to verify captcha');
|
||||
|
||||
const { data, error } = await fetcher.POST('/v1/auth/forgot', {
|
||||
body: {
|
||||
email: validRequest.email,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) throw new Error(error.message);
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components';
|
||||
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
|
||||
import { useRef, useState } from 'react';
|
||||
import { LuLoader } from 'react-icons/lu';
|
||||
import { useFormForgotPassword } from '../_hooks/use-form-forgot-password';
|
||||
import { usePostForgotPassowrd } from '../_hooks/use-post-forgot-password';
|
||||
import { ForgotPasswordValidationType } from '../_validation/forgot-password-validation';
|
||||
|
||||
export function ForgotPasswordForm() {
|
||||
const ref = useRef<TurnstileInstance | null>(null);
|
||||
|
||||
const [step, setStep] = useState<number>(1);
|
||||
const [emailValue, setEmailValue] = useState<string>('');
|
||||
|
||||
const form = useFormForgotPassword();
|
||||
const { mutate, isPending, error } = usePostForgotPassowrd(form);
|
||||
|
||||
const handleFirstStep = (values: ForgotPasswordValidationType) => {
|
||||
setEmailValue(values.email);
|
||||
setStep(2);
|
||||
};
|
||||
|
||||
const handleSecondStep = () => {
|
||||
mutate({ email: emailValue, token: form.getValues('token') });
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={
|
||||
step === 1
|
||||
? form.handleSubmit(handleFirstStep)
|
||||
: (e) => {
|
||||
e.preventDefault();
|
||||
handleSecondStep();
|
||||
}
|
||||
}
|
||||
className="w-full 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>
|
||||
)}
|
||||
|
||||
{step === 1 && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="emailmu@mail.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<Turnstile
|
||||
ref={ref}
|
||||
siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
|
||||
onSuccess={(token) => form.setValue('token', token)}
|
||||
options={{ theme: 'light', size: 'flexible', language: 'id' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isPending || (step === 2 && !form.watch('token'))}
|
||||
className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
|
||||
>
|
||||
{isPending ? (
|
||||
<LuLoader className="h-5 w-5 animate-spin" />
|
||||
) : step === 1 ? (
|
||||
'Selanjutnya'
|
||||
) : (
|
||||
'Reset password'
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import {
|
||||
forgotPasswordValidationSchema,
|
||||
type ForgotPasswordValidationType,
|
||||
} from '../_validation/forgot-password-validation';
|
||||
|
||||
export function useFormForgotPassword() {
|
||||
return useForm<ForgotPasswordValidationType>({
|
||||
resolver: zodResolver(forgotPasswordValidationSchema),
|
||||
defaultValues: {
|
||||
email: '',
|
||||
token: '',
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import { ForgotPasswordAction } from '../_actions/forgot-password-action';
|
||||
import { useFormForgotPassword } from './use-form-forgot-password';
|
||||
|
||||
export function usePostForgotPassowrd(
|
||||
form: ReturnType<typeof useFormForgotPassword>
|
||||
) {
|
||||
return useMutation({
|
||||
mutationFn: ForgotPasswordAction,
|
||||
onSuccess: ({ message }) => {
|
||||
form.reset();
|
||||
toast.success(message);
|
||||
},
|
||||
onError: ({ message }) => {
|
||||
form.reset();
|
||||
toast.error(message);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const forgotPasswordValidationSchema = z.object({
|
||||
email: z.string().email({ message: 'Format email tidak valid' }),
|
||||
token: z.string(),
|
||||
});
|
||||
export type ForgotPasswordValidationType = z.infer<
|
||||
typeof forgotPasswordValidationSchema
|
||||
>;
|
||||
@@ -0,0 +1,23 @@
|
||||
import { LogoSimple } from '@/app/_components/logo';
|
||||
import { Metadata } from 'next';
|
||||
import { ForgotPasswordForm } from './_components/forgot-password-form';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'IMPHNEN - Signin',
|
||||
};
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<LogoSimple />
|
||||
|
||||
<p className="text-muted-foreground text-center text-sm sm:text-base">
|
||||
Reset password akunmu
|
||||
</p>
|
||||
|
||||
<ForgotPasswordForm />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { baiJamjureeFont } from '@/lib/fonts';
|
||||
import { Card } from '@components';
|
||||
import { cn } from '@utils';
|
||||
import { ReactNode } from 'react';
|
||||
import { AnimatedBackground } from './_components/animated-background';
|
||||
|
||||
export default function Layout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
baiJamjureeFont.className,
|
||||
'bg-background/20 relative flex min-h-[100dvh] items-center justify-center p-4'
|
||||
)}
|
||||
>
|
||||
<AnimatedBackground />
|
||||
<div className="z-10 w-full">
|
||||
<Card className="bg-background/90 mx-auto w-full max-w-[360px] p-6 shadow-xl backdrop-blur-lg sm:max-w-md sm:p-8">
|
||||
<div className="flex flex-col items-center space-y-6">
|
||||
<div className="w-full space-y-4">{children}</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
'use server';
|
||||
|
||||
import { fetcher } from '@/lib/fetcher';
|
||||
import {
|
||||
resetPasswordValidationSchema,
|
||||
ResetPasswordValidationSchema,
|
||||
} from '../_validation/reset-password-validation';
|
||||
|
||||
export async function resetPasswordAction(
|
||||
request: ResetPasswordValidationSchema
|
||||
) {
|
||||
const validRequest = resetPasswordValidationSchema.parse(request);
|
||||
|
||||
if (validRequest.confirm_password !== validRequest.confirm_password) {
|
||||
throw new Error('Password missmatch');
|
||||
}
|
||||
|
||||
const { data, error } = await fetcher.POST('/v1/auth/new-password', {
|
||||
body: {
|
||||
password: validRequest.password,
|
||||
token: validRequest.token,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) throw new Error(error.message);
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components';
|
||||
import { LuLoaderCircle } from 'react-icons/lu';
|
||||
import { usePostResetPassword } from '../_hooks/use-post-reset-password';
|
||||
import { useResetPasswordForm } from '../_hooks/use-reset-password-form';
|
||||
import { ResetPasswordValidationSchema } from '../_validation/reset-password-validation';
|
||||
|
||||
export function ResetPasswordForm() {
|
||||
const form = useResetPasswordForm();
|
||||
const { mutate, error, isPending } = usePostResetPassword(form);
|
||||
|
||||
const onSubmit = (values: ResetPasswordValidationSchema) => {
|
||||
mutate(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
{error && (
|
||||
<div className="p-2 text-xs bg-red-50 border border-red-200 text-red-800 rounded-sm w-full">
|
||||
{(error as Error).message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-full">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>New Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="••••••••" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirm_password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Confirm New Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="••••••••" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isPending}>
|
||||
{isPending ? (
|
||||
<LuLoaderCircle className="size-5 animate-spin" />
|
||||
) : (
|
||||
'Ubah password'
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
import { resetPasswordAction } from '../_actions/reset-password-actions';
|
||||
import { useResetPasswordForm } from './use-reset-password-form';
|
||||
|
||||
export function usePostResetPassword(
|
||||
form: ReturnType<typeof useResetPasswordForm>
|
||||
) {
|
||||
const router = useRouter();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: resetPasswordAction,
|
||||
onSuccess: ({ message }) => {
|
||||
form.reset();
|
||||
router.replace('/signin');
|
||||
toast.success(message);
|
||||
},
|
||||
onError: ({ message }) => {
|
||||
form.reset();
|
||||
toast.error(message);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import {
|
||||
resetPasswordValidationSchema,
|
||||
ResetPasswordValidationSchema,
|
||||
} from '../_validation/reset-password-validation';
|
||||
|
||||
export function useResetPasswordForm() {
|
||||
const searchParams = useSearchParams();
|
||||
const tokenFromQuery = searchParams.get('token') ?? '';
|
||||
|
||||
return useForm<ResetPasswordValidationSchema>({
|
||||
resolver: zodResolver(resetPasswordValidationSchema),
|
||||
defaultValues: {
|
||||
password: '',
|
||||
confirm_password: '',
|
||||
token: tokenFromQuery,
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const resetPasswordValidationSchema = z
|
||||
.object({
|
||||
password: z
|
||||
.string({
|
||||
required_error: 'Password tidak boleh kosong',
|
||||
invalid_type_error: 'Password harus berupa string',
|
||||
})
|
||||
.min(8, 'Password harus minimal 8 karakter')
|
||||
.max(50, 'Password tidak boleh lebih dari 50 karakter')
|
||||
.regex(
|
||||
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
|
||||
'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
|
||||
),
|
||||
confirm_password: z
|
||||
.string({
|
||||
required_error: 'Konfirmasi password tidak boleh kosong',
|
||||
})
|
||||
.min(8, 'Konfirmasi password harus minimal 8 karakter')
|
||||
.max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
|
||||
token: z.string(),
|
||||
})
|
||||
.refine((data) => data.password === data.confirm_password, {
|
||||
message: 'Password dan Konfirmasi Password harus sama',
|
||||
path: ['confirm_password'],
|
||||
});
|
||||
|
||||
export type ResetPasswordValidationSchema = z.infer<
|
||||
typeof resetPasswordValidationSchema
|
||||
>;
|
||||
@@ -0,0 +1,30 @@
|
||||
import { LogoSimple } from '@/app/_components/logo';
|
||||
import { redirect } from 'next/navigation';
|
||||
import { use } from 'react';
|
||||
import { ResetPasswordForm } from './_components/reset-password-form';
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export default function Page({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ token?: string }>;
|
||||
}) {
|
||||
const { token } = use(searchParams);
|
||||
|
||||
if (!token) redirect('/signin');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<LogoSimple />
|
||||
|
||||
<p className="text-muted-foreground text-center text-sm sm:text-base">
|
||||
Ubah passwordmu
|
||||
</p>
|
||||
|
||||
<ResetPasswordForm />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
'use server';
|
||||
|
||||
import { setAccessToken, setRefreshToken } from '@/lib/cookies';
|
||||
import { fetchPostSignin } from '../_http/fetch-post-signin';
|
||||
import {
|
||||
type SignInValidationType,
|
||||
signInValidationSchema,
|
||||
} from '../_validation/signin-validation';
|
||||
|
||||
export async function SigninAction(request: SignInValidationType) {
|
||||
const validRequest = signInValidationSchema.parse(request);
|
||||
|
||||
const { data } = await fetchPostSignin(validRequest);
|
||||
|
||||
const accessToken = data.token.access_token;
|
||||
const refreshToken = data.token.refresh_token;
|
||||
|
||||
await setAccessToken(accessToken);
|
||||
await setRefreshToken(refreshToken);
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components';
|
||||
import Link from 'next/link';
|
||||
import { LuLoader } from 'react-icons/lu';
|
||||
import { useFormSignin } from '../_hooks/use-form-signin';
|
||||
import { usePostSignin } from '../_hooks/use-post-signin';
|
||||
import { type SignInValidationType } from '../_validation/signin-validation';
|
||||
|
||||
export function SigninForm() {
|
||||
const form = useFormSignin();
|
||||
const { mutate, isPending, error } = usePostSignin(form);
|
||||
|
||||
const onSubmit = (values: SignInValidationType) => {
|
||||
mutate(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} 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={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="emailmu@mail.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="••••••••" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<div className="text-right mt-1">
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="text-sm text-primary-500 font-bold hover:underline"
|
||||
>
|
||||
Lupa Password?
|
||||
</Link>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isPending} className="w-full font-bold">
|
||||
{isPending ? <LuLoader className="h-5 w-5 animate-spin" /> : 'Masuk'}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import {
|
||||
signInValidationSchema,
|
||||
type SignInValidationType,
|
||||
} from '../_validation/signin-validation';
|
||||
|
||||
export function useFormSignin() {
|
||||
return useForm<SignInValidationType>({
|
||||
resolver: zodResolver(signInValidationSchema),
|
||||
defaultValues: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
import { SigninAction } from '../_actions/signin-action';
|
||||
import { useFormSignin } from './use-form-signin';
|
||||
|
||||
export function usePostSignin(form: ReturnType<typeof useFormSignin>) {
|
||||
const router = useRouter();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: SigninAction,
|
||||
|
||||
onSuccess: () => {
|
||||
router.push('/');
|
||||
},
|
||||
onError: (error, variables) => {
|
||||
form.resetField('password');
|
||||
|
||||
if (error.message.includes('not active')) {
|
||||
setTimeout(() => {
|
||||
router.push(`/verification?ref=${variables.email}`);
|
||||
}, 750);
|
||||
}
|
||||
|
||||
toast.error(error.message);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { fetcher } from '@/lib/fetcher';
|
||||
import { SignInValidationType } from '../_validation/signin-validation';
|
||||
|
||||
export async function fetchPostSignin({
|
||||
email,
|
||||
password,
|
||||
}: SignInValidationType) {
|
||||
const { data, error, response } = await fetcher.POST('/v1/auth/login', {
|
||||
body: {
|
||||
email,
|
||||
password,
|
||||
},
|
||||
});
|
||||
|
||||
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,18 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const signInValidationSchema = 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'),
|
||||
password: z
|
||||
.string({
|
||||
required_error: 'Password tidak boleh kosong',
|
||||
invalid_type_error: 'Password harus berupa string',
|
||||
})
|
||||
.min(1, 'Password tidak boleh kosong'),
|
||||
});
|
||||
export type SignInValidationType = z.infer<typeof signInValidationSchema>;
|
||||
@@ -0,0 +1,36 @@
|
||||
import { LogoSimple } from '@/app/_components/logo';
|
||||
import { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { SigninForm } from './_components/signin-form';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'IMPHNEN - Signin',
|
||||
};
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<LogoSimple />
|
||||
|
||||
<p className="text-muted-foreground text-center text-sm sm:text-base">
|
||||
Masuk untuk mengakses akunmu
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<SigninForm />
|
||||
|
||||
<div className="w-full space-y-4">
|
||||
<p className="text-muted-foreground px-4 text-center text-xs leading-5 text-balance sm:text-sm">
|
||||
Belum punya akun?{' '}
|
||||
<Link
|
||||
href="/signup"
|
||||
className="font-bold hover:underline hover:underline-offset-4 transition-colors text-primary-500"
|
||||
>
|
||||
Daftar
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
'use server';
|
||||
|
||||
import { getRemoteIp } from '@/lib/headers';
|
||||
import { z } from 'zod';
|
||||
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
|
||||
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 remoteIp = await getRemoteIp();
|
||||
|
||||
const isCapchaValid = await fetchPostverifyTurnstile(
|
||||
validRequest.token,
|
||||
remoteIp
|
||||
);
|
||||
|
||||
if (!isCapchaValid) throw new Error('Failed to verify captcha');
|
||||
|
||||
const data = await fetchPostSignin(validRequest);
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
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 { useRef, 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 ref = useRef<TurnstileInstance | null>(null);
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
const [stepOneData, setStepOneData] = useState<z.infer<
|
||||
typeof stepOneSignupValidationSchema
|
||||
> | null>(null);
|
||||
|
||||
const firstForm = useForm<z.infer<typeof stepOneSignupValidationSchema>>({
|
||||
resolver: zodResolver(stepOneSignupValidationSchema),
|
||||
defaultValues: {
|
||||
email: '',
|
||||
phone_number: '',
|
||||
fullname: '',
|
||||
password: '',
|
||||
confirm_password: '',
|
||||
},
|
||||
});
|
||||
|
||||
const secondForm = useForm<z.infer<typeof stepTwoSignupValidationSchema>>({
|
||||
resolver: zodResolver(stepTwoSignupValidationSchema),
|
||||
defaultValues: {
|
||||
token: '',
|
||||
},
|
||||
});
|
||||
|
||||
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: () => {
|
||||
ref.current?.reset();
|
||||
secondForm.resetField('token');
|
||||
},
|
||||
});
|
||||
|
||||
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="phone_number"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Nomor Telepon</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="08123456789" {...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>
|
||||
)}
|
||||
|
||||
<Turnstile
|
||||
ref={ref}
|
||||
siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
|
||||
onSuccess={(token) => secondForm.setValue('token', token)}
|
||||
options={{
|
||||
theme: 'light',
|
||||
size: 'flexible',
|
||||
language: 'id',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setStep(1)}
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isPending || !secondForm.watch('token')}
|
||||
>
|
||||
{isPending ? (
|
||||
<LuLoader className="h-5 w-5 animate-spin" />
|
||||
) : (
|
||||
'Daftar'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { fetcher } from '@/lib/fetcher';
|
||||
import { SignupValidationSchema } from '../_validation/signup-validation';
|
||||
|
||||
export async function fetchPostSignin({
|
||||
email,
|
||||
password,
|
||||
fullname,
|
||||
phone_number,
|
||||
}: SignupValidationSchema) {
|
||||
const { data, error, response } = await fetcher.POST('/v1/auth/register', {
|
||||
body: {
|
||||
email,
|
||||
password,
|
||||
fullname,
|
||||
phone_number,
|
||||
},
|
||||
});
|
||||
|
||||
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,57 @@
|
||||
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(8, 'Password harus minimal 8 karakter')
|
||||
.max(50, 'Password tidak boleh lebih dari 50 karakter')
|
||||
.regex(
|
||||
/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).+$/,
|
||||
'Password harus mengandung setidaknya satu huruf kapital, satu huruf kecil, satu angka, dan satu karakter spesial'
|
||||
),
|
||||
confirm_password: z
|
||||
.string({
|
||||
required_error: 'Konfirmasi password tidak boleh kosong',
|
||||
})
|
||||
.min(8, 'Konfirmasi password harus minimal 8 karakter')
|
||||
.max(50, 'Konfirmasi password tidak boleh lebih dari 50 karakter'),
|
||||
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'),
|
||||
})
|
||||
.refine((data) => data.password === data.confirm_password, {
|
||||
message: 'Password dan Konfirmasi Password harus sama',
|
||||
path: ['confirm_password'],
|
||||
});
|
||||
|
||||
export const stepTwoSignupValidationSchema = z.object({
|
||||
token: z.string(),
|
||||
});
|
||||
|
||||
export const signupValidationSchema = stepOneSignupValidationSchema.and(
|
||||
stepTwoSignupValidationSchema
|
||||
);
|
||||
export type SignupValidationSchema = z.infer<typeof signupValidationSchema>;
|
||||
@@ -0,0 +1,36 @@
|
||||
import { LogoSimple } from '@/app/_components/logo';
|
||||
import { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { SignupForm } from './_components/signup-form';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'IMPHNEN - Signup',
|
||||
};
|
||||
|
||||
export default function Page() {
|
||||
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 />
|
||||
|
||||
<div className="w-full space-y-4">
|
||||
<p className="text-muted-foreground px-4 text-center text-xs leading-5 text-balance sm:text-sm">
|
||||
Sudah punya akun?{' '}
|
||||
<Link
|
||||
href="/signin"
|
||||
className="font-bold hover:underline hover:underline-offset-4 transition-colors text-primary-500"
|
||||
>
|
||||
Masuk
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
'use server';
|
||||
|
||||
import { fetcher } from '@/lib/fetcher';
|
||||
import { getRemoteIp } from '@/lib/headers';
|
||||
import { fetchPostverifyTurnstile } from '../../_http/fetch-post-verify-turnstile';
|
||||
import {
|
||||
resendOTPValidationSchema,
|
||||
type ResendOTPValidationType,
|
||||
} from '../_validation/resend-otp-validation';
|
||||
|
||||
export async function resendOTPAction(request: ResendOTPValidationType) {
|
||||
const validRequest = resendOTPValidationSchema.parse(request);
|
||||
const remoteIp = await getRemoteIp();
|
||||
|
||||
const isCapchaValid = await fetchPostverifyTurnstile(
|
||||
validRequest.token,
|
||||
remoteIp
|
||||
);
|
||||
|
||||
if (!isCapchaValid) throw new Error('Failed to verify captcha');
|
||||
|
||||
const { data, error } = await fetcher.POST('/v1/auth/send-otp', {
|
||||
body: {
|
||||
email: validRequest.email,
|
||||
},
|
||||
});
|
||||
|
||||
if (error) throw new Error(error.message);
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
'use server';
|
||||
|
||||
import { fetchPostVerifyEmail } from '../_http/fetch-post-verify-email';
|
||||
import {
|
||||
type VerifyEmailValidationType,
|
||||
verifyEmailValidationSchema,
|
||||
} from '../_validation/verify-email-validation';
|
||||
|
||||
export async function verifyEmailAction(request: VerifyEmailValidationType) {
|
||||
const validRequest = verifyEmailValidationSchema.parse(request);
|
||||
|
||||
const data = await fetchPostVerifyEmail(validRequest);
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components';
|
||||
import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
|
||||
import { useRef } from 'react';
|
||||
import { useFormResendOTP } from '../_hooks/use-form-resend-otp';
|
||||
import { usePostResendOTP } from '../_hooks/use-post-resend-otp';
|
||||
import { ResendOTPValidationType } from '../_validation/resend-otp-validation';
|
||||
|
||||
export function ResendOTPForm() {
|
||||
const ref = useRef<TurnstileInstance | null>(null);
|
||||
|
||||
const form = useFormResendOTP();
|
||||
|
||||
const { mutate, isPending, error } = usePostResendOTP(form);
|
||||
|
||||
const onSubmit = (values: ResendOTPValidationType) => {
|
||||
mutate(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} 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={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="emailmu@mail.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Turnstile
|
||||
ref={ref}
|
||||
siteKey={String(process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY)}
|
||||
onSuccess={(token) => form.setValue('token', token)}
|
||||
options={{
|
||||
theme: 'light',
|
||||
size: 'flexible',
|
||||
language: 'id',
|
||||
}}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={isPending || !form.watch('token')}
|
||||
>
|
||||
Kirim Ulang Kode OTP
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
'use client';
|
||||
|
||||
import { cn } from '@utils';
|
||||
import { useState } from 'react';
|
||||
import { ResendOTPForm } from './resend-otp-form';
|
||||
import { VerifyEmailForm } from './verify-email-form';
|
||||
|
||||
export function VerificationTabs() {
|
||||
const [activeTab, setActiveTab] = useState<'form' | 'resend'>('form');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex space-x-2 border-b">
|
||||
<button
|
||||
className={cn(
|
||||
'py-2 px-4 w-full',
|
||||
activeTab === 'form'
|
||||
? 'border-b-2 border-primary-500 font-semibold'
|
||||
: 'text-gray-500'
|
||||
)}
|
||||
onClick={() => setActiveTab('form')}
|
||||
>
|
||||
Verifikasi Email
|
||||
</button>
|
||||
<button
|
||||
className={cn(
|
||||
'py-2 px-4 w-full',
|
||||
activeTab === 'resend'
|
||||
? 'border-b-2 border-primary-500 font-semibold'
|
||||
: 'text-gray-500'
|
||||
)}
|
||||
onClick={() => setActiveTab('resend')}
|
||||
>
|
||||
Resend OTP
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{activeTab === 'form' ? <VerifyEmailForm /> : <ResendOTPForm />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components';
|
||||
import { LuLoader } from 'react-icons/lu';
|
||||
import { useFormVerifyEmail } from '../_hooks/use-form-verify-email';
|
||||
import { usePostVerifyEmail } from '../_hooks/use-post-verify-email';
|
||||
import { type VerifyEmailValidationType } from '../_validation/verify-email-validation';
|
||||
|
||||
export function VerifyEmailForm() {
|
||||
const form = useFormVerifyEmail();
|
||||
const { mutate, isPending, error } = usePostVerifyEmail(form);
|
||||
|
||||
const onSubmit = (values: VerifyEmailValidationType) => {
|
||||
mutate(values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} 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={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="emailmu@mail.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="otp"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>OTP</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="123456" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="w-full hover:bg-[#5fbaef] bg-[#22a5f1] font-bold"
|
||||
>
|
||||
{isPending ? (
|
||||
<LuLoader className="h-5 w-5 animate-spin" />
|
||||
) : (
|
||||
'Verifikasi'
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import {
|
||||
resendOTPValidationSchema,
|
||||
type ResendOTPValidationType,
|
||||
} from '../_validation/resend-otp-validation';
|
||||
|
||||
export function useFormResendOTP() {
|
||||
const searchParams = useSearchParams();
|
||||
const email = searchParams.get('ref');
|
||||
|
||||
return useForm<ResendOTPValidationType>({
|
||||
resolver: zodResolver(resendOTPValidationSchema),
|
||||
defaultValues: {
|
||||
email: email ?? '',
|
||||
token: '',
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import {
|
||||
verifyEmailValidationSchema,
|
||||
type VerifyEmailValidationType,
|
||||
} from '../_validation/verify-email-validation';
|
||||
|
||||
export function useFormVerifyEmail() {
|
||||
const searchParams = useSearchParams();
|
||||
const email = searchParams.get('ref');
|
||||
|
||||
return useForm<VerifyEmailValidationType>({
|
||||
resolver: zodResolver(verifyEmailValidationSchema),
|
||||
defaultValues: {
|
||||
email: email ?? '',
|
||||
otp: '',
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
import { resendOTPAction } from '../_actions/resend-otp-action';
|
||||
import { useFormResendOTP } from './use-form-resend-otp';
|
||||
|
||||
export function usePostResendOTP(form: ReturnType<typeof useFormResendOTP>) {
|
||||
return useMutation({
|
||||
mutationFn: resendOTPAction,
|
||||
onSuccess: ({ message }) => {
|
||||
form.reset();
|
||||
toast.success(message);
|
||||
},
|
||||
onError: ({ message }) => {
|
||||
form.reset();
|
||||
toast.error(message);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { verifyEmailAction } from '../_actions/verify-email-action';
|
||||
import { useFormVerifyEmail } from './use-form-verify-email';
|
||||
|
||||
export function usePostVerifyEmail(
|
||||
form: ReturnType<typeof useFormVerifyEmail>
|
||||
) {
|
||||
const router = useRouter();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: verifyEmailAction,
|
||||
onSuccess: () => {
|
||||
router.push('/');
|
||||
},
|
||||
onError: () => {
|
||||
form.resetField('otp');
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { fetcher } from '@/lib/fetcher';
|
||||
import { VerifyEmailValidationType } from '../_validation/verify-email-validation';
|
||||
|
||||
export async function fetchPostVerifyEmail({
|
||||
email,
|
||||
otp,
|
||||
}: VerifyEmailValidationType) {
|
||||
const formattedOTP = parseInt(otp);
|
||||
|
||||
const { data, error, response } = await fetcher.POST(
|
||||
'/v1/auth/verify-email',
|
||||
{
|
||||
body: {
|
||||
email,
|
||||
otp: formattedOTP,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (error) {
|
||||
throw new Error(error.message);
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Something went wrong, please try again later');
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const resendOTPValidationSchema = z.object({
|
||||
email: z.string().email({ message: 'Format email tidak valid' }),
|
||||
token: z.string().min(1, { message: 'OTP harus terdiri dari 1 digit' }),
|
||||
});
|
||||
export type ResendOTPValidationType = z.infer<typeof resendOTPValidationSchema>;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const verifyEmailValidationSchema = z.object({
|
||||
email: z.string().email({ message: 'Format email tidak valid' }),
|
||||
otp: z
|
||||
.string()
|
||||
.min(6, { message: 'OTP harus terdiri dari 6 digit' })
|
||||
.max(6, { message: 'OTP harus terdiri dari 6 digit' }),
|
||||
});
|
||||
export type VerifyEmailValidationType = z.infer<
|
||||
typeof verifyEmailValidationSchema
|
||||
>;
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Suspense } from 'react';
|
||||
import { LogoSimple } from '../../_components/logo';
|
||||
import { VerificationTabs } from './_components/verification-tabs';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<LogoSimple />
|
||||
|
||||
<p className="text-muted-foreground text-center text-sm sm:text-base">
|
||||
Verifikasi akun mu sekarang
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Suspense>
|
||||
<VerificationTabs />
|
||||
</Suspense>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user