initial commit

This commit is contained in:
Harivansh Rathi 2024-11-24 20:56:03 -05:00
commit ef9ccf22d3
133 changed files with 20802 additions and 0 deletions

View file

@ -0,0 +1,7 @@
const AuthLayout = ({ children }: { children: React.ReactNode }) => {
return (
<main className="w-full flex items-center justify-center">{children}</main>
)
}
export default AuthLayout

View file

@ -0,0 +1,124 @@
'use client'
import * as z from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage
} from '@/components/ui/form'
import { LoginSchema } from '@/schemas'
import { Input } from '@/components/ui/input'
import { CardWrapper } from '@/components/auth/card-wrapper'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { useEffect, useRef, useTransition } from 'react'
import { login } from '@/actions/login'
import toast from 'react-hot-toast'
export default function Page() {
const searchParams = useSearchParams()
const urlError =
searchParams.get('error') === 'OAuthAccountNotLinked'
? 'Email already in use with different provider!'
: ''
const [isPending, startTransition] = useTransition()
const hasDisplayedError = useRef(false)
useEffect(() => {
if (urlError && !hasDisplayedError.current) {
toast.error(urlError)
hasDisplayedError.current = true
}
}, [urlError])
const form = useForm<z.infer<typeof LoginSchema>>({
resolver: zodResolver(LoginSchema),
defaultValues: {
email: '',
password: ''
}
})
const onSubmit = (values: z.infer<typeof LoginSchema>) => {
startTransition(() => {
login(values).then((data) => {
if (data?.error) {
toast.error(data.error)
}
if (data?.success) {
toast.success(data.success)
form.reset({ email: '', password: '' })
window.location.href = '/'
}
})
})
}
return (
<CardWrapper
headerTitle="Login"
backButtonLabel="Don't have an account?"
backButtonHref="/register"
showSocial
>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-1">
<div className="space-y-2">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
{...field}
placeholder="tylerdurden@gmail.com"
disabled={isPending}
type="email"
className="bg-background/50 dark:bg-background/30 ring-foreground/5"
/>
</FormControl>
<FormMessage className="text-red-500" />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
{...field}
placeholder="••••••••"
disabled={isPending}
type="password"
className="bg-background/50 dark:bg-background/30 ring-foreground/5"
/>
</FormControl>
<FormMessage className="text-red-500" />
<Button
size="sm"
variant="link"
className="px-0 text-blue-500"
>
<Link href="/reset">Forgot Password?</Link>
</Button>
</FormItem>
)}
/>
</div>
<Button className="w-full" disabled={isPending} type="submit">
Login
</Button>
</form>
</Form>
</CardWrapper>
)
}

View file

@ -0,0 +1,67 @@
'use client'
import { CardWrapper } from '@/components/auth/card-wrapper'
import { newVerification } from '@/actions/new-verification'
import { useRouter, useSearchParams } from 'next/navigation'
import { useCallback, useEffect, useState } from 'react'
import { toast } from 'react-hot-toast'
export default function NewVerificationForm() {
const [error, setError] = useState<string | undefined>()
const [success, setSuccess] = useState<string | undefined>()
const [hasErrorToastShown, setHasErrorToastShown] = useState<boolean>(false)
const searchParams = useSearchParams()
const token = searchParams.get('token')
const router = useRouter()
const onSubmit = useCallback(() => {
if (!token) {
toast.error('No token provided')
return
}
newVerification(token)
.then((data) => {
if (data?.error) {
setTimeout(() => {
setError(data.error)
}, 500)
} else if (data?.success) {
toast.success(data.success)
setTimeout(() => {
router.push('/login')
}, 100)
}
})
.catch(() => {
const errorMessage = 'Something went wrong'
setError(errorMessage)
})
}, [token, router])
useEffect(() => {
onSubmit()
}, [onSubmit])
useEffect(() => {
if (error && !hasErrorToastShown) {
const timer = setTimeout(() => {
toast.error(error)
setHasErrorToastShown(true)
}, 100)
return () => clearTimeout(timer) // Cleanup the timeout if component unmounts
}
}, [error, hasErrorToastShown])
return (
<CardWrapper
headerTitle="Verify your email"
backButtonLabel="Back to Login"
backButtonHref="/login"
>
<div className="flex items-center w-full justify-center">
{!success && !error && <p>Verifying...</p>}
</div>
</CardWrapper>
)
}

View file

