chore: first and last name validation added

apps/api/plane/app/serializers/user.py

@@ -1,3 +1,7 @@
+# Python imports
+import re
+
+
 # Third party imports
 from rest_framework import serializers
 
@@ -7,16 +11,29 @@ from plane.utils.url import contains_url
 
 from .base import BaseSerializer
 
+# Regex pattern to block the following special characters in names:
+# & + , : ; $ ^ } { * = ? @ # | ' < > . ( ) % !
+
+FORBIDDEN_NAME_CHARS_PATTERN = r"^.*[&+,:;$^}{*=?@#|'<>.()%!].*$"
+
 
 class UserSerializer(BaseSerializer):
     def validate_first_name(self, value):
         if contains_url(value):
             raise serializers.ValidationError("First name cannot contain a URL.")
+
+        if re.match(FORBIDDEN_NAME_CHARS_PATTERN, value):
+            raise serializers.ValidationError("First name cannot contain special characters.")
+
         return value
 
     def validate_last_name(self, value):
         if contains_url(value):
             raise serializers.ValidationError("Last name cannot contain a URL.")
+
+        if re.match(FORBIDDEN_NAME_CHARS_PATTERN, value):
+            raise serializers.ValidationError("Last name cannot contain special characters.")
+
         return value
 
     class Meta:

apps/web/core/components/onboarding/steps/profile/root.tsx

@@ -214,6 +214,10 @@ export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
                 value: 24,
                 message: "Name must be within 24 characters.",
               },
+              pattern: {
+                value: /^[a-zA-Z\s\-_]*$/,
+                message: "Name can only contain letters, spaces, hyphens, and underscores",
+              },
             }}
             render={({ field: { value, onChange, ref } }) => (
               <input

apps/web/core/components/profile/form.tsx

@@ -249,6 +249,10 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                   name="first_name"
                   rules={{
                     required: "Please enter first name",
+                    pattern: {
+                      value: /^[a-zA-Z\s\-_]*$/,
+                      message: "First name can only contain letters, spaces, hyphens, and underscores",
+                    },
                   }}
                   render={({ field: { value, onChange, ref } }) => (
                     <Input
@@ -273,6 +277,12 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                 <Controller
                   control={control}
                   name="last_name"
+                  rules={{
+                    pattern: {
+                      value: /^[a-zA-Z\s\-_]*$/,
+                      message: "Last name can only contain letters, spaces, hyphens, and underscores",
+                    },
+                  }}
                   render={({ field: { value, onChange, ref } }) => (
                     <Input
                       id="last_name"
@@ -289,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">