diff --git a/app/admin/login/page.tsx b/app/admin/login/page.tsx new file mode 100644 index 0000000..2fe6167 --- /dev/null +++ b/app/admin/login/page.tsx @@ -0,0 +1,209 @@ +"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) => { + const { name, value } = e.target + setFormData(prev => ({ + ...prev, + [name]: value + })) + } + + return ( +
+ {/* 星空背景 */} +
+
+
+ + {/* Header */} +
+
+
+ {/* Logo 區域 */} + +
+ +
+

資訊部.心願星河

+ + + {/* 導航區域 */} + +
+
+
+ + {/* 主要內容 */} +
+
+
+ {/* 標題區域 */} +
+
+ +

後台管理登入

+
+

+ 請輸入管理員帳號密碼以進入後台管理系統 +

+
+ + {/* 登入表單 */} + + + 管理員登入 + + 輸入您的管理員憑證 + + + +
+ {/* 錯誤訊息 */} + {error && ( +
+ + {error} +
+ )} + + {/* 帳號輸入 */} +
+ + +
+ + {/* 密碼輸入 */} +
+ +
+ + +
+
+ + {/* 登入按鈕 */} + + + {/* 返回首頁 */} +
+ + ← 返回首頁 + +
+
+
+
+ + {/* 提示資訊 */} +
+

+ 忘記密碼?請聯繫系統管理員 +

+
+
+
+
+
+ ) +} diff --git a/app/admin/page.tsx b/app/admin/page.tsx index 24fff25..90adbac 100644 --- a/app/admin/page.tsx +++ b/app/admin/page.tsx @@ -2,6 +2,7 @@ import { useState, useEffect } from "react" import Link from "next/link" +import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" @@ -106,6 +107,8 @@ interface AdminStats { } export default function AdminPage() { + const router = useRouter() + const [isAuthenticated, setIsAuthenticated] = useState(false) const [wishes, setWishes] = useState([]) const [filteredWishes, setFilteredWishes] = useState([]) const [stats, setStats] = useState(null) @@ -511,9 +514,32 @@ export default function AdminPage() { setShowImageModal(true) } + // 登出 + const handleLogout = () => { + sessionStorage.removeItem("adminLoggedIn") + router.push("/admin/login") + } + + // 檢查登入狀態 useEffect(() => { - fetchData() - }, []) + const checkAuth = () => { + const loggedIn = sessionStorage.getItem("adminLoggedIn") + if (loggedIn === "true") { + setIsAuthenticated(true) + fetchData() + } else { + router.push("/admin/login") + } + } + + checkAuth() + }, [router]) + + useEffect(() => { + if (isAuthenticated) { + fetchData() + } + }, [isAuthenticated]) useEffect(() => { filterData() @@ -530,6 +556,18 @@ export default function AdminPage() { ) } + // 如果未認證,顯示載入中 + if (!isAuthenticated) { + return ( +
+
+
+

驗證中...

+
+
+ ) + } + return (
{/* 星空背景 */} @@ -542,12 +580,12 @@ export default function AdminPage() {
{/* Logo 區域 */} -
+

資訊部.心願星河

-
+ {/* 導航區域 */}
- {/* 返回按鈕 */} - - - + {/* 登出按鈕 */} +
diff --git a/app/page.tsx b/app/page.tsx index f8b34cc..5d9ebcc 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -120,7 +120,7 @@ export default function HomePage() { 分享困擾 - +