117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
export default function AdminLoginPage() {
|
|
const router = useRouter()
|
|
const [password, setPassword] = useState('')
|
|
const [error, setError] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
useEffect(() => {
|
|
// Check if already authenticated
|
|
fetch('/api/admin/check')
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
if (data.authenticated) {
|
|
router.push('/admin')
|
|
}
|
|
})
|
|
}, [router])
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError('')
|
|
setLoading(true)
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ password }),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (response.ok) {
|
|
router.push('/admin')
|
|
} else {
|
|
setError(data.error || 'Invalid password')
|
|
}
|
|
} catch (error) {
|
|
setError('Failed to login. Please try again.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div style={{
|
|
minHeight: '100vh',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: 'var(--bg)',
|
|
padding: '20px'
|
|
}}>
|
|
<div style={{
|
|
background: 'var(--card)',
|
|
padding: '40px',
|
|
borderRadius: '12px',
|
|
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
|
|
maxWidth: '400px',
|
|
width: '100%'
|
|
}}>
|
|
<h1 style={{ marginBottom: '24px', textAlign: 'center' }}>Admin Login</h1>
|
|
<form onSubmit={handleSubmit}>
|
|
<div style={{ marginBottom: '20px' }}>
|
|
<label htmlFor="password" style={{ display: 'block', marginBottom: '8px' }}>
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
style={{
|
|
width: '100%',
|
|
padding: '12px',
|
|
borderRadius: '8px',
|
|
border: '1px solid var(--border)',
|
|
background: 'var(--bg-soft)',
|
|
color: 'var(--text)',
|
|
fontSize: '16px'
|
|
}}
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<div style={{
|
|
padding: '12px',
|
|
background: '#fee2e2',
|
|
color: '#dc2626',
|
|
borderRadius: '8px',
|
|
marginBottom: '20px',
|
|
fontSize: '14px'
|
|
}}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="cta"
|
|
style={{ width: '100%' }}
|
|
>
|
|
{loading ? 'Logging in...' : 'Login'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|