From 3ce8816b9acb42f7ffb685b72356cfec175a14c6 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 18 May 2024 13:05:28 -0600
Subject: [PATCH] Update auth settings UI (#11421)

---
 .../components/settings/Authentication.tsx    | 25 +++++++++++++------
 web/src/pages/Settings.tsx                    |  4 +--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/src/components/settings/Authentication.tsx b/web/src/components/settings/Authentication.tsx
index c33d2314e..0d28957fc 100644
--- a/web/src/components/settings/Authentication.tsx
+++ b/web/src/components/settings/Authentication.tsx
@@ -12,6 +12,9 @@ import CreateUserDialog from "../overlay/CreateUserDialog";
 import { toast } from "sonner";
 import DeleteUserDialog from "../overlay/DeleteUserDialog";
 import { Card } from "../ui/card";
+import { HiTrash } from "react-icons/hi";
+import { FaUserEdit } from "react-icons/fa";
+import { LuPlus } from "react-icons/lu";
 
 export default function Authentication() {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -86,16 +89,18 @@ export default function Authentication() {
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
       <div className="order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
-        <Heading as="h3" className="my-2">
-          Users
-        </Heading>
-        <div className="flex flex-row items-center justify-end gap-2">
+        <div className="flex flex-row items-center justify-between gap-2">
+          <Heading as="h3" className="my-2">
+            Users
+          </Heading>
           <Button
-            variant="select"
+            className="flex items-center gap-1"
+            variant="default"
             onClick={() => {
               setShowCreate(true);
             }}
           >
+            <LuPlus className="text-secondary-foreground" />
             Add User
           </Button>
         </div>
@@ -106,24 +111,28 @@ export default function Authentication() {
                 <div className="ml-3 flex flex-none shrink overflow-hidden text-ellipsis align-middle text-lg">
                   {u.username}
                 </div>
-                <div className="flex flex-1 justify-end space-x-2 ">
+                <div className="flex flex-1 justify-end space-x-2">
                   <Button
+                    className="flex items-center gap-1"
                     variant="secondary"
                     onClick={() => {
                       setShowSetPassword(true);
                       setSelectedUser(u.username);
                     }}
                   >
-                    Set Password
+                    <FaUserEdit />
+                    <div className="hidden md:block">Update Password</div>
                   </Button>
                   <Button
+                    className="flex items-center gap-1"
                     variant="destructive"
                     onClick={() => {
                       setShowDelete(true);
                       setSelectedUser(u.username);
                     }}
                   >
-                    Delete
+                    <HiTrash />
+                    <div className="hidden md:block">Delete</div>
                   </Button>
                 </div>
               </div>
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 590bc2096..1141763ef 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -41,7 +41,7 @@ export default function Settings() {
     "masks / zones",
     "motion tuner",
     "debug",
-    "authentication",
+    "users",
   ] as const;
 
   type SettingsType = (typeof settingsViews)[number];
@@ -171,7 +171,7 @@ export default function Settings() {
             setUnsavedChanges={setUnsavedChanges}
           />
         )}
-        {page == "authentication" && <Authentication />}
+        {page == "users" && <Authentication />}
       </div>
       {confirmationDialogOpen && (
         <AlertDialog