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/menu/AccountSettings.tsx

@@ -18,22 +18,52 @@ import {
 } from "../ui/dropdown-menu";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { DialogClose } from "../ui/dialog";
-import { LuLogOut } from "react-icons/lu";
+import { LuLogOut, LuSquarePen } from "react-icons/lu";
 import useSWR from "swr";
+import { useState } from "react";
+import axios from "axios";
+import { toast } from "sonner";
+import SetPasswordDialog from "../overlay/SetPasswordDialog";
 
 type AccountSettingsProps = {
   className?: string;
 };
+
 export default function AccountSettings({ className }: AccountSettingsProps) {
   const { data: profile } = useSWR("profile");
   const { data: config } = useSWR("config");
   const logoutUrl = config?.proxy?.logout_url || `${baseUrl}api/logout`;
 
+  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
+
   const Container = isDesktop ? DropdownMenu : Drawer;
   const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
   const Content = isDesktop ? DropdownMenuContent : DrawerContent;
   const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
 
+  const handlePasswordSave = async (password: string) => {
+    if (!profile?.username || profile.username === "anonymous") return;
+    axios
+      .put(`users/${profile.username}/password`, { password })
+      .then((response) => {
+        if (response.status === 200) {
+          setPasswordDialogOpen(false);
+          toast.success("Password updated successfully.", {
+            position: "top-center",
+          });
+        }
+      })
+      .catch((error) => {
+        const errorMessage =
+          error.response?.data?.message ||
+          error.response?.data?.detail ||
+          "Unknown error";
+        toast.error(`Error setting password: ${errorMessage}`, {
+          position: "top-center",
+        });
+      });
+  };
+
   return (
     <Container modal={!isDesktop}>
       <Trigger>
@@ -65,9 +95,22 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
       >
         <div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
           <DropdownMenuLabel>
-            Current User: {profile?.username || "anonymous"}
+            Current User: {profile?.username || "anonymous"}{" "}
+            {profile?.role && `(${profile.role})`}
           </DropdownMenuLabel>
           <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
+          {profile?.username && profile.username !== "anonymous" && (
+            <MenuItem
+              className={
+                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
+              }
+              aria-label="Set Password"
+              onClick={() => setPasswordDialogOpen(true)}
+            >
+              <LuSquarePen className="mr-2 size-4" />
+              <span>Set Password</span>
+            </MenuItem>
+          )}
           <MenuItem
             className={
               isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
@@ -81,6 +124,12 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
           </MenuItem>
         </div>
       </Content>
+      <SetPasswordDialog
+        show={passwordDialogOpen}
+        onSave={handlePasswordSave}
+        onCancel={() => setPasswordDialogOpen(false)}
+        username={profile?.username}
+      />
     </Container>
   );
 }

web/src/components/menu/GeneralSettings.tsx

@@ -24,7 +24,6 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-
 import { Link } from "react-router-dom";
 import { CgDarkMode } from "react-icons/cg";
 import {
@@ -33,10 +32,8 @@ import {
   useTheme,
 } from "@/context/theme-provider";
 import { IoColorPalette } from "react-icons/io5";
-
 import { useState } from "react";
 import { useRestart } from "@/api/ws";
-
 import {
   Tooltip,
   TooltipContent,
@@ -55,21 +52,27 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 import useSWR from "swr";
 import RestartDialog from "../overlay/dialog/RestartDialog";
+import { useIsAdmin } from "@/hooks/use-is-admin";
+import SetPasswordDialog from "../overlay/SetPasswordDialog";
+import { toast } from "sonner";
+import axios from "axios";
 
 type GeneralSettingsProps = {
   className?: string;
 };
+
 export default function GeneralSettings({ className }: GeneralSettingsProps) {
   const { data: profile } = useSWR("profile");
   const { data: config } = useSWR("config");
   const logoutUrl = config?.proxy?.logout_url || "/api/logout";
 
-  // settings
-
   const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
   const [restartDialogOpen, setRestartDialogOpen] = useState(false);
+  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
   const { send: sendRestart } = useRestart();
 
+  const isAdmin = useIsAdmin();
+
   const Container = isDesktop ? DropdownMenu : Drawer;
   const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
   const Content = isDesktop ? DropdownMenuContent : DrawerContent;
@@ -79,6 +82,29 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
   const SubItemContent = isDesktop ? DropdownMenuSubContent : DialogContent;
   const Portal = isDesktop ? DropdownMenuPortal : DialogPortal;
 
+  const handlePasswordSave = async (password: string) => {
+    if (!profile?.username || profile.username === "anonymous") return;
+    axios
+      .put(`users/${profile.username}/password`, { password })
+      .then((response) => {
+        if (response.status === 200) {
+          setPasswordDialogOpen(false);
+          toast.success("Password updated successfully.", {
+            position: "top-center",
+          });
+        }
+      })
+      .catch((error) => {
+        const errorMessage =
+          error.response?.data?.message ||
+          error.response?.data?.detail ||
+          "Unknown error";
+        toast.error(`Error setting password: ${errorMessage}`, {
+          position: "top-center",
+        });
+      });
+  };
+
   return (
     <>
       <Container modal={!isDesktop}>
@@ -121,13 +147,28 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
         >
           <div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
             {isMobile && (
-              <>
+              <div className="mb-2">
                 <DropdownMenuLabel>
-                  Current User: {profile?.username || "anonymous"}
+                  Current User: {profile?.username || "anonymous"}{" "}
+                  {profile?.role && `(${profile.role})`}
                 </DropdownMenuLabel>
                 <DropdownMenuSeparator
                   className={isDesktop ? "mt-3" : "mt-1"}
                 />
+                {profile?.username && profile.username !== "anonymous" && (
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex items-center p-2 text-sm"
+                    }
+                    aria-label="Set Password"
+                    onClick={() => setPasswordDialogOpen(true)}
+                  >
+                    <LuSquarePen className="mr-2 size-4" />
+                    <span>Set Password</span>
+                  </MenuItem>
+                )}
                 <MenuItem
                   className={
                     isDesktop
@@ -141,39 +182,45 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                     <span>Logout</span>
                   </a>
                 </MenuItem>
+              </div>
+            )}
+            {isAdmin && (
+              <>
+                <DropdownMenuLabel>System</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
+                  <Link to="/system#general">
+                    <MenuItem
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex w-full items-center p-2 text-sm"
+                      }
+                      aria-label="System metrics"
+                    >
+                      <LuActivity className="mr-2 size-4" />
+                      <span>System metrics</span>
+                    </MenuItem>
+                  </Link>
+                  <Link to="/logs">
+                    <MenuItem
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex w-full items-center p-2 text-sm"
+                      }
+                      aria-label="System logs"
+                    >
+                      <LuList className="mr-2 size-4" />
+                      <span>System logs</span>
+                    </MenuItem>
+                  </Link>
+                </DropdownMenuGroup>
               </>
             )}
-            <DropdownMenuLabel>System</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
-              <Link to="/system#general">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                  aria-label="System metrics"
-                >
-                  <LuActivity className="mr-2 size-4" />
-                  <span>System metrics</span>
-                </MenuItem>
-              </Link>
-              <Link to="/logs">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                  aria-label="System logs"
-                >
-                  <LuList className="mr-2 size-4" />
-                  <span>System logs</span>
-                </MenuItem>
-              </Link>
-            </DropdownMenuGroup>
-            <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
+            <DropdownMenuLabel
+              className={isDesktop && isAdmin ? "mt-3" : "mt-1"}
+            >
               Configuration
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
@@ -191,143 +238,143 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                   <span>Settings</span>
                 </MenuItem>
               </Link>
-              <Link to="/config">
-                <MenuItem
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex w-full items-center p-2 text-sm"
-                  }
-                  aria-label="Configuration editor"
-                >
-                  <LuSquarePen className="mr-2 size-4" />
-                  <span>Configuration editor</span>
-                </MenuItem>
-              </Link>
-              <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
-                Appearance
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <SubItem>
-                <SubItemTrigger
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex items-center p-2 text-sm"
-                  }
-                >
-                  <LuSunMoon className="mr-2 size-4" />
-                  <span>Dark Mode</span>
-                </SubItemTrigger>
-                <Portal>
-                  <SubItemContent
-                    className={
-                      isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
-                    }
-                  >
-                    <span tabIndex={0} className="sr-only" />
+              {isAdmin && (
+                <>
+                  <Link to="/config">
                     <MenuItem
                       className={
                         isDesktop
                           ? "cursor-pointer"
-                          : "flex items-center p-2 text-sm"
+                          : "flex w-full items-center p-2 text-sm"
                       }
-                      aria-label="Light mode"
-                      onClick={() => setTheme("light")}
+                      aria-label="Configuration editor"
                     >
-                      {theme === "light" ? (
-                        <>
-                          <LuSun className="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                          Light
-                        </>
-                      ) : (
-                        <span className="ml-6 mr-2">Light</span>
-                      )}
+                      <LuSquarePen className="mr-2 size-4" />
+                      <span>Configuration editor</span>
                     </MenuItem>
-                    <MenuItem
-                      className={
-                        isDesktop
-                          ? "cursor-pointer"
-                          : "flex items-center p-2 text-sm"
-                      }
-                      aria-label="Dark mode"
-                      onClick={() => setTheme("dark")}
-                    >
-                      {theme === "dark" ? (
-                        <>
-                          <LuMoon className="mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                          Dark
-                        </>
-                      ) : (
-                        <span className="ml-6 mr-2">Dark</span>
-                      )}
-                    </MenuItem>
-                    <MenuItem
-                      className={
-                        isDesktop
-                          ? "cursor-pointer"
-                          : "flex items-center p-2 text-sm"
-                      }
-                      aria-label="Use the system settings for light or dark mode"
-                      onClick={() => setTheme("system")}
-                    >
-                      {theme === "system" ? (
-                        <>
-                          <CgDarkMode className="mr-2 size-4 scale-100 transition-all" />
-                          System
-                        </>
-                      ) : (
-                        <span className="ml-6 mr-2">System</span>
-                      )}
-                    </MenuItem>
-                  </SubItemContent>
-                </Portal>
-              </SubItem>
-              <SubItem>
-                <SubItemTrigger
-                  className={
-                    isDesktop
-                      ? "cursor-pointer"
-                      : "flex items-center p-2 text-sm"
-                  }
-                >
-                  <LuSunMoon className="mr-2 size-4" />
-                  <span>Theme</span>
-                </SubItemTrigger>
-                <Portal>
-                  <SubItemContent
-                    className={
-                      isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
-                    }
-                  >
-                    <span tabIndex={0} className="sr-only" />
-                    {colorSchemes.map((scheme) => (
-                      <MenuItem
-                        key={scheme}
-                        className={
-                          isDesktop
-                            ? "cursor-pointer"
-                            : "flex items-center p-2 text-sm"
-                        }
-                        aria-label={`Color scheme - ${scheme}`}
-                        onClick={() => setColorScheme(scheme)}
-                      >
-                        {scheme === colorScheme ? (
-                          <>
-                            <IoColorPalette className="mr-2 size-4 rotate-0 scale-100 transition-all" />
-                            {friendlyColorSchemeName(scheme)}
-                          </>
-                        ) : (
-                          <span className="ml-6 mr-2">
-                            {friendlyColorSchemeName(scheme)}
-                          </span>
-                        )}
-                      </MenuItem>
-                    ))}
-                  </SubItemContent>
-                </Portal>
-              </SubItem>
+                  </Link>
+                </>
+              )}
             </DropdownMenuGroup>
+            <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
+              Appearance
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <SubItem>
+              <SubItemTrigger
+                className={
+                  isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
+                }
+              >
+                <LuSunMoon className="mr-2 size-4" />
+                <span>Dark Mode</span>
+              </SubItemTrigger>
+              <Portal>
+                <SubItemContent
+                  className={
+                    isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+                  }
+                >
+                  <span tabIndex={0} className="sr-only" />
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex items-center p-2 text-sm"
+                    }
+                    aria-label="Light mode"
+                    onClick={() => setTheme("light")}
+                  >
+                    {theme === "light" ? (
+                      <>
+                        <LuSun className="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                        Light
+                      </>
+                    ) : (
+                      <span className="ml-6 mr-2">Light</span>
+                    )}
+                  </MenuItem>
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex items-center p-2 text-sm"
+                    }
+                    aria-label="Dark mode"
+                    onClick={() => setTheme("dark")}
+                  >
+                    {theme === "dark" ? (
+                      <>
+                        <LuMoon className="mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                        Dark
+                      </>
+                    ) : (
+                      <span className="ml-6 mr-2">Dark</span>
+                    )}
+                  </MenuItem>
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex items-center p-2 text-sm"
+                    }
+                    aria-label="Use the system settings for light or dark mode"
+                    onClick={() => setTheme("system")}
+                  >
+                    {theme === "system" ? (
+                      <>
+                        <CgDarkMode className="mr-2 size-4 scale-100 transition-all" />
+                        System
+                      </>
+                    ) : (
+                      <span className="ml-6 mr-2">System</span>
+                    )}
+                  </MenuItem>
+                </SubItemContent>
+              </Portal>
+            </SubItem>
+            <SubItem>
+              <SubItemTrigger
+                className={
+                  isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
+                }
+              >
+                <LuSunMoon className="mr-2 size-4" />
+                <span>Theme</span>
+              </SubItemTrigger>
+              <Portal>
+                <SubItemContent
+                  className={
+                    isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+                  }
+                >
+                  <span tabIndex={0} className="sr-only" />
+                  {colorSchemes.map((scheme) => (
+                    <MenuItem
+                      key={scheme}
+                      className={
+                        isDesktop
+                          ? "cursor-pointer"
+                          : "flex items-center p-2 text-sm"
+                      }
+                      aria-label={`Color scheme - ${scheme}`}
+                      onClick={() => setColorScheme(scheme)}
+                    >
+                      {scheme === colorScheme ? (
+                        <>
+                          <IoColorPalette className="mr-2 size-4 rotate-0 scale-100 transition-all" />
+                          {friendlyColorSchemeName(scheme)}
+                        </>
+                      ) : (
+                        <span className="ml-6 mr-2">
+                          {friendlyColorSchemeName(scheme)}
+                        </span>
+                      )}
+                    </MenuItem>
+                  ))}
+                </SubItemContent>
+              </Portal>
+            </SubItem>
             <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
               Help
             </DropdownMenuLabel>
@@ -357,17 +404,25 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                 <span>GitHub</span>
               </MenuItem>
             </a>
-            <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
-            <MenuItem
-              className={
-                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
-              }
-              aria-label="Restart Frigate"
-              onClick={() => setRestartDialogOpen(true)}
-            >
-              <LuRotateCw className="mr-2 size-4" />
-              <span>Restart Frigate</span>
-            </MenuItem>
+            {isAdmin && (
+              <>
+                <DropdownMenuSeparator
+                  className={isDesktop ? "mt-3" : "mt-1"}
+                />
+                <MenuItem
+                  className={
+                    isDesktop
+                      ? "cursor-pointer"
+                      : "flex items-center p-2 text-sm"
+                  }
+                  aria-label="Restart Frigate"
+                  onClick={() => setRestartDialogOpen(true)}
+                >
+                  <LuRotateCw className="mr-2 size-4" />
+                  <span>Restart Frigate</span>
+                </MenuItem>
+              </>
+            )}
           </div>
         </Content>
       </Container>
@@ -376,6 +431,12 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
         onClose={() => setRestartDialogOpen(false)}
         onRestart={() => sendRestart("restart")}
       />
+      <SetPasswordDialog
+        show={passwordDialogOpen}
+        onSave={handlePasswordSave}
+        onCancel={() => setPasswordDialogOpen(false)}
+        username={profile?.username}
+      />
     </>
   );
 }

web/src/components/menu/SearchResultActions.tsx

@@ -74,8 +74,12 @@ export default function SearchResultActions({
           refreshResults();
         }
       })
-      .catch(() => {
-        toast.error("Failed to delete tracked object.", {
+      .catch((error) => {
+        const errorMessage =
+          error.response?.data?.message ||
+          error.response?.data?.detail ||
+          "Unknown error";
+        toast.error(`Failed to delete tracked object: ${errorMessage}`, {
           position: "top-center",
         });
       });