85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import type { UserRole } from '../_types'
|
|
import { formatDate, apiFetch } from '../_api'
|
|
import { UserRoleLookup } from './UserRoleLookup'
|
|
|
|
interface Props {
|
|
userRoles: UserRole[]
|
|
onOpenAssign: () => void
|
|
onRevoke: (userId: string, roleId: string) => void
|
|
setUserRoles: (rows: UserRole[]) => void
|
|
setLoading: (v: boolean) => void
|
|
setError: (msg: string | null) => void
|
|
}
|
|
|
|
export function UsersTab({ userRoles, onOpenAssign, onRevoke, setUserRoles, setLoading, setError }: Props) {
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold">Benutzer-Rollen</h2>
|
|
<button
|
|
onClick={onOpenAssign}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Rolle zuweisen
|
|
</button>
|
|
</div>
|
|
|
|
{/* User ID lookup */}
|
|
<div className="mb-4">
|
|
<UserRoleLookup onLoad={(userId) => {
|
|
setLoading(true)
|
|
apiFetch<UserRole[] | { roles: UserRole[] }>(`user-roles/${userId}`)
|
|
.then(data => setUserRoles(Array.isArray(data) ? data : data.roles || []))
|
|
.catch(e => setError(e instanceof Error ? e.message : 'Fehler'))
|
|
.finally(() => setLoading(false))
|
|
}} />
|
|
</div>
|
|
|
|
<div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 bg-gray-50">
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">User-ID</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Rolle</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Namespace</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Ablauf</th>
|
|
<th className="text-center px-4 py-3 font-medium text-gray-600">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{userRoles.length === 0 ? (
|
|
<tr><td colSpan={5} className="text-center py-8 text-gray-400">Keine Rollen zugewiesen</td></tr>
|
|
) : userRoles.map(ur => (
|
|
<tr key={ur.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="px-4 py-3 font-mono text-xs">{ur.user_id}</td>
|
|
<td className="px-4 py-3">
|
|
<span className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs font-medium">
|
|
{ur.role_name || ur.role_id}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 font-mono text-xs text-gray-500">
|
|
{ur.namespace_id || 'Global'}
|
|
</td>
|
|
<td className="px-4 py-3 text-gray-500">
|
|
{ur.expires_at ? formatDate(ur.expires_at) : 'Unbegrenzt'}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<button
|
|
onClick={() => onRevoke(ur.user_id, ur.role_id)}
|
|
className="text-red-600 hover:text-red-700 text-xs"
|
|
>
|
|
Entziehen
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|