feat(users): add user administration and password management

validation-suite/frontend/atlas/components/app-shell.tsx

@@ -8,11 +8,13 @@ import {
   LayoutDashboard,
   LogOut,
   MapPin,
+  Shield,
   Stethoscope,
   UserRound
 } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { useAuth } from "@/components/auth";
 import { BrandLogo } from "@/components/brand/brand-logo";
 
@@ -24,13 +26,21 @@ const navigation = [
   { href: "/devices", label: "Geraete", icon: Stethoscope },
   { href: "/equipment", label: "Pruefmittel", icon: Gauge },
   { href: "/validations", label: "Validierungen", icon: ClipboardCheck },
-  { href: "/documents", label: "Dokumente", icon: FileArchive }
+  { href: "/documents", label: "Dokumente", icon: FileArchive },
+  { href: "/users", label: "Benutzer", icon: Shield, adminOnly: true }
 ];
 
 export function AppShell({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
+  const router = useRouter();
   const auth = useAuth();
 
+  useEffect(() => {
+    if (auth.user?.must_change_password && pathname !== "/profile/security") {
+      router.push("/profile/security");
+    }
+  }, [auth.user?.must_change_password, pathname, router]);
+
   return (
     <div className="min-h-screen bg-background text-text">
       <aside className="fixed inset-y-0 left-0 z-30 hidden w-72 border-r border-border bg-surface px-5 py-6 lg:block">
@@ -40,6 +50,9 @@ export function AppShell({ children }: { children: React.ReactNode }) {
         <nav className="space-y-1">
           {navigation.map((item, index) => {
             const Icon = item.icon;
+            if ("adminOnly" in item && item.adminOnly && auth.user?.role !== "admin") {
+              return null;
+            }
             const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
             return (
               <Link

validation-suite/frontend/atlas/components/auth.tsx

@@ -2,11 +2,14 @@
 
 import { useRouter } from "next/navigation";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { apiGet, User } from "@/lib/api";
 
 type AuthContextValue = {
   token: string | null;
   setToken: (value: string | null) => void;
   logout: () => void;
+  user: User | null;
+  refreshUser: () => void;
 };
 
 const AuthContext = createContext<AuthContextValue | null>(null);
@@ -14,11 +17,23 @@ const AuthContext = createContext<AuthContextValue | null>(null);
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const [token, setTokenState] = useState<string | null>(null);
+  const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
-    setTokenState(window.localStorage.getItem("atlas_token"));
+    const stored = window.localStorage.getItem("atlas_token");
+    setTokenState(stored);
+    if (!stored) return;
+    void apiGet<User>("/auth/me", stored).then(setUser).catch(() => setUser(null));
   }, []);
 
+  useEffect(() => {
+    if (!token) {
+      setUser(null);
+      return;
+    }
+    void apiGet<User>("/auth/me", token).then(setUser).catch(() => setUser(null));
+  }, [token]);
+
   const value = useMemo<AuthContextValue>(() => {
     const setToken = (next: string | null) => {
       setTokenState(next);
@@ -34,9 +49,15 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       logout: () => {
         setToken(null);
         router.push("/login");
+      },
+      user,
+      refreshUser: () => {
+        if (token) {
+          void apiGet<User>("/auth/me", token).then(setUser).catch(() => setUser(null));
+        }
       }
     };
-  }, [router, token]);
+  }, [router, token, user]);
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
@@ -48,4 +69,3 @@ export function useAuth() {
   }
   return value;
 }
-