Adds user management

2026-06-22 21:14:22 +02:00
parent 5331be4279
commit 6976eb4337
40 changed files with 3392 additions and 146 deletions
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+    'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    {
+        variants: {
+            variant: {
+                default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+                secondary:
+                    'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+                destructive:
+                    'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+                outline: 'text-foreground',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+        },
+    },
+);
+
+export interface BadgeProps
+    extends React.HTMLAttributes<HTMLDivElement>,
+        VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+    return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            className,
+        )}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <DialogClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogClose>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+        {...props}
+    />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+        {...props}
+    />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+    />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};
@@ -1,7 +1,7 @@
 /* eslint-disable react-refresh/only-export-components */
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check } from 'lucide-react';
+import { Check, ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';

 export const DropdownMenu = DropdownMenuPrimitive.Root;
@@ -64,6 +64,43 @@ export const DropdownMenuSeparator = React.forwardRef<
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;

+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+export const DropdownMenuSubTrigger = React.forwardRef<
+    React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>
+>(({ className, children, ...props }, ref) => (
+    <DropdownMenuPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+            'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+            className,
+        )}
+        {...props}
+    >
+        {children}
+        <ChevronRight className="ml-auto h-4 w-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+export const DropdownMenuSubContent = React.forwardRef<
+    React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+    <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.SubContent
+            ref={ref}
+            className={cn(
+                'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg',
+                className,
+            )}
+            {...props}
+        />
+    </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
 /** A checkable indicator for selected items (e.g. the active language). */
 export function DropdownMenuCheck({ checked }: { checked: boolean }) {
    return <Check className={cn('ml-auto', checked ? 'opacity-100' : 'opacity-0')} />;
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+            className,
+        )}
+        {...props}
+    >
+        {children}
+        <SelectPrimitive.Icon asChild>
+            <ChevronDown className="h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollUpButton
+        ref={ref}
+        className={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...props}
+    >
+        <ChevronUp className="h-4 w-4" />
+    </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollDownButton
+        ref={ref}
+        className={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...props}
+    >
+        <ChevronDown className="h-4 w-4" />
+    </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+    <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+            ref={ref}
+            className={cn(
+                'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                position === 'popper' &&
+                    'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                className,
+            )}
+            position={position}
+            {...props}
+        >
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+                className={cn(
+                    'p-1',
+                    position === 'popper' &&
+                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+                )}
+            >
+                {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Label
+        ref={ref}
+        className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+        {...props}
+    />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+            'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            className,
+        )}
+        {...props}
+    >
+        <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <SelectPrimitive.ItemIndicator>
+                <Check className="h-4 w-4" />
+            </SelectPrimitive.ItemIndicator>
+        </span>
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator
+        ref={ref}
+        className={cn('-mx-1 my-1 h-px bg-muted', className)}
+        {...props}
+    />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparator,
+    SelectScrollUpButton,
+    SelectScrollDownButton,
+};
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+    ({ className, ...props }, ref) => (
+        <div className="relative w-full overflow-auto">
+            <table
+                ref={ref}
+                className={cn('w-full caption-bottom text-sm', className)}
+                {...props}
+            />
+        </div>
+    ),
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tfoot
+        ref={ref}
+        className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+        {...props}
+    />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+    ({ className, ...props }, ref) => (
+        <tr
+            ref={ref}
+            className={cn(
+                'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+                className,
+            )}
+            {...props}
+        />
+    ),
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <th
+        ref={ref}
+        className={cn(
+            'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+            className,
+        )}
+        {...props}
+    />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
+        {...props}
+    />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+    <caption
+        ref={ref}
+        className={cn('mt-4 text-sm text-muted-foreground', className)}
+        {...props}
+    />
+));
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
@@ -0,0 +1,63 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogDescription,
+} from '@/components/ui/dialog';
+import type { UserListItem } from '@/api/types';
+
+interface DeleteUserDialogProps {
+    user: UserListItem | null;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+    isPending: boolean;
+}
+
+export function DeleteUserDialog({
+    user,
+    open,
+    onOpenChange,
+    onConfirm,
+    isPending,
+}: DeleteUserDialogProps) {
+    const { t } = useTranslation();
+    if (!user) return null;
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md" data-testid="delete-user-dialog">
+                <DialogHeader>
+                    <DialogTitle>{t('users.delete.title')}</DialogTitle>
+                    <DialogDescription>
+                        {user.invitationPending
+                            ? t('users.delete.descriptionPending', { email: user.email })
+                            : t('users.delete.description', { name: user.name, email: user.email })}
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="gap-2">
+                    <Button
+                        variant="outline"
+                        onClick={() => onOpenChange(false)}
+                        disabled={isPending}
+                        data-testid="delete-user-cancel"
+                    >
+                        {t('common.cancel')}
+                    </Button>
+                    <Button
+                        variant="destructive"
+                        onClick={onConfirm}
+                        disabled={isPending}
+                        data-testid="delete-user-confirm"
+                    >
+                        {isPending ? '...' : t('users.delete.confirmButton')}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
@@ -0,0 +1,90 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { renderApp, mockAuthenticated } from '@/test/utils';
+import { server } from '@/mocks/server';
+import { API_BASE } from '@/mocks/auth/fixtures';
+import { _resetSetupStatusCache } from '@/router';
+
+beforeEach(() => {
+    _resetSetupStatusCache();
+});
+
+async function openDialog() {
+    mockAuthenticated();
+    renderApp('/users');
+    await screen.findByTestId('users-invite-button', {}, { timeout: 5000 });
+    await userEvent.click(screen.getByTestId('users-invite-button'));
+    expect(screen.getByTestId('invite-dialog-email')).toBeInTheDocument();
+}
+
+describe('InviteUserDialog', () => {
+    it('shows email and role fields on open', async () => {
+        await openDialog();
+        expect(screen.getByTestId('invite-dialog-email')).toBeInTheDocument();
+        expect(screen.getByTestId('invite-dialog-role')).toBeInTheDocument();
+        expect(screen.getByTestId('invite-dialog-submit')).toBeInTheDocument();
+    });
+
+    it('shows validation error when submitting with empty email', async () => {
+        await openDialog();
+        await userEvent.click(screen.getByTestId('invite-dialog-submit'));
+        expect(await screen.findByTestId('invite-email-error')).toBeInTheDocument();
+    });
+
+    it('shows validation error when submitting without selecting a role', async () => {
+        await openDialog();
+        await userEvent.type(screen.getByTestId('invite-dialog-email'), 'new@example.com');
+        await userEvent.click(screen.getByTestId('invite-dialog-submit'));
+        expect(await screen.findByTestId('invite-role-error')).toBeInTheDocument();
+    });
+
+    it('advances to step 2 (invite link) after successful submission', async () => {
+        await openDialog();
+
+        await userEvent.type(screen.getByTestId('invite-dialog-email'), 'new@example.com');
+
+        // Open role dropdown and select "User" (use role=option to avoid ambiguity)
+        await userEvent.click(screen.getByTestId('invite-dialog-role'));
+        const options = await screen.findAllByRole('option');
+        const userOption = options.find((o) => o.textContent === 'User');
+        await userEvent.click(userOption!);
+
+        await userEvent.click(screen.getByTestId('invite-dialog-submit'));
+
+        expect(await screen.findByTestId('invite-dialog-link-input')).toBeInTheDocument();
+        expect(screen.getByTestId('invite-dialog-copy')).toBeInTheDocument();
+    });
+
+    it('shows error banner when API returns 400', async () => {
+        server.use(
+            http.post(`${API_BASE}/api/v1/Users/invite`, () =>
+                HttpResponse.json({ detail: 'User already exists.' }, { status: 400 }),
+            ),
+        );
+        await openDialog();
+
+        await userEvent.type(screen.getByTestId('invite-dialog-email'), 'dup@example.com');
+        await userEvent.click(screen.getByTestId('invite-dialog-role'));
+        const opts = await screen.findAllByRole('option');
+        const userOpt = opts.find((o) => o.textContent === 'User');
+        await userEvent.click(userOpt!);
+        await userEvent.click(screen.getByTestId('invite-dialog-submit'));
+
+        expect(await screen.findByTestId('form-error-banner')).toBeInTheDocument();
+    });
+
+    it('resets to step 1 when dialog is closed and reopened', async () => {
+        await openDialog();
+        await userEvent.type(screen.getByTestId('invite-dialog-email'), 'test@example.com');
+
+        // Close the dialog by pressing Escape
+        await userEvent.keyboard('{Escape}');
+
+        // Reopen
+        await userEvent.click(screen.getByTestId('users-invite-button'));
+        const emailInput = screen.getByTestId('invite-dialog-email') as HTMLInputElement;
+        expect(emailInput.value).toBe('');
+    });
+});
@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { FormErrorBanner } from '@/components/ui/FormErrorBanner';
+import { FieldError } from '@/components/ui/FieldError';
+import { useInviteUser } from '@/api/useUsers';
+
+const inviteSchema = z.object({
+    email: z.string().email(),
+    role: z.enum(['Administrator', 'User']),
+});
+type InviteFormData = z.infer<typeof inviteSchema>;
+
+interface InviteUserDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export function InviteUserDialog({ open, onOpenChange }: InviteUserDialogProps) {
+    const { t } = useTranslation();
+    const [step, setStep] = useState<1 | 2>(1);
+    const [inviteLink, setInviteLink] = useState<string | null>(null);
+    const inviteUser = useInviteUser();
+
+    useEffect(() => {
+        if (!open) {
+            setStep(1);
+            setInviteLink(null);
+            inviteUser.reset();
+            reset();
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+
+    const {
+        register,
+        handleSubmit,
+        setValue,
+        reset,
+        formState: { errors, isSubmitting },
+    } = useForm<InviteFormData>({
+        resolver: zodResolver(inviteSchema),
+    });
+
+    const onSubmit = handleSubmit(async (values) => {
+        try {
+            const response = await inviteUser.mutateAsync(values);
+            setInviteLink(response.inviteLink);
+            setStep(2);
+        } catch {
+            // error shown via inviteUser.error
+        }
+    });
+
+    const handleCopy = async () => {
+        if (!inviteLink) return;
+        await navigator.clipboard.writeText(`${window.location.origin}${inviteLink}`);
+        toast.success(t('users.actions.linkCopied'));
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>
+                        {step === 1 ? t('users.invite.title') : t('users.invite.step2Title')}
+                    </DialogTitle>
+                </DialogHeader>
+
+                {step === 1 && (
+                    <form onSubmit={onSubmit} noValidate className="space-y-4">
+                        <FormErrorBanner
+                            error={inviteUser.error ? { message: inviteUser.error.message } : null}
+                            onDismiss={() => inviteUser.reset()}
+                        />
+
+                        <div className="space-y-2">
+                            <Label htmlFor="invite-email">{t('users.invite.emailLabel')}</Label>
+                            <Input
+                                id="invite-email"
+                                type="email"
+                                placeholder="user@example.com"
+                                data-testid="invite-dialog-email"
+                                aria-invalid={errors.email !== undefined}
+                                {...register('email')}
+                            />
+                            {errors.email && (
+                                <FieldError message={errors.email.message} testId="invite-email-error" />
+                            )}
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="invite-role">{t('users.invite.roleLabel')}</Label>
+                            <Select
+                                onValueChange={(val) =>
+                                    setValue('role', val as 'Administrator' | 'User', {
+                                        shouldValidate: true,
+                                    })
+                                }
+                            >
+                                <SelectTrigger
+                                    id="invite-role"
+                                    data-testid="invite-dialog-role"
+                                    aria-invalid={errors.role !== undefined}
+                                >
+                                    <SelectValue placeholder={t('users.invite.rolePlaceholder')} />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="Administrator">
+                                        {t('users.roles.Administrator')}
+                                    </SelectItem>
+                                    <SelectItem value="User">{t('users.roles.User')}</SelectItem>
+                                </SelectContent>
+                            </Select>
+                            {errors.role && (
+                                <FieldError message={errors.role.message} testId="invite-role-error" />
+                            )}
+                        </div>
+
+                        <Button
+                            type="submit"
+                            className="w-full"
+                            disabled={isSubmitting || inviteUser.isPending}
+                            data-testid="invite-dialog-submit"
+                        >
+                            {isSubmitting || inviteUser.isPending
+                                ? '...'
+                                : t('users.invite.submitButton')}
+                        </Button>
+                    </form>
+                )}
+
+                {step === 2 && (
+                    <div className="space-y-4">
+                        <p className="text-sm text-muted-foreground">
+                            {t('users.invite.step2Description')}
+                        </p>
+                        <div className="space-y-2">
+                            <Label>{t('users.invite.linkLabel')}</Label>
+                            <Input
+                                value={`${window.location.origin}${inviteLink ?? ''}`}
+                                readOnly
+                                data-testid="invite-dialog-link-input"
+                            />
+                        </div>
+                        <div className="flex gap-2">
+                            <Button
+                                variant="outline"
+                                className="flex-1"
+                                onClick={handleCopy}
+                                data-testid="invite-dialog-copy"
+                            >
+                                {t('users.invite.copyLink')}
+                            </Button>
+                            <Button
+                                className="flex-1"
+                                onClick={() => onOpenChange(false)}
+                                data-testid="invite-dialog-close"
+                            >
+                                {t('users.invite.close')}
+                            </Button>
+                        </div>
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+    );
+}