ui: Support for listing and deleting users in admin section

ui/src/components/delete-dialog.tsx

@@ -18,6 +18,7 @@
  */
 
 import { Loader2, OctagonAlert, TrashIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 import {
   AlertDialog,
@@ -30,6 +31,7 @@ import {
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import {
   Tooltip,
   TooltipContent,
@@ -47,6 +49,7 @@ interface DeleteDialogProps {
   onDelete: () => void;
   isPending: boolean;
   className?: string;
+  textConfirmation?: boolean;
 }
 
 export const DeleteDialog = ({
@@ -56,7 +59,18 @@ export const DeleteDialog = ({
   onDelete,
   isPending,
   className,
+  textConfirmation = false,
 }: DeleteDialogProps) => {
+  const [input, setInput] = useState('');
+  const isDeleteDisabled = textConfirmation && input !== item.name;
+
+  // Reset the input field whenever the dialog is opened/closed
+  useEffect(() => {
+    if (open) {
+      setInput('');
+    }
+  }, [open]);
+
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
       <Tooltip delayDuration={300}>
@@ -82,13 +96,39 @@ export const DeleteDialog = ({
             <AlertDialogTitle>Delete {item.descriptor}</AlertDialogTitle>
           </div>
         </AlertDialogHeader>
-        <AlertDialogDescription>
-          Are you sure you want to delete this {item.descriptor}:{' '}
-          <span className='font-bold'>{item.name}</span>?
-        </AlertDialogDescription>
+        {textConfirmation ? (
+          <AlertDialogDescription>
+            <div className='flex flex-col gap-2'>
+              <div>
+                Are you sure you want to delete this {item.descriptor}:{' '}
+                <span className='font-bold'>{item.name}</span>?
+              </div>
+              <div>
+                Deleting might have unwanted results and side effects, and the
+                deletion is irreversible. Please type{' '}
+                <span className='font-bold'>{item.name}</span> below to confirm
+                deletion.
+              </div>
+              <Input
+                autoFocus
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+              />
+            </div>
+          </AlertDialogDescription>
+        ) : (
+          <AlertDialogDescription>
+            Are you sure you want to delete this {item.descriptor}:{' '}
+            <span className='font-bold'>{item.name}</span>?
+          </AlertDialogDescription>
+        )}
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <Button onClick={onDelete} className='bg-red-500'>
+          <Button
+            disabled={isDeleteDisabled}
+            onClick={onDelete}
+            className='bg-red-500'
+          >
             {isPending ? (
               <>
                 <span className='sr-only'>Deleting {item.descriptor}...</span>

ui/src/routes/_layout/admin/route.tsx

@@ -18,7 +18,7 @@
  */
 
 import { createFileRoute, Outlet, redirect } from '@tanstack/react-router';
-import { Eye, KeyRound, ListVideo, UserPlus } from 'lucide-react';
+import { Eye, KeyRound, ListVideo, User } from 'lucide-react';
 
 import { PageLayout } from '@/components/page-layout';
 
@@ -37,9 +37,9 @@ const Layout = () => {
       label: 'User Management',
       items: [
         {
-          title: 'Create User',
-          to: '/admin/users/create-user',
-          icon: () => <UserPlus className='h-4 w-4' />,
+          title: 'Users',
+          to: '/admin/users',
+          icon: () => <User className='h-4 w-4' />,
         },
         {
           title: 'Authorization',

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'