added multi user support, move api key to database

frontend/src/App.tsx

@@ -1,11 +1,25 @@
 import { NavLink, Navigate, Route, Routes } from 'react-router-dom'
-import { LogOut, Moon, Router, Sun, Users, Wifi } from 'lucide-react'
+import {
+  KeyRound,
+  LogOut,
+  Moon,
+  Router,
+  ScrollText,
+  Sun,
+  UserCog,
+  Users as UsersIcon,
+  Wifi,
+} from 'lucide-react'
 import { useAuth } from '@/auth/auth'
 import { useTheme } from '@/lib/theme'
 import { Login } from '@/pages/Login'
 import { Clients } from '@/pages/Clients'
 import { Devices } from '@/pages/Devices'
 import { Vlans } from '@/pages/Vlans'
+import { Users } from '@/pages/Users'
+import { ApiKeys } from '@/pages/ApiKeys'
+import { Logs } from '@/pages/Logs'
+import { ChangePassword } from '@/pages/ChangePassword'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 
@@ -25,7 +39,7 @@ function ThemeToggle() {
   )
 }
 
-function Nav() {
+function Nav({ username, isAdmin }: { username: string; isAdmin: boolean }) {
   const { logout } = useAuth()
   const linkClass = ({ isActive }: { isActive: boolean }) =>
     cn(
@@ -41,7 +55,7 @@ function Nav() {
           RADIUS Admin
         </div>
         <NavLink to="/clients" className={linkClass}>
-          <Users className="h-4 w-4" /> Clients
+          <UsersIcon className="h-4 w-4" /> Clients
         </NavLink>
         <NavLink to="/devices" className={linkClass}>
           <Router className="h-4 w-4" /> Devices
@@ -49,7 +63,23 @@ function Nav() {
         <NavLink to="/vlans" className={linkClass}>
           <Wifi className="h-4 w-4" /> VLANs
         </NavLink>
+        {isAdmin && (
+          <>
+            <NavLink to="/users" className={linkClass}>
+              <UserCog className="h-4 w-4" /> Users
+            </NavLink>
+            <NavLink to="/apikeys" className={linkClass}>
+              <KeyRound className="h-4 w-4" /> API Keys
+            </NavLink>
+            <NavLink to="/logs" className={linkClass}>
+              <ScrollText className="h-4 w-4" /> Activity Log
+            </NavLink>
+          </>
+        )}
         <div className="ml-auto flex items-center gap-1">
+          <NavLink to="/account" className={linkClass} title="Change password">
+            {username}
+          </NavLink>
           <ThemeToggle />
           <Button variant="ghost" size="sm" className="text-muted-foreground" onClick={logout}>
             <LogOut className="h-4 w-4" /> Sign out
@@ -61,18 +91,32 @@ function Nav() {
 }
 
 export default function App() {
-  const { authenticated } = useAuth()
+  const { user } = useAuth()
 
-  if (!authenticated) return <Login />
+  if (!user) return <Login />
+
+  if (user.must_change_password) return <ChangePassword forced />
+
+  const admin = user.is_admin
 
   return (
     <div className="min-h-screen bg-muted/20">
-      <Nav />
+      <Nav username={user.username} isAdmin={admin} />
       <main className="mx-auto max-w-6xl px-4 py-6">
         <Routes>
           <Route path="/clients" element={<Clients />} />
           <Route path="/devices" element={<Devices />} />
           <Route path="/vlans" element={<Vlans />} />
+          <Route path="/account" element={<ChangePassword />} />
+          <Route
+            path="/users"
+            element={admin ? <Users /> : <Navigate to="/clients" replace />}
+          />
+          <Route
+            path="/apikeys"
+            element={admin ? <ApiKeys /> : <Navigate to="/clients" replace />}
+          />
+          <Route path="/logs" element={admin ? <Logs /> : <Navigate to="/clients" replace />} />
           <Route path="*" element={<Navigate to="/clients" replace />} />
         </Routes>
       </main>