@ -0,0 +1,67 @@
'use client'
import { CardWrapper } from '@/components/auth/card-wrapper'
import { newVerification } from '@/actions/new-verification'
import { useRouter, useSearchParams } from 'next/navigation'
import { useCallback, useEffect, useState } from 'react'
import { toast } from 'react-hot-toast'
export default function NewVerificationForm() {
const [error, setError] = useState<string | undefined>()
const [success, setSuccess] = useState<string | undefined>()
const [hasErrorToastShown, setHasErrorToastShown] = useState<boolean>(false)
const searchParams = useSearchParams()
const token = searchParams.get('token')
const router = useRouter()
const onSubmit = useCallback(() => {
if (!token) {
toast.error('No token provided')
return
}
newVerification(token)
.then((data) => {
if (data?.error) {
setTimeout(() => {
setError(data.error)
}, 500)
} else if (data?.success) {
toast.success(data.success)
setTimeout(() => {
router.push('/login')
}, 100)
}
})
.catch(() => {
const errorMessage = 'Something went wrong'
setError(errorMessage)
})
}, [token, router])
useEffect(() => {
onSubmit()
}, [onSubmit])
useEffect(() => {
if (error && !hasErrorToastShown) {
const timer = setTimeout(() => {
toast.error(error)
setHasErrorToastShown(true)
}, 100)
return () => clearTimeout(timer) // Cleanup the timeout if component unmounts
}
}, [error, hasErrorToastShown])
return (
<CardWrapper
headerTitle="Verify your email"
backButtonLabel="Back to Login"
backButtonHref="/login"
>
<div className="flex items-center w-full justify-center">
{!success && !error && <p>Verifying...</p>}
</div>
</CardWrapper>
)
}

View file

@ -0,0 +1,126 @@
'use client'
import * as z from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage
} from '@/components/ui/form'
import { RegisterSchema } from '@/schemas'
import { Input } from '@/components/ui/input'
import { CardWrapper } from '@/components/auth/card-wrapper'
import { Button } from '@/components/ui/button'
import { useTransition } from 'react'
import { register } from '@/actions/register'
import toast from 'react-hot-toast'
export default function Page() {
const [isPending, startTransition] = useTransition()
const form = useForm<z.infer<typeof RegisterSchema>>({
resolver: zodResolver(RegisterSchema),
defaultValues: {
email: '',
password: '',
name: ''
}
})
const onSubmit = (values: z.infer<typeof RegisterSchema>) => {
startTransition(() => {
register(values).then((data) => {
if (data?.error) {
toast.error(data.error)
}
if (data?.success) {
toast.success(data.success)
form.reset({ email: '', password: '', name: '' })
}
})
})
}
return (
<CardWrapper
headerTitle="Register"
backButtonLabel="Already have an account?"
backButtonHref="/login"
showSocial
>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-1 w-full"
>
<div className="space-y-2">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input
{...field}
placeholder="Tyler Durden"
disabled={isPending}
type="name"
className="bg-background/50 dark:bg-background/30 ring-foreground/5"
/>
</FormControl>
<FormMessage className="text-red-500" />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
{...field}
placeholder="tylerdurden@gmail.com"
disabled={isPending}
type="email"
className="bg-background/50 dark:bg-background/30 ring-foreground/5"
/>
</FormControl>
<FormMessage className="text-red-500" />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
{...field}
placeholder="••••••••"
disabled={isPending}
type="password"
className="bg-background/50 dark:bg-background/30 ring-foreground/5"
/>
</FormControl>
<FormMessage className="text-red-500 " />
</FormItem>
)}
/>
<div></div>
</div>
<Button className="w-full" disabled={isPending} type="submit">
Register
</Button>
</form>
</Form>
</CardWrapper>
)
}

View file

@ -0,0 +1,86 @@
'use client'
import * as z from 'zod'
import { CardWrapper } from '@/components/auth/card-wrapper'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage
} from '@/components/ui/form'
import { ResetSchema } from '@/schemas'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { useState, useTransition } from 'react'
import { reset } from '@/actions/reset'
import { toast } from 'react-hot-toast'
export default function ResetForm() {
const [isPending, startTransition] = useTransition()
const form = useForm<z.infer<typeof ResetSchema>>({
resolver: zodResolver(ResetSchema),
defaultValues: {
email: ''
}
})
const onSubmit = (values: z.infer<typeof ResetSchema>) => {
startTransition(() => {
reset(values).then((data) => {
if (data?.error) {
toast.error(data.error)
}
if (data?.success) {
toast.success(data.success)
form.reset({ email: '' })
}
})
})
}
return (
<CardWrapper
headerTitle="Password Reset"
backButtonLabel="Back to login"
backButtonHref="/login"
>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4 w-full"
>
<div className="space-y-4">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
{...field}
placeholder="tylerdurden@gmail.com"
disabled={isPending}
type="email"
className="bg-background/50 dark:bg-background/30 ring-foreground/5"
/>
</FormControl>
<FormMessage className="text-red-500" />
</FormItem>
)}
/>
</div>
<Button className="w-full mt-4" disabled={isPending} type="submit">
Send Reset Email
</Button>
</form>
</Form>
</CardWrapper>
)
}