53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
'use client'
|
||
|
||
import { useActionState } from 'react'
|
||
import { authenticate } from './actions'
|
||
|
||
export default function LoginForm() {
|
||
const [state, action, isPending] = useActionState(authenticate, undefined)
|
||
|
||
return (
|
||
<form action={action} className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Kullanıcı Adı
|
||
</label>
|
||
<input
|
||
name="username"
|
||
type="text"
|
||
required
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
|
||
placeholder="admin"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
Şifre
|
||
</label>
|
||
<input
|
||
name="password"
|
||
type="password"
|
||
required
|
||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
|
||
placeholder="••••••••"
|
||
/>
|
||
</div>
|
||
|
||
{state?.error && (
|
||
<div className="text-red-500 text-sm bg-red-50 p-3 rounded-lg">
|
||
{state.error}
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={isPending}
|
||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-70"
|
||
>
|
||
{isPending ? 'Giriş Yapılıyor...' : 'Giriş Yap'}
|
||
</button>
|
||
</form>
|
||
)
|
||
}
|