111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { useRouter, useSearchParams } from 'next/navigation'
|
|
import { useState } from 'react'
|
|
import { useGlobal } from '@/providers/GlobalProvider'
|
|
import { Loader2 } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
|
|
export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
|
|
const router = useRouter()
|
|
const { setUser } = useGlobal()
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const searchParams = useSearchParams()
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
|
|
if (!isLoading) {
|
|
const formData = new FormData(e.currentTarget)
|
|
const email = String(formData.get('email'))
|
|
const password = String(formData.get('password'))
|
|
|
|
if (!email || !password) return
|
|
|
|
setIsLoading(true)
|
|
|
|
try {
|
|
const loginReq = await fetch('/api/users/login', {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email,
|
|
password,
|
|
}),
|
|
})
|
|
const loginResponse = await loginReq.json()
|
|
|
|
if (loginResponse.errors?.length) {
|
|
loginResponse.errors.forEach((e: Error) => {
|
|
toast(e.message)
|
|
})
|
|
}
|
|
|
|
if (loginResponse.user) setUser(loginResponse.user)
|
|
|
|
if (loginResponse.token) router.push(searchParams.get('redirectUrl') || '/')
|
|
} catch (error) {
|
|
toast('Unknown issue while authenticating. Try again')
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={cn('flex flex-col gap-6', className)} {...props}>
|
|
<Card>
|
|
<CardHeader className="text-center">
|
|
<CardTitle className="text-xl">Welcome back</CardTitle>
|
|
<CardDescription>Login to access your account</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="grid gap-6">
|
|
<div className="grid gap-6">
|
|
<div className="grid gap-3">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="me@example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="grid gap-3">
|
|
<div className="flex items-center">
|
|
<Label htmlFor="password">Password</Label>
|
|
<a
|
|
href="/forgotPassword"
|
|
className="ml-auto text-sm underline-offset-4 hover:underline"
|
|
>
|
|
Forgot your password?
|
|
</a>
|
|
</div>
|
|
<Input id="password" name="password" type="password" required />
|
|
</div>
|
|
<Button disabled={isLoading} type="submit" className="w-full">
|
|
{isLoading && <Loader2 />}
|
|
<span>Login</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
<div className="text-muted-foreground *:[a]:hover:text-primary text-center text-xs text-balance *:[a]:underline *:[a]:underline-offset-4">
|
|
By clicking <i>Login</i> or <i>Request Access</i>, you agree to our{' '}
|
|
<a href="/info/toc">Terms of Service</a> and <a href="/info/privacy">Privacy Policy</a>.
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|