From c858b760544035e34a95efeafa9d2b922518fefd Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 27 Feb 2024 16:56:40 +0530
Subject: [PATCH] chore: onboarding workspace name valdiation error indicator
 added (#3808)

---
 web/components/onboarding/user-details.tsx | 63 +++++++++++-----------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index cd129c74c..a29df3c94 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -62,6 +62,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
     formState: { errors, isSubmitting, isValid },
   } = useForm<IUser>({
     defaultValues,
+    mode: "onChange",
   });
 
   const onSubmit = async (formData: IUser) => {
@@ -164,36 +165,38 @@ export const UserDetails: React.FC<Props> = observer((props) => {
                 )}
               </button>
 
-              <div className="my-2 mr-10 flex w-full rounded-md bg-onboarding-background-200 text-sm">
-                <Controller
-                  control={control}
-                  name="first_name"
-                  rules={{
-                    required: "First name is required",
-                    maxLength: {
-                      value: 24,
-                      message: "First name cannot exceed the limit of 24 characters",
-                    },
-                  }}
-                  render={({ field: { value, onChange, ref } }) => (
-                    <Input
-                      id="first_name"
-                      name="first_name"
-                      type="text"
-                      value={value}
-                      autoFocus={true}
-                      onChange={(event) => {
-                        setUserName(event.target.value);
-                        onChange(event);
-                      }}
-                      ref={ref}
-                      hasError={Boolean(errors.first_name)}
-                      placeholder="Enter your full name..."
-                      className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
-                      maxLength={24}
-                    />
-                  )}
-                />
+              <div className="flex flex-col gap-1">
+                <div className="my-2 mr-10 flex w-full rounded-md bg-onboarding-background-200 text-sm">
+                  <Controller
+                    control={control}
+                    name="first_name"
+                    rules={{
+                      required: "Name is required",
+                      maxLength: {
+                        value: 24,
+                        message: "Name must be within 24 characters.",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="first_name"
+                        name="first_name"
+                        type="text"
+                        value={value}
+                        autoFocus={true}
+                        onChange={(event) => {
+                          setUserName(event.target.value);
+                          onChange(event);
+                        }}
+                        ref={ref}
+                        hasError={Boolean(errors.first_name)}
+                        placeholder="Enter your full name..."
+                        className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
+                      />
+                    )}
+                  />
+                </div>
+                {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
               </div>
             </div>
             <div className="mb-10 mt-14">