"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}
)}
)
}