From a771bab64c956b92b3677442b4cf90f7b520ff70 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 1 Apr 2024 13:48:12 +0530
Subject: [PATCH] fix: display error message in project settings page. (#4099)

* chore: update `project title` to `project name` in create project modal.
---
 web/components/project/create-project-form.tsx | 4 ++--
 web/components/project/form.tsx                | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/components/project/create-project-form.tsx b/web/components/project/create-project-form.tsx
index 14d723e6d..27a19d7f8 100644
--- a/web/components/project/create-project-form.tsx
+++ b/web/components/project/create-project-form.tsx
@@ -226,7 +226,7 @@ export const CreateProjectForm: FC<Props> = observer((props) => {
                 control={control}
                 name="name"
                 rules={{
-                  required: "Title is required",
+                  required: "Name is required",
                   maxLength: {
                     value: 255,
                     message: "Title should be less than 255 characters",
@@ -240,7 +240,7 @@ export const CreateProjectForm: FC<Props> = observer((props) => {
                     value={value}
                     onChange={handleNameChange(onChange)}
                     hasError={Boolean(errors.name)}
-                    placeholder="Project title"
+                    placeholder="Project name"
                     className="w-full focus:border-blue-400"
                     tabIndex={1}
                   />
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 5ab9f36fe..98a3e8d02 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -232,6 +232,9 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               />
             )}
           />
+          <span className="text-xs text-red-500">
+            <>{errors?.name?.message}</>
+          </span>
         </div>
         <div className="flex flex-col gap-1">
           <h4 className="text-sm">Description</h4>
@@ -252,7 +255,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             )}
           />
         </div>
-        <div className="flex w-full items-center justify-between gap-10">
+        <div className="flex w-full justify-between gap-10">
           <div className="flex w-1/2 flex-col gap-1">
             <h4 className="text-sm">Project ID</h4>
             <div className="relative">
@@ -297,6 +300,9 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 <Info className="absolute right-2 top-2.5 h-4 w-4 text-custom-text-400" />
               </Tooltip>
             </div>
+            <span className="text-xs text-red-500">
+              <>{errors?.identifier?.message}</>
+            </span>
           </div>
           <div className="flex w-1/2 flex-col gap-1">
             <h4 className="text-sm">Network</h4>