77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8000'
|
|
|
|
export default function LoginPage() {
|
|
const [username, setUsername] = useState('')
|
|
const [password, setPassword] = useState('')
|
|
const [error, setError] = useState('')
|
|
const router = useRouter()
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError('')
|
|
|
|
try {
|
|
const res = await fetch(
|
|
`${API_BASE}/api/v1/admin/login?username=${username}&password=${password}`,
|
|
{ method: 'POST' }
|
|
)
|
|
if (!res.ok) {
|
|
throw new Error('登录失败')
|
|
}
|
|
const data = await res.json()
|
|
localStorage.setItem('admin_token', data.token)
|
|
router.push('/admin')
|
|
} catch {
|
|
setError('用户名或密码错误')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
|
<div className="bg-white p-8 rounded shadow-md w-96">
|
|
<h1 className="text-2xl font-bold mb-6 text-center">管理员登录</h1>
|
|
|
|
{error && (
|
|
<div className="mb-4 p-3 bg-red-50 text-red-600 rounded">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleLogin}>
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium mb-1">用户名</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
className="w-full p-2 border rounded"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<label className="block text-sm font-medium mb-1">密码</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full p-2 border rounded"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
|
>
|
|
登录
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|