Implement authentication system with access control UI

frontend/src/App.tsx

@@ -1,20 +1,65 @@
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
+import { AuthProvider, useAuth } from './contexts/AuthContext';
 import Layout from './components/Layout';
 import Home from './pages/Home';
 import ProjectPage from './pages/ProjectPage';
 import PackagePage from './pages/PackagePage';
 import Dashboard from './pages/Dashboard';
+import LoginPage from './pages/LoginPage';
+import ChangePasswordPage from './pages/ChangePasswordPage';
+import APIKeysPage from './pages/APIKeysPage';
+import AdminUsersPage from './pages/AdminUsersPage';
+import AdminOIDCPage from './pages/AdminOIDCPage';
+
+// Component that checks if user must change password
+function RequirePasswordChange({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  const location = useLocation();
+
+  if (loading) {
+    return null;
+  }
+
+  // If user is logged in and must change password, redirect to change password page
+  if (user?.must_change_password && location.pathname !== '/change-password') {
+    return <Navigate to="/change-password" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route path="/change-password" element={<ChangePasswordPage />} />
+      <Route
+        path="*"
+        element={
+          <RequirePasswordChange>
+            <Layout>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/dashboard" element={<Dashboard />} />
+                <Route path="/settings/api-keys" element={<APIKeysPage />} />
+                <Route path="/admin/users" element={<AdminUsersPage />} />
+                <Route path="/admin/oidc" element={<AdminOIDCPage />} />
+                <Route path="/project/:projectName" element={<ProjectPage />} />
+                <Route path="/project/:projectName/:packageName" element={<PackagePage />} />
+              </Routes>
+            </Layout>
+          </RequirePasswordChange>
+        }
+      />
+    </Routes>
+  );
+}
 
 function App() {
   return (
-    <Layout>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/project/:projectName" element={<ProjectPage />} />
-        <Route path="/project/:projectName/:packageName" element={<PackagePage />} />
-      </Routes>
-    </Layout>
+    <AuthProvider>
+      <AppRoutes />
+    </AuthProvider>
   );
 }