feat(ui): Extend the user creation form

PR #1278 extends user creation by adding optional first name, last name
and email to the user information.

Add these fields to the user creation form and mark them as optional.

Signed-off-by: Jyrki Keisala <[email protected]>

ui/src/routes/_layout/admin/users/create-user.tsx

@@ -18,7 +18,7 @@
  */
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { createFileRoute } from '@tanstack/react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -48,16 +48,24 @@ import { toast } from '@/lib/toast';
 
 const formSchema = z.object({
   username: z.string(),
+  firstName: z.string().optional(),
+  lastName: z.string().optional(),
+  email: z.string().email().optional(),
   password: z.string().optional(),
   temporary: z.boolean(),
 });
 
 const CreateUser = () => {
+  const navigate = useNavigate();
+
   const { mutateAsync, isPending } = useAdminServicePostUsers({
     onSuccess() {
       toast.info('Add User', {
         description: `User "${form.getValues().username}" added successfully to the server.`,
       });
+      navigate({
+        to: '/admin/users',
+      });
     },
     onError(error: ApiError) {
       toast.error(error.message, {
@@ -82,6 +90,9 @@ const CreateUser = () => {
     await mutateAsync({
       requestBody: {
         username: values.username,
+        firstName: values.firstName,
+        lastName: values.lastName,
+        email: values.email,
         password: values.password,
         temporary: values.temporary,
       },
@@ -109,6 +120,45 @@ const CreateUser = () => {
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name='firstName'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>First name</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder='(optional)' />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='lastName'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Last name</FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder='(optional)' />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email address</FormLabel>
+                  <FormControl>
+                    <Input type='email' {...field} placeholder='(optional)' />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
             <FormField
               control={form.control}
               name='password'