83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import { Lock, User } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { useStore } from "@/lib/store"
|
|
|
|
export default function AdminLoginPage() {
|
|
const router = useRouter()
|
|
const { adminLogin } = useStore()
|
|
const [username, setUsername] = useState("")
|
|
const [password, setPassword] = useState("")
|
|
const [error, setError] = useState("")
|
|
|
|
const handleLogin = () => {
|
|
setError("")
|
|
const success = adminLogin(username, password)
|
|
if (success) {
|
|
router.push("/admin")
|
|
} else {
|
|
setError("用户名或密码错误")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a1628] text-white flex items-center justify-center p-4">
|
|
<div className="w-full max-w-md">
|
|
{/* Logo */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-2xl font-bold text-white mb-2">管理后台</h1>
|
|
<p className="text-gray-500">一场SOUL的创业实验场</p>
|
|
</div>
|
|
|
|
{/* Login form */}
|
|
<div className="bg-[#0f2137] rounded-2xl p-8 border border-gray-700/50">
|
|
<h2 className="text-xl font-semibold text-white mb-6 text-center">管理员登录</h2>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-gray-400 text-sm mb-2">用户名</label>
|
|
<div className="relative">
|
|
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
|
<Input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
placeholder="请输入用户名"
|
|
className="pl-10 bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-gray-400 text-sm mb-2">密码</label>
|
|
<div className="relative">
|
|
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
|
|
<Input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="请输入密码"
|
|
className="pl-10 bg-[#0a1628] border-gray-700 text-white placeholder:text-gray-500"
|
|
onKeyDown={(e) => e.key === "Enter" && handleLogin()}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{error && <p className="text-red-400 text-sm">{error}</p>}
|
|
|
|
<Button onClick={handleLogin} className="w-full bg-[#38bdac] hover:bg-[#2da396] text-white py-5">
|
|
登录
|
|
</Button>
|
|
</div>
|
|
|
|
<p className="text-gray-500 text-xs text-center mt-6">默认账号: admin / key123456</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|