Add error handling to profile fields and disable save button when errors exist

Author: TheArchons

web-interface/src/components/Buttons.tsx

@@ -1,10 +1,11 @@
-import type {ReactNode} from "react";
+import type { ReactNode } from 'react'
 
 const variantStyles = {
   success: 'bg-green-200 text-green-800 hover:bg-green-300',
   warning: 'bg-yellow-200 text-yellow-800 hover:bg-yellow-300',
   danger: 'bg-red-200 text-red-800 hover:bg-red-300',
-  normal: 'bg-blue-200 text-blue-800 hover:bg-blue-300'
+  normal: 'bg-blue-200 text-blue-800 hover:bg-blue-300',
+  disabled: 'bg-gray-200 text-gray-800',
 }
 
 type ButtonVariant = keyof typeof variantStyles
@@ -13,7 +14,7 @@ export function Button({
   children,
   onClick,
   variant,
-  fontSize
+  fontSize,
 }: {
   children: ReactNode
   onClick: () => void
@@ -24,6 +25,7 @@ export function Button({
     <button
       onClick={onClick}
       className={`flex items-center gap-1.5 px-3 py-1 text-${fontSize} rounded ${variantStyles[variant]}`}
+      disabled={variant === 'disabled'}
     >
       {children}
     </button>

web-interface/src/routes/jobs.tsx

@@ -162,26 +162,26 @@ function JobCard({
   return (
     <Card>
       <CardHeader header={job.name}>
-        <Button
-          onClick={() => onStart(job.id)}
-          variant="success"
-          fontSize="xs"
-        >Start</Button>
+        <Button onClick={() => onStart(job.id)} variant="success" fontSize="xs">
+          Start
+        </Button>
         <Button
           onClick={() => onShutdown(job.id)}
           variant="warning"
           fontSize="xs"
-        >Shutdown</Button>
+        >
+          Shutdown
+        </Button>
         <Button
           onClick={() => onRestart(job.id)}
           variant="warning"
           fontSize="xs"
-        >Restart</Button>
-        <Button
-          onClick={() => onDelete(job.id)}
-          variant="danger"
-          fontSize="xs"
-        >Delete</Button>
+        >
+          Restart
+        </Button>
+        <Button onClick={() => onDelete(job.id)} variant="danger" fontSize="xs">
+          Delete
+        </Button>
       </CardHeader>
 
       {/* Info grid */}

web-interface/src/routes/profile.tsx

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 import { SquarePen } from 'lucide-react'
 import { getUser } from '#/util.ts'
 import { useImmer } from 'use-immer'
-import {Button} from "#/components/Buttons.tsx";
+import { Button } from '#/components/Buttons.tsx'
 
 export const Route = createFileRoute('/profile')({
   component: ProfilePage,
@@ -14,11 +14,13 @@ function ProfileField({
   value,
   type = 'text',
   onChange,
+  error,
 }: {
   label: string
   value: string
   type?: string
   onChange: (val: string) => void
+  error?: string
 }) {
   return (
     <div>
@@ -27,8 +29,9 @@ function ProfileField({
         type={type}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm disabled:bg-white disabled:text-gray-700"
+        className={`w-full border ${error ? 'border-red-600' : 'border-gray-300'} rounded-lg px-4 py-2 text-sm disabled:bg-white disabled:text-gray-700`}
       />
+      <p className="text-red-600 min-h-6">{error}</p>
     </div>
   )
 }
@@ -52,22 +55,59 @@ function ProfilePage() {
   }
 
   function handleCancel() {
-    const confirmCancel = confirm("Are you sure you want to cancel?");
+    const confirmCancel = confirm('Are you sure you want to cancel?')
 
     if (confirmCancel) {
       setUser({
         ...loaderData,
         password: '',
         confirmPassword: '',
-      });
+      })
     }
   }
 
+  function getUserErrors(field: string): string | undefined {
+    switch (field) {
+      case 'username':
+      case 'role':
+      case 'email':
+        if (user[field] === '') {
+          return `Field cannot be empty.`
+        }
+        break
+      case 'password':
+        if (user['password'].length !== 0) {
+          if (user['password'].length < 8) {
+            return 'Password must be at least 8 characters long'
+          }
+        }
+        break
+      case 'confirmPassword':
+        if (
+          user['password'].length !== 0 &&
+          user['confirmPassword'] !== user['password']
+        ) {
+          return 'Passwords do not match.'
+        }
+        break
+    }
+  }
+
+  function hasError(): boolean {
+    for (const field in user) {
+      if (getUserErrors(field)) {
+        return true
+      }
+    }
+
+    return false
+  }
+
   return (
     <div className="w-fit mx-auto py-8 px-8">
       <div className="flex gap-16 items-start">
         {/* Left: form fields */}
-        <div className="flex-1 min-w-80 flex flex-col gap-5">
+        <div className="flex-1 min-w-80 flex flex-col">
           <ProfileField
             label="Username"
             value={user.username}
@@ -76,6 +116,7 @@ function ProfilePage() {
                 draft.username = username
               })
             }
+            error={getUserErrors('username')}
           />
           <ProfileField
             label="Role"
@@ -85,6 +126,7 @@ function ProfilePage() {
                 draft.role = role
               })
             }
+            error={getUserErrors('role')}
           />
           <ProfileField
             label="Email"
@@ -95,6 +137,7 @@ function ProfilePage() {
                 draft.email = email
               })
             }
+            error={getUserErrors('email')}
           />
           <ProfileField
             label="Password"
@@ -105,6 +148,7 @@ function ProfilePage() {
                 draft.password = password
               })
             }
+            error={getUserErrors('password')}
           />
           <ProfileField
             label="Confirm Password"
@@ -115,18 +159,18 @@ function ProfilePage() {
                 draft.confirmPassword = confirmPassword
               })
             }
+            error={getUserErrors('confirmPassword')}
           />
 
           <div className="flex gap-3 mt-2">
             <Button
               onClick={handleSave}
-              variant="normal"
+              variant={hasError() ? 'disabled' : 'normal'}
               fontSize="base"
-            >Save</Button>
-            <Button
-              onClick={handleCancel}
-              variant="danger"
-              fontSize="base">
+            >
+              Save
+            </Button>
+            <Button onClick={handleCancel} variant="danger" fontSize="base">
               Cancel
             </Button>
           </div>