🔒️(frontend) valide ':roomId' path using a regex

Enhanced security by ensuring users are redirected to a 404 error page
if they
pass an incorrect roomId path, either intentionally or unintentionally.
This is
a critical security mechanism that should be included in our MVP.

Let's discuss extracting hardcoded elements, such as lengths or
the separator, into proper constants to improve code maintainability.
I was concerned that this might make the code harder to read, it could
enhance
clarity and reusability in the long term.

I prefer exposing the roomIdRegex from the same location where we
generate IDs.
However, this increases the responsibility of that file. Lmk if you have
any
suggestion for a better organization.

Additionally, the current 404 error page displays a 'Page not found'
message for
invalid room IDs. Should we update this message to 'Invalid room name'
to
provide more context to the user?

src/frontend/src/App.tsx

@@ -7,7 +7,7 @@ import { useLang } from 'hoofd'
 import { Route, Switch } from 'wouter'
 import { HomeRoute } from '@/features/home'
 import { NotFound } from './routes/NotFound'
-import { RoomRoute } from '@/features/rooms'
+import { RoomRoute, roomIdRegex } from '@/features/rooms'
 import './i18n/init'
 
 const queryClient = new QueryClient()
@@ -19,7 +19,7 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <Switch>
         <Route path="/" component={HomeRoute} />
-        <Route path="/:roomId" component={RoomRoute} />
+        <Route path={roomIdRegex} component={RoomRoute} />
         <Route component={NotFound} />
       </Switch>
       <ReactQueryDevtools initialIsOpen={false} />

src/frontend/src/features/rooms/index.ts

@@ -1,2 +1,3 @@
 export { navigateToNewRoom } from './navigation/navigateToNewRoom'
 export { Room as RoomRoute } from './routes/Room'
+export { roomIdRegex } from './utils/generateRoomId'

src/frontend/src/features/rooms/utils/generateRoomId.ts

@@ -25,3 +25,6 @@ export const generateRoomId = () => {
   ];
   return parts.join('-');
 }
+
+export const roomIdRegex = /^[/](?<roomId>[a-z]{3}-[a-z]{4}-[a-z]{3})$/;
+