From 69457a01cfb0c6d48278ba67ead69537dbd51b0f Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 21 Jan 2025 20:54:59 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20make=20room=20pa?=
 =?UTF-8?q?ttern=20validation=20rules=20reusable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the validation rules more maintainable and reusable across the codebase.
Particularly useful when these values need to be referenced in multiple
validation contexts.

The personalize room's link modal needs a step-by-step validation.
---
 .../features/home/components/PersonalizeMeetingDialog.tsx | 8 ++++++--
 src/frontend/src/features/rooms/utils/isRoomValid.ts      | 7 ++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/home/components/PersonalizeMeetingDialog.tsx b/src/frontend/src/features/home/components/PersonalizeMeetingDialog.tsx
index 6b2705e3..2295c79a 100644
--- a/src/frontend/src/features/home/components/PersonalizeMeetingDialog.tsx
+++ b/src/frontend/src/features/home/components/PersonalizeMeetingDialog.tsx
@@ -13,6 +13,10 @@ import {
   TextField,
 } from 'react-aria-components'
 import { css } from '@/styled-system/css'
+import {
+  MIN_ROOM_LENGTH,
+  ALPHANUMERIC_LOWERCASE,
+} from '@/features/rooms/utils/isRoomValid'
 
 export const PersonalizeMeetingDialog = ({
   isOpen,
@@ -43,10 +47,10 @@ export const PersonalizeMeetingDialog = ({
   }
 
   const validationErrors = []
-  if (roomSlug.length < 5) {
+  if (roomSlug.length < MIN_ROOM_LENGTH) {
     validationErrors.push(t('errors.validation.length'))
   }
-  if (!roomSlug.match(/^[a-z0-9]+$/)) {
+  if (!new RegExp(`^${ALPHANUMERIC_LOWERCASE}+$`).test(roomSlug)) {
     validationErrors.push(t('errors.validation.spaceOrSpecialCharacter'))
   }
 
diff --git a/src/frontend/src/features/rooms/utils/isRoomValid.ts b/src/frontend/src/features/rooms/utils/isRoomValid.ts
index 592a30d1..8c13a438 100644
--- a/src/frontend/src/features/rooms/utils/isRoomValid.ts
+++ b/src/frontend/src/features/rooms/utils/isRoomValid.ts
@@ -6,13 +6,18 @@
  */
 export const generatedRoomPattern = '[a-z]{3}-[a-z]{4}-[a-z]{3}'
 
+export const ALPHANUMERIC_LOWERCASE = '[a-z0-9]'
+
+// Minimum length requirement for personalized rooms
+export const MIN_ROOM_LENGTH = 5
+
 /**
  * Pattern for user-defined custom room IDs
  * Format: Minimum 5 lowercase alphanumeric characters
  * This pattern allows users to create memorable, personalized room names
  * while maintaining basic validation rules (e.g., myroom123, teamspace, project2024)
  */
-export const personalizedRoomPattern = '[a-z0-9]{5,}'
+export const personalizedRoomPattern = `${ALPHANUMERIC_LOWERCASE}{${MIN_ROOM_LENGTH},}`
 
 // Combined pattern that accepts both system-generated and personalized room IDs
 // This allows flexibility in room creation while maintaining consistent validation