97 lines
3.6 KiB
TypeScript
97 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
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 [isLoading, setIsLoading] = useState(false)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem('admin_token')
|
|
if (token) router.replace('/admin')
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setError('')
|
|
setIsLoading(true)
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/v1/admin/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password }),
|
|
})
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => null)
|
|
throw new Error(data?.detail || '登录失败')
|
|
}
|
|
const data = await res.json()
|
|
localStorage.setItem('admin_token', data.token)
|
|
router.replace('/admin')
|
|
} catch (err: any) {
|
|
setError(err?.message || '用户名或密码错误')
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex items-center justify-center px-4">
|
|
<Card className="w-full max-w-md border-muted bg-background/50 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<CardTitle>管理员登录</CardTitle>
|
|
<CardDescription>登录后进入管理后台</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{error && (
|
|
<div className="mb-4 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleLogin} className="space-y-4">
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-medium">用户名</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
placeholder="admin"
|
|
autoComplete="username"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-medium">密码</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
placeholder="••••••••"
|
|
autoComplete="current-password"
|
|
/>
|
|
</div>
|
|
|
|
<Button type="submit" className="w-full" disabled={isLoading}>
|
|
{isLoading ? '登录中...' : '登录'}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|