administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-15 03:22:10 +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 { Button } from "../ui/button";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
@ -7,22 +7,23 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from "../ui/dialog";
} from "@/components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "../ui/select";
} from "@/components/ui/select";
import { useState } from "react";
import { LuShield, LuUser } from "react-icons/lu";
type RoleChangeDialogProps = {
show: boolean;
username: string;
currentRole: "admin" | "viewer";
onSave: (role: "admin" | "viewer") => void;
currentRole: string;
availableRoles: string[];
onSave: (role: string) => void;
onCancel: () => void;
};
@ -30,13 +31,12 @@ export default function RoleChangeDialog({
show,
username,
currentRole,
availableRoles,
onSave,
onCancel,
}: RoleChangeDialogProps) {
const { t } = useTranslation(["views/settings"]);
const [selectedRole, setSelectedRole] = useState<"admin" | "viewer">(
currentRole,
);
const [selectedRole, setSelectedRole] = useState<string>(currentRole);
return (
<Dialog open={show} onOpenChange={onCancel}>
@ -73,31 +73,46 @@ export default function RoleChangeDialog({
</span>
: {t("users.dialog.changeRole.roleInfo.viewerDesc")}
</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>
</div>
<Select
value={selectedRole}
onValueChange={(value) =>
setSelectedRole(value as "admin" | "viewer")
}
>
<Select value={selectedRole} onValueChange={setSelectedRole}>
<SelectTrigger className="w-full">
<SelectValue placeholder={t("users.dialog.changeRole.select")} />
</SelectTrigger>
<SelectContent>
<SelectItem value="admin" className="flex items-center gap-2">
<div className="flex items-center gap-2">
<LuShield className="size-4 text-primary" />
<span>{t("role.admin", { ns: "common" })}</span>
</div>
</SelectItem>
<SelectItem value="viewer" className="flex items-center gap-2">
<div className="flex items-center gap-2">
<LuUser className="size-4 text-primary" />
<span>{t("role.viewer", { ns: "common" })}</span>
</div>
</SelectItem>
{availableRoles.map((role) => (
<SelectItem
key={role}
value={role}
className="flex items-center gap-2"
>
<div className="flex items-center gap-2">
{role === "admin" ? (
<LuShield className="size-4 text-primary" />
) : role === "viewer" ? (
<LuUser className="size-4 text-primary" />
) : (
<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>
</Select>
</div>
@ -108,6 +123,7 @@ export default function RoleChangeDialog({
<Button
className="flex flex-1"
aria-label={t("button.cancel", { ns: "common" })}
variant="outline"
onClick={onCancel}
type="button"
>
@ -118,6 +134,7 @@ export default function RoleChangeDialog({
aria-label={t("button.save", { ns: "common" })}
className="flex flex-1"
onClick={() => onSave(selectedRole)}
type="button"
disabled={selectedRole === currentRole}
>
{t("button.save", { ns: "common" })}