"use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { ProtectedRoute } from "@/components/protected-route" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Alert, AlertDescription } from "@/components/ui/alert" import { Separator } from "@/components/ui/separator" import { User, Lock, ArrowLeft, Save } from "lucide-react" import Link from "next/link" import { useAuth } from "@/lib/hooks/use-auth" export default function SettingsPage() { return ( ) } function SettingsContent() { const { user, logout } = useAuth() const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [message, setMessage] = useState("") const [error, setError] = useState("") // Profile form state const [profileData, setProfileData] = useState({ name: "", email: "", department: "", }) // Password form state const [passwordData, setPasswordData] = useState({ currentPassword: "", newPassword: "", confirmPassword: "", }) const departments = ["人力資源部", "資訊技術部", "財務部", "行銷部", "業務部", "研發部", "客服部", "其他"] useEffect(() => { if (user) { setProfileData({ name: user.name, email: user.email, department: user.department, }) } }, [user]) const handleProfileUpdate = async () => { setError("") setMessage("") setIsLoading(true) try { if (!user) { setError("用戶未登入") return } // 更新個人資料到資料庫 const response = await fetch('/api/user/profile', { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ userId: user.id, name: profileData.name, email: profileData.email, department: profileData.department, }), }) const data = await response.json() if (data.success) { // 更新本地用戶資料 const updatedUser = { ...user, name: profileData.name, email: profileData.email, department: profileData.department, } localStorage.setItem("hr_current_user", JSON.stringify(updatedUser)) setMessage("個人資料已成功更新") // 刷新頁面以更新用戶上下文 setTimeout(() => { window.location.reload() }, 1500) } else { setError(data.error || "更新個人資料失敗") } } catch (err) { console.error('更新個人資料錯誤:', err) setError("更新個人資料時發生錯誤") } finally { setIsLoading(false) } } const handlePasswordChange = async () => { setError("") setMessage("") if (passwordData.newPassword !== passwordData.confirmPassword) { setError("新密碼確認不一致") return } if (passwordData.newPassword.length < 6) { setError("新密碼長度至少需要6個字元") return } setIsLoading(true) try { if (!user) { setError("用戶未登入") return } // 更新密碼到資料庫 const response = await fetch('/api/user/profile', { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ userId: user.id, currentPassword: passwordData.currentPassword, newPassword: passwordData.newPassword, }), }) const data = await response.json() if (data.success) { setPasswordData({ currentPassword: "", newPassword: "", confirmPassword: "", }) setMessage("密碼已成功更新") } else { setError(data.error || "密碼更新失敗") } } catch (err) { console.error('密碼更新錯誤:', err) setError("密碼更新時發生錯誤") } finally { setIsLoading(false) } } if (!user) return null return (
{/* Header */}

帳戶設定

管理您的個人資料和帳戶設定

{/* Profile Settings */} 個人資料 更新您的個人資訊
setProfileData({ ...profileData, name: e.target.value })} placeholder="請輸入您的姓名" />
setProfileData({ ...profileData, email: e.target.value })} placeholder="請輸入電子郵件" />
{user.role === "admin" ? "管理員" : "一般用戶"}

角色由管理員設定,無法自行修改

{/* Password Settings */} 密碼設定 更改您的登入密碼
setPasswordData({ ...passwordData, currentPassword: e.target.value })} placeholder="請輸入目前密碼" />
setPasswordData({ ...passwordData, newPassword: e.target.value })} placeholder="請輸入新密碼(至少6個字元)" />
setPasswordData({ ...passwordData, confirmPassword: e.target.value })} placeholder="請再次輸入新密碼" />
{/* Account Info */} 帳戶資訊 您的帳戶詳細資訊
用戶ID: {user.id}
建立時間: {new Date(user.createdAt).toLocaleDateString()}

登出帳戶

結束目前的登入狀態

{/* Messages */} {message && ( {message} )} {error && ( {error} )}
) }