From 2a6eb5fe23772f5b3bab3e02afcf624ccead99b2 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Wed, 9 Aug 2023 16:44:35 +0530
Subject: [PATCH] style: option to edit display name in profile page (#1818)

---
 .../[workspaceSlug]/me/profile/index.tsx      | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
index 2ae984921..2d9377b51 100644
--- a/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/me/profile/index.tsx
@@ -69,6 +69,7 @@ const Profile: NextPage = () => {
       last_name: formData.last_name,
       avatar: formData.avatar,
       role: formData.role,
+      display_name: formData.display_name,
     };
 
     await userService
@@ -227,6 +228,36 @@ const Profile: NextPage = () => {
                 />
               </div>
             </div>
+            <div className="grid grid-cols-12 gap-4 sm:gap-16">
+              <div className="col-span-12 sm:col-span-6">
+                <h4 className="text-lg font-semibold text-custom-text-100">Display Name</h4>
+                <p className="text-sm text-custom-text-200">
+                  The email address that you are using.
+                </p>
+              </div>
+              <div className="col-span-12 sm:col-span-6">
+                <Input
+                  id="display_name"
+                  name="display_name"
+                  autoComplete="off"
+                  register={register}
+                  error={errors.display_name}
+                  className="w-full"
+                  placeholder="Enter your display name"
+                  validations={{
+                    required: "Display name is required.",
+                    minLength: {
+                      value: 3,
+                      message: "Display name must be at least 3 characters long.",
+                    },
+                    maxLength: {
+                      value: 20,
+                      message: "Display name should not exceed 20 characters",
+                    },
+                  }}
+                />
+              </div>
+            </div>
             <div className="grid grid-cols-12 gap-4 sm:gap-16">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold text-custom-text-100">Email</h4>