Permissions polish for restricted users

Author: jc21

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,16 +40,18 @@ function EmptyData({ tableInstance, onNew, isFiltered, object, objects, color =
 							<h2>
 								<T id="object.empty" tData={{ objects }} />
 							</h2>
-							<p className="text-muted">
-								<T id="empty-subtitle" />
-							</p>
-							{customAddBtn ? (
-								customAddBtn
-							) : (
-								<Button className={cn("my-3", `btn-${color}`)} onClick={onNew}>
-									<T id="object.add" tData={{ object }} />
-								</Button>
-							)}
+							<HasPermission section={permissionSection} permission={permission || MANAGE} hideError>
+								<p className="text-muted">
+									<T id="empty-subtitle" />
+								</p>
+								{customAddBtn ? (
+									customAddBtn
+								) : (
+									<Button className={cn("my-3", `btn-${color}`)} onClick={onNew}>
+										<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;
-	type: "manage" | "view";
+	section?: Section | typeof ADMIN;
+	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 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;
-	}
-
+	const allowed = hasPermission(section, permission, data?.permissions, data?.roles);
 	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;
-	permissionType?: "view" | "manage";
+	permissionSection?: Section | typeof ADMIN;
+	permission?: typeof VIEW | typeof MANAGE;
 }
 
 const menuItems: MenuItem[] = [
@@ -34,60 +46,60 @@ const menuItems: MenuItem[] = [
 			{
 				to: "/nginx/proxy",
 				label: "proxy-hosts",
-				permission: "proxyHosts",
-				permissionType: "view",
+				permissionSection: PROXY_HOSTS,
+				permission: VIEW,
 			},
 			{
 				to: "/nginx/redirection",
 				label: "redirection-hosts",
-				permission: "redirectionHosts",
-				permissionType: "view",
+				permissionSection: REDIRECTION_HOSTS,
+				permission: VIEW,
 			},
 			{
 				to: "/nginx/stream",
 				label: "streams",
-				permission: "streams",
-				permissionType: "view",
+				permissionSection: STREAMS,
+				permission: VIEW,
 			},
 			{
 				to: "/nginx/404",
 				label: "dead-hosts",
-				permission: "deadHosts",
-				permissionType: "view",
+				permissionSection: DEAD_HOSTS,
+				permission: VIEW,
 			},
 		],
 	},
 	{
 		to: "/access",
 		icon: IconLock,
 		label: "access-lists",
-		permission: "accessLists",
-		permissionType: "view",
+		permissionSection: ACCESS_LISTS,
+		permission: VIEW,
 	},
 	{
 		to: "/certificates",
 		icon: IconShield,
 		label: "certificates",
-		permission: "certificates",
-		permissionType: "view",
+		permissionSection: CERTIFICATES,
+		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 || ""}
-			type={item.permissionType || "view"}
+			section={item.permissionSection}
+			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 || ""}
-			type={item.permissionType || "view"}
+			section={item.permissionSection}
+			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 || ""}
-								type={subitem.permissionType || "view"}
+								section={subitem.permissionSection}
+								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" />