114 lines
4.4 KiB
TypeScript
114 lines
4.4 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { signIn } from 'next-auth/react'
|
||
import { useRouter, useParams } from 'next/navigation'
|
||
import Link from 'next/link'
|
||
import Image from 'next/image'
|
||
import { Lock, ArrowLeft } from 'lucide-react'
|
||
|
||
export default function LoginPage() {
|
||
const router = useRouter()
|
||
const params = useParams()
|
||
const locale = (params?.locale as string) || 'tr'
|
||
const [email, setEmail] = useState('')
|
||
const [password, setPassword] = useState('')
|
||
const [error, setError] = useState('')
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
setLoading(true)
|
||
setError('')
|
||
|
||
const result = await signIn('credentials', {
|
||
redirect: false,
|
||
email,
|
||
password,
|
||
})
|
||
|
||
if (result?.error) {
|
||
setError('Geçersiz e-posta veya şifre')
|
||
setLoading(false)
|
||
} else {
|
||
router.push(`/${locale}/admin`)
|
||
router.refresh()
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-[100dvh] flex flex-col justify-between bg-zinc-50/80 px-4 py-8">
|
||
<div>
|
||
<Link
|
||
href={`/${locale}`}
|
||
className="inline-flex items-center gap-1.5 text-xs font-semibold text-zinc-500 hover:text-zinc-900 transition-colors"
|
||
>
|
||
<ArrowLeft size={14} /> Ana Sayfaya Dön
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="w-full max-w-md mx-auto bg-white rounded-3xl shadow-[0_20px_60px_-30px_rgba(24,24,27,0.15)] border border-zinc-200/80 overflow-hidden">
|
||
<div className="p-8 sm:p-10">
|
||
<div className="text-center mb-8">
|
||
<Image src="/logo.png" alt="AyrisLegal" width={120} height={24} className="h-6 w-auto mx-auto object-contain mb-5" priority />
|
||
<h1 className="text-2xl font-extrabold tracking-tight text-zinc-950">Yönetici Girişi</h1>
|
||
<p className="text-xs font-medium text-zinc-500 mt-1.5">Yönetim paneline erişmek için giriş yapın</p>
|
||
</div>
|
||
|
||
{error && (
|
||
<div role="alert" className="bg-red-50 text-red-700 p-3.5 rounded-xl text-xs font-semibold mb-6 border border-red-200">
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4" noValidate>
|
||
<div>
|
||
<label className="block text-xs font-bold text-zinc-900 mb-1.5" htmlFor="email">
|
||
E-posta
|
||
</label>
|
||
<input
|
||
id="email"
|
||
type="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
required
|
||
className="w-full min-h-[44px] px-4 py-2.5 border border-zinc-200 rounded-xl focus:outline-none focus:border-[#E61919] focus:ring-2 focus:ring-[#E61919]/20 bg-white text-zinc-900 text-sm transition-all"
|
||
placeholder="admin@ayris.tech"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-bold text-zinc-900 mb-1.5" htmlFor="password">
|
||
Şifre
|
||
</label>
|
||
<input
|
||
id="password"
|
||
type="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
required
|
||
className="w-full min-h-[44px] px-4 py-2.5 border border-zinc-200 rounded-xl focus:outline-none focus:border-[#E61919] focus:ring-2 focus:ring-[#E61919]/20 bg-white text-zinc-900 text-sm transition-all"
|
||
placeholder="••••••••"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="w-full bg-[#E61919] hover:bg-[#B8140F] text-white font-bold py-3.5 px-4 rounded-full text-sm transition-all disabled:opacity-60 disabled:cursor-not-allowed active:scale-[0.98] shadow-sm mt-2"
|
||
>
|
||
{loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
|
||
</button>
|
||
</form>
|
||
|
||
<div className="mt-8 text-center text-xs font-mono text-zinc-500 bg-zinc-50 p-2.5 rounded-xl border border-zinc-100">
|
||
Demo: admin@ayris.tech / admin
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-center text-xs text-zinc-500">
|
||
© {new Date().getFullYear()} AyrisLegal · <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="hover:underline">Created by ayris.tech</a>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|