210 lines
8.4 KiB
TypeScript
210 lines
8.4 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
import Link from "next/link"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Sparkles, Settings, Eye, EyeOff, AlertCircle } from "lucide-react"
|
||
import HeaderMusicControl from "@/components/header-music-control"
|
||
import IpDisplay from "@/components/ip-display"
|
||
|
||
export default function AdminLoginPage() {
|
||
const router = useRouter()
|
||
const [formData, setFormData] = useState({
|
||
email: "",
|
||
password: ""
|
||
})
|
||
const [showPassword, setShowPassword] = useState(false)
|
||
const [error, setError] = useState("")
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
setLoading(true)
|
||
setError("")
|
||
|
||
try {
|
||
// 模擬登入驗證
|
||
if (formData.email === "admin@panjit.com.tw" && formData.password === "Aa123456") {
|
||
// 登入成功，設置 session 並跳轉到後台
|
||
sessionStorage.setItem("adminLoggedIn", "true")
|
||
router.push("/admin")
|
||
} else {
|
||
setError("帳號或密碼錯誤")
|
||
}
|
||
} catch (error) {
|
||
setError("登入失敗，請稍後再試")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const { name, value } = e.target
|
||
setFormData(prev => ({
|
||
...prev,
|
||
[name]: value
|
||
}))
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex flex-col">
|
||
{/* 星空背景 */}
|
||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-blue-500/5 to-transparent"></div>
|
||
</div>
|
||
|
||
{/* Header */}
|
||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-md sticky top-0 z-[9999] shadow-lg shadow-slate-900/50">
|
||
<div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
|
||
<div className="flex items-center justify-between gap-2">
|
||
{/* Logo 區域 */}
|
||
<Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0 hover:opacity-80 transition-opacity">
|
||
<div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||
<Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
|
||
</div>
|
||
<h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">資訊部．心願星河</h1>
|
||
</Link>
|
||
|
||
{/* 導航區域 */}
|
||
<nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
|
||
{/* IP顯示 */}
|
||
<div className="hidden sm:block">
|
||
<IpDisplay />
|
||
</div>
|
||
|
||
{/* 音樂控制 */}
|
||
<div className="hidden sm:block">
|
||
<HeaderMusicControl />
|
||
</div>
|
||
<div className="sm:hidden">
|
||
<HeaderMusicControl mobileSimplified />
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 主要內容 */}
|
||
<main className="flex-1 flex items-center justify-center py-8 relative z-10">
|
||
<div className="container mx-auto px-3 sm:px-4">
|
||
<div className="max-w-md mx-auto">
|
||
{/* 標題區域 */}
|
||
<div className="text-center mb-8">
|
||
<div className="flex items-center justify-center gap-3 mb-4">
|
||
<Settings className="w-8 h-8 text-cyan-400" />
|
||
<h2 className="text-3xl md:text-4xl font-bold text-white">後台管理登入</h2>
|
||
</div>
|
||
<p className="text-blue-200 text-lg">
|
||
請輸入管理員帳號密碼以進入後台管理系統
|
||
</p>
|
||
</div>
|
||
|
||
{/* 登入表單 */}
|
||
<Card className="bg-slate-800/50 border-slate-600/50 backdrop-blur-sm">
|
||
<CardHeader>
|
||
<CardTitle className="text-white text-center">管理員登入</CardTitle>
|
||
<CardDescription className="text-blue-200 text-center">
|
||
輸入您的管理員憑證
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
{/* 錯誤訊息 */}
|
||
{error && (
|
||
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-center gap-2">
|
||
<AlertCircle className="w-4 h-4 text-red-400 flex-shrink-0" />
|
||
<span className="text-red-300 text-sm">{error}</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 帳號輸入 */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="email" className="text-blue-200">帳號</Label>
|
||
<Input
|
||
id="email"
|
||
name="email"
|
||
type="email"
|
||
value={formData.email}
|
||
onChange={handleInputChange}
|
||
placeholder="請輸入管理員帳號"
|
||
required
|
||
className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-400 focus:border-cyan-400 focus:ring-cyan-400/20"
|
||
/>
|
||
</div>
|
||
|
||
{/* 密碼輸入 */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="password" className="text-blue-200">密碼</Label>
|
||
<div className="relative">
|
||
<Input
|
||
id="password"
|
||
name="password"
|
||
type={showPassword ? "text" : "password"}
|
||
value={formData.password}
|
||
onChange={handleInputChange}
|
||
placeholder="請輸入管理員密碼"
|
||
required
|
||
className="bg-slate-700/50 border-slate-600 text-white placeholder:text-slate-400 focus:border-cyan-400 focus:ring-cyan-400/20 pr-10"
|
||
/>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
|
||
onClick={() => setShowPassword(!showPassword)}
|
||
>
|
||
{showPassword ? (
|
||
<EyeOff className="w-4 h-4 text-slate-400" />
|
||
) : (
|
||
<Eye className="w-4 h-4 text-slate-400" />
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 登入按鈕 */}
|
||
<Button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="w-full bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25"
|
||
>
|
||
{loading ? (
|
||
<>
|
||
<div className="w-4 h-4 mr-2 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||
登入中...
|
||
</>
|
||
) : (
|
||
"登入後台"
|
||
)}
|
||
</Button>
|
||
|
||
{/* 返回首頁 */}
|
||
<div className="text-center">
|
||
<Link
|
||
href="/"
|
||
className="text-blue-300 hover:text-white transition-colors text-sm"
|
||
>
|
||
← 返回首頁
|
||
</Link>
|
||
</div>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 提示資訊 */}
|
||
<div className="mt-6 text-center">
|
||
<p className="text-slate-400 text-sm">
|
||
忘記密碼？請聯繫系統管理員
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|