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/context/providers.tsx

@@ -6,6 +6,7 @@ import { IconContext } from "react-icons";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { StatusBarMessagesProvider } from "@/context/statusbar-provider";
 import { StreamingSettingsProvider } from "./streaming-settings-provider";
+import { AuthProvider } from "./auth-context";
 
 type TProvidersProps = {
   children: ReactNode;
@@ -14,19 +15,21 @@ type TProvidersProps = {
 function providers({ children }: TProvidersProps) {
   return (
     <RecoilRoot>
-      <ApiProvider>
-        <ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
-          <TooltipProvider>
-            <IconContext.Provider value={{ size: "20" }}>
-              <StatusBarMessagesProvider>
-                <StreamingSettingsProvider>
-                  {children}
-                </StreamingSettingsProvider>
-              </StatusBarMessagesProvider>
-            </IconContext.Provider>
-          </TooltipProvider>
-        </ThemeProvider>
-      </ApiProvider>
+      <AuthProvider>
+        <ApiProvider>
+          <ThemeProvider defaultTheme="system" storageKey="frigate-ui-theme">
+            <TooltipProvider>
+              <IconContext.Provider value={{ size: "20" }}>
+                <StatusBarMessagesProvider>
+                  <StreamingSettingsProvider>
+                    {children}
+                  </StreamingSettingsProvider>
+                </StatusBarMessagesProvider>
+              </IconContext.Provider>
+            </TooltipProvider>
+          </ThemeProvider>
+        </ApiProvider>
+      </AuthProvider>
     </RecoilRoot>
   );
 }