feat(ui): Gäste-Verwaltung UI — SettingsGuests (UI-Backlog Modul 14/16)
- api/guests.ts: useGuests, useInviteGuest, useRevokeGuest (/api/v1/guests) - SettingsGuests.tsx: Admin-Gate (Outbox-Muster), Gästeliste mit Status-Badges (invited/active/disabled), Invite-Modal (RHF+zod), Revoke-ConfirmDialog - Route /settings/guests + Nav-Eintrag in Settings.tsx - i18n de/en: 14 Keys - Vitest 8/8, tsc clean, Build OK
This commit is contained in:
Agent Zero
@@ -52,6 +52,7 @@ export function SettingsPage() {
|
||||
{ to: '/settings/tenants', label: 'Mandanten', icon: '\ud83c\udfe2' },
|
||||
{ to: '/settings/permission-templates', label: 'Berechtigungs-Vorlagen', icon: '\ud83d\udd11' },
|
||||
{ to: '/settings/policies', label: 'ABAC-Richtlinien', icon: '\ud83d\udee1\ufe0f' },
|
||||
{ to: '/settings/guests', label: 'Gäste', icon: '\ud83d\udc64' },
|
||||
];
|
||||
|
||||
const existingPaths = new Set(hardcodedNavItems.map(item => item.to));
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
/**
|
||||
* Guests settings page — admin guest management (UI-Backlog module 14/16).
|
||||
*
|
||||
* Backend: /api/v1/guests (require_admin).
|
||||
* - List guests (role=guest memberships), invite new guests, revoke access.
|
||||
* Guests are regular users with role='guest' who log in via the normal
|
||||
* login flow (password via the standard reset flow).
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { Lock } from 'lucide-react';
|
||||
import { asError } from '@/utils/errorTypes';
|
||||
import {
|
||||
useGuests,
|
||||
useInviteGuest,
|
||||
useRevokeGuest,
|
||||
type Guest,
|
||||
} from '@/api/guests';
|
||||
import { useAuthStore } from '@/store/authStore';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Skeleton } from '@/components/ui/Skeleton';
|
||||
import { Avatar } from '@/components/ui/Avatar';
|
||||
|
||||
const STATUS_VARIANT: Record<string, 'success' | 'warning' | 'danger' | 'secondary'> = {
|
||||
active: 'success',
|
||||
invited: 'warning',
|
||||
disabled: 'danger',
|
||||
};
|
||||
|
||||
const inviteSchema = z.object({
|
||||
name: z.string().min(1, 'required'),
|
||||
email: z.string().min(1, 'required').email('invalidEmail'),
|
||||
});
|
||||
|
||||
type InviteFormData = z.infer<typeof inviteSchema>;
|
||||
|
||||
function statusLabel(status: string): string {
|
||||
const key = STATUS_VARIANT[status] !== undefined ? status : 'unknown';
|
||||
return key;
|
||||
}
|
||||
|
||||
export function SettingsGuestsPage() {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const isAdmin = user?.is_system_admin === true;
|
||||
|
||||
const { data: guests, isLoading } = useGuests(isAdmin);
|
||||
const inviteMutation = useInviteGuest();
|
||||
const revokeMutation = useRevokeGuest();
|
||||
|
||||
const [inviteOpen, setInviteOpen] = useState(false);
|
||||
const [confirmRevoke, setConfirmRevoke] = useState<Guest | null>(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<InviteFormData>({
|
||||
resolver: zodResolver(inviteSchema),
|
||||
defaultValues: { name: '', email: '' },
|
||||
});
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[50vh]" role="alert">
|
||||
<div className="text-center">
|
||||
<Lock className="w-10 h-10 mx-auto text-secondary-400" aria-hidden="true" />
|
||||
<p className="mt-3 text-sm text-secondary-600" data-testid="guests-admin-only">
|
||||
{t('settings.guestsAdminOnly')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const items = guests ?? [];
|
||||
|
||||
const onSubmit = async (data: InviteFormData) => {
|
||||
try {
|
||||
await inviteMutation.mutateAsync({
|
||||
name: data.name.trim(),
|
||||
email: data.email.trim(),
|
||||
});
|
||||
toast.success(t('settings.guestInvited'));
|
||||
reset({ name: '', email: '' });
|
||||
setInviteOpen(false);
|
||||
} catch (err: unknown) {
|
||||
const errObj = asError(err);
|
||||
toast.error(errObj.message || t('common.error'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevoke = async () => {
|
||||
if (!confirmRevoke) return;
|
||||
try {
|
||||
await revokeMutation.mutateAsync(confirmRevoke.id);
|
||||
toast.success(t('settings.guestRevoked'));
|
||||
setConfirmRevoke(null);
|
||||
} catch (err: unknown) {
|
||||
const errObj = asError(err);
|
||||
toast.error(errObj.message || t('common.error'));
|
||||
}
|
||||
};
|
||||
|
||||
const errorMsg = (key: string | undefined) => {
|
||||
if (!key) return undefined;
|
||||
if (key === 'required') return t('validation.required');
|
||||
if (key === 'invalidEmail') return t('validation.email');
|
||||
return key;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto" data-testid="settings-guests-page">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h1 className="text-2xl font-bold text-secondary-900">{t('settings.guests')}</h1>
|
||||
<Button
|
||||
onClick={() => { reset({ name: '', email: '' }); setInviteOpen(true); }}
|
||||
data-testid="invite-guest-btn"
|
||||
>
|
||||
{t('settings.inviteGuest')}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-secondary-500 mb-6">{t('settings.guestsHint')}</p>
|
||||
|
||||
{isLoading ? (
|
||||
<div data-testid="guests-skeleton" className="space-y-3">
|
||||
<Skeleton className="h-16" />
|
||||
<Skeleton className="h-16" />
|
||||
<Skeleton className="h-16" />
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<EmptyState
|
||||
title={t('settings.noGuests')}
|
||||
action={<Button onClick={() => setInviteOpen(true)}>{t('settings.inviteGuest')}</Button>}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{items.map((guest) => (
|
||||
<Card key={guest.id} data-testid={`guest-card-${guest.id}`}>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
<Avatar name={guest.name || guest.email} size="sm" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-secondary-900 truncate">{guest.name}</p>
|
||||
<p className="text-sm text-secondary-500 truncate">{guest.email}</p>
|
||||
</div>
|
||||
<Badge variant={STATUS_VARIANT[guest.status] ?? 'secondary'} dot>
|
||||
{t(`settings.guestStatus_${statusLabel(guest.status)}`)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{guest.status !== 'disabled' && (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => setConfirmRevoke(guest)}
|
||||
data-testid={`revoke-guest-${guest.id}`}
|
||||
aria-label={t('settings.revokeGuest')}
|
||||
>
|
||||
{t('settings.revokeGuest')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Modal open={inviteOpen} onClose={() => setInviteOpen(false)} title={t('settings.inviteGuest')}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4" data-testid="invite-guest-form">
|
||||
<Input
|
||||
label={t('settings.name')}
|
||||
type="text"
|
||||
{...register('name')}
|
||||
error={errorMsg(errors.name?.message)}
|
||||
placeholder={t('settings.name')}
|
||||
data-testid="guest-name"
|
||||
/>
|
||||
<Input
|
||||
label={t('settings.inviteEmail')}
|
||||
type="email"
|
||||
{...register('email')}
|
||||
error={errorMsg(errors.email?.message)}
|
||||
placeholder="gast@firma.de"
|
||||
data-testid="guest-email"
|
||||
/>
|
||||
<p className="text-xs text-secondary-500">{t('settings.guestPasswordHint')}</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button variant="secondary" onClick={() => setInviteOpen(false)}>{t('common.cancel')}</Button>
|
||||
<Button type="submit" isLoading={isSubmitting} data-testid="send-guest-invite-btn">
|
||||
{t('settings.inviteGuest')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!confirmRevoke}
|
||||
title={t('settings.revokeGuest')}
|
||||
message={`${t('settings.revokeGuestConfirm')}: ${confirmRevoke?.name || confirmRevoke?.email}?`}
|
||||
variant="danger"
|
||||
onConfirm={handleRevoke}
|
||||
onCancel={() => setConfirmRevoke(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user