Adds frontend for cms page

frontend/src/components/users/InviteUserDialog.tsx

@@ -1,7 +1,6 @@
 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';
@@ -23,12 +22,8 @@ import {
 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>;
+import { inviteUserSchema, type InviteUserFormData } from '@/lib/schemas/users';
+import { NetworkError } from '@/lib/api-client';
 
 interface InviteUserDialogProps {
     open: boolean;
@@ -39,12 +34,22 @@ 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();
+    const [serverError, setServerError] = useState<string | null>(null);
+    const inviteUser = useInviteUser({
+        onError: (err) => {
+            if (err instanceof NetworkError) {
+                setServerError(t('errors.network'));
+            } else {
+                setServerError(t('errors.generic'));
+            }
+        },
+    });
 
     useEffect(() => {
         if (!open) {
             setStep(1);
             setInviteLink(null);
+            setServerError(null);
             inviteUser.reset();
             reset();
         }
@@ -57,17 +62,18 @@ export function InviteUserDialog({ open, onOpenChange }: InviteUserDialogProps)
         setValue,
         reset,
         formState: { errors, isSubmitting },
-    } = useForm<InviteFormData>({
-        resolver: zodResolver(inviteSchema),
+    } = useForm<InviteUserFormData>({
+        resolver: zodResolver(inviteUserSchema),
     });
 
     const onSubmit = handleSubmit(async (values) => {
+        setServerError(null);
         try {
             const response = await inviteUser.mutateAsync(values);
             setInviteLink(response.inviteLink);
             setStep(2);
         } catch {
-            // error shown via inviteUser.error
+            // error shown via serverError state
         }
     });
 
@@ -89,8 +95,8 @@ export function InviteUserDialog({ open, onOpenChange }: InviteUserDialogProps)
                 {step === 1 && (
                     <form onSubmit={onSubmit} noValidate className="space-y-4">
                         <FormErrorBanner
-                            error={inviteUser.error ? { message: inviteUser.error.message } : null}
-                            onDismiss={() => inviteUser.reset()}
+                            error={serverError !== null ? { message: serverError } : null}
+                            onDismiss={() => setServerError(null)}
                         />
 
                         <div className="space-y-2">