working on some code
This commit is contained in:
Warp Agent
376
frontend/src/pages/Profile.tsx
Normal file
376
frontend/src/pages/Profile.tsx
Normal file
@@ -0,0 +1,376 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user