377 lines
15 KiB
TypeScript
377 lines
15 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useParams, useNavigate } from 'react-router-dom'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import { useAuthStore } from '@/store/auth'
|
|
import { iamApi, type User, type UpdateUserRequest } from '@/api/iam'
|
|
import { Button } from '@/components/ui/button'
|
|
import { ArrowLeft, Save, Mail, User as UserIcon, Shield, Calendar, Clock, Edit2, X } from 'lucide-react'
|
|
|
|
export default function Profile() {
|
|
const { id } = useParams<{ id?: string }>()
|
|
const navigate = useNavigate()
|
|
const { user: currentUser } = useAuthStore()
|
|
const queryClient = useQueryClient()
|
|
const [isEditing, setIsEditing] = useState(false)
|
|
const [editForm, setEditForm] = useState({
|
|
email: '',
|
|
full_name: '',
|
|
})
|
|
|
|
// Determine which user to show
|
|
const targetUserId = id || currentUser?.id
|
|
|
|
// Check permission: only allow if viewing own profile or user is admin
|
|
const canView = !!currentUser && !!targetUserId && (
|
|
targetUserId === currentUser.id ||
|
|
currentUser.roles.includes('admin')
|
|
)
|
|
|
|
const { data: profileUser, isLoading } = useQuery<User>({
|
|
queryKey: ['iam-user', targetUserId],
|
|
queryFn: () => iamApi.getUser(targetUserId!),
|
|
enabled: canView,
|
|
})
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: (data: UpdateUserRequest) => iamApi.updateUser(targetUserId!, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['iam-user', targetUserId] })
|
|
queryClient.invalidateQueries({ queryKey: ['iam-users'] })
|
|
setIsEditing(false)
|
|
// If updating own profile, refresh auth store
|
|
if (targetUserId === currentUser?.id) {
|
|
queryClient.invalidateQueries({ queryKey: ['auth-me'] })
|
|
}
|
|
},
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (profileUser) {
|
|
setEditForm({
|
|
email: profileUser.email || '',
|
|
full_name: profileUser.full_name || '',
|
|
})
|
|
}
|
|
}, [profileUser])
|
|
|
|
if (!canView) {
|
|
return (
|
|
<div className="flex-1 overflow-y-auto p-8">
|
|
<div className="max-w-[1200px] mx-auto">
|
|
<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-6 text-center">
|
|
<p className="text-red-400 font-semibold">Access Denied</p>
|
|
<p className="text-text-secondary text-sm mt-2">
|
|
You don't have permission to view this profile.
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => navigate(-1)}
|
|
className="mt-4"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Go Back
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex-1 overflow-y-auto p-8">
|
|
<div className="max-w-[1200px] mx-auto">
|
|
<p className="text-text-secondary">Loading profile...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!profileUser) {
|
|
return (
|
|
<div className="flex-1 overflow-y-auto p-8">
|
|
<div className="max-w-[1200px] mx-auto">
|
|
<div className="bg-card-dark border border-border-dark rounded-lg p-6 text-center">
|
|
<p className="text-text-secondary">User not found</p>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => navigate(-1)}
|
|
className="mt-4"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Go Back
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const isOwnProfile = targetUserId === currentUser?.id
|
|
const canEdit = isOwnProfile || currentUser?.roles.includes('admin')
|
|
|
|
const handleSave = () => {
|
|
updateMutation.mutate({
|
|
email: editForm.email,
|
|
full_name: editForm.full_name,
|
|
})
|
|
}
|
|
|
|
const formatDate = (dateString: string) => {
|
|
return new Date(dateString).toLocaleString()
|
|
}
|
|
|
|
const formatLastLogin = (lastLoginAt: string | null) => {
|
|
if (!lastLoginAt) return 'Never'
|
|
return formatDate(lastLoginAt)
|
|
}
|
|
|
|
const getAvatarInitials = () => {
|
|
if (profileUser?.full_name) {
|
|
return profileUser.full_name
|
|
.split(' ')
|
|
.map((n: string) => n[0])
|
|
.join('')
|
|
.substring(0, 2)
|
|
.toUpperCase()
|
|
}
|
|
return profileUser?.username?.substring(0, 2).toUpperCase() || 'U'
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 overflow-y-auto p-8">
|
|
<div className="max-w-[1200px] mx-auto flex flex-col gap-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => navigate(-1)}
|
|
className="text-text-secondary hover:text-white"
|
|
>
|
|
<ArrowLeft className="h-4 w-4 mr-2" />
|
|
Back
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-3xl font-black text-white leading-tight">User Profile</h1>
|
|
<p className="text-text-secondary text-sm mt-1">
|
|
{isOwnProfile ? 'Your profile information' : `Viewing profile for ${profileUser.username}`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{canEdit && (
|
|
<div className="flex gap-2">
|
|
{isEditing ? (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setIsEditing(false)
|
|
setEditForm({
|
|
email: profileUser.email || '',
|
|
full_name: profileUser.full_name || '',
|
|
})
|
|
}}
|
|
>
|
|
<X className="h-4 w-4 mr-2" />
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={updateMutation.isPending}
|
|
>
|
|
<Save className="h-4 w-4 mr-2" />
|
|
{updateMutation.isPending ? 'Saving...' : 'Save Changes'}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button onClick={() => setIsEditing(true)}>
|
|
<Edit2 className="h-4 w-4 mr-2" />
|
|
Edit Profile
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Profile Card */}
|
|
<div className="bg-card-dark border border-border-dark rounded-xl overflow-hidden">
|
|
{/* Profile Header */}
|
|
<div className="bg-gradient-to-r from-primary/20 to-blue-600/20 p-8 border-b border-border-dark">
|
|
<div className="flex items-center gap-6">
|
|
<div className="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-3xl font-bold">
|
|
{getAvatarInitials()}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h2 className="text-2xl font-bold text-white">
|
|
{profileUser.full_name || profileUser.username}
|
|
</h2>
|
|
<p className="text-text-secondary mt-1">@{profileUser.username}</p>
|
|
<div className="flex items-center gap-4 mt-3">
|
|
<div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold ${
|
|
profileUser.is_active
|
|
? 'bg-green-500/10 text-green-400 border border-green-500/20'
|
|
: 'bg-red-500/10 text-red-400 border border-red-500/20'
|
|
}`}>
|
|
<span className={`w-2 h-2 rounded-full ${profileUser.is_active ? 'bg-green-400' : 'bg-red-400'}`}></span>
|
|
{profileUser.is_active ? 'Active' : 'Inactive'}
|
|
</div>
|
|
{profileUser.is_system && (
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
|
<Shield size={12} />
|
|
System User
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Profile Content */}
|
|
<div className="p-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Basic Information */}
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
|
<UserIcon className="h-5 w-5 text-primary" />
|
|
Basic Information
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
|
|
Username
|
|
</label>
|
|
<div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white font-mono">
|
|
{profileUser.username}
|
|
</div>
|
|
<p className="text-xs text-text-secondary mt-1">Username cannot be changed</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
|
|
Email Address
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="email"
|
|
value={editForm.email}
|
|
onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
|
|
className="w-full bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="email@example.com"
|
|
/>
|
|
) : (
|
|
<div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white flex items-center gap-2">
|
|
<Mail className="h-4 w-4 text-text-secondary" />
|
|
{profileUser.email || '-'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
|
|
Full Name
|
|
</label>
|
|
{isEditing ? (
|
|
<input
|
|
type="text"
|
|
value={editForm.full_name}
|
|
onChange={(e) => setEditForm({ ...editForm, full_name: e.target.value })}
|
|
className="w-full bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
placeholder="Full Name"
|
|
/>
|
|
) : (
|
|
<div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white">
|
|
{profileUser.full_name || '-'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Account Details */}
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
|
|
<Shield className="h-5 w-5 text-primary" />
|
|
Account Details
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
|
|
Roles
|
|
</label>
|
|
<div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3">
|
|
{profileUser.roles && profileUser.roles.length > 0 ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
{profileUser.roles.map((role) => (
|
|
<span
|
|
key={role}
|
|
className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary/10 text-primary text-xs font-medium border border-primary/20"
|
|
>
|
|
<Shield size={12} />
|
|
{role}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span className="text-text-secondary text-sm">No roles assigned</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
|
|
Permissions
|
|
</label>
|
|
<div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3">
|
|
{profileUser.permissions && profileUser.permissions.length > 0 ? (
|
|
<div className="flex flex-wrap gap-2">
|
|
{profileUser.permissions.map((perm) => (
|
|
<span
|
|
key={perm}
|
|
className="inline-flex items-center px-2 py-1 rounded-md bg-slate-700 text-slate-300 text-xs font-medium"
|
|
>
|
|
{perm}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<span className="text-text-secondary text-sm">No permissions assigned</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
|
|
Last Login
|
|
</label>
|
|
<div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white flex items-center gap-2">
|
|
<Clock className="h-4 w-4 text-text-secondary" />
|
|
{formatLastLogin(profileUser.last_login_at)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-text-secondary uppercase tracking-wider mb-2">
|
|
Account Created
|
|
</label>
|
|
<div className="bg-[#0f161d] border border-border-dark rounded-lg px-4 py-3 text-white flex items-center gap-2">
|
|
<Calendar className="h-4 w-4 text-text-secondary" />
|
|
{formatDate(profileUser.created_at)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|