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/overlay/CreateUserDialog.tsx

@@ -2,6 +2,7 @@ import { Button } from "../ui/button";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -12,20 +13,31 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "../ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { Shield, User } from "lucide-react";
+import { LuCheck, LuX } from "react-icons/lu";
 
 type CreateUserOverlayProps = {
   show: boolean;
-  onCreate: (user: string, password: string) => void;
+  onCreate: (user: string, password: string, role: "admin" | "viewer") => void;
   onCancel: () => void;
 };
+
 export default function CreateUserDialog({
   show,
   onCreate,
@@ -33,15 +45,22 @@ export default function CreateUserDialog({
 }: CreateUserOverlayProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const formSchema = z.object({
-    user: z
-      .string()
-      .min(1)
-      .regex(/^[A-Za-z0-9._]+$/, {
-        message: "Username may only include letters, numbers, . or _",
-      }),
-    password: z.string(),
-  });
+  const formSchema = z
+    .object({
+      user: z
+        .string()
+        .min(1, "Username is required")
+        .regex(/^[A-Za-z0-9._]+$/, {
+          message: "Username may only include letters, numbers, . or _",
+        }),
+      password: z.string().min(1, "Password is required"),
+      confirmPassword: z.string().min(1, "Please confirm your password"),
+      role: z.enum(["admin", "viewer"]),
+    })
+    .refine((data) => data.password === data.confirmPassword, {
+      message: "Passwords don't match",
+      path: ["confirmPassword"],
+    });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -49,32 +68,93 @@ export default function CreateUserDialog({
     defaultValues: {
       user: "",
       password: "",
+      confirmPassword: "",
+      role: "viewer",
     },
   });
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
     setIsLoading(true);
-    await onCreate(values.user, values.password);
+    await onCreate(values.user, values.password, values.role);
     form.reset();
     setIsLoading(false);
   };
 
+  // Check if passwords match for real-time feedback
+  const password = form.watch("password");
+  const confirmPassword = form.watch("confirmPassword");
+  const passwordsMatch = password === confirmPassword;
+  const showMatchIndicator = password && confirmPassword;
+
+  useEffect(() => {
+    if (!show) {
+      form.reset({
+        user: "",
+        password: "",
+        role: "viewer",
+      });
+    }
+  }, [show, form]);
+
+  const handleCancel = () => {
+    form.reset({
+      user: "",
+      password: "",
+      role: "viewer",
+    });
+    onCancel();
+  };
+
   return (
     <Dialog open={show} onOpenChange={onCancel}>
-      <DialogContent>
+      <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle>Create User</DialogTitle>
+          <DialogTitle>Create New User</DialogTitle>
+          <DialogDescription>
+            Add a new user account and specify an role for access to areas of
+            the Frigate UI.
+          </DialogDescription>
         </DialogHeader>
+
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-5 py-4"
+          >
             <FormField
               name="user"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>User</FormLabel>
+                  <FormLabel className="text-sm font-medium">
+                    Username
+                  </FormLabel>
                   <FormControl>
                     <Input
-                      className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      placeholder="Enter username"
+                      className="h-10"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription className="text-xs text-muted-foreground">
+                    Only letters, numbers, periods and underscores allowed.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-sm font-medium">
+                    Password
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Enter password"
+                      type="password"
+                      className="h-10"
                       {...field}
                     />
                   </FormControl>
@@ -82,30 +162,121 @@ export default function CreateUserDialog({
                 </FormItem>
               )}
             />
+
             <FormField
-              name="password"
+              name="confirmPassword"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Password</FormLabel>
+                  <FormLabel className="text-sm font-medium">
+                    Confirm Password
+                  </FormLabel>
                   <FormControl>
                     <Input
-                      className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      placeholder="Confirm password"
                       type="password"
+                      className="h-10"
                       {...field}
                     />
                   </FormControl>
+                  {showMatchIndicator && (
+                    <div className="mt-1 flex items-center gap-1.5 text-xs">
+                      {passwordsMatch ? (
+                        <>
+                          <LuCheck className="size-3.5 text-green-500" />
+                          <span className="text-green-600">
+                            Passwords match
+                          </span>
+                        </>
+                      ) : (
+                        <>
+                          <LuX className="size-3.5 text-red-500" />
+                          <span className="text-red-600">
+                            Passwords don't match
+                          </span>
+                        </>
+                      )}
+                    </div>
+                  )}
+                  <FormMessage />
                 </FormItem>
               )}
             />
-            <DialogFooter className="mt-4">
-              <Button
-                variant="select"
-                aria-label="Create user"
-                disabled={isLoading}
-              >
-                {isLoading && <ActivityIndicator className="mr-2 h-4 w-4" />}
-                Create User
-              </Button>
+
+            <FormField
+              name="role"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-sm font-medium">Role</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="h-10">
+                        <SelectValue placeholder="Select a role" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem
+                        value="admin"
+                        className="flex items-center gap-2"
+                      >
+                        <div className="flex items-center gap-2">
+                          <Shield className="h-4 w-4 text-primary" />
+                          <span>Admin</span>
+                        </div>
+                      </SelectItem>
+                      <SelectItem
+                        value="viewer"
+                        className="flex items-center gap-2"
+                      >
+                        <div className="flex items-center gap-2">
+                          <User className="h-4 w-4 text-muted-foreground" />
+                          <span>Viewer</span>
+                        </div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormDescription className="text-xs text-muted-foreground">
+                    Admins have full access to all features in the Frigate UI.
+                    Viewers are limited to viewing cameras, review items, and
+                    historical footage in the UI.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter className="flex gap-2 pt-2 sm:justify-end">
+              <div className="flex flex-1 flex-col justify-end">
+                <div className="flex flex-row gap-2 pt-5">
+                  <Button
+                    className="flex flex-1"
+                    aria-label="Cancel"
+                    disabled={isLoading}
+                    onClick={handleCancel}
+                    type="button"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="select"
+                    aria-label="Save"
+                    disabled={isLoading || !form.formState.isValid}
+                    className="flex flex-1"
+                    type="submit"
+                  >
+                    {isLoading ? (
+                      <div className="flex flex-row items-center gap-2">
+                        <ActivityIndicator />
+                        <span>Saving...</span>
+                      </div>
+                    ) : (
+                      "Save"
+                    )}
+                  </Button>
+                </div>
+              </div>
             </DialogFooter>
           </form>
         </Form>