156 lines
4.9 KiB
TypeScript
156 lines
4.9 KiB
TypeScript
"use client"
|
||
|
||
import React, { useState } from 'react'
|
||
import { useForm } from 'react-hook-form'
|
||
import { zodResolver } from '@hookform/resolvers/zod'
|
||
import { loginSchema, LoginInput } from '@/lib/auth-schema'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import { Label } from '@/components/ui/label'
|
||
import { Turnstile } from 'nextjs-turnstile'
|
||
import { signIn } from 'next-auth/react'
|
||
import Swal from 'sweetalert2'
|
||
import { useRouter } from 'next/navigation'
|
||
import Link from 'next/link'
|
||
|
||
const LoginPage = () => {
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
const [turnstileToken, setTurnstileToken] = useState<string | null>(null)
|
||
const router = useRouter()
|
||
|
||
const {
|
||
register,
|
||
handleSubmit,
|
||
formState: { errors },
|
||
} = useForm<LoginInput>({
|
||
resolver: zodResolver(loginSchema),
|
||
})
|
||
|
||
const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY
|
||
|
||
const onSubmit = async (data: LoginInput) => {
|
||
if (siteKey && !turnstileToken) {
|
||
Swal.fire({
|
||
icon: 'warning',
|
||
title: 'Güvenlik Doğrulaması',
|
||
text: 'Lütfen robot olmadığınızı doğrulayın.',
|
||
})
|
||
return
|
||
}
|
||
|
||
setIsLoading(true)
|
||
|
||
try {
|
||
const result = await signIn('credentials', {
|
||
redirect: false,
|
||
email: data.email,
|
||
password: data.password,
|
||
})
|
||
|
||
if (result?.error) {
|
||
throw new Error(result.error)
|
||
}
|
||
|
||
if (result?.ok) {
|
||
Swal.fire({
|
||
icon: 'success',
|
||
title: 'Giriş Başarılı',
|
||
text: 'Yönlendiriliyorsunuz...',
|
||
timer: 1500,
|
||
showConfirmButton: false,
|
||
}).then(() => {
|
||
const callbackUrl = new URLSearchParams(window.location.search).get("callbackUrl") || "/"
|
||
router.push(callbackUrl)
|
||
router.refresh()
|
||
})
|
||
}
|
||
|
||
} catch {
|
||
Swal.fire({
|
||
icon: 'error',
|
||
title: 'Giriş Başarısız',
|
||
text: 'E-posta veya şifre hatalı olabilir.',
|
||
})
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
|
||
<Card className="w-full max-w-md shadow-xl">
|
||
<CardHeader className="space-y-1">
|
||
<CardTitle className="text-2xl font-bold text-center">Giriş Yap</CardTitle>
|
||
<CardDescription className="text-center">
|
||
Hesabınıza erişmek için bilgilerinizi girin
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email">E-posta</Label>
|
||
<Input
|
||
id="email"
|
||
type="email"
|
||
placeholder="ornek@domain.com"
|
||
{...register('email')}
|
||
className={errors.email ? 'border-red-500' : ''}
|
||
/>
|
||
{errors.email && (
|
||
<p className="text-sm text-red-500">{errors.email.message}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<Label htmlFor="password">Şifre</Label>
|
||
<Link
|
||
href="/auth/forgot-password"
|
||
className="text-sm text-blue-600 hover:underline"
|
||
>
|
||
Şifremi Unuttum?
|
||
</Link>
|
||
</div>
|
||
<Input
|
||
id="password"
|
||
type="password"
|
||
placeholder="********"
|
||
{...register('password')}
|
||
className={errors.password ? 'border-red-500' : ''}
|
||
/>
|
||
{errors.password && (
|
||
<p className="text-sm text-red-500">{errors.password.message}</p>
|
||
)}
|
||
</div>
|
||
|
||
{siteKey && (
|
||
<div className="flex justify-center my-4">
|
||
<Turnstile
|
||
siteKey={siteKey}
|
||
onSuccess={(token) => setTurnstileToken(token)}
|
||
onError={() => setTurnstileToken(null)}
|
||
onExpire={() => setTurnstileToken(null)}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||
{isLoading ? 'Giriş Yapılıyor...' : 'Giriş Yap'}
|
||
</Button>
|
||
</form>
|
||
</CardContent>
|
||
<CardFooter className="justify-center">
|
||
<p className="text-sm text-gray-500">
|
||
Hesabınız yok mu?{' '}
|
||
<Link href="/auth/register" className="text-blue-600 hover:underline">
|
||
Kayıt Ol
|
||
</Link>
|
||
</p>
|
||
</CardFooter>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default LoginPage |