62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
'use client'
|
||
|
||
import { useActionState } from 'react'
|
||
import { login } from '@/app/actions/auth'
|
||
|
||
export default function LoginPage() {
|
||
const [state, formAction, isPending] = useActionState(login, null)
|
||
|
||
return (
|
||
<div className="min-h-screen flex items-center justify-center bg-cream px-4" style={{ backgroundColor: '#F5F0E8' }}>
|
||
<div className="w-full max-w-sm bg-white rounded-2xl shadow-xl overflow-hidden">
|
||
<div className="bg-coffee-dark px-6 py-8 text-center" style={{ backgroundColor: '#3D2B1F' }}>
|
||
<h1 className="text-2xl font-display font-bold text-cream" style={{ color: '#F5F0E8' }}>Kozmos Admin</h1>
|
||
<p className="text-cream/70 text-sm mt-2">Yönetim paneline giriş yapın</p>
|
||
</div>
|
||
|
||
<form action={formAction} className="px-6 py-8 space-y-5">
|
||
{state?.error && (
|
||
<div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm font-medium border border-red-100">
|
||
{state.error}
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-coffee mb-1.5">Kullanıcı Adı</label>
|
||
<input
|
||
type="text"
|
||
name="username"
|
||
required
|
||
className="w-full px-4 py-2.5 rounded-lg border border-beige/60 bg-cream/30 focus:outline-none focus:ring-2 focus:ring-teal/50"
|
||
placeholder="admin"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-coffee mb-1.5">Şifre</label>
|
||
<input
|
||
type="password"
|
||
name="password"
|
||
required
|
||
className="w-full px-4 py-2.5 rounded-lg border border-beige/60 bg-cream/30 focus:outline-none focus:ring-2 focus:ring-teal/50"
|
||
placeholder="••••••••"
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={isPending}
|
||
className="w-full py-3 rounded-lg text-white font-medium transition-all"
|
||
style={{
|
||
backgroundColor: '#4AAFA8',
|
||
opacity: isPending ? 0.7 : 1
|
||
}}
|
||
>
|
||
{isPending ? 'Giriş yapılıyor...' : 'Giriş Yap'}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|