UI viewer role (#16978)

* db migration

* db model

* assign admin role on password reset

* add role to jwt and api responses

* don't restrict api access for admins yet

* use json response

* frontend auth context

* update auth form for profile endpoint

* add access denied page

* add protected routes

* auth hook

* dialogs

* user settings view

* restrict viewer access to settings

* restrict camera functions for viewer role

* add password dialog to account menu

* spacing tweak

* migrator default to admin

* escape quotes in migrator

* ui tweaks

* tweaks

* colors

* colors

* fix merge conflict

* fix icons

* add api layer enforcement

* ui tweaks

* fix error message

* debug

* clean up

* remove print

* guard apis for admin only

* fix tests

* fix review tests

* use correct error responses from api in toasts

* add role to account menu

web/src/App.tsx

@@ -10,6 +10,8 @@ import { Suspense, lazy } from "react";
 import { Redirect } from "./components/navigation/Redirect";
 import { cn } from "./lib/utils";
 import { isPWA } from "./utils/isPWA";
+import ProtectedRoute from "@/components/auth/ProtectedRoute";
+import { AuthProvider } from "@/context/auth-context";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -21,45 +23,58 @@ const Settings = lazy(() => import("@/pages/Settings"));
 const UIPlayground = lazy(() => import("@/pages/UIPlayground"));
 const FaceLibrary = lazy(() => import("@/pages/FaceLibrary"));
 const Logs = lazy(() => import("@/pages/Logs"));
+const AccessDenied = lazy(() => import("@/pages/AccessDenied"));
 
 function App() {
   return (
     <Providers>
-      <BrowserRouter basename={window.baseUrl}>
-        <Wrapper>
-          <div className="size-full overflow-hidden">
-            {isDesktop && <Sidebar />}
-            {isDesktop && <Statusbar />}
-            {isMobile && <Bottombar />}
-            <div
-              id="pageRoot"
-              className={cn(
-                "absolute right-0 top-0 overflow-hidden",
-                isMobile
-                  ? `bottom-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16`
-                  : "bottom-8 left-[52px]",
-              )}
-            >
-              <Suspense>
-                <Routes>
-                  <Route index element={<Live />} />
-                  <Route path="/events" element={<Redirect to="/review" />} />
-                  <Route path="/review" element={<Events />} />
-                  <Route path="/explore" element={<Explore />} />
-                  <Route path="/export" element={<Exports />} />
-                  <Route path="/system" element={<System />} />
-                  <Route path="/settings" element={<Settings />} />
-                  <Route path="/config" element={<ConfigEditor />} />
-                  <Route path="/logs" element={<Logs />} />
-                  <Route path="/playground" element={<UIPlayground />} />
-                  <Route path="/faces" element={<FaceLibrary />} />
-                  <Route path="*" element={<Redirect to="/" />} />
-                </Routes>
-              </Suspense>
+      <AuthProvider>
+        <BrowserRouter basename={window.baseUrl}>
+          <Wrapper>
+            <div className="size-full overflow-hidden">
+              {isDesktop && <Sidebar />}
+              {isDesktop && <Statusbar />}
+              {isMobile && <Bottombar />}
+              <div
+                id="pageRoot"
+                className={cn(
+                  "absolute right-0 top-0 overflow-hidden",
+                  isMobile
+                    ? `bottom-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16`
+                    : "bottom-8 left-[52px]",
+                )}
+              >
+                <Suspense>
+                  <Routes>
+                    <Route
+                      element={
+                        <ProtectedRoute requiredRoles={["viewer", "admin"]} />
+                      }
+                    >
+                      <Route index element={<Live />} />
+                      <Route path="/review" element={<Events />} />
+                      <Route path="/explore" element={<Explore />} />
+                      <Route path="/export" element={<Exports />} />
+                      <Route path="/settings" element={<Settings />} />
+                    </Route>
+                    <Route
+                      element={<ProtectedRoute requiredRoles={["admin"]} />}
+                    >
+                      <Route path="/system" element={<System />} />
+                      <Route path="/config" element={<ConfigEditor />} />
+                      <Route path="/logs" element={<Logs />} />
+                      <Route path="/faces" element={<FaceLibrary />} />
+                      <Route path="/playground" element={<UIPlayground />} />
+                    </Route>
+                    <Route path="/unauthorized" element={<AccessDenied />} />
+                    <Route path="*" element={<Redirect to="/" />} />
+                  </Routes>
+                </Suspense>
+              </div>
             </div>
-          </div>
-        </Wrapper>
-      </BrowserRouter>
+          </Wrapper>
+        </BrowserRouter>
+      </AuthProvider>
     </Providers>
   );
 }