From 28bb903b93866673b7690bec689d9978e0b7bdf2 Mon Sep 17 00:00:00 2001
From: Bert Hausmans <bert@hausmans.nl>
Date: Wed, 20 May 2026 23:12:59 +0200
Subject: [PATCH] feat(frontend): router with auth boundary, role guard, and
 all auth pages

---
 packages/frontend/src/router.tsx | 53 +++++++++++++++++++++++++-------
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/router.tsx b/packages/frontend/src/router.tsx
index 88b6ac6..ac78925 100644
--- a/packages/frontend/src/router.tsx
+++ b/packages/frontend/src/router.tsx
@@ -1,5 +1,7 @@
 import { createBrowserRouter, Navigate } from 'react-router-dom';
 import { Layout } from './components/Layout.js';
+import { AuthBoundary } from './components/AuthBoundary.js';
+import { RoleGuard } from './components/RoleGuard.js';
 import { DashboardPage } from './pages/Dashboard.js';
 import { AdminPage } from './pages/Admin.js';
 import { AdminLessonPage } from './pages/AdminLesson.js';
@@ -10,23 +12,52 @@ import { StatsPage } from './pages/Stats.js';
 import { StatsLessonPage } from './pages/StatsLesson.js';
 import { StatsCardPage } from './pages/StatsCard.js';
 import { SettingsPage } from './pages/Settings.js';
+import { LoginPage } from './pages/auth/Login.js';
+import { RegisterPage } from './pages/auth/Register.js';
+import { VerifyEmailPage } from './pages/auth/VerifyEmail.js';
+import { ForgotPasswordPage } from './pages/auth/ForgotPassword.js';
+import { ResetPasswordPage } from './pages/auth/ResetPassword.js';
+import { AcceptInvitePage } from './pages/auth/AcceptInvite.js';
+import { ProfilePage } from './pages/Profile.js';
+import { AdminUsersPage } from './pages/AdminUsers.js';
 
 export const router = createBrowserRouter([
   {
     path: '/',
     element: <Layout />,
     children: [
-      { index: true, element: <DashboardPage /> },
-      { path: 'admin', element: <AdminPage /> },
-      { path: 'admin/lessons/:id', element: <AdminLessonPage /> },
-      { path: 'practice/:lessonId/setup', element: <PracticeSetupPage /> },
-      { path: 'practice/:lessonId', element: <PracticePage /> },
-      { path: 'practice/:lessonId/done', element: <PracticeDonePage /> },
-      { path: 'stats', element: <StatsPage /> },
-      { path: 'stats/lessons/:id', element: <StatsLessonPage /> },
-      { path: 'stats/cards/:id', element: <StatsCardPage /> },
-      { path: 'settings', element: <SettingsPage /> },
-      { path: '*', element: <Navigate to="/" replace /> },
+      // Public auth routes
+      { path: 'login', element: <LoginPage /> },
+      { path: 'register', element: <RegisterPage /> },
+      { path: 'verify-email', element: <VerifyEmailPage /> },
+      { path: 'forgot-password', element: <ForgotPasswordPage /> },
+      { path: 'reset-password', element: <ResetPasswordPage /> },
+      { path: 'accept-invite', element: <AcceptInvitePage /> },
+
+      // Authenticated routes
+      {
+        element: <AuthBoundary />,
+        children: [
+          { index: true, element: <DashboardPage /> },
+          { path: 'admin', element: <AdminPage /> },
+          { path: 'admin/lessons/:id', element: <AdminLessonPage /> },
+          { path: 'practice/:lessonId/setup', element: <PracticeSetupPage /> },
+          { path: 'practice/:lessonId', element: <PracticePage /> },
+          { path: 'practice/:lessonId/done', element: <PracticeDonePage /> },
+          { path: 'stats', element: <StatsPage /> },
+          { path: 'stats/lessons/:id', element: <StatsLessonPage /> },
+          { path: 'stats/cards/:id', element: <StatsCardPage /> },
+          { path: 'settings', element: <SettingsPage /> },
+          { path: 'profile', element: <ProfilePage /> },
+          {
+            element: <RoleGuard role="sysadmin" />,
+            children: [
+              { path: 'admin/users', element: <AdminUsersPage /> },
+            ],
+          },
+          { path: '*', element: <Navigate to="/" replace /> },
+        ],
+      },
     ],
   },
 ]);