704 lines
32 KiB
TypeScript
704 lines
32 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
Shield,
|
|
Key,
|
|
Lock,
|
|
Unlock,
|
|
LogOut,
|
|
Plus,
|
|
Trash2,
|
|
RefreshCw,
|
|
User as UserIcon,
|
|
CheckCircle2,
|
|
AlertTriangle,
|
|
FileText,
|
|
Hash,
|
|
} from 'lucide-react';
|
|
import { Modal } from '../ui/Modal';
|
|
import { useToast } from '../ui/Toast';
|
|
import {
|
|
getUser,
|
|
getUserRoles,
|
|
getSystemRoles,
|
|
assignUserRole,
|
|
removeUserRole,
|
|
getUserClaims,
|
|
forceLogoutUser,
|
|
setUserLockout,
|
|
updateUserStatus,
|
|
} from '../../services/api';
|
|
import { clearCachedUserRbac, fetchAndCacheRoleClaims } from '../../services/roleClaimsCache';
|
|
import { HelpTooltip } from '../ui/HelpTooltip';
|
|
import { ObfuscatedIdNumber } from '../ui/ObfuscatedIdNumber';
|
|
import { decodeIdNumberHex } from '../../utils/hashids';
|
|
import { useAuth } from '../../auth/AuthProvider';
|
|
import { User, Role, Claim, ActivityStatus } from '../../types';
|
|
import { formatDate, getActivityStatusBadge, getUserRoleBadge } from '../../lib/formatters';
|
|
import { useRbac, ROLE_CLAIM_DEFINITIONS } from '../../auth/rbac';
|
|
|
|
interface UserSecurityModalProps {
|
|
user: User | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const UserSecurityModal: React.FC<UserSecurityModalProps> = ({
|
|
user,
|
|
isOpen,
|
|
onClose,
|
|
}) => {
|
|
const queryClient = useQueryClient();
|
|
const { success, error: toastError } = useToast();
|
|
const { user: currentAuthUser } = useAuth();
|
|
const { canApprove, canAdd, canView, canAccess, isUnrestricted } = useRbac();
|
|
const hasTenantSelfHelpAccess = canAccess('tenant_self_service') || canView('tenant_self_service');
|
|
|
|
const userId = user?.id || '';
|
|
const isSelf =
|
|
Boolean(currentAuthUser?.id && userId && String(currentAuthUser.id).toLowerCase() === String(userId).toLowerCase()) ||
|
|
Boolean(currentAuthUser?.email && user?.email && currentAuthUser.email.toLowerCase() === user.email.toLowerCase());
|
|
|
|
const canManageRolesAndClaims =
|
|
canApprove('settings_users') ||
|
|
canApprove('tenant_management') ||
|
|
canApprove('tenant_self_service') ||
|
|
isUnrestricted;
|
|
const canManageSessions =
|
|
canApprove('settings_users') ||
|
|
canApprove('tenant_management') ||
|
|
hasTenantSelfHelpAccess ||
|
|
isUnrestricted;
|
|
const canChangeStatus =
|
|
!isSelf &&
|
|
(canAdd('settings_users') ||
|
|
canAdd('tenant_management') ||
|
|
canAdd('tenant_self_service') ||
|
|
canApprove('settings_users') ||
|
|
isUnrestricted);
|
|
|
|
const [activeTab, setActiveTab] = useState<'overview' | 'roles' | 'claims' | 'sessions'>('overview');
|
|
|
|
const [selectedRoleToAdd, setSelectedRoleToAdd] = useState('');
|
|
|
|
// 1. Fetch fresh user details
|
|
const { data: freshUser, isLoading: loadingUser, refetch: refetchUser } = useQuery<User | null>({
|
|
queryKey: ['user-detail', userId],
|
|
queryFn: () => (userId ? getUser(userId) : null),
|
|
enabled: isOpen && !!userId,
|
|
});
|
|
|
|
// 2. Fetch assigned user roles
|
|
const { data: userRoles = [], isLoading: loadingUserRoles, refetch: refetchUserRoles } = useQuery<Role[]>({
|
|
queryKey: ['user-roles', userId],
|
|
queryFn: () => (userId ? getUserRoles(userId) : []),
|
|
enabled: isOpen && !!userId,
|
|
});
|
|
|
|
// 3. Fetch system roles directory
|
|
const { data: systemRoles = [], isLoading: loadingSystemRoles } = useQuery<Role[]>({
|
|
queryKey: ['system-roles'],
|
|
queryFn: getSystemRoles,
|
|
enabled: isOpen,
|
|
});
|
|
|
|
// Effective role derivation for hooks (Single-role policy)
|
|
const rawRoleValue = freshUser?.role || user?.role;
|
|
const userRoleStr = rawRoleValue != null ? String(rawRoleValue).trim() : '';
|
|
|
|
const assignedRole = React.useMemo(() => {
|
|
if (Array.isArray(userRoles) && userRoles.length > 0) {
|
|
return userRoles[0];
|
|
}
|
|
if (userRoleStr && Array.isArray(systemRoles)) {
|
|
const match = systemRoles.find(
|
|
(r) =>
|
|
r &&
|
|
((r.name && r.name.toLowerCase() === userRoleStr.toLowerCase()) ||
|
|
String(r.id) === userRoleStr)
|
|
);
|
|
if (match) return match;
|
|
return { id: userRoleStr, name: userRoleStr } as Role;
|
|
}
|
|
return null;
|
|
}, [userRoles, userRoleStr, systemRoles]);
|
|
|
|
const assignedRoleId = assignedRole?.id || assignedRole?.Id || '';
|
|
const assignedRoleName = assignedRole?.name || assignedRole?.Name || '';
|
|
|
|
// 4. Fetch claims derived from the user's role by hitting the endpoint
|
|
const {
|
|
data: roleClaims = [],
|
|
isLoading: loadingRoleClaims,
|
|
refetch: refetchRoleClaims,
|
|
} = useQuery<Claim[]>({
|
|
queryKey: ['role-claims-detail', assignedRoleId, assignedRoleName],
|
|
queryFn: async () => {
|
|
if (!assignedRoleId && !assignedRoleName) return [];
|
|
return await fetchAndCacheRoleClaims(String(assignedRoleId), assignedRoleName, true);
|
|
},
|
|
enabled: isOpen && (!!assignedRoleId || !!assignedRoleName),
|
|
});
|
|
|
|
// 5. Fetch direct user claims if any
|
|
const {
|
|
data: directClaims = [],
|
|
isLoading: loadingDirectClaims,
|
|
refetch: refetchDirectClaims,
|
|
} = useQuery<Claim[]>({
|
|
queryKey: ['user-direct-claims', userId],
|
|
queryFn: () => (userId ? getUserClaims(userId) : []),
|
|
enabled: isOpen && !!userId,
|
|
});
|
|
|
|
// Combined claims with metadata
|
|
const userEffectiveClaims = React.useMemo(() => {
|
|
const map = new Map<string, Claim & { description?: string; label?: string; source: string }>();
|
|
|
|
// 1. Role claims from endpoint
|
|
if (Array.isArray(roleClaims)) {
|
|
roleClaims.forEach((c) => {
|
|
if (!c) return;
|
|
const type = (c.claimType || c.type || '').trim();
|
|
if (!type) return;
|
|
const def = ROLE_CLAIM_DEFINITIONS.find((d) => d.claim.toLowerCase() === type.toLowerCase());
|
|
map.set(type.toLowerCase(), {
|
|
...c,
|
|
claimType: type,
|
|
claimValue: c.claimValue || c.value || 'all',
|
|
label: def?.label || type,
|
|
description: def?.description || 'Security claim granted via role membership',
|
|
source: assignedRoleName ? `Role: ${assignedRoleName}` : 'Role Policy',
|
|
});
|
|
});
|
|
}
|
|
|
|
// 2. Direct user claims if any
|
|
if (Array.isArray(directClaims)) {
|
|
directClaims.forEach((c) => {
|
|
if (!c) return;
|
|
const type = (c.claimType || c.type || '').trim();
|
|
if (!type) return;
|
|
if (!map.has(type.toLowerCase())) {
|
|
const def = ROLE_CLAIM_DEFINITIONS.find((d) => d.claim.toLowerCase() === type.toLowerCase());
|
|
map.set(type.toLowerCase(), {
|
|
...c,
|
|
claimType: type,
|
|
claimValue: c.claimValue || c.value || 'all',
|
|
label: def?.label || type,
|
|
description: def?.description || 'Direct user account claim',
|
|
source: 'Direct User Claim',
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
return Array.from(map.values());
|
|
}, [roleClaims, directClaims, assignedRoleName]);
|
|
|
|
// Role Mutations (Strictly single-role per user)
|
|
const assignRoleMutation = useMutation({
|
|
mutationFn: (roleId: string) => {
|
|
if ((Array.isArray(userRoles) ? userRoles : []).length >= 1) {
|
|
throw new Error('Single-role policy: This user already has an assigned role. Please remove the existing role before assigning a new one.');
|
|
}
|
|
const selectedRole = (Array.isArray(systemRoles) ? systemRoles : []).find(
|
|
(r) => r && (String(r.id) === String(roleId) || String(r.Id) === String(roleId))
|
|
);
|
|
const roleName = selectedRole?.name || selectedRole?.Name || '';
|
|
if (selectedRole && (roleName.toLowerCase() === 'admin' || String(selectedRole.id) === '1') && hasTenantSelfHelpAccess) {
|
|
throw new Error('Security policy: Users with tenant self-help access cannot assign Admin roles.');
|
|
}
|
|
return assignUserRole(userId, roleId);
|
|
},
|
|
onSuccess: () => {
|
|
clearCachedUserRbac(userId);
|
|
success('Role Assigned', 'Role assigned successfully.');
|
|
refetchUserRoles();
|
|
refetchUser();
|
|
refetchRoleClaims();
|
|
queryClient.invalidateQueries({ queryKey: ['users'] });
|
|
setSelectedRoleToAdd('');
|
|
},
|
|
onError: (err: unknown) => toastError('Role Assignment Failed', err),
|
|
});
|
|
|
|
const removeRoleMutation = useMutation({
|
|
mutationFn: (roleId: string) => removeUserRole(userId, roleId),
|
|
onSuccess: () => {
|
|
clearCachedUserRbac(userId);
|
|
success('Role Removed', 'Role revoked from user.');
|
|
refetchUserRoles();
|
|
refetchUser();
|
|
refetchRoleClaims();
|
|
queryClient.invalidateQueries({ queryKey: ['users'] });
|
|
},
|
|
onError: (err: unknown) => toastError('Role Removal Failed', err),
|
|
});
|
|
|
|
// Session & Lockout Mutations
|
|
const logoutMutation = useMutation({
|
|
mutationFn: () => forceLogoutUser(userId),
|
|
onSuccess: () => success('Session Terminated', 'Target user session revoked. Re-authentication required.'),
|
|
onError: (err: unknown) => toastError('Logout Failed', err),
|
|
});
|
|
|
|
const lockUserMutation = useMutation({
|
|
mutationFn: () => setUserLockout(userId, true),
|
|
onSuccess: () => {
|
|
success('Account Locked', 'User account lockout enabled (disable = true).');
|
|
refetchUser();
|
|
queryClient.invalidateQueries({ queryKey: ['users'] });
|
|
queryClient.invalidateQueries({ queryKey: ['user-detail', userId] });
|
|
},
|
|
onError: (err: unknown) => toastError('Lock User Failed', err),
|
|
});
|
|
|
|
const unlockUserMutation = useMutation({
|
|
mutationFn: () => setUserLockout(userId, false),
|
|
onSuccess: () => {
|
|
success('Account Unlocked', 'User account lockout disabled (disable = false).');
|
|
refetchUser();
|
|
queryClient.invalidateQueries({ queryKey: ['users'] });
|
|
queryClient.invalidateQueries({ queryKey: ['user-detail', userId] });
|
|
},
|
|
onError: (err: unknown) => toastError('Unlock User Failed', err),
|
|
});
|
|
|
|
const statusMutation = useMutation({
|
|
mutationFn: (newStatus: ActivityStatus) => {
|
|
if (isSelf) {
|
|
throw new Error('Maker-Checker Violation: You cannot alter your own account activity status.');
|
|
}
|
|
return updateUserStatus(userId, newStatus);
|
|
},
|
|
onSuccess: () => {
|
|
success('Status Updated', 'User activity status changed.');
|
|
refetchUser();
|
|
queryClient.invalidateQueries({ queryKey: ['users'] });
|
|
},
|
|
onError: (err: unknown) => toastError('Status Update Failed', err),
|
|
});
|
|
|
|
const availableRoles = React.useMemo(() => {
|
|
return (Array.isArray(systemRoles) ? systemRoles : []).filter((r) => {
|
|
if (!r) return false;
|
|
const rId = r.id || r.Id;
|
|
const rName = r.name || r.Name || '';
|
|
if (hasTenantSelfHelpAccess && (rName.toLowerCase() === 'admin' || String(rId) === '1')) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
}, [systemRoles, hasTenantSelfHelpAccess]);
|
|
|
|
if (!isOpen || !user) return null;
|
|
|
|
const effectiveUser: User = freshUser || user;
|
|
const decodedId = effectiveUser.idNumber ? decodeIdNumberHex(effectiveUser.idNumber) : null;
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title={`User Security: ${effectiveUser.email || effectiveUser.id}`}
|
|
subtitle="Manage account status, role assignment, permissions, and active sessions."
|
|
>
|
|
<div className="space-y-4 text-xs">
|
|
{/* Navigation Tabs */}
|
|
<div className="flex gap-1.5 border-b border-slate-800 pb-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('overview')}
|
|
className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer ${
|
|
activeTab === 'overview'
|
|
? 'bg-blue-600 text-white font-semibold'
|
|
: 'text-slate-400 hover:text-white hover:bg-slate-800'
|
|
}`}
|
|
>
|
|
Profile & Status
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('roles')}
|
|
className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
|
|
activeTab === 'roles'
|
|
? 'bg-blue-600 text-white font-semibold'
|
|
: 'text-slate-400 hover:text-white hover:bg-slate-800'
|
|
}`}
|
|
>
|
|
<Shield className="w-3.5 h-3.5" />
|
|
<span>Role ({(Array.isArray(userRoles) ? userRoles : []).length})</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('claims')}
|
|
className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
|
|
activeTab === 'claims'
|
|
? 'bg-blue-600 text-white font-semibold'
|
|
: 'text-slate-400 hover:text-white hover:bg-slate-800'
|
|
}`}
|
|
>
|
|
<Key className="w-3.5 h-3.5" />
|
|
<span>Claims ({userEffectiveClaims.length})</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveTab('sessions')}
|
|
className={`px-3 py-1.5 rounded-lg font-medium transition cursor-pointer flex items-center gap-1.5 ${
|
|
activeTab === 'sessions'
|
|
? 'bg-blue-600 text-white font-semibold'
|
|
: 'text-slate-400 hover:text-white hover:bg-slate-800'
|
|
}`}
|
|
>
|
|
<Lock className="w-3.5 h-3.5" />
|
|
<span>Security & Sessions</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* TAB 1: Overview & Profile */}
|
|
{activeTab === 'overview' && (
|
|
<div className="space-y-3">
|
|
<div className="p-4 bg-slate-900/60 rounded-xl border border-slate-800 space-y-2.5">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<span className="text-slate-400 font-semibold block text-[11px] uppercase">Email:</span>
|
|
<span className="text-white font-medium">{effectiveUser.email || '—'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-400 font-semibold block text-[11px] uppercase">User UUID:</span>
|
|
<span className="font-mono text-slate-300 text-[11px] break-all">{effectiveUser.id}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3 border-t border-slate-800/80 pt-2">
|
|
<div>
|
|
<span className="text-slate-400 font-semibold block text-[11px] uppercase">Id Number:</span>
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|
<ObfuscatedIdNumber idNumber={effectiveUser.idNumber} />
|
|
{decodedId && decodedId !== effectiveUser.idNumber && (
|
|
<div className="flex items-center gap-1 text-[10px] text-blue-400 font-mono">
|
|
<span>(Decoded:</span>
|
|
<ObfuscatedIdNumber idNumber={decodedId} />
|
|
<span>)</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-slate-400 font-semibold block text-[11px] uppercase">Last Login:</span>
|
|
<span className="font-mono text-slate-300">
|
|
{effectiveUser.lastLoginAt ? formatDate(effectiveUser.lastLoginAt) : 'Never'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-slate-800/80 pt-2 flex items-center justify-between">
|
|
<div>
|
|
<span className="text-slate-400 font-semibold block text-[11px] uppercase mb-0.5">
|
|
Account Status:
|
|
</span>
|
|
<span
|
|
className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border ${
|
|
(getActivityStatusBadge(effectiveUser?.status) || {}).className || 'bg-slate-800 text-slate-300'
|
|
}`}
|
|
>
|
|
{(getActivityStatusBadge(effectiveUser?.status) || {}).label || 'Active'}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{isSelf ? (
|
|
<span
|
|
className="px-2.5 py-1 text-[11px] font-semibold text-slate-400 bg-slate-900 border border-slate-800 rounded-lg"
|
|
title="Maker-Checker policy: Administrators cannot change their own account activity status"
|
|
>
|
|
Self-Account (Protected)
|
|
</span>
|
|
) : effectiveUser?.status === ActivityStatus.Active ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => statusMutation.mutate(ActivityStatus.Inactive)}
|
|
disabled={statusMutation.isPending || !canChangeStatus}
|
|
className="px-2.5 py-1 text-xs font-semibold text-amber-400 bg-amber-500/10 hover:bg-amber-500/20 border border-amber-500/20 rounded-lg transition disabled:opacity-50 cursor-pointer"
|
|
>
|
|
Suspend User
|
|
</button>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={() => statusMutation.mutate(ActivityStatus.Active)}
|
|
disabled={statusMutation.isPending || !canChangeStatus}
|
|
className="px-2.5 py-1 text-xs font-semibold text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 rounded-lg transition disabled:opacity-50 cursor-pointer"
|
|
>
|
|
Activate User
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB 2: Roles (Single-Role Policy) */}
|
|
{activeTab === 'roles' && (
|
|
<div className="space-y-3">
|
|
{/* If user already has a role, enforce single-role policy */}
|
|
{(Array.isArray(userRoles) ? userRoles : []).length > 0 ? (
|
|
<div className="p-3 bg-slate-900/80 rounded-xl border border-slate-800 flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<Shield className="w-4 h-4 text-blue-400 shrink-0" />
|
|
<div className="min-w-0">
|
|
<span className="font-semibold text-white block">Active Assigned Role (1 of 1 Max)</span>
|
|
<p className="text-[11px] text-slate-400">
|
|
The system strictly enforces one role per user. To assign a different role, remove the current role first.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span className="text-[10px] font-mono text-emerald-400 bg-emerald-500/10 border border-emerald-500/25 px-2 py-0.5 rounded-full shrink-0 font-semibold">
|
|
Role Assigned
|
|
</span>
|
|
</div>
|
|
) : (
|
|
/* Add Role selector when user has no role */
|
|
<div className="space-y-1.5">
|
|
<label className="block text-[11px] font-semibold uppercase tracking-wider text-slate-400">
|
|
Assign System Role (1 Role Max)
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
<select
|
|
value={selectedRoleToAdd}
|
|
onChange={(e) => setSelectedRoleToAdd(e.target.value)}
|
|
disabled={loadingSystemRoles || availableRoles.length === 0 || !canManageRolesAndClaims || assignRoleMutation.isPending}
|
|
className="flex-1 bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-white focus:outline-none focus:border-blue-500 disabled:opacity-50 text-xs"
|
|
>
|
|
<option value="">
|
|
{availableRoles.length === 0 ? 'No available roles' : 'Select role to assign...'}
|
|
</option>
|
|
{availableRoles.map((r) => {
|
|
const roleOptId = r?.id || r?.Id || String(r);
|
|
const roleOptName = r?.name || r?.Name || String(r);
|
|
return (
|
|
<option key={roleOptId} value={roleOptId}>
|
|
{roleOptName}
|
|
</option>
|
|
);
|
|
})}
|
|
</select>
|
|
<button
|
|
type="button"
|
|
onClick={() => selectedRoleToAdd && assignRoleMutation.mutate(selectedRoleToAdd)}
|
|
disabled={!selectedRoleToAdd || assignRoleMutation.isPending || !canManageRolesAndClaims}
|
|
className="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-semibold transition disabled:opacity-50 cursor-pointer shrink-0 text-xs shadow-md shadow-blue-600/20"
|
|
>
|
|
<Plus className="w-3.5 h-3.5" />
|
|
<span>{assignRoleMutation.isPending ? 'Assigning...' : 'Assign Role'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* List of currently assigned roles */}
|
|
<div className="bg-slate-900/60 rounded-xl border border-slate-800 divide-y divide-slate-800/80">
|
|
{loadingUserRoles ? (
|
|
<div className="p-6 text-center text-slate-400 flex flex-col items-center gap-2">
|
|
<RefreshCw className="w-5 h-5 animate-spin text-blue-400" />
|
|
<span>Loading assigned role...</span>
|
|
</div>
|
|
) : (Array.isArray(userRoles) ? userRoles : []).length === 0 ? (
|
|
<div className="p-6 text-center text-slate-500 flex flex-col items-center gap-2">
|
|
<Shield className="w-7 h-7 text-slate-600 mb-0.5" />
|
|
<p className="font-semibold text-slate-300">No role assigned to this user.</p>
|
|
<p className="text-[11px] text-slate-500">Select a role above to assign it. Users must have exactly one role.</p>
|
|
</div>
|
|
) : (
|
|
(Array.isArray(userRoles) ? userRoles : []).map((role) => {
|
|
if (!role) return null;
|
|
const roleId = role.id || role.Id || String(role);
|
|
const roleName = role.name || role.Name || String(role);
|
|
return (
|
|
<div key={roleId} className="p-3.5 flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="text-white font-semibold flex items-center gap-2">
|
|
<Shield className="w-4 h-4 text-blue-400 shrink-0" />
|
|
<span className="text-sm">{roleName}</span>
|
|
<span className="text-[10px] text-blue-400 bg-blue-500/10 border border-blue-500/20 px-2 py-0.5 rounded font-mono font-medium">
|
|
Active
|
|
</span>
|
|
</div>
|
|
<div className="text-[10px] text-slate-400 font-mono mt-1">Role ID: {roleId}</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeRoleMutation.mutate(roleId)}
|
|
disabled={removeRoleMutation.isPending || !canManageRolesAndClaims}
|
|
className="p-2 text-rose-400 hover:text-white hover:bg-rose-500/20 border border-transparent hover:border-rose-500/30 rounded-xl transition disabled:opacity-50 cursor-pointer shrink-0"
|
|
title="Remove Role"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB 3: Claims (Read-Only Inherited from Role) */}
|
|
{activeTab === 'claims' && (
|
|
<div className="space-y-3">
|
|
{/* Informational Policy Banner */}
|
|
<div className="p-3 bg-blue-500/10 rounded-xl border border-blue-500/20 text-xs flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2.5 min-w-0">
|
|
<CheckCircle2 className="w-4 h-4 text-blue-400 shrink-0" />
|
|
<div className="min-w-0">
|
|
<span className="font-semibold text-white block">Role-Derived Security Claims</span>
|
|
<p className="text-[11px] text-slate-400">
|
|
{assignedRoleName ? (
|
|
<>Claims are inherited directly from the assigned role (<strong className="text-blue-300">{assignedRoleName}</strong>). They cannot be manually added or removed at the individual user level.</>
|
|
) : (
|
|
<>Assign a role on the Roles tab to grant security claims to this user.</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span className="text-[10px] font-mono text-blue-400 bg-blue-500/20 px-2 py-0.5 rounded border border-blue-500/30 shrink-0 font-semibold">
|
|
Read-Only
|
|
</span>
|
|
</div>
|
|
|
|
{/* Claims list */}
|
|
<div className="bg-slate-900/60 rounded-xl border border-slate-800 divide-y divide-slate-800/80">
|
|
{loadingRoleClaims || loadingDirectClaims ? (
|
|
<div className="p-8 text-center text-slate-400 flex flex-col items-center gap-2">
|
|
<RefreshCw className="w-6 h-6 animate-spin text-blue-400" />
|
|
<span>Loading security claims from role endpoint...</span>
|
|
</div>
|
|
) : userEffectiveClaims.length === 0 ? (
|
|
<div className="p-8 text-center text-slate-500 flex flex-col items-center gap-2">
|
|
<Key className="w-8 h-8 text-slate-600 mb-1" />
|
|
<p className="font-semibold text-slate-300">No active claims found for user.</p>
|
|
<p className="text-[11px] text-slate-500 max-w-sm">
|
|
{assignedRoleName
|
|
? `The assigned role (${assignedRoleName}) does not contain any configured permission claims.`
|
|
: 'Assign a role to this user on the Roles tab to establish functional permissions.'}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
userEffectiveClaims.map((claim, idx) => {
|
|
const claimType = claim.claimType || claim.type || 'Custom Claim';
|
|
const claimVal = claim.claimValue ?? claim.value ?? 'all';
|
|
return (
|
|
<div key={idx} className="p-3.5 flex items-center justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-white font-medium flex items-center gap-2 flex-wrap">
|
|
<Key className="w-3.5 h-3.5 text-amber-400 shrink-0" />
|
|
<span className="font-semibold text-xs text-white">{claim.label || claimType}</span>
|
|
<span className="text-[10px] font-mono text-slate-400 bg-slate-800 px-1.5 py-0.2 rounded border border-slate-700/60">
|
|
{claimType}
|
|
</span>
|
|
</div>
|
|
{claim.description && (
|
|
<p className="text-[11px] text-slate-400 mt-0.5 leading-relaxed">
|
|
{claim.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-mono">
|
|
Value: {claimVal}
|
|
</span>
|
|
<span className="text-[10px] text-slate-500 hidden sm:inline">
|
|
{claim.source}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* TAB 4: Sessions & Security Interventions */}
|
|
{activeTab === 'sessions' && (
|
|
<div className="space-y-3">
|
|
<div className="p-4 bg-slate-900/60 rounded-xl border border-slate-800 space-y-4">
|
|
{/* Force Logout Action */}
|
|
<div className="flex items-center justify-between border-b border-slate-800/80 pb-3 gap-3">
|
|
<div>
|
|
<h4 className="text-white font-semibold flex items-center gap-1.5">
|
|
<LogOut className="w-4 h-4 text-amber-400" />
|
|
<span>Revoke Active User Session</span>
|
|
</h4>
|
|
<p className="text-[11px] text-slate-400 mt-0.5">
|
|
Immediately invalidates active JWT tokens and logs the user out.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => logoutMutation.mutate()}
|
|
disabled={logoutMutation.isPending || !canManageSessions}
|
|
className="px-3 py-1.5 bg-amber-500/10 hover:bg-amber-500/20 text-amber-400 border border-amber-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50 shrink-0"
|
|
>
|
|
{logoutMutation.isPending ? 'Revoking...' : 'Force Logout'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Lock / Unlock Account */}
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h4 className="text-white font-semibold flex items-center gap-1.5">
|
|
<Lock className="w-4 h-4 text-rose-400" />
|
|
<span>Account Lockout</span>
|
|
</h4>
|
|
<p className="text-[11px] text-slate-400 mt-0.5">
|
|
Control tenant login authorization for this account.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
lockUserMutation.mutate();
|
|
}}
|
|
disabled={lockUserMutation.isPending || unlockUserMutation.isPending || !canManageSessions}
|
|
className="px-3 py-1.5 bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50"
|
|
>
|
|
{lockUserMutation.isPending ? 'Locking...' : 'Lock User'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
unlockUserMutation.mutate();
|
|
}}
|
|
disabled={unlockUserMutation.isPending || lockUserMutation.isPending || !canManageSessions}
|
|
className="px-3 py-1.5 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/20 rounded-xl font-semibold transition cursor-pointer disabled:opacity-50"
|
|
>
|
|
{unlockUserMutation.isPending ? 'Unlocking...' : 'Unlock User'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal Footer */}
|
|
<div className="pt-2 border-t border-slate-800 flex justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-xs font-semibold text-white bg-slate-800 hover:bg-slate-700 rounded-xl transition cursor-pointer"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|