From fde6de3fcf825c00260367093edf692279b41ce5 Mon Sep 17 00:00:00 2001
From: gakshita <akshitagoyal1516@gmail.com>
Date: Thu, 28 Aug 2025 16:04:50 +0530
Subject: [PATCH] fix: handled fe to not allow special characters in first_name
 and last_name

---
 .../components/onboarding/steps/profile/root.tsx    |  5 +++++
 apps/web/core/components/profile/form.tsx           | 13 +++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index 90fc135d72..bd8a4c86ee 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -213,6 +213,11 @@ export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
                 value: 24,
                 message: "Name must be within 24 characters.",
               },
+              validate: (value) => {
+                if (!/^[a-zA-Z0-9_-]+$/.test(value))
+                  return "First name can only contain letters, numbers, hyphens, and underscores.";
+                return true;
+              },
             }}
             render={({ field: { value, onChange, ref } }) => (
               <input
diff --git a/apps/web/core/components/profile/form.tsx b/apps/web/core/components/profile/form.tsx
index 03791472b2..ef7bb5c1a4 100644
--- a/apps/web/core/components/profile/form.tsx
+++ b/apps/web/core/components/profile/form.tsx
@@ -247,6 +247,11 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                   name="first_name"
                   rules={{
                     required: "Please enter first name",
+                    validate: (value) => {
+                      if (!/^[a-zA-Z0-9_-]+$/.test(value))
+                        return "First name can only contain letters, numbers, hyphens, and underscores.";
+                      return true;
+                    },
                   }}
                   render={({ field: { value, onChange, ref } }) => (
                     <Input
@@ -271,6 +276,13 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                 <Controller
                   control={control}
                   name="last_name"
+                  rules={{
+                    validate: (value) => {
+                      if (!/^[a-zA-Z0-9_-]+$/.test(value))
+                        return "Last name can only contain letters, numbers, hyphens, and underscores.";
+                      return true;
+                    },
+                  }}
                   render={({ field: { value, onChange, ref } }) => (
                     <Input
                       id="last_name"
@@ -287,6 +299,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                     />
                   )}
                 />
+                {errors?.last_name && <span className="text-xs text-red-500">{errors?.last_name?.message}</span>}
               </div>
               <div className="flex flex-col gap-1">
                 <h4 className="text-sm font-medium text-custom-text-200">