Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Update auth settings UI (#11421)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-18 13:05:28 -06:00 committed by GitHub
parent 5c609c7051
commit 3ce8816b9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/settings/Authentication.tsx
View File

@ -12,6 +12,9 @@ import CreateUserDialog from "../overlay/CreateUserDialog";
import { toast } from "sonner"; import { toast } from "sonner";
import DeleteUserDialog from "../overlay/DeleteUserDialog"; import DeleteUserDialog from "../overlay/DeleteUserDialog";
import { Card } from "../ui/card"; 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() { export default function Authentication() {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
@ -86,16 +89,18 @@ export default function Authentication() {
<div className="flex size-full flex-col md:flex-row"> <div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} /> <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"> <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"> <div className="flex flex-row items-center justify-between gap-2">
Users <Heading as="h3" className="my-2">
</Heading> Users
<div className="flex flex-row items-center justify-end gap-2"> </Heading>
<Button <Button
variant="select" className="flex items-center gap-1"
variant="default"
onClick={() => { onClick={() => {
setShowCreate(true); setShowCreate(true);
}} }}
> >
<LuPlus className="text-secondary-foreground" />
Add User Add User
</Button> </Button>
</div> </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"> <div className="ml-3 flex flex-none shrink overflow-hidden text-ellipsis align-middle text-lg">
{u.username} {u.username}
</div> </div>
<div className="flex flex-1 justify-end space-x-2 "> <div className="flex flex-1 justify-end space-x-2">
<Button <Button
className="flex items-center gap-1"
variant="secondary" variant="secondary"
onClick={() => { onClick={() => {
setShowSetPassword(true); setShowSetPassword(true);
setSelectedUser(u.username); setSelectedUser(u.username);
}} }}
> >
Set Password <FaUserEdit />
<div className="hidden md:block">Update Password</div>
</Button> </Button>
<Button <Button
className="flex items-center gap-1"
variant="destructive" variant="destructive"
onClick={() => { onClick={() => {
setShowDelete(true); setShowDelete(true);
setSelectedUser(u.username); setSelectedUser(u.username);
}} }}
> >
Delete <HiTrash />
<div className="hidden md:block">Delete</div>
</Button> </Button>
</div> </div>
</div> </div>

4
web/src/pages/Settings.tsx
View File

@ -41,7 +41,7 @@ export default function Settings() {
"masks / zones", "masks / zones",
"motion tuner", "motion tuner",
"debug", "debug",
"authentication", "users",
] as const; ] as const;
type SettingsType = (typeof settingsViews)[number]; type SettingsType = (typeof settingsViews)[number];
@ -171,7 +171,7 @@ export default function Settings() {
setUnsavedChanges={setUnsavedChanges} setUnsavedChanges={setUnsavedChanges}
/> />
)} )}
{page == "authentication" && <Authentication />} {page == "users" && <Authentication />}
</div> </div>
{confirmationDialogOpen && ( {confirmationDialogOpen && (
<AlertDialog <AlertDialog