auth checkpoint

auth dependecies not instaled in dev container

frontend/src/routes.tsx

@@ -1,4 +1,4 @@
-import { createRootRoute, createRoute, createRouter, Outlet, Link } from '@tanstack/react-router'
+import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router'
 import { ArticleTicker } from './components/ArticleTicker'
 import { ArticlesComponent } from './components/routes/ArticlesComponent'
 import { ArticleDetailComponent } from './components/routes/ArticleDetailComponent'
@@ -7,8 +7,11 @@ import { LiveBlogDetailComponent } from './components/routes/LiveBlogDetailCompo
 import { LiveBlogAdminComponent } from './components/routes/LiveBlogAdminComponent'
 import { CreateLiveBlogComponent } from './components/routes/CreateLiveBlogComponent'
 import { AdminDashboardComponent } from './components/routes/AdminDashboardComponent'
+import { AuthPage } from './components/routes/AuthPage'
 import { LiveBlogTicker } from './components/features/live-blog/LiveBlogTicker'
 import { PinnedLiveBlogSidebar } from './components/features/live-blog/PinnedLiveBlogSidebar'
+import { ProtectedRoute } from './components/auth/ProtectedRoute'
+import { Header } from './components/layout/Header'
 import './styles.css'
 
 const rootRoute = createRootRoute({
@@ -22,30 +25,7 @@ const rootRoute = createRootRoute({
   }),
   component: () => (
     <div className="min-h-screen bg-background text-foreground flex flex-col">
-      <header className="border-b">
-        <div className="container mx-auto max-w-6xl px-4 py-4">
-          <h1 className="text-3xl font-bold">
-            <Link to="/" className="hover:underline">Placebo.mk</Link>
-          </h1>
-            <nav className="flex gap-4">
-              <Link to="/" className="text-sm font-medium hover:underline">
-                Home
-              </Link>
-              <Link to="/articles" className="text-sm font-medium hover:underline">
-                Articles
-              </Link>
-              <Link to="/live-blogs" className="text-sm font-medium hover:underline">
-                Live
-              </Link>
-              <Link to="/admin" className="text-sm font-medium hover:underline text-primary">
-                Admin
-              </Link>
-              <Link to="/admin/live-blogs/create" className="text-sm font-medium hover:underline text-primary">
-                + New Live Blog
-              </Link>
-            </nav>
-        </div>
-      </header>
+      <Header />
 
       <main className="flex-1 container mx-auto max-w-6xl px-4 py-8">
         <Outlet />
@@ -236,25 +216,43 @@ const liveBlogDetailRoute = createRoute({
   },
 })
 
+const authRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/auth',
+  component: AuthPage,
+})
+
 const liveBlogAdminRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/admin/live-blogs/$slug',
   component: () => {
     const { slug } = liveBlogAdminRoute.useParams()
-    return <LiveBlogAdminComponent slug={slug} />
+    return (
+      <ProtectedRoute requiredRole="admin">
+        <LiveBlogAdminComponent slug={slug} />
+      </ProtectedRoute>
+    )
   },
 })
 
 const createLiveBlogRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/admin/live-blogs/create',
-  component: CreateLiveBlogComponent,
+  component: () => (
+    <ProtectedRoute requiredRole="admin">
+      <CreateLiveBlogComponent />
+    </ProtectedRoute>
+  ),
 })
 
 const adminDashboardRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/admin',
-  component: AdminDashboardComponent,
+  component: () => (
+    <ProtectedRoute requiredRole="admin">
+      <AdminDashboardComponent />
+    </ProtectedRoute>
+  ),
 })
 
 const routeTree = rootRoute.addChildren([
@@ -263,6 +261,7 @@ const routeTree = rootRoute.addChildren([
   articleDetailRoute,
   liveBlogsRoute,
   liveBlogDetailRoute,
+  authRoute,
   liveBlogAdminRoute,
   createLiveBlogRoute,
   adminDashboardRoute,