Enhance user roles to limit camera access (#20024)

* update config for roles and add validator

* ensure admin and viewer are never overridden

* add class method to user to retrieve all allowed cameras

* enforce config roles in auth api endpoints

* add camera access api dependency functions

* protect review endpoints

* protect preview endpoints

* rename param name for better fastapi injection matching

* remove unneeded

* protect export endpoints

* protect event endpoints

* protect media endpoints

* update auth hook for allowed cameras

* update default app view

* ensure anonymous user always returns all cameras

* limit cameras in explore

* cameras is already a list

* limit cameras in review/history

* limit cameras in live view

* limit cameras in camera groups

* only show face library and classification in sidebar for admin

* remove check in delete reviews

since admin role is required, no need to check camera access. fixes failing test

* pass request with camera access for tests

* more async

* camera access tests

* fix proxy auth tests

* allowed cameras for review tests

* combine event tests and refactor for camera access

* fix post validation for roles

* don't limit roles in create user dialog

* fix triggers endpoints

no need to run require camera access dep since the required role is admin

* fix type

* create and edit role dialogs

* delete role dialog

* fix role change dialog

* update settings view for roles

* i18n changes

* minor spacing tweaks

* docs

* use badges and camera name label component

* clarify docs

* display all cameras badge for admin and viewer

* i18n fix

* use validator to prevent reserved and empty roles from being assigned

* split users and roles into separate tabs in settings

* tweak docs

* clarify docs

* change icon

* don't memoize roles

always recalculate on component render

web/src/App.tsx

@@ -47,6 +47,9 @@ function App() {
 }
 
 function DefaultAppView() {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
   return (
     <div className="size-full overflow-hidden">
       {isDesktop && <Sidebar />}
@@ -64,7 +67,15 @@ function DefaultAppView() {
         <Suspense>
           <Routes>
             <Route
-              element={<ProtectedRoute requiredRoles={["viewer", "admin"]} />}
+              element={
+                <ProtectedRoute
+                  requiredRoles={
+                    config?.auth.roles
+                      ? Object.keys(config.auth.roles)
+                      : ["admin", "viewer"]
+                  }
+                />
+              }
             >
               <Route index element={<Live />} />
               <Route path="/review" element={<Events />} />