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/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import { Navigate, Outlet } from "react-router-dom";
+import { AuthContext } from "@/context/auth-context";
+import ActivityIndicator from "../indicators/activity-indicator";
+
+export default function ProtectedRoute({
+  requiredRoles,
+}: {
+  requiredRoles: ("admin" | "viewer")[];
+}) {
+  const { auth } = useContext(AuthContext);
+
+  if (auth.isLoading) {
+    return (
+      <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+    );
+  }
+
+  // Unauthenticated mode
+  if (!auth.isAuthenticated) {
+    return <Outlet />;
+  }
+
+  // Authenticated mode (8971): require login
+  if (!auth.user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  // If role is null (shouldn’t happen if isAuthenticated, but type safety), fallback
+  // though isAuthenticated should catch this
+  if (auth.user.role === null) {
+    return <Outlet />;
+  }
+
+  if (!requiredRoles.includes(auth.user.role)) {
+    return <Navigate to="/unauthorized" replace />;
+  }
+
+  return <Outlet />;
+}