add message in hub

client/src/App.jsx

@@ -0,0 +1,25 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"
+import AuthPage from "./components/AuthPage.jsx"
+import MainApp from "./components/MainApp"
+import "./index.css"
+
+function ProtectedRoute({ children }) {
+    const token = localStorage.getItem("token")
+    if (!token) return <Navigate to="/auth" replace />
+    return children
+}
+
+export default function App() {
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path="/auth" element={<AuthPage />} />
+                <Route path="/" element={
+                    <ProtectedRoute>
+                        <MainApp />
+                    </ProtectedRoute>
+                } />
+            </Routes>
+        </BrowserRouter>
+    )
+}

client/src/components/AuthPage.jsx

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom"
+
+export default function AuthPage() {
+    const navigate = useNavigate()
+
+    function handleLogin(token) {
+        localStorage.setItem("token", token)
+        navigate("/")
+    }
+
+    return (
+        <div className="flex items-center justify-center h-screen">
+            <div className="flex flex-col gap-4 p-8 bg-gray-800 rounded-lg">
+                <input className="bg-gray-700 text-white px-4 py-2 rounded" placeholder="Username" />
+                <input className="bg-gray-700 text-white px-4 py-2 rounded" placeholder="Password" type="password" />
+                <div className="flex justify-end gap-2 mt-4">
+                    <button className="px-4 py-2 rounded bg-gray-700 hover:bg-gray-600">Register</button>
+                    <button className="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700">Login</button>
+                </div>
+            </div>
+
+        </div>
+    )
+}

client/src/components/MainApp.jsx

@@ -0,0 +1,3 @@
+export default function MainApp({ token }) {
+    return <div>Main App</div>
+}

client/src/index.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+body {
+    @apply bg-gray-900 text-white;
+}

client/src/main.jsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App"
+
+createRoot(document.getElementById("root")).render(
+    <StrictMode>
+        <App />
+    </StrictMode>
+)