Permissions polish for restricted users

frontend/src/components/EmptyData.tsx

@@ -1,8 +1,9 @@
 import type { Table as ReactTable } from "@tanstack/react-table";
 import cn from "classnames";
 import type { ReactNode } from "react";
-import { Button } from "src/components";
+import { Button, HasPermission } from "src/components";
 import { T } from "src/locale";
+import { type ADMIN, MANAGE, type Permission, type Section } from "src/modules/Permissions";
 
 interface Props {
 	tableInstance: ReactTable<any>;
@@ -12,8 +13,20 @@ interface Props {
 	objects: string;
 	color?: string;
 	customAddBtn?: ReactNode;
+	permissionSection?: Section | typeof ADMIN;
+	permission?: Permission;
 }
-function EmptyData({ tableInstance, onNew, isFiltered, object, objects, color = "primary", customAddBtn }: Props) {
+function EmptyData({
+	tableInstance,
+	onNew,
+	isFiltered,
+	object,
+	objects,
+	color = "primary",
+	customAddBtn,
+	permissionSection,
+	permission,
+}: Props) {
 	return (
 		<tr>
 			<td colSpan={tableInstance.getVisibleFlatColumns().length}>
@@ -27,6 +40,7 @@ function EmptyData({ tableInstance, onNew, isFiltered, object, objects, color =
 							<h2>
 								<T id="object.empty" tData={{ objects }} />
 							</h2>
+							<HasPermission section={permissionSection} permission={permission || MANAGE} hideError>
 								<p className="text-muted">
 									<T id="empty-subtitle" />
 								</p>
@@ -37,6 +51,7 @@ function EmptyData({ tableInstance, onNew, isFiltered, object, objects, color =
 										<T id="object.add" tData={{ object }} />
 									</Button>
 								)}
+							</HasPermission>
 						</>
 					)}
 				</div>

frontend/src/components/HasPermission.tsx

@@ -3,25 +3,29 @@ import Alert from "react-bootstrap/Alert";
 import { Loading, LoadingPage } from "src/components";
 import { useUser } from "src/hooks";
 import { T } from "src/locale";
+import { type ADMIN, hasPermission, type Permission, type Section } from "src/modules/Permissions";
 
 interface Props {
-	permission: string;
+	section?: Section | typeof ADMIN;
-	type: "manage" | "view";
+	permission: Permission;
 	hideError?: boolean;
 	children?: ReactNode;
 	pageLoading?: boolean;
 	loadingNoLogo?: boolean;
 }
 function HasPermission({
+	section,
 	permission,
-	type,
 	children,
 	hideError = false,
 	pageLoading = false,
 	loadingNoLogo = false,
 }: Props) {
 	const { data, isLoading } = useUser("me");
-	const perms = data?.permissions;
+
+	if (!section) {
+		return <>{children}</>;
+	}
 
 	if (isLoading) {
 		if (hideError) {
@@ -33,33 +37,7 @@ function HasPermission({
 		return <Loading noLogo={loadingNoLogo} />;
 	}
 
-	let allowed = permission === "";
+	const allowed = hasPermission(section, permission, data?.permissions, data?.roles);
-	const acceptable = ["manage", type];
-
-	switch (permission) {
-		case "admin":
-			allowed = data?.roles?.includes("admin") || false;
-			break;
-		case "proxyHosts":
-			allowed = acceptable.indexOf(perms?.proxyHosts || "") !== -1;
-			break;
-		case "redirectionHosts":
-			allowed = acceptable.indexOf(perms?.redirectionHosts || "") !== -1;
-			break;
-		case "deadHosts":
-			allowed = acceptable.indexOf(perms?.deadHosts || "") !== -1;
-			break;
-		case "streams":
-			allowed = acceptable.indexOf(perms?.streams || "") !== -1;
-			break;
-		case "accessLists":
-			allowed = acceptable.indexOf(perms?.accessLists || "") !== -1;
-			break;
-		case "certificates":
-			allowed = acceptable.indexOf(perms?.certificates || "") !== -1;
-			break;
-	}
-
 	if (allowed) {
 		return <>{children}</>;
 	}

frontend/src/components/SiteMenu.tsx

@@ -11,14 +11,26 @@ import cn from "classnames";
 import React from "react";
 import { HasPermission, NavLink } from "src/components";
 import { T } from "src/locale";
+import {
+	ACCESS_LISTS,
+	ADMIN,
+	CERTIFICATES,
+	DEAD_HOSTS,
+	type MANAGE,
+	PROXY_HOSTS,
+	REDIRECTION_HOSTS,
+	type Section,
+	STREAMS,
+	VIEW,
+} from "src/modules/Permissions";
 
 interface MenuItem {
 	label: string;
 	icon?: React.ElementType;
 	to?: string;
 	items?: MenuItem[];
-	permission?: string;
+	permissionSection?: Section | typeof ADMIN;
-	permissionType?: "view" | "manage";
+	permission?: typeof VIEW | typeof MANAGE;
 }
 
 const menuItems: MenuItem[] = [
@@ -34,26 +46,26 @@ const menuItems: MenuItem[] = [
 			{
 				to: "/nginx/proxy",
 				label: "proxy-hosts",
-				permission: "proxyHosts",
+				permissionSection: PROXY_HOSTS,
-				permissionType: "view",
+				permission: VIEW,
 			},
 			{
 				to: "/nginx/redirection",
 				label: "redirection-hosts",
-				permission: "redirectionHosts",
+				permissionSection: REDIRECTION_HOSTS,
-				permissionType: "view",
+				permission: VIEW,
 			},
 			{
 				to: "/nginx/stream",
 				label: "streams",
-				permission: "streams",
+				permissionSection: STREAMS,
-				permissionType: "view",
+				permission: VIEW,
 			},
 			{
 				to: "/nginx/404",
 				label: "dead-hosts",
-				permission: "deadHosts",
+				permissionSection: DEAD_HOSTS,
-				permissionType: "view",
+				permission: VIEW,
 			},
 		],
 	},
@@ -61,33 +73,33 @@ const menuItems: MenuItem[] = [
 		to: "/access",
 		icon: IconLock,
 		label: "access-lists",
-		permission: "accessLists",
+		permissionSection: ACCESS_LISTS,
-		permissionType: "view",
+		permission: VIEW,
 	},
 	{
 		to: "/certificates",
 		icon: IconShield,
 		label: "certificates",
-		permission: "certificates",
+		permissionSection: CERTIFICATES,
-		permissionType: "view",
+		permission: VIEW,
 	},
 	{
 		to: "/users",
 		icon: IconUser,
 		label: "users",
-		permission: "admin",
+		permissionSection: ADMIN,
 	},
 	{
 		to: "/audit-log",
 		icon: IconBook,
 		label: "auditlogs",
-		permission: "admin",
+		permissionSection: ADMIN,
 	},
 	{
 		to: "/settings",
 		icon: IconSettings,
 		label: "settings",
-		permission: "admin",
+		permissionSection: ADMIN,
 	},
 ];
 
@@ -99,8 +111,8 @@ const getMenuItem = (item: MenuItem, onClick?: () => void) => {
 	return (
 		<HasPermission
 			key={`item-${item.label}`}
-			permission={item.permission || ""}
+			section={item.permissionSection}
-			type={item.permissionType || "view"}
+			permission={item.permission || VIEW}
 			hideError
 		>
 			<li className="nav-item">
@@ -122,8 +134,8 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
 	return (
 		<HasPermission
 			key={`item-${item.label}`}
-			permission={item.permission || ""}
+			section={item.permissionSection}
-			type={item.permissionType || "view"}
+			permission={item.permission || VIEW}
 			hideError
 		>
 			<li className={cns}>
@@ -147,8 +159,8 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
 						return (
 							<HasPermission
 								key={`${idx}-${subitem.to}`}
-								permission={subitem.permission || ""}
+								section={subitem.permissionSection}
-								type={subitem.permissionType || "view"}
+								permission={subitem.permission || VIEW}
 								hideError
 							>
 								<NavLink to={subitem.to} isDropdownItem onClick={onClick}>

frontend/src/modals/PermissionsModal.tsx

@@ -47,11 +47,41 @@ const PermissionsModal = EasyModal.create(({ id, visible, remove }: Props) => {
 		});
 	};
 
+	// given the field and clicked permission, intelligently set the value, and
+	// other values that depends on it.
+	const handleChange = (form: any, field: any, perm: string) => {
+		if (field.name === "proxyHosts" && perm !== "hidden" && form.values.accessLists === "hidden") {
+			form.setFieldValue("accessLists", "view");
+		}
+		// certs are required for proxy and redirection hosts, and streams
+		if (
+			["proxyHosts", "redirectionHosts", "deadHosts", "streams"].includes(field.name) &&
+			perm !== "hidden" &&
+			form.values.certificates === "hidden"
+		) {
+			form.setFieldValue("certificates", "view");
+		}
+
+		form.setFieldValue(field.name, perm);
+	};
+
 	const getPermissionButtons = (field: any, form: any) => {
 		const isManage = field.value === "manage";
 		const isView = field.value === "view";
 		const isHidden = field.value === "hidden";
 
+		let hiddenDisabled = false;
+		if (field.name === "accessLists") {
+			hiddenDisabled = form.values.proxyHosts !== "hidden";
+		}
+		if (field.name === "certificates") {
+			hiddenDisabled =
+				form.values.proxyHosts !== "hidden" ||
+				form.values.redirectionHosts !== "hidden" ||
+				form.values.deadHosts !== "hidden" ||
+				form.values.streams !== "hidden";
+		}
+
 		return (
 			<div>
 				<div className="btn-group w-100" role="group">
@@ -63,7 +93,7 @@ const PermissionsModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						autoComplete="off"
 						value="manage"
 						checked={field.value === "manage"}
-						onChange={() => form.setFieldValue(field.name, "manage")}
+						onChange={() => handleChange(form, field, "manage")}
 					/>
 					<label htmlFor={`${field.name}-manage`} className={getClasses(isManage)}>
 						<T id="permissions.manage" />
@@ -76,7 +106,7 @@ const PermissionsModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						autoComplete="off"
 						value="view"
 						checked={field.value === "view"}
-						onChange={() => form.setFieldValue(field.name, "view")}
+						onChange={() => handleChange(form, field, "view")}
 					/>
 					<label htmlFor={`${field.name}-view`} className={getClasses(isView)}>
 						<T id="permissions.view" />
@@ -89,7 +119,8 @@ const PermissionsModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						autoComplete="off"
 						value="hidden"
 						checked={field.value === "hidden"}
-						onChange={() => form.setFieldValue(field.name, "hidden")}
+						disabled={hiddenDisabled}
+						onChange={() => handleChange(form, field, "hidden")}
 					/>
 					<label htmlFor={`${field.name}-hidden`} className={getClasses(isHidden)}>
 						<T id="permissions.hidden" />

frontend/src/modals/ProxyHostModal.tsx

@@ -9,14 +9,16 @@ import {
 	AccessField,
 	Button,
 	DomainNamesField,
+	HasPermission,
 	Loading,
 	LocationsFields,
 	NginxConfigField,
 	SSLCertificateField,
 	SSLOptionsFields,
 } from "src/components";
-import { useProxyHost, useSetProxyHost } from "src/hooks";
+import { useProxyHost, useSetProxyHost, useUser } from "src/hooks";
 import { T } from "src/locale";
+import { MANAGE, PROXY_HOSTS } from "src/modules/Permissions";
 import { validateNumber, validateString } from "src/modules/Validations";
 import { showObjectSuccess } from "src/notifications";
 
@@ -28,6 +30,7 @@ interface Props extends InnerModalProps {
 	id: number | "new";
 }
 const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
+	const { data: currentUser, isLoading: userIsLoading, error: userError } = useUser("me");
 	const { data, isLoading, error } = useProxyHost(id);
 	const { mutate: setProxyHost } = useSetProxyHost();
 	const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
@@ -58,13 +61,13 @@ const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 
 	return (
 		<Modal show={visible} onHide={remove}>
-			{!isLoading && error && (
+			{!isLoading && (error || userError) && (
 				<Alert variant="danger" className="m-3">
-					{error?.message || "Unknown error"}
+					{error?.message || userError?.message || "Unknown error"}
 				</Alert>
 			)}
-			{isLoading && <Loading noLogo />}
+			{isLoading || (userIsLoading && <Loading noLogo />)}
-			{!isLoading && data && (
+			{!isLoading && !userIsLoading && data && currentUser && (
 				<Formik
 					initialValues={
 						{
@@ -349,6 +352,7 @@ const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 								<Button data-bs-dismiss="modal" onClick={remove} disabled={isSubmitting}>
 									<T id="cancel" />
 								</Button>
+								<HasPermission section={PROXY_HOSTS} permission={MANAGE} hideError>
 									<Button
 										type="submit"
 										actionType="primary"
@@ -359,6 +363,7 @@ const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 									>
 										<T id="save" />
 									</Button>
+								</HasPermission>
 							</Modal.Footer>
 						</Form>
 					)}

frontend/src/modules/Permissions.ts

@@ -0,0 +1,49 @@
+import type { UserPermissions } from "src/api/backend";
+
+export const ADMIN = "admin";
+export const VISIBILITY = "visibility";
+export const PROXY_HOSTS = "proxyHosts";
+export const REDIRECTION_HOSTS = "redirectionHosts";
+export const DEAD_HOSTS = "deadHosts";
+export const STREAMS = "streams";
+export const CERTIFICATES = "certificates";
+export const ACCESS_LISTS = "accessLists";
+
+export const MANAGE = "manage";
+export const VIEW = "view";
+export const HIDDEN = "hidden";
+
+export const ALL = "all";
+export const USER = "user";
+
+export type Section =
+	| typeof ADMIN
+	| typeof VISIBILITY
+	| typeof PROXY_HOSTS
+	| typeof REDIRECTION_HOSTS
+	| typeof DEAD_HOSTS
+	| typeof STREAMS
+	| typeof CERTIFICATES
+	| typeof ACCESS_LISTS;
+
+export type Permission = typeof MANAGE | typeof VIEW;
+
+const hasPermission = (
+	section: Section,
+	perm: Permission,
+	userPerms: UserPermissions | undefined,
+	roles: string[] | undefined,
+): boolean => {
+	if (!userPerms) return false;
+	if (isAdmin(roles)) return true;
+	const acceptable = [MANAGE, perm];
+	// @ts-expect-error 7053
+	const v = typeof userPerms[section] !== "undefined" ? userPerms[section] : HIDDEN;
+	return acceptable.indexOf(v) !== -1;
+};
+
+const isAdmin = (roles: string[] | undefined): boolean => {
+	return roles?.includes("admin") || false;
+};
+
+export { hasPermission, isAdmin };

frontend/src/pages/Access/Table.tsx

@@ -2,9 +2,10 @@ import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { useMemo } from "react";
 import type { AccessList } from "src/api/backend";
-import { EmptyData, GravatarFormatter, ValueWithDateFormatter } from "src/components";
+import { EmptyData, GravatarFormatter, HasPermission, ValueWithDateFormatter } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
+import { ACCESS_LISTS, MANAGE } from "src/modules/Permissions";
 
 interface Props {
 	data: AccessList[];
@@ -84,6 +85,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 									<IconEdit size={16} />
 									<T id="action.edit" />
 								</a>
+								<HasPermission section={ACCESS_LISTS} permission={MANAGE} hideError>
 									<div className="dropdown-divider" />
 									<a
 										className="dropdown-item"
@@ -96,6 +98,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 										<IconTrash size={16} />
 										<T id="action.delete" />
 									</a>
+								</HasPermission>
 							</div>
 						</span>
 					);
@@ -130,6 +133,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 					onNew={onNew}
 					isFiltered={isFiltered}
 					color="cyan"
+					permissionSection={ACCESS_LISTS}
 				/>
 			}
 		/>

frontend/src/pages/Access/TableWrapper.tsx

@@ -2,10 +2,11 @@ import { IconHelp, IconSearch } from "@tabler/icons-react";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteAccessList } from "src/api/backend";
-import { Button, LoadingPage } from "src/components";
+import { Button, HasPermission, LoadingPage } from "src/components";
 import { useAccessLists } from "src/hooks";
 import { T } from "src/locale";
 import { showAccessListModal, showDeleteConfirmModal, showHelpModal } from "src/modals";
+import { ACCESS_LISTS, MANAGE } from "src/modules/Permissions";
 import { showObjectSuccess } from "src/notifications";
 import Table from "./Table";
 
@@ -67,11 +68,17 @@ export default function TableWrapper() {
 								<Button size="sm" onClick={() => showHelpModal("AccessLists", "cyan")}>
 									<IconHelp size={20} />
 								</Button>
+								<HasPermission section={ACCESS_LISTS} permission={MANAGE} hideError>
 									{data?.length ? (
-									<Button size="sm" className="btn-cyan" onClick={() => showAccessListModal("new")}>
+										<Button
+											size="sm"
+											className="btn-cyan"
+											onClick={() => showAccessListModal("new")}
+										>
 											<T id="object.add" tData={{ object: "access-list" }} />
 										</Button>
 									) : null}
+								</HasPermission>
 							</div>
 						</div>
 					</div>

frontend/src/pages/Access/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { ACCESS_LISTS, VIEW } from "src/modules/Permissions";
 import TableWrapper from "./TableWrapper";
 
 const Access = () => {
 	return (
-		<HasPermission permission="accessLists" type="view" pageLoading loadingNoLogo>
+		<HasPermission section={ACCESS_LISTS} permission={VIEW} pageLoading loadingNoLogo>
 			<TableWrapper />
 		</HasPermission>
 	);

frontend/src/pages/AuditLog/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { ADMIN, VIEW } from "src/modules/Permissions";
 import TableWrapper from "./TableWrapper";
 
 const AuditLog = () => {
 	return (
-		<HasPermission permission="admin" type="manage" pageLoading loadingNoLogo>
+		<HasPermission section={ADMIN} permission={VIEW} pageLoading loadingNoLogo>
 			<TableWrapper />
 		</HasPermission>
 	);

frontend/src/pages/Certificates/Table.tsx

@@ -8,10 +8,12 @@ import {
 	DomainsFormatter,
 	EmptyData,
 	GravatarFormatter,
+	HasPermission,
 } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
 import { showCustomCertificateModal, showDNSCertificateModal, showHTTPCertificateModal } from "src/modals";
+import { CERTIFICATES, MANAGE } from "src/modules/Permissions";
 
 interface Props {
 	data: Certificate[];
@@ -125,6 +127,7 @@ export default function Table({ data, isFetching, onDelete, onRenew, onDownload,
 									<IconRefresh size={16} />
 									<T id="action.renew" />
 								</a>
+								<HasPermission section={CERTIFICATES} permission={MANAGE} hideError>
 									<a
 										className="dropdown-item"
 										href="#"
@@ -148,6 +151,7 @@ export default function Table({ data, isFetching, onDelete, onRenew, onDownload,
 										<IconTrash size={16} />
 										<T id="action.delete" />
 									</a>
+								</HasPermission>
 							</div>
 						</span>
 					);
@@ -223,6 +227,7 @@ export default function Table({ data, isFetching, onDelete, onRenew, onDownload,
 					isFiltered={isFiltered}
 					color="pink"
 					customAddBtn={customAddBtn}
+					permissionSection={CERTIFICATES}
 				/>
 			}
 		/>

frontend/src/pages/Certificates/TableWrapper.tsx

@@ -2,7 +2,7 @@ import { IconHelp, IconSearch } from "@tabler/icons-react";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteCertificate, downloadCertificate } from "src/api/backend";
-import { Button, LoadingPage } from "src/components";
+import { Button, HasPermission, LoadingPage } from "src/components";
 import { useCertificates } from "src/hooks";
 import { T } from "src/locale";
 import {
@@ -13,6 +13,7 @@ import {
 	showHTTPCertificateModal,
 	showRenewCertificateModal,
 } from "src/modals";
+import { CERTIFICATES, MANAGE } from "src/modules/Permissions";
 import { showError, showObjectSuccess } from "src/notifications";
 import Table from "./Table";
 
@@ -70,7 +71,6 @@ export default function TableWrapper() {
 								<T id="certificates" />
 							</h2>
 						</div>
-
 						<div className="col-md-auto col-sm-12">
 							<div className="ms-auto d-flex flex-wrap btn-list">
 								{data?.length ? (
@@ -90,6 +90,7 @@ export default function TableWrapper() {
 								<Button size="sm" onClick={() => showHelpModal("Certificates", "pink")}>
 									<IconHelp size={20} />
 								</Button>
+								<HasPermission section={CERTIFICATES} permission={MANAGE} hideError>
 									{data?.length ? (
 										<div className="dropdown">
 											<button
@@ -134,6 +135,7 @@ export default function TableWrapper() {
 											</div>
 										</div>
 									) : null}
+								</HasPermission>
 							</div>
 						</div>
 					</div>

frontend/src/pages/Certificates/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { CERTIFICATES, VIEW } from "src/modules/Permissions";
 import TableWrapper from "./TableWrapper";
 
 const Certificates = () => {
 	return (
-		<HasPermission permission="certificates" type="view" pageLoading loadingNoLogo>
+		<HasPermission section={CERTIFICATES} permission={VIEW} pageLoading loadingNoLogo>
 			<TableWrapper />
 		</HasPermission>
 	);

frontend/src/pages/Dashboard/index.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { HasPermission } from "src/components";
 import { useHostReport } from "src/hooks";
 import { T } from "src/locale";
+import { DEAD_HOSTS, PROXY_HOSTS, REDIRECTION_HOSTS, STREAMS, VIEW } from "src/modules/Permissions";
 
 const Dashboard = () => {
 	const { data: hostReport } = useHostReport();
@@ -16,7 +17,7 @@ const Dashboard = () => {
 			<div className="row row-deck row-cards">
 				<div className="col-12 my-4">
 					<div className="row row-cards">
-						<HasPermission permission="proxyHosts" type="view" hideError>
+						<HasPermission section={PROXY_HOSTS} permission={VIEW} hideError>
 							<div className="col-sm-6 col-lg-3">
 								<a
 									href="/nginx/proxy"
@@ -43,7 +44,7 @@ const Dashboard = () => {
 								</a>
 							</div>
 						</HasPermission>
-						<HasPermission permission="redirectionHosts" type="view" hideError>
+						<HasPermission section={REDIRECTION_HOSTS} permission={VIEW} hideError>
 							<div className="col-sm-6 col-lg-3">
 								<a
 									href="/nginx/redirection"
@@ -71,7 +72,7 @@ const Dashboard = () => {
 								</a>
 							</div>
 						</HasPermission>
-						<HasPermission permission="streams" type="view" hideError>
+						<HasPermission section={STREAMS} permission={VIEW} hideError>
 							<div className="col-sm-6 col-lg-3">
 								<a
 									href="/nginx/stream"
@@ -96,7 +97,7 @@ const Dashboard = () => {
 								</a>
 							</div>
 						</HasPermission>
-						<HasPermission permission="deadHosts" type="view" hideError>
+						<HasPermission section={DEAD_HOSTS} permission={VIEW} hideError>
 							<div className="col-sm-6 col-lg-3">
 								<a
 									href="/nginx/404"

frontend/src/pages/Nginx/DeadHosts/Table.tsx

@@ -7,10 +7,12 @@ import {
 	DomainsFormatter,
 	EmptyData,
 	GravatarFormatter,
+	HasPermission,
 	TrueFalseFormatter,
 } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
+import { DEAD_HOSTS, MANAGE } from "src/modules/Permissions";
 
 interface Props {
 	data: DeadHost[];
@@ -89,6 +91,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 									<IconEdit size={16} />
 									<T id="action.edit" />
 								</a>
+								<HasPermission section={DEAD_HOSTS} permission={MANAGE} hideError>
 									<a
 										className="dropdown-item"
 										href="#"
@@ -112,6 +115,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 										<IconTrash size={16} />
 										<T id="action.delete" />
 									</a>
+								</HasPermission>
 							</div>
 						</span>
 					);
@@ -146,6 +150,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 					onNew={onNew}
 					isFiltered={isFiltered}
 					color="red"
+					permissionSection={DEAD_HOSTS}
 				/>
 			}
 		/>

frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx

@@ -3,10 +3,11 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
-import { Button, LoadingPage } from "src/components";
+import { Button, HasPermission, LoadingPage } from "src/components";
 import { useDeadHosts } from "src/hooks";
 import { T } from "src/locale";
 import { showDeadHostModal, showDeleteConfirmModal, showHelpModal } from "src/modals";
+import { DEAD_HOSTS, MANAGE } from "src/modules/Permissions";
 import { showObjectSuccess } from "src/notifications";
 import Table from "./Table";
 
@@ -76,11 +77,13 @@ export default function TableWrapper() {
 								<Button size="sm" onClick={() => showHelpModal("DeadHosts", "red")}>
 									<IconHelp size={20} />
 								</Button>
+								<HasPermission section={DEAD_HOSTS} permission={MANAGE} hideError>
 									{data?.length ? (
 										<Button size="sm" className="btn-red" onClick={() => showDeadHostModal("new")}>
 											<T id="object.add" tData={{ object: "dead-host" }} />
 										</Button>
 									) : null}
+								</HasPermission>
 							</div>
 						</div>
 					</div>

frontend/src/pages/Nginx/DeadHosts/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { DEAD_HOSTS, VIEW } from "src/modules/Permissions";
 import TableWrapper from "./TableWrapper";
 
 const DeadHosts = () => {
 	return (
-		<HasPermission permission="deadHosts" type="view" pageLoading loadingNoLogo>
+		<HasPermission section={DEAD_HOSTS} permission={VIEW} pageLoading loadingNoLogo>
 			<TableWrapper />
 		</HasPermission>
 	);

frontend/src/pages/Nginx/ProxyHosts/Table.tsx

@@ -8,10 +8,12 @@ import {
 	DomainsFormatter,
 	EmptyData,
 	GravatarFormatter,
+	HasPermission,
 	TrueFalseFormatter,
 } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
+import { MANAGE, PROXY_HOSTS } from "src/modules/Permissions";
 
 interface Props {
 	data: ProxyHost[];
@@ -105,6 +107,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 									<IconEdit size={16} />
 									<T id="action.edit" />
 								</a>
+								<HasPermission section={PROXY_HOSTS} permission={MANAGE} hideError>
 									<a
 										className="dropdown-item"
 										href="#"
@@ -128,6 +131,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 										<IconTrash size={16} />
 										<T id="action.delete" />
 									</a>
+								</HasPermission>
 							</div>
 						</span>
 					);
@@ -162,6 +166,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 					onNew={onNew}
 					isFiltered={isFiltered}
 					color="lime"
+					permissionSection={PROXY_HOSTS}
 				/>
 			}
 		/>

frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx

@@ -3,10 +3,11 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
-import { Button, LoadingPage } from "src/components";
+import { Button, HasPermission, LoadingPage } from "src/components";
 import { useProxyHosts } from "src/hooks";
 import { T } from "src/locale";
 import { showDeleteConfirmModal, showHelpModal, showProxyHostModal } from "src/modals";
+import { MANAGE, PROXY_HOSTS } from "src/modules/Permissions";
 import { showObjectSuccess } from "src/notifications";
 import Table from "./Table";
 
@@ -59,7 +60,6 @@ export default function TableWrapper() {
 								<T id="proxy-hosts" />
 							</h2>
 						</div>
-
 						<div className="col-md-auto col-sm-12">
 							<div className="ms-auto d-flex flex-wrap btn-list">
 								{data?.length ? (
@@ -79,11 +79,17 @@ export default function TableWrapper() {
 								<Button size="sm" onClick={() => showHelpModal("ProxyHosts", "lime")}>
 									<IconHelp size={20} />
 								</Button>
+								<HasPermission section={PROXY_HOSTS} permission={MANAGE} hideError>
 									{data?.length ? (
-									<Button size="sm" className="btn-lime" onClick={() => showProxyHostModal("new")}>
+										<Button
+											size="sm"
+											className="btn-lime"
+											onClick={() => showProxyHostModal("new")}
+										>
 											<T id="object.add" tData={{ object: "proxy-host" }} />
 										</Button>
 									) : null}
+								</HasPermission>
 							</div>
 						</div>
 					</div>

frontend/src/pages/Nginx/ProxyHosts/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { PROXY_HOSTS, VIEW } from "src/modules/Permissions";
 import TableWrapper from "./TableWrapper";
 
 const ProxyHosts = () => {
 	return (
-		<HasPermission permission="proxyHosts" type="view" pageLoading loadingNoLogo>
+		<HasPermission section={PROXY_HOSTS} permission={VIEW} pageLoading loadingNoLogo>
 			<TableWrapper />
 		</HasPermission>
 	);

frontend/src/pages/Nginx/RedirectionHosts/Table.tsx

@@ -7,10 +7,12 @@ import {
 	DomainsFormatter,
 	EmptyData,
 	GravatarFormatter,
+	HasPermission,
 	TrueFalseFormatter,
 } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
+import { MANAGE, REDIRECTION_HOSTS } from "src/modules/Permissions";
 
 interface Props {
 	data: RedirectionHost[];
@@ -110,6 +112,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 									<IconEdit size={16} />
 									<T id="action.edit" />
 								</a>
+								<HasPermission section={REDIRECTION_HOSTS} permission={MANAGE} hideError>
 									<a
 										className="dropdown-item"
 										href="#"
@@ -133,6 +136,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 										<IconTrash size={16} />
 										<T id="action.delete" />
 									</a>
+								</HasPermission>
 							</div>
 						</span>
 					);
@@ -167,6 +171,7 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 					onNew={onNew}
 					isFiltered={isFiltered}
 					color="yellow"
+					permissionSection={REDIRECTION_HOSTS}
 				/>
 			}
 		/>

frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx

@@ -3,10 +3,11 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
-import { Button, LoadingPage } from "src/components";
+import { Button, HasPermission, LoadingPage } from "src/components";
 import { useRedirectionHosts } from "src/hooks";
 import { T } from "src/locale";
 import { showDeleteConfirmModal, showHelpModal, showRedirectionHostModal } from "src/modals";
+import { MANAGE, REDIRECTION_HOSTS } from "src/modules/Permissions";
 import { showObjectSuccess } from "src/notifications";
 import Table from "./Table";
 
@@ -59,7 +60,6 @@ export default function TableWrapper() {
 								<T id="redirection-hosts" />
 							</h2>
 						</div>
-
 						<div className="col-md-auto col-sm-12">
 							<div className="ms-auto d-flex flex-wrap btn-list">
 								{data?.length ? (
@@ -79,6 +79,7 @@ export default function TableWrapper() {
 								<Button size="sm" onClick={() => showHelpModal("RedirectionHosts", "yellow")}>
 									<IconHelp size={20} />
 								</Button>
+								<HasPermission section={REDIRECTION_HOSTS} permission={MANAGE} hideError>
 									{data?.length ? (
 										<Button
 											size="sm"
@@ -88,6 +89,7 @@ export default function TableWrapper() {
 											<T id="object.add" tData={{ object: "redirection-host" }} />
 										</Button>
 									) : null}
+								</HasPermission>
 							</div>
 						</div>
 					</div>

frontend/src/pages/Nginx/RedirectionHosts/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { REDIRECTION_HOSTS, VIEW } from "src/modules/Permissions";
 import TableWrapper from "./TableWrapper";
 
 const RedirectionHosts = () => {
 	return (
-		<HasPermission permission="redirectionHosts" type="view" pageLoading loadingNoLogo>
+		<HasPermission section={REDIRECTION_HOSTS} permission={VIEW} pageLoading loadingNoLogo>
 			<TableWrapper />
 		</HasPermission>
 	);

frontend/src/pages/Nginx/Streams/Table.tsx

@@ -6,11 +6,13 @@ import {
 	CertificateFormatter,
 	EmptyData,
 	GravatarFormatter,
+	HasPermission,
 	TrueFalseFormatter,
 	ValueWithDateFormatter,
 } from "src/components";
 import { TableLayout } from "src/components/Table/TableLayout";
 import { intl, T } from "src/locale";
+import { MANAGE, STREAMS } from "src/modules/Permissions";
 
 interface Props {
 	data: Stream[];
@@ -118,6 +120,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 									<IconEdit size={16} />
 									<T id="action.edit" />
 								</a>
+								<HasPermission section={STREAMS} permission={MANAGE} hideError>
 									<a
 										className="dropdown-item"
 										href="#"
@@ -141,6 +144,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 										<IconTrash size={16} />
 										<T id="action.delete" />
 									</a>
+								</HasPermission>
 							</div>
 						</span>
 					);
@@ -175,6 +179,7 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 					onNew={onNew}
 					isFiltered={isFiltered}
 					color="blue"
+					permissionSection={STREAMS}
 				/>
 			}
 		/>

frontend/src/pages/Nginx/Streams/TableWrapper.tsx

@@ -3,10 +3,11 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteStream, toggleStream } from "src/api/backend";
-import { Button, LoadingPage } from "src/components";
+import { Button, HasPermission, LoadingPage } from "src/components";
 import { useStreams } from "src/hooks";
 import { T } from "src/locale";
 import { showDeleteConfirmModal, showHelpModal, showStreamModal } from "src/modals";
+import { MANAGE, STREAMS } from "src/modules/Permissions";
 import { showObjectSuccess } from "src/notifications";
 import Table from "./Table";
 
@@ -61,7 +62,6 @@ export default function TableWrapper() {
 								<T id="streams" />
 							</h2>
 						</div>
-
 						<div className="col-md-auto col-sm-12">
 							<div className="ms-auto d-flex flex-wrap btn-list">
 								{data?.length ? (
@@ -81,11 +81,13 @@ export default function TableWrapper() {
 								<Button size="sm" onClick={() => showHelpModal("Streams", "blue")}>
 									<IconHelp size={20} />
 								</Button>
+								<HasPermission section={STREAMS} permission={MANAGE} hideError>
 									{data?.length ? (
 										<Button size="sm" className="btn-blue" onClick={() => showStreamModal("new")}>
 											<T id="object.add" tData={{ object: "stream" }} />
 										</Button>
 									) : null}
+								</HasPermission>
 							</div>
 						</div>
 					</div>

frontend/src/pages/Nginx/Streams/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { STREAMS, VIEW } from "src/modules/Permissions";
 import TableWrapper from "./TableWrapper";
 
 const Streams = () => {
 	return (
-		<HasPermission permission="streams" type="view" pageLoading loadingNoLogo>
+		<HasPermission section={STREAMS} permission={VIEW} pageLoading loadingNoLogo>
 			<TableWrapper />
 		</HasPermission>
 	);

frontend/src/pages/Settings/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { ADMIN, VIEW } from "src/modules/Permissions";
 import Layout from "./Layout";
 
 const Settings = () => {
 	return (
-		<HasPermission permission="admin" type="manage" pageLoading loadingNoLogo>
+		<HasPermission section={ADMIN} permission={VIEW} pageLoading loadingNoLogo>
 			<Layout />
 		</HasPermission>
 	);

frontend/src/pages/Users/index.tsx

@@ -1,9 +1,10 @@
 import { HasPermission } from "src/components";
+import { ADMIN, VIEW } from "src/modules/Permissions";
 import TableWrapper from "./TableWrapper";
 
 const Users = () => {
 	return (
-		<HasPermission permission="admin" type="manage" pageLoading loadingNoLogo>
+		<HasPermission section={ADMIN} permission={VIEW} pageLoading loadingNoLogo>
 			<TableWrapper />
 		</HasPermission>
 	);