User Permissions Modal

frontend/src/api/backend/base.ts

@@ -124,7 +124,7 @@ export async function post({ url, params, data, noAuth }: PostArgs, abortControl
 interface PutArgs {
 	url: string;
 	params?: queryString.StringifiableRecord;
-	data?: Record<string, unknown>;
+	data?: Record<string, any>;
 }
 export async function put({ url, params, data }: PutArgs, abortController?: AbortController) {
 	const apiUrl = buildUrl({ url, params });

frontend/src/api/backend/index.ts

@@ -38,6 +38,7 @@ export * from "./models";
 export * from "./refreshToken";
 export * from "./renewCertificate";
 export * from "./responseTypes";
+export * from "./setPermissions";
 export * from "./testHttpCertificate";
 export * from "./toggleDeadHost";
 export * from "./toggleProxyHost";

frontend/src/api/backend/models.ts

@@ -5,10 +5,10 @@ export interface AppVersion {
 }
 
 export interface UserPermissions {
-	id: number;
-	createdOn: string;
-	modifiedOn: string;
-	userId: number;
+	id?: number;
+	createdOn?: string;
+	modifiedOn?: string;
+	userId?: number;
 	visibility: string;
 	proxyHosts: string;
 	redirectionHosts: string;

frontend/src/api/backend/setPermissions.ts

@@ -0,0 +1,17 @@
+import * as api from "./base";
+import type { UserPermissions } from "./models";
+
+export async function setPermissions(
+	userId: number,
+	data: UserPermissions,
+	abortController?: AbortController,
+): Promise<boolean> {
+	// Remove readonly fields
+	return await api.put(
+		{
+			url: `/users/${userId}/permissions`,
+			data,
+		},
+		abortController,
+	);
+}

frontend/src/locale/lang/en.json

@@ -58,6 +58,12 @@
   "offline": "Offline",
   "online": "Online",
   "password": "Password",
+  "permissions.hidden": "Hidden",
+  "permissions.manage": "Manage",
+  "permissions.view": "View Only",
+  "permissions.visibility.all": "All Items",
+  "permissions.visibility.title": "Item Visibility",
+  "permissions.visibility.user": "Created Items Only",
   "proxy-hosts.actions-title": "Proxy Host #{id}",
   "proxy-hosts.add": "Add Proxy Host",
   "proxy-hosts.count": "{count} Proxy Hosts",
@@ -95,6 +101,7 @@
   "user.new": "New User",
   "user.new-password": "New Password",
   "user.nickname": "Nickname",
+  "user.set-permissions": "Set Permissions for {name}",
   "user.switch-dark": "Switch to Dark mode",
   "user.switch-light": "Switch to Light mode",
   "users.actions-title": "User #{id}",

frontend/src/locale/src/en.json

@@ -176,6 +176,24 @@
 	"password": {
 		"defaultMessage": "Password"
 	},
+	"permissions.hidden": {
+		"defaultMessage": "Hidden"
+	},
+	"permissions.manage": {
+		"defaultMessage": "Manage"
+	},
+	"permissions.view": {
+		"defaultMessage": "View Only"
+	},
+	"permissions.visibility.all": {
+		"defaultMessage": "All Items"
+	},
+	"permissions.visibility.title": {
+		"defaultMessage": "Item Visibility"
+	},
+	"permissions.visibility.user": {
+		"defaultMessage": "Created Items Only"
+	},
 	"proxy-hosts.actions-title": {
 		"defaultMessage": "Proxy Host #{id}"
 	},
@@ -287,6 +305,9 @@
 	"user.nickname": {
 		"defaultMessage": "Nickname"
 	},
+	"user.set-permissions": {
+		"defaultMessage": "Set Permissions for {name}"
+	},
 	"user.switch-dark": {
 		"defaultMessage": "Switch to Dark mode"
 	},

frontend/src/modals/PermissionsModal.tsx

@@ -0,0 +1,231 @@
+import { useQueryClient } from "@tanstack/react-query";
+import cn from "classnames";
+import { Field, Form, Formik } from "formik";
+import { useState } from "react";
+import { Alert } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import { setPermissions } from "src/api/backend";
+import { Button, Loading } from "src/components";
+import { useUser } from "src/hooks";
+import { intl } from "src/locale";
+
+interface Props {
+	userId: number;
+	onClose: () => void;
+}
+export function PermissionsModal({ userId, onClose }: Props) {
+	const queryClient = useQueryClient();
+	const [errorMsg, setErrorMsg] = useState<string | null>(null);
+	const { data, isLoading, error } = useUser(userId);
+
+	const onSubmit = async (values: any, { setSubmitting }: any) => {
+		setErrorMsg(null);
+		try {
+			await setPermissions(userId, values);
+			onClose();
+			queryClient.invalidateQueries({ queryKey: ["users"] });
+			queryClient.invalidateQueries({ queryKey: ["user"] });
+		} catch (err: any) {
+			setErrorMsg(intl.formatMessage({ id: err.message }));
+		}
+		setSubmitting(false);
+	};
+
+	const getPermissionButtons = (field: any, form: any) => {
+		return (
+			<div>
+				<div className="btn-group w-100" role="group">
+					<input
+						type="radio"
+						className="btn-check"
+						name="btn-radio-basic"
+						id={`${field.name}-manage`}
+						autoComplete="off"
+						value="manage"
+						checked={field.value === "manage"}
+						onChange={() => form.setFieldValue(field.name, "manage")}
+					/>
+					<label htmlFor={`${field.name}-manage`} className={cn("btn", { active: field.value === "manage" })}>
+						{intl.formatMessage({ id: "permissions.manage" })}
+					</label>
+					<input
+						type="radio"
+						className="btn-check"
+						name="btn-radio-basic"
+						id={`${field.name}-view`}
+						autoComplete="off"
+						value="view"
+						checked={field.value === "view"}
+						onChange={() => form.setFieldValue(field.name, "view")}
+					/>
+					<label htmlFor={`${field.name}-view`} className={cn("btn", { active: field.value === "view" })}>
+						{intl.formatMessage({ id: "permissions.view" })}
+					</label>
+					<input
+						type="radio"
+						className="btn-check"
+						name="btn-radio-basic"
+						id={`${field.name}-hidden`}
+						autoComplete="off"
+						value="hidden"
+						checked={field.value === "hidden"}
+						onChange={() => form.setFieldValue(field.name, "hidden")}
+					/>
+					<label htmlFor={`${field.name}-hidden`} className={cn("btn", { active: field.value === "hidden" })}>
+						{intl.formatMessage({ id: "permissions.hidden" })}
+					</label>
+				</div>
+			</div>
+		);
+	};
+
+	const isAdmin = data?.roles.indexOf("admin") !== -1;
+
+	return (
+		<Modal show onHide={onClose} animation={false}>
+			{!isLoading && error && <Alert variant="danger">{error?.message || "Unknown error"}</Alert>}
+			{isLoading && <Loading noLogo />}
+			{!isLoading && data && (
+				<Formik
+					initialValues={
+						{
+							visibility: data.permissions?.visibility,
+							accessLists: data.permissions?.accessLists,
+							certificates: data.permissions?.certificates,
+							deadHosts: data.permissions?.deadHosts,
+							proxyHosts: data.permissions?.proxyHosts,
+							redirectionHosts: data.permissions?.redirectionHosts,
+							streams: data.permissions?.streams,
+						} as any
+					}
+					onSubmit={onSubmit}
+				>
+					{({ isSubmitting }) => (
+						<Form>
+							<Modal.Header closeButton>
+								<Modal.Title>
+									{intl.formatMessage({ id: "user.set-permissions" }, { name: data?.name })}
+								</Modal.Title>
+							</Modal.Header>
+							<Modal.Body>
+								<Alert variant="danger" show={!!error} onClose={() => setErrorMsg(null)} dismissible>
+									{errorMsg}
+								</Alert>
+								<div className="mb-3">
+									<label htmlFor="asd" className="form-label">
+										{intl.formatMessage({ id: "permissions.visibility.title" })}
+									</label>
+									<Field name="visibility">
+										{({ field, form }: any) => (
+											<div className="btn-group w-100" role="group">
+												<input
+													type="radio"
+													className="btn-check"
+													name="btn-radio-basic"
+													id={`${field.name}-user`}
+													autoComplete="off"
+													value="user"
+													checked={field.value === "user"}
+													onChange={() => form.setFieldValue(field.name, "user")}
+												/>
+												<label
+													htmlFor={`${field.name}-user`}
+													className={cn("btn", { active: field.value === "user" })}
+												>
+													{intl.formatMessage({ id: "permissions.visibility.user" })}
+												</label>
+												<input
+													type="radio"
+													className="btn-check"
+													name="btn-radio-basic"
+													id={`${field.name}-all`}
+													autoComplete="off"
+													value="all"
+													checked={field.value === "all"}
+													onChange={() => form.setFieldValue(field.name, "all")}
+												/>
+												<label
+													htmlFor={`${field.name}-all`}
+													className={cn("btn", { active: field.value === "all" })}
+												>
+													{intl.formatMessage({ id: "permissions.visibility.all" })}
+												</label>
+											</div>
+										)}
+									</Field>
+								</div>
+								{!isAdmin && (
+									<>
+										<div className="mb-3">
+											<label htmlFor="ignored" className="form-label">
+												{intl.formatMessage({ id: "proxy-hosts.title" })}
+											</label>
+											<Field name="proxyHosts">
+												{({ field, form }: any) => getPermissionButtons(field, form)}
+											</Field>
+										</div>
+										<div className="mb-3">
+											<label htmlFor="ignored" className="form-label">
+												{intl.formatMessage({ id: "redirection-hosts.title" })}
+											</label>
+											<Field name="redirectionHosts">
+												{({ field, form }: any) => getPermissionButtons(field, form)}
+											</Field>
+										</div>
+										<div className="mb-3">
+											<label htmlFor="ignored" className="form-label">
+												{intl.formatMessage({ id: "dead-hosts.title" })}
+											</label>
+											<Field name="deadHosts">
+												{({ field, form }: any) => getPermissionButtons(field, form)}
+											</Field>
+										</div>
+										<div className="mb-3">
+											<label htmlFor="ignored" className="form-label">
+												{intl.formatMessage({ id: "streams.title" })}
+											</label>
+											<Field name="streams">
+												{({ field, form }: any) => getPermissionButtons(field, form)}
+											</Field>
+										</div>
+										<div className="mb-3">
+											<label htmlFor="ignored" className="form-label">
+												{intl.formatMessage({ id: "access.title" })}
+											</label>
+											<Field name="accessLists">
+												{({ field, form }: any) => getPermissionButtons(field, form)}
+											</Field>
+										</div>
+										<div className="mb-3">
+											<label htmlFor="ignored" className="form-label">
+												{intl.formatMessage({ id: "certificates.title" })}
+											</label>
+											<Field name="certificates">
+												{({ field, form }: any) => getPermissionButtons(field, form)}
+											</Field>
+										</div>
+									</>
+								)}
+							</Modal.Body>
+							<Modal.Footer>
+								<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
+									{intl.formatMessage({ id: "cancel" })}
+								</Button>
+								<Button
+									type="submit"
+									actionType="primary"
+									className="ms-auto"
+									data-bs-dismiss="modal"
+									isLoading={isSubmitting}
+									disabled={isSubmitting}
+								>
+									{intl.formatMessage({ id: "save" })}
+								</Button>
+							</Modal.Footer>
+						</Form>
+					)}
+				</Formik>
+			)}
+		</Modal>
+	);
+}

frontend/src/modals/index.ts

@@ -1,3 +1,4 @@
 export * from "./ChangePasswordModal";
 export * from "./DeleteConfirmModal";
+export * from "./PermissionsModal";
 export * from "./UserModal";

frontend/src/pages/Dashboard/index.tsx

@@ -128,6 +128,7 @@ const Dashboard = () => {
 - check mobile
 - fix bad jwt not refreshing entire page
 - add help docs for host types
+- REDO SCREENSHOTS in docs folder
 
 More for api, then implement here:
 - Properly implement refresh tokens

frontend/src/pages/Users/Table.tsx

@@ -12,10 +12,21 @@ interface Props {
 	isFetching?: boolean;
 	currentUserId?: number;
 	onEditUser?: (id: number) => void;
+	onEditPermissions?: (id: number) => void;
+	onSetPassword?: (id: number) => void;
 	onDeleteUser?: (id: number) => void;
 	onNewUser?: () => void;
 }
-export default function Table({ data, isFetching, currentUserId, onEditUser, onDeleteUser, onNewUser }: Props) {
+export default function Table({
+	data,
+	isFetching,
+	currentUserId,
+	onEditUser,
+	onEditPermissions,
+	onSetPassword,
+	onDeleteUser,
+	onNewUser,
+}: Props) {
 	const columnHelper = createColumnHelper<User>();
 	const columns = useMemo(
 		() => [
@@ -92,16 +103,30 @@ export default function Table({ data, isFetching, currentUserId, onEditUser, onD
 									<IconEdit size={16} />
 									{intl.formatMessage({ id: "user.edit" })}
 								</a>
-								<a className="dropdown-item" href="#">
-									<IconShield size={16} />
-									{intl.formatMessage({ id: "action.permissions" })}
-								</a>
-								<a className="dropdown-item" href="#">
-									<IconLock size={16} />
-									{intl.formatMessage({ id: "user.change-password" })}
-								</a>
 								{currentUserId !== info.row.original.id ? (
 									<>
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												onEditPermissions?.(info.row.original.id);
+											}}
+										>
+											<IconShield size={16} />
+											{intl.formatMessage({ id: "action.permissions" })}
+										</a>
+										<a
+											className="dropdown-item"
+											href="#"
+											onClick={(e) => {
+												e.preventDefault();
+												onSetPassword?.(info.row.original.id);
+											}}
+										>
+											<IconLock size={16} />
+											{intl.formatMessage({ id: "user.change-password" })}
+										</a>
 										<div className="dropdown-divider" />
 										<a
 											className="dropdown-item"
@@ -125,7 +150,7 @@ export default function Table({ data, isFetching, currentUserId, onEditUser, onD
 				},
 			}),
 		],
-		[columnHelper, currentUserId, onEditUser, onDeleteUser],
+		[columnHelper, currentUserId, onEditUser, onDeleteUser, onEditPermissions, onSetPassword],
 	);
 
 	const tableInstance = useReactTable<User>({

frontend/src/pages/Users/TableWrapper.tsx

@@ -5,12 +5,13 @@ import { deleteUser } from "src/api/backend";
 import { Button, LoadingPage } from "src/components";
 import { useUser, useUsers } from "src/hooks";
 import { intl } from "src/locale";
-import { DeleteConfirmModal, UserModal } from "src/modals";
+import { DeleteConfirmModal, PermissionsModal, UserModal } from "src/modals";
 import { showSuccess } from "src/notifications";
 import Table from "./Table";
 
 export default function TableWrapper() {
 	const [editUserId, setEditUserId] = useState(0 as number | "new");
+	const [editUserPermissionsId, setEditUserPermissionsId] = useState(0);
 	const [deleteUserId, setDeleteUserId] = useState(0);
 	const { isFetching, isLoading, isError, error, data } = useUsers(["permissions"]);
 	const { data: currentUser } = useUser("me");
@@ -62,10 +63,14 @@ export default function TableWrapper() {
 					isFetching={isFetching}
 					currentUserId={currentUser?.id}
 					onEditUser={(id: number) => setEditUserId(id)}
+					onEditPermissions={(id: number) => setEditUserPermissionsId(id)}
 					onDeleteUser={(id: number) => setDeleteUserId(id)}
 					onNewUser={() => setEditUserId("new")}
 				/>
 				{editUserId ? <UserModal userId={editUserId} onClose={() => setEditUserId(0)} /> : null}
+				{editUserPermissionsId ? (
+					<PermissionsModal userId={editUserPermissionsId} onClose={() => setEditUserPermissionsId(0)} />
+				) : null}
 				{deleteUserId ? (
 					<DeleteConfirmModal
 						title={intl.formatMessage({ id: "user.delete.title" })}