42 lines
2.2 KiB
TypeScript
42 lines
2.2 KiB
TypeScript
'use client'
|
||
import { useState } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
|
||
export default function LoginPage() {
|
||
const router = useRouter()
|
||
const [pw, setPw] = useState('')
|
||
const [err, setErr] = useState('')
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
async function login(e: React.FormEvent) {
|
||
e.preventDefault()
|
||
setLoading(true); setErr('')
|
||
const res = await fetch('/api/auth/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ password: pw }) })
|
||
if (res.ok) router.push('/dashboard')
|
||
else { setErr((await res.json()).error ?? 'Hata'); setLoading(false) }
|
||
}
|
||
|
||
return (
|
||
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', zIndex: 1 }}>
|
||
<div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 16, padding: '40px 36px', width: 360 }}>
|
||
<div style={{ marginBottom: 32 }}>
|
||
<div style={{ fontSize: 22, fontWeight: 800, color: 'var(--accent)', letterSpacing: -0.5 }}>VPS Panel</div>
|
||
<div style={{ fontSize: 12, color: 'var(--muted)', fontFamily: 'monospace', marginTop: 4 }}>self-hosted ops dashboard</div>
|
||
</div>
|
||
<form onSubmit={login} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||
<input
|
||
type="password" value={pw} onChange={e => setPw(e.target.value)}
|
||
placeholder="Şifre" autoFocus
|
||
style={{ background: 'rgba(0,0,0,.3)', border: `1px solid ${err ? 'var(--red)' : 'var(--border)'}`, borderRadius: 8, padding: '11px 14px', color: 'var(--text)', fontSize: 14, fontFamily: 'monospace', outline: 'none', width: '100%' }}
|
||
/>
|
||
{err && <div style={{ color: 'var(--red)', fontSize: 12, fontFamily: 'monospace' }}>✕ {err}</div>}
|
||
<button type="submit" disabled={loading || !pw}
|
||
style={{ background: 'rgba(0,229,255,.12)', border: '1px solid rgba(0,229,255,.35)', borderRadius: 8, padding: '11px', color: 'var(--accent)', fontSize: 14, fontWeight: 600, cursor: 'pointer', opacity: !pw ? .5 : 1 }}>
|
||
{loading ? 'Giriş yapılıyor...' : 'Giriş Yap →'}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|