From b860e35408bddb689f57978a2fd400543e2aa4f9 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 24 Sep 2024 11:43:51 +0200
Subject: [PATCH] feat: fuctionality tweaks handling errors

---
 components/providers/forms/EditForm.tsx   | 29 ++++++++++++++---------
 components/ui/custom/CustomAlertModal.tsx |  4 ++--
 components/ui/custom/CustomInput.tsx      | 12 ++++++++--
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/components/providers/forms/EditForm.tsx b/components/providers/forms/EditForm.tsx
index 2b82b7116d..8479aeeabb 100644
--- a/components/providers/forms/EditForm.tsx
+++ b/components/providers/forms/EditForm.tsx
@@ -57,26 +57,33 @@ export const EditForm = ({
         title: "Success!",
         description: "The provider was updated successfully.",
       });
+      setIsOpen(false); // Close the modal on success
     }
   };
 
   return (
     <Form {...form}>
       <form
-        // action={onSubmitClient}
         onSubmit={form.handleSubmit(onSubmitClient)}
-        className="flex flex-col space-y-2 sm:px-0 px-4"
+        className="flex flex-col space-y-4"
       >
+        <div className="text-md">
+          Current alias: <span className="font-bold">{providerAlias}</span>
+        </div>
+        <div>
+          <CustomInput
+            control={form.control}
+            name="alias"
+            type="text"
+            label="Alias"
+            labelPlacement="inside"
+            placeholder={providerAlias}
+            variant="bordered"
+            isRequired={false}
+            isInvalid={!!form.formState.errors.alias}
+          />
+        </div>
         <input type="hidden" name="providerId" value={providerId} />
-        <div>Current alias: {providerAlias}</div>
-
-        <CustomInput
-          control={form.control}
-          name="alias"
-          type="text"
-          label="Alias"
-          placeholder={providerAlias}
-        />
 
         <div className="w-full flex justify-center sm:space-x-6">
           <Button
diff --git a/components/ui/custom/CustomAlertModal.tsx b/components/ui/custom/CustomAlertModal.tsx
index f3c3c97e35..bf3435b7bb 100644
--- a/components/ui/custom/CustomAlertModal.tsx
+++ b/components/ui/custom/CustomAlertModal.tsx
@@ -27,8 +27,8 @@ export const CustomAlertModal: React.FC<CustomAlertModalProps> = ({
         {(_onClose) => (
           <>
             <ModalHeader className="flex flex-col py-0">{title}</ModalHeader>
-            <ModalBody className="space-y-2">
-              <p>{description}</p>
+            <ModalBody>
+              {description}
               {children}
             </ModalBody>
           </>
diff --git a/components/ui/custom/CustomInput.tsx b/components/ui/custom/CustomInput.tsx
index 9a62ed85ee..81a91316d0 100644
--- a/components/ui/custom/CustomInput.tsx
+++ b/components/ui/custom/CustomInput.tsx
@@ -11,10 +11,13 @@ interface CustomInputProps<T extends FieldValues> {
   control: Control<T>;
   name: FieldPath<T>;
   label?: string;
+  labelPlacement?: "inside" | "outside";
+  variant?: "flat" | "bordered" | "underlined" | "faded";
   type?: string;
   placeholder?: string;
-  isRequired?: boolean;
   password?: boolean;
+  isRequired?: boolean;
+  isInvalid?: boolean;
 }
 
 export const CustomInput = <T extends FieldValues>({
@@ -22,9 +25,12 @@ export const CustomInput = <T extends FieldValues>({
   name,
   type = "text",
   label = name,
+  labelPlacement = "inside",
   placeholder,
+  variant = "bordered",
   password = false,
   isRequired = true,
+  isInvalid,
 }: CustomInputProps<T>) => {
   const [isVisible, setIsVisible] = useState(false);
 
@@ -54,9 +60,11 @@ export const CustomInput = <T extends FieldValues>({
             <Input
               isRequired={inputIsRequired}
               label={inputLabel}
+              labelPlacement={labelPlacement}
               placeholder={inputPlaceholder}
               type={inputType}
-              variant="bordered"
+              variant={variant}
+              isInvalid={isInvalid}
               endContent={endContent}
               {...field}
             />