Validate special chars when creating a team (#209)

* Add validation for team account names

- Prevent creating teams with reserved names like 'billing' and 'settings'
- Add regex validation to block team names with special characters
- Update localization for new error messages
- Extend E2E tests to cover various invalid team name scenarios

* Enhance team account name validation and slug generation

- Add comprehensive tests for account slug generation in Supabase
- Improve team name validation schema to handle special characters
- Add form validation message display in update team account name form
- Refine slug generation to handle various edge cases like special characters, non-ASCII text, and mixed case

packages/features/team-accounts/src/components/settings/update-team-account-name-form.tsx

@@ -16,6 +16,7 @@ import {
   FormField,
   FormItem,
   FormLabel,
+  FormMessage,
 } from '@kit/ui/form';
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';
@@ -98,6 +99,8 @@ export const UpdateTeamAccountNameForm = (props: {
                       {...field}
                     />
                   </FormControl>
+
+                  <FormMessage />
                 </FormItem>
               );
             }}

packages/features/team-accounts/src/schema/create-team.schema.ts

@@ -12,6 +12,8 @@ const RESERVED_NAMES_ARRAY = [
   // please add more reserved names here
 ];
 
+const SPECIAL_CHARACTERS_REGEX = /[!@#$%^&*()+=[\]{};':"\\|,.<>/?]/;
+
 /**
  * @name TeamNameSchema
  */
@@ -21,6 +23,15 @@ export const TeamNameSchema = z
   })
   .min(2)
   .max(50)
+  .refine(
+    (name) => {
+      console.log(name);
+      return !SPECIAL_CHARACTERS_REGEX.test(name);
+    },
+    {
+      message: 'teams:specialCharactersError',
+    },
+  )
   .refine(
     (name) => {
       return !RESERVED_NAMES_ARRAY.includes(name.toLowerCase());