Untitled
unknown
plain_text
5 months ago
4.9 kB
8
Indexable
'use client'; import { Button } from '@/components/shadcnUi/button'; import { Input } from '@/components/shadcnUi/input'; import { Spinner } from '@/core/ui/zenlots/src/components'; import { toast } from '@/hooks/use-toast'; import { loginSchema, LoginSchemaType } from '@/modules/auth/authTypes'; import { useFormik } from 'formik'; import { signIn } from 'next-auth/react'; import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { X } from 'phosphor-react'; import { useState } from 'react'; import { ZodError } from 'zod'; export default function LoginForm() { const [isLoading, setIsLoading] = useState(false); const router = useRouter(); const validateForm = (values: LoginSchemaType) => { try { loginSchema.parse(values); } catch (error) { if (error instanceof ZodError) { return error.formErrors.fieldErrors; } } }; const onSubmit = async (values: LoginSchemaType) => { setIsLoading(true); await signIn('credentials', { email: values.email, password: values.password, redirect: false, callbackUrl: '/music', // Use the extracted callback URL }) .then(async (response: any) => { if (response?.error) { toast({ title: 'Authorization Error', description: 'Please check your credentials before login', }); } else { // await session.update(); router.replace('/'); // Redirect to the callback URL } }) .catch((errorResponse) => {}); setIsLoading(false); }; const formik = useFormik({ enableReinitialize: true, initialValues: { email: '', password: '', }, validateOnChange: true, onSubmit, validate: validateForm, }); return ( <div className="mx-auto flex h-min max-w-3xl flex-col gap-8 border border-white/20 bg-black/75 p-4 shadow-xl backdrop-blur-lg"> <div className="flex items-center justify-between"> <p>Login into your account</p> <X size={24} className="text-grayText/50" /> </div> <div className="flex items-end justify-between"> <div className="hidden -rotate-12 pb-4 pl-4 text-start font-scratchy text-8xl text-transparent text-yellow-400 lg:block"> Never Abandon <br /> Imagination </div> <form className="flex flex-col items-end gap-4" onSubmit={(e) => { e.preventDefault(); formik.handleSubmit(e); }} > <div className="min-w-96"> <Button variant="default" className="flex w-full justify-between gap-4" size={'lg'} > <div className="relative h-6 w-6"> <Image src="/image/google-icon.png" alt="Login Image" sizes="(max-width: 768px) 100vw, 33vw" fill objectFit="cover" /> </div> <p className="font-satosh flex-1 text-base"> Continue with Google </p> </Button> </div> <div className="flex w-full items-center gap-2"> <span className="flex-1 border-t border-border"></span> <span className="text-base text-grayText">OR LOGIN WITH EMAIL</span> <span className="flex-1 border-t border-border"></span> </div> <Input placeholder="Email Address" error={formik.touched.email ? formik.errors.email : undefined} {...formik.getFieldProps('email')} /> <Input placeholder="Password" type="password" error={formik.touched.password ? formik.errors.password : undefined} {...formik.getFieldProps('password')} /> <Button type="button" variant="link" className="h-6 !py-0 !pr-0 text-grayText" > Forgot Password? </Button> <Button type="submit" variant="default" className="flex w-full gap-4" size={'lg'} > {isLoading ? <Spinner /> : <>Login</>} </Button> <div className="flex w-full items-start justify-center"> <span className="text-grayText">{`Don't have an account?`}</span> <Link href={'/register'} className="h-6 !py-0 !pl-2 !pr-0 text-white" > Sign Up </Link> </div> </form> </div> </div> ); }
Editor is loading...
Leave a Comment