Use HOC for login and register components

1. Before, login and register UI shared the same route and used the same parent component, which was under an inaccurate name.
Now, the login and register have their dedicated routes and utilize the HOC to abstract the common logics and UI for better maintain
2. Gave the files more descriptive names

Change-Id: Ibbc4a74a9c0515b6fff8dcab426ee538183e99ad
diff --git a/client/src/router.tsx b/client/src/router.tsx
index a67dbc4..331d1e6 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -28,17 +28,18 @@
 import { RouteParams } from './hooks/useUrlParams';
 import AccountSettings from './pages/AccountSettings';
 import GeneralSettings from './pages/GeneralSettings';
+import Login from './pages/Login';
 import Messenger from './pages/Messenger';
+import Registration from './pages/Registration';
 import Setup from './pages/Setup';
 import SetupLogin from './pages/SetupLogin';
-import Welcome from './pages/Welcome';
-
 export type ConversationRouteParams = RouteParams<{ conversationId?: string }, Record<string, never>>;
 
 export const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<App />} loader={appLoader}>
-      <Route path="login" element={<Welcome />} />
+      <Route path="login" element={<Login />} />
+      <Route path="register" element={<Registration />} />
       <Route path="setup/login" element={<SetupLogin />} />
       <Route path="setup" element={<Setup />} />
       <Route