From c33948b7853e65e00b489172e82b779842d6b623 Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Thu, 19 Dec 2024 00:21:51 +0100
Subject: [PATCH] Improve required fields

---
 web/src/components/input/BaseInput.tsx   | 15 ++++++++++++++-
 web/src/routes/settings/fields/index.tsx |  6 ++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/web/src/components/input/BaseInput.tsx b/web/src/components/input/BaseInput.tsx
index 3e6e9ba..45ba46d 100644
--- a/web/src/components/input/BaseInput.tsx
+++ b/web/src/components/input/BaseInput.tsx
@@ -22,13 +22,25 @@ export const BaseInput = ({
     errorMessage,
     description,
     width = 'fit',
+    required,
     ...rest
 }: BaseInputProperties) => {
     const id = useId();
 
     return (
         <div className="space-y-2 w-full">
-            {label && <Label htmlFor={id}>{label}</Label>}
+            {label && (
+                <Label htmlFor={id}>
+                    {label}
+                    {required && (
+                        <span
+                            className={clsx('', errorMessage && 'text-red-500')}
+                        >
+                            *
+                        </span>
+                    )}
+                </Label>
+            )}
             <div
                 className={clsx(
                     'flex items-stretch justify-start gap-2',
@@ -44,6 +56,7 @@ export const BaseInput = ({
                             width === 'full' && 'w-full'
                         )}
                         onChange={(event) => onChange?.(event.target.value)}
+                        required={required}
                         {...rest}
                     />
                 </div>
diff --git a/web/src/routes/settings/fields/index.tsx b/web/src/routes/settings/fields/index.tsx
index d527759..9c6aa42 100644
--- a/web/src/routes/settings/fields/index.tsx
+++ b/web/src/routes/settings/fields/index.tsx
@@ -82,12 +82,14 @@ const FieldDefinitionEditor = ({
                     <BaseInput
                         label="Definition ID"
                         name="definition_id"
+                        placeholder="battery_capacity"
                         value={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}
                         width="full"
                         readOnly={!!fieldDef}
                         errorMessage={field.state.meta.errors.join(', ')}
+                        required
                     />
                 )}
             </form.Field>
@@ -105,11 +107,13 @@ const FieldDefinitionEditor = ({
                     <BaseInput
                         label="Name"
                         name="name"
+                        placeholder="Battery Capacity"
                         value={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}
                         width="full"
                         errorMessage={field.state.meta.errors.join(', ')}
+                        required
                     />
                 )}
             </form.Field>
@@ -119,6 +123,7 @@ const FieldDefinitionEditor = ({
                     <BaseInput
                         label="Description"
                         name="description"
+                        placeholder="The capacity of the battery in mAh"
                         value={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}
@@ -133,6 +138,7 @@ const FieldDefinitionEditor = ({
                     <BaseInput
                         label="Placeholder"
                         name="placeholder"
+                        placeholder="Capacity (ex 500mAh)"
                         value={field.state.value}
                         onChange={field.handleChange}
                         onBlur={field.handleBlur}