user management UI

web/src/components/overlay/CreateUserDialog.tsx

@@ -0,0 +1,111 @@
+import { Button } from "../ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../ui/form";
+import { Input } from "../ui/input";
+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 {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+
+type CreateUserOverlayProps = {
+  show: boolean;
+  onCreate: (user: string, password: string) => void;
+  onCancel: () => void;
+};
+export default function CreateUserDialog({
+  show,
+  onCreate,
+  onCancel,
+}: 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().min(8),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+    defaultValues: {
+      user: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    await onCreate(values.user, values.password);
+    form.reset();
+    setIsLoading(false);
+  };
+
+  return (
+    <Dialog open={show} onOpenChange={onCancel}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create User</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <FormField
+              name="user"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>User</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      type="password"
+                      {...field}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <DialogFooter className="mt-4">
+              <Button variant="select" disabled={isLoading}>
+                {isLoading && <ActivityIndicator className="mr-2 h-4 w-4" />}
+                Create User
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/overlay/DeleteUserDialog.tsx

@@ -0,0 +1,40 @@
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+
+type SetPasswordProps = {
+  show: boolean;
+  onDelete: () => void;
+  onCancel: () => void;
+};
+export default function DeleteUserDialog({
+  show,
+  onDelete,
+  onCancel,
+}: SetPasswordProps) {
+  return (
+    <Dialog open={show} onOpenChange={onCancel}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete User</DialogTitle>
+        </DialogHeader>
+        <div>Are you sure?</div>
+        <DialogFooter>
+          <Button
+            className="flex items-center gap-1"
+            variant="destructive"
+            size="sm"
+            onClick={onDelete}
+          >
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/overlay/SetPasswordDialog.tsx

@@ -0,0 +1,51 @@
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+
+type SetPasswordProps = {
+  show: boolean;
+  onSave: (password: string) => void;
+  onCancel: () => void;
+};
+export default function SetPasswordDialog({
+  show,
+  onSave,
+  onCancel,
+}: SetPasswordProps) {
+  const [password, setPassword] = useState<string>();
+
+  return (
+    <Dialog open={show} onOpenChange={onCancel}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Set Password</DialogTitle>
+        </DialogHeader>
+        <Input
+          className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+          type="password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+        />
+        <DialogFooter>
+          <Button
+            className="flex items-center gap-1"
+            variant="select"
+            size="sm"
+            onClick={() => {
+              onSave(password!);
+            }}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/components/settings/Authentication.tsx

@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useState } from "react";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { Toaster } from "@/components/ui/sonner";
+import useSWR from "swr";
+import Heading from "../ui/heading";
+import { User } from "@/types/user";
+import { Button } from "../ui/button";
+import SetPasswordDialog from "../overlay/SetPasswordDialog";
+import axios from "axios";
+import CreateUserDialog from "../overlay/CreateUserDialog";
+import { toast } from "sonner";
+import DeleteUserDialog from "../overlay/DeleteUserDialog";
+import { Card } from "../ui/card";
+
+export default function Authentication() {
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const { data: users, mutate: mutateUsers } = useSWR<User[]>("users");
+
+  const [showSetPassword, setShowSetPassword] = useState(false);
+  const [showCreate, setShowCreate] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
+
+  const [selectedUser, setSelectedUser] = useState<string>();
+
+  useEffect(() => {
+    document.title = "Authentication Settings - Frigate";
+  }, []);
+
+  const onSavePassword = useCallback((user: string, password: string) => {
+    axios
+      .put(`users/${user}/password`, {
+        password: password,
+      })
+      .then((response) => {
+        if (response.status == 200) {
+          // console.log("saved");
+        }
+      })
+      .catch((error) => {
+        if (error.response?.data?.message) {
+          // console.log("error");
+        } else {
+          // console.log("error");
+        }
+      });
+  }, []);
+
+  const onCreate = async (user: string, password: string) => {
+    try {
+      await axios.post("users", {
+        username: user,
+        password: password,
+      });
+      setShowCreate(false);
+      mutateUsers((users) => {
+        users?.push({ username: user });
+        return users;
+      }, false);
+    } catch (error) {
+      toast.error("Error creating user. Check server logs.", {
+        position: "top-center",
+      });
+    }
+  };
+
+  const onDelete = async (user: string) => {
+    try {
+      await axios.delete(`users/${user}`);
+      setShowDelete(false);
+      mutateUsers((users) => {
+        return users?.filter((u) => {
+          return u.username !== user;
+        });
+      }, false);
+    } catch (error) {
+      toast.error("Error deleting user. Check server logs.", {
+        position: "top-center",
+      });
+    }
+  };
+
+  if (!config || !users) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row size-full">
+      <Toaster position="top-center" closeButton={true} />
+      <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
+        <Heading as="h3" className="my-2">
+          Users
+        </Heading>
+        <div className="flex flex-row justify-end items-center gap-2">
+          <Button
+            variant="select"
+            onClick={() => {
+              setShowCreate(true);
+            }}
+          >
+            Add User
+          </Button>
+        </div>
+        <div className="mt-3 space-y-3">
+          {users.map((u) => (
+            <Card key={u.username} className="p-2 mb-1">
+              <div className="flex items-center gap-3">
+                <div className="flex flex-none ml-3 text-lg align-middle text-ellipsis overflow-hidden shrink">
+                  {u.username}
+                </div>
+                <div className="flex flex-1 justify-end space-x-2 ">
+                  <Button
+                    variant="secondary"
+                    onClick={() => {
+                      setShowSetPassword(true);
+                      setSelectedUser(u.username);
+                    }}
+                  >
+                    Set Password
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={() => {
+                      setShowDelete(true);
+                      setSelectedUser(u.username);
+                    }}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+      <SetPasswordDialog
+        show={showSetPassword}
+        onCancel={() => {
+          setShowSetPassword(false);
+        }}
+        onSave={(password) => {
+          onSavePassword(selectedUser!, password);
+        }}
+      />
+      <DeleteUserDialog
+        show={showDelete}
+        onCancel={() => {
+          setShowDelete(false);
+        }}
+        onDelete={() => {
+          onDelete(selectedUser!);
+        }}
+      />
+      <CreateUserDialog
+        show={showCreate}
+        onCreate={onCreate}
+        onCancel={() => {
+          setShowCreate(false);
+        }}
+      />
+    </div>
+  );
+}

web/src/pages/Settings.tsx

@@ -33,6 +33,7 @@ import { PolygonType } from "@/types/canvas";
 import ObjectSettings from "@/components/settings/ObjectSettings";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import scrollIntoView from "scroll-into-view-if-needed";
+import Authentication from "@/components/settings/Authentication";
 
 export default function Settings() {
   const settingsViews = [
@@ -40,6 +41,7 @@ export default function Settings() {
     "masks / zones",
     "motion tuner",
     "debug",
+    "authentication",
   ] as const;
 
   type SettingsType = (typeof settingsViews)[number];
@@ -169,6 +171,7 @@ export default function Settings() {
             setUnsavedChanges={setUnsavedChanges}
           />
         )}
+        {page == "authentication" && <Authentication />}
       </div>
       {confirmationDialogOpen && (
         <AlertDialog

web/src/types/user.ts

@@ -0,0 +1,3 @@
+export type User = {
+  username: string;
+};