建立檔案
This commit is contained in:
193
components/auth/profile-dialog.tsx
Normal file
193
components/auth/profile-dialog.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useAuth } from "@/contexts/auth-context"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { CheckCircle, AlertTriangle, Loader2, User, Camera } from "lucide-react"
|
||||
|
||||
interface ProfileDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
|
||||
export function ProfileDialog({ open, onOpenChange }: ProfileDialogProps) {
|
||||
const { user, updateProfile } = useAuth()
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
const [success, setSuccess] = useState("")
|
||||
|
||||
const [profileData, setProfileData] = useState({
|
||||
name: user?.name || "",
|
||||
email: user?.email || "",
|
||||
department: user?.department || "",
|
||||
bio: user?.bio || "",
|
||||
phone: user?.phone || "",
|
||||
location: user?.location || "",
|
||||
})
|
||||
|
||||
const departments = ["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "財務部", "人資部", "法務部"]
|
||||
|
||||
const handleSave = async () => {
|
||||
setError("")
|
||||
setSuccess("")
|
||||
setIsLoading(true)
|
||||
|
||||
try {
|
||||
await updateProfile(profileData)
|
||||
setSuccess("個人資料更新成功！")
|
||||
setTimeout(() => setSuccess(""), 3000)
|
||||
} catch (err) {
|
||||
setError("更新失敗，請稍後再試")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center space-x-2">
|
||||
<User className="w-5 h-5" />
|
||||
<span>個人資料</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>管理您的個人資料和帳號設定</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6">
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<Alert className="border-green-200 bg-green-50">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<AlertDescription className="text-green-800">{success}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="relative">
|
||||
<Avatar className="w-24 h-24">
|
||||
<AvatarImage src={user?.avatar || "/placeholder.svg"} />
|
||||
<AvatarFallback className="text-2xl bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||||
{user?.name?.charAt(0) || "U"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="absolute -bottom-2 -right-2 rounded-full w-8 h-8 p-0 bg-transparent"
|
||||
>
|
||||
<Camera className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold">{user?.name}</h3>
|
||||
<p className="text-gray-600">{user?.email}</p>
|
||||
<Badge variant="outline" className="mt-2">
|
||||
{user?.department}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">姓名</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={profileData.name}
|
||||
onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">電子郵件</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={profileData.email}
|
||||
onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="department">部門</Label>
|
||||
<Select
|
||||
value={profileData.department}
|
||||
onValueChange={(value) => setProfileData({ ...profileData, department: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="選擇部門" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{departments.map((dept) => (
|
||||
<SelectItem key={dept} value={dept}>
|
||||
{dept}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">電話</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
value={profileData.phone}
|
||||
onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })}
|
||||
placeholder="輸入電話號碼"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="location">地點</Label>
|
||||
<Input
|
||||
id="location"
|
||||
value={profileData.location}
|
||||
onChange={(e) => setProfileData({ ...profileData, location: e.target.value })}
|
||||
placeholder="輸入工作地點"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 md:col-span-2">
|
||||
<Label htmlFor="bio">個人簡介</Label>
|
||||
<Input
|
||||
id="bio"
|
||||
value={profileData.bio}
|
||||
onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
|
||||
placeholder="簡單介紹一下自己..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
儲存中...
|
||||
</>
|
||||
) : (
|
||||
"儲存變更"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user