administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-15 11:32:09 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix role change dialog

Browse Source
This commit is contained in:
Josh Hawkins 2025-09-11 08:52:15 -05:00
parent bf412cf752
commit 51524944f0
1 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
web/src/components/overlay/RoleChangeDialog.tsx
View File

@ -1,5 +1,5 @@
import { Trans, useTranslation } from "react-i18next"; import { Trans, useTranslation } from "react-i18next";
import { Button } from "../ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -7,22 +7,23 @@ import {
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "../ui/dialog"; } from "@/components/ui/dialog";
import { import {
Select, Select,
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "../ui/select"; } from "@/components/ui/select";
import { useState } from "react"; import { useState } from "react";
import { LuShield, LuUser } from "react-icons/lu"; import { LuShield, LuUser } from "react-icons/lu";
type RoleChangeDialogProps = { type RoleChangeDialogProps = {
show: boolean; show: boolean;
username: string; username: string;
currentRole: "admin" | "viewer"; currentRole: string;
onSave: (role: "admin" | "viewer") => void; availableRoles: string[];
onSave: (role: string) => void;
onCancel: () => void; onCancel: () => void;
}; };
@ -30,13 +31,12 @@ export default function RoleChangeDialog({
show, show,
username, username,
currentRole, currentRole,
availableRoles,
onSave, onSave,
onCancel, onCancel,
}: RoleChangeDialogProps) { }: RoleChangeDialogProps) {
const { t } = useTranslation(["views/settings"]); const { t } = useTranslation(["views/settings"]);
const [selectedRole, setSelectedRole] = useState<"admin" | "viewer">( const [selectedRole, setSelectedRole] = useState<string>(currentRole);
currentRole,
);
return ( return (
<Dialog open={show} onOpenChange={onCancel}> <Dialog open={show} onOpenChange={onCancel}>
@ -73,31 +73,46 @@ export default function RoleChangeDialog({
</span> </span>
: {t("users.dialog.changeRole.roleInfo.viewerDesc")} : {t("users.dialog.changeRole.roleInfo.viewerDesc")}
</li> </li>
{availableRoles
.filter((role) => role !== "admin" && role !== "viewer")
.map((role) => (
<li key={role}>
<span className="font-medium">{role}</span>:{" "}
{t("users.dialog.changeRole.roleInfo.customDesc")}
</li>
))}
</ul> </ul>
</div> </div>
<Select <Select value={selectedRole} onValueChange={setSelectedRole}>
value={selectedRole}
onValueChange={(value) =>
setSelectedRole(value as "admin" | "viewer")
}
>
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
<SelectValue placeholder={t("users.dialog.changeRole.select")} /> <SelectValue placeholder={t("users.dialog.changeRole.select")} />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="admin" className="flex items-center gap-2"> {availableRoles.map((role) => (
<div className="flex items-center gap-2"> <SelectItem
<LuShield className="size-4 text-primary" /> key={role}
<span>{t("role.admin", { ns: "common" })}</span> value={role}
</div> className="flex items-center gap-2"
</SelectItem> >
<SelectItem value="viewer" className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> {role === "admin" ? (
<LuUser className="size-4 text-primary" /> <LuShield className="size-4 text-primary" />
<span>{t("role.viewer", { ns: "common" })}</span> ) : role === "viewer" ? (
</div> <LuUser className="size-4 text-primary" />
</SelectItem> ) : (
<LuUser className="size-4 text-muted-foreground" />
)}
<span>
{role === "admin"
? t("role.admin", { ns: "common" })
: role === "viewer"
? t("role.viewer", { ns: "common" })
: role}
</span>
</div>
</SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
@ -108,6 +123,7 @@ export default function RoleChangeDialog({
<Button <Button
className="flex flex-1" className="flex flex-1"
aria-label={t("button.cancel", { ns: "common" })} aria-label={t("button.cancel", { ns: "common" })}
variant="outline"
onClick={onCancel} onClick={onCancel}
type="button" type="button"
> >
@ -118,6 +134,7 @@ export default function RoleChangeDialog({
aria-label={t("button.save", { ns: "common" })} aria-label={t("button.save", { ns: "common" })}
className="flex flex-1" className="flex flex-1"
onClick={() => onSave(selectedRole)} onClick={() => onSave(selectedRole)}
type="button"
disabled={selectedRole === currentRole} disabled={selectedRole === currentRole}
> >
{t("button.save", { ns: "common" })} {t("button.save", { ns: "common" })}