From 563f1e4c0fa32a4f0ed8cccf94756a99dd06b218 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 6 May 2025 23:16:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20improve=20meeting=20code?=
 =?UTF-8?q?=20input=20accessibility=20for=20touch=20devices?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhance meeting code input to accept codes without hyphens and make input
case-insensitive. Addresses usability issue observed with touch screen and
virtual keyboard users who struggled with precise formatting. Improves
accessibility for users with pointing pens and limited input precision.

requested by @spaccoud
---
 src/frontend/src/features/rooms/index.ts            |  6 +++++-
 src/frontend/src/features/rooms/routes/Room.tsx     | 13 ++++++++++++-
 .../src/features/rooms/utils/isRoomValid.ts         | 12 ++++++++++++
 src/frontend/src/routes.ts                          |  8 ++++++--
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/index.ts b/src/frontend/src/features/rooms/index.ts
index 5ed1e499..b3ae0e24 100644
--- a/src/frontend/src/features/rooms/index.ts
+++ b/src/frontend/src/features/rooms/index.ts
@@ -1,5 +1,9 @@
 export { Room as RoomRoute } from './routes/Room'
 export { FeedbackRoute } from './routes/Feedback'
-export { roomIdPattern, isRoomValid } from './utils/isRoomValid'
+export {
+  roomIdPattern,
+  isRoomValid,
+  flexibleRoomIdPattern,
+} from './utils/isRoomValid'
 export { generateRoomId } from './utils/generateRoomId'
 export { useCreateRoom } from './api/createRoom'
diff --git a/src/frontend/src/features/rooms/routes/Room.tsx b/src/frontend/src/features/rooms/routes/Room.tsx
index 60d48bda..552c3002 100644
--- a/src/frontend/src/features/rooms/routes/Room.tsx
+++ b/src/frontend/src/features/rooms/routes/Room.tsx
@@ -3,13 +3,17 @@ import {
   usePersistentUserChoices,
   type LocalUserChoices as LocalUserChoicesLK,
 } from '@livekit/components-react'
-import { useParams } from 'wouter'
+import { useLocation, useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
 import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
 import { ProcessorSerialized } from '../livekit/components/blur'
+import {
+  isRoomValid,
+  normalizeRoomId,
+} from '@/features/rooms/utils/isRoomValid'
 
 export type LocalUserChoices = LocalUserChoicesLK & {
   processorSerialized?: ProcessorSerialized
@@ -21,6 +25,7 @@ export const Room = () => {
   const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
 
   const { roomId } = useParams()
+  const [location, setLocation] = useLocation()
   const initialRoomData = history.state?.initialRoomData
   const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
   const skipJoinScreen = isLoggedIn && mode === 'create'
@@ -40,6 +45,12 @@ export const Room = () => {
     }
   }, [])
 
+  useEffect(() => {
+    if (roomId && !isRoomValid(roomId)) {
+      setLocation(normalizeRoomId(roomId))
+    }
+  }, [roomId, setLocation, location])
+
   if (!roomId) {
     return <ErrorScreen />
   }
diff --git a/src/frontend/src/features/rooms/utils/isRoomValid.ts b/src/frontend/src/features/rooms/utils/isRoomValid.ts
index a6100d61..2cadf034 100644
--- a/src/frontend/src/features/rooms/utils/isRoomValid.ts
+++ b/src/frontend/src/features/rooms/utils/isRoomValid.ts
@@ -1,5 +1,17 @@
 export const roomIdPattern = '[a-z]{3}-[a-z]{4}-[a-z]{3}'
 
+// Case-insensitive and with optional hyphens
+export const flexibleRoomIdPattern =
+  '(?:[a-zA-Z0-9]{3}-?[a-zA-Z0-9]{4}-?[a-zA-Z0-9]{3})'
+
 export const isRoomValid = (roomIdOrUrl: string) =>
   new RegExp(`^${roomIdPattern}$`).test(roomIdOrUrl) ||
   new RegExp(`^${window.location.origin}/${roomIdPattern}$`).test(roomIdOrUrl)
+
+export const normalizeRoomId = (roomId: string) => {
+  const cleanId = roomId.toLowerCase().replace(/-/g, '')
+  if (cleanId.length === 10) {
+    return `${cleanId.slice(0, 3)}-${cleanId.slice(3, 7)}-${cleanId.slice(7, 10)}`
+  }
+  return roomId
+}
diff --git a/src/frontend/src/routes.ts b/src/frontend/src/routes.ts
index 24e3f866..c9599deb 100644
--- a/src/frontend/src/routes.ts
+++ b/src/frontend/src/routes.ts
@@ -1,4 +1,8 @@
-import { FeedbackRoute, RoomRoute, roomIdPattern } from '@/features/rooms'
+import {
+  FeedbackRoute,
+  RoomRoute,
+  flexibleRoomIdPattern,
+} from '@/features/rooms'
 import { HomeRoute } from '@/features/home'
 import { LegalTermsRoute } from '@/features/legalsTerms/LegalTermsRoute'
 import { AccessibilityRoute } from '@/features/legalsTerms/Accessibility'
@@ -32,8 +36,8 @@ export const routes: Record<
   },
   room: {
     name: 'room',
-    path: new RegExp(`^[/](?<roomId>${roomIdPattern})$`),
     to: (roomId: string) => `/${roomId.trim()}`,
+    path: new RegExp(`^[/](?<roomId>${flexibleRoomIdPattern})$`),
     Component: RoomRoute,
   },
   feedback: {