work privilege system using ACL

Author: jrief

client/admin/ControlButtons.tsx

@@ -32,6 +32,7 @@ function ViewOriginalButton(props) {
 
 function ReplaceFileButton(props) {
 	const {settings} = props;
+	const disabled = !settings.can_change;
 	const inputRef = useRef(null);
 
 	function replaceFile() {
@@ -55,7 +56,7 @@ function ReplaceFileButton(props) {
 	}
 
 	return (<>
-		<button type="button" onClick={replaceFile}><UploadIcon/>{gettext("Replace File")}</button>
+		<button type="button" disabled={disabled} onClick={replaceFile}><UploadIcon/>{gettext("Replace File")}</button>
 		<input type="file" name="replaceFile" ref={inputRef} accept={settings.file_mime_type} onChange={handleFileSelect} />
 	</>);
 }

client/admin/FolderAdmin.tsx

@@ -18,7 +18,7 @@ import {useAudioSettings, useCookie, useSessionStorage} from '../common/Storage'
 import FileUploader from '../common/FileUploader';
 import FinderSettings from './FinderSettings';
 import FolderTabs from './FolderTabs';
-import MenuBar from './MenuBar';
+import MenuBar, {VERBOSE_HTTP_ERROR_CODES} from './MenuBar';
 import SelectableArea from './SelectableArea';
 import InodeList from './InodeList';
 import DraggedInodes from './DraggedInodes';
@@ -38,7 +38,7 @@ export default function FolderAdmin() {
 	const menuBarRef = useRef(null);
 	const folderTabsRef = useRef(null);
 	const uploaderRef = useRef(null);
-	const columnRefs = Object.fromEntries(settings.ancestors.map(id => [id, useRef(null)]));
+	const columnRefs = Object.fromEntries(settings.ancestors.map(ancestor => [ancestor.id, useRef(null)]));
 	const overlayRef = useRef(null);
 	const downloadLinkRef = useRef(null);
 	const [currentFolderId, setCurrentFolderId] = useState(settings.folder_id);
@@ -267,9 +267,9 @@ export default function FolderAdmin() {
 						folderTabsRef.current.setFavoriteFolders(body.favorite_folders);
 					}
 					if (sourceFolderId !== targetFolderId) {
-						inodes = inodes.filter(inode => !inode.dragged);
+						inodes = inodes.filter(inode => !(inode.can_change && inode.dragged));
 					}
-				} else if (response.status === 409) {
+				} else if (VERBOSE_HTTP_ERROR_CODES.has(response.status)) {
 					alert(await response.text());
 				} else {
 					console.error(response);
@@ -306,6 +306,7 @@ export default function FolderAdmin() {
 					<InodeList
 						ref={columnRefs[settings.folder_id]}
 						folderId={settings.folder_id}
+						sortingDisabled={true}
 						setCurrentFolder={setCurrentFolder}
 						listRef={columnRefs[settings.folder_id]}
 						menuBarRef={menuBarRef}
@@ -334,35 +335,37 @@ export default function FolderAdmin() {
 				}
 				incomplete = ancestors.length < settings.ancestors.length;
 			}
-			let previousFolderId = null;
-			return ancestors.map(folderId => {
+			let previousAncestorId = null;
+			return ancestors.map(ancestor => {
 				const snippet = (
 					<FileUploader
-						key={folderId}
-						ref={folderId === settings.folder_id ? uploaderRef : null}
-						folderId={folderId}
+						key={ancestor.id}
+						ref={ancestor.id === settings.folder_id ? uploaderRef : null}
+						folderId={ancestor.id}
+						disabled={!ancestor.can_change}
 						handleUpload={handleUpload}
 						settings={settings}
 						multiple
 					>
 						<SelectableArea
-							folderId={folderId}
+							folderId={ancestor.id}
 							deselectAll={deselectAll}
-							columnRef={columnRefs[folderId]}
+							columnRef={columnRefs[ancestor.id]}
 							dragging={dragging}
 						>
 							<DroppableArea
-								id={`column:${folderId}`}
+								id={`column:${ancestor.id}`}
 								className="column-droppable"
 								currentId={`column:${currentFolderId}`}
 								dragging={dragging}
 							>
 								<InodeList
-									ref={columnRefs[folderId]}
-									folderId={folderId}
-									previousFolderId={previousFolderId}
+									ref={columnRefs[ancestor.id]}
+									folderId={ancestor.id}
+									ancestorFolderId={previousAncestorId}
+									sortingDisabled={!ancestor.can_change}
 									setCurrentFolder={setCurrentFolder}
-									listRef={columnRefs[folderId]}
+									listRef={columnRefs[ancestor.id]}
 									menuBarRef={menuBarRef}
 									folderTabsRef={folderTabsRef}
 									layout={layout}
@@ -376,7 +379,7 @@ export default function FolderAdmin() {
 						</SelectableArea>
 					</FileUploader>
 				);
-				previousFolderId = folderId;
+				previousAncestorId = ancestor.id;
 				return snippet;
 			});
 		}

client/admin/InodeList.tsx

@@ -28,7 +28,7 @@ function InodeListHeader() {
 const InodeList = forwardRef((props: any, forwardedRef) => {
 	const {
 		folderId,
-		previousFolderId,
+		ancestorFolderId,
 		setCurrentFolder,
 		menuBarRef,
 		layout,
@@ -168,7 +168,7 @@ const InodeList = forwardRef((props: any, forwardedRef) => {
 		}
 
 		return inodes.map(inode => inode.is_folder
-			? <Folder key={inode.id} {...inode} {...props} isParent={previousFolderId === inode.id} />
+			? <Folder key={inode.id} {...inode} {...props} isParent={ancestorFolderId === inode.id} />
 			: <File key={inode.id} {...inode} {...props} />
 		);
 	}

client/admin/Item.tsx

@@ -16,6 +16,7 @@ const dateTimeFormatter = new Intl.DateTimeFormat(
 
 
 export function DraggableItem(props) {
+	const {sortingDisabled} = props;
 	const {
 		attributes,
 		listeners,
@@ -31,7 +32,7 @@ export function DraggableItem(props) {
 	const [searchQuery] = useSearchParam('q');
 	const ReOrdering = useMemo(() => {
 		return (props) => {
-			if (searchQuery || sorting || filter.some(v => v))
+			if (sortingDisabled || searchQuery || sorting || filter.some(v => v))
 				return <div className="reordering"></div>;
 			return (
 				<DroppableArea
@@ -188,6 +189,7 @@ export function ListItem(props) {
 		return dateTimeFormatter.format(date);
 	}
 
+	const contenteditable = !settings.is_trash && props.can_change;
 	switch (props.layout) {
 		case 'tiles':
 			return (
@@ -198,7 +200,7 @@ export function ListItem(props) {
 						</FigureLabels>
 					</FigBody>
 					<figcaption>
-						<div className="inode-name" contentEditable={!settings.is_trash} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
+						<div className="inode-name" contentEditable={contenteditable} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
 							{props.name}
 						</div>
 					</figcaption>
@@ -229,7 +231,7 @@ export function ListItem(props) {
 					</FigBody>
 				</div>
 				<div>
-					<div className="inode-name" contentEditable={!settings.is_trash} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
+					<div className="inode-name" contentEditable={contenteditable} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
 						{props.name}
 					</div>
 				</div>
@@ -253,7 +255,7 @@ export function ListItem(props) {
 					</FigBody>
 				</div>
 				<div>
-					<div className="inode-name" contentEditable={!settings.is_trash} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
+					<div className="inode-name" contentEditable={contenteditable} suppressContentEditableWarning={true} onFocus={handleFocus} onBlur={updateName} onKeyDown={updateName}>
 						{props.name}
 					</div>
 				</div>

client/admin/MenuBar.tsx

@@ -39,6 +39,9 @@ import UploadIcon from '../icons/upload.svg';
 import FolderUploadIcon from '../icons/folder-upload.svg';
 
 
+export const VERBOSE_HTTP_ERROR_CODES = new Set([403, 409]);
+
+
 function MenuExtension(props) {
 	const MenuComponent = useMemo(() => {
 		const component = `./components/menuextension/${props.extension.component}.js`;
@@ -92,7 +95,7 @@ function ExtraMenu(props) {
 			const current = columnRefs[settings.folder_id].current;
 			const body = await response.json();
 			current.setInodes([...current.inodes, {...body.new_folder, elementRef: createRef()}]);  // adds new folder to the end of the list
-		} else if (response.status === 409) {
+		} else if (VERBOSE_HTTP_ERROR_CODES.has(response.status)) {
 			alert(await response.text());
 		} else {
 			console.error(response);
@@ -122,13 +125,13 @@ function ExtraMenu(props) {
 			icon={<MoreVerticalIcon/>}
 			tooltip={gettext("Extra options")}
 		>
-			<li role="option" onClick={addFolder}>
+			<li role="option" aria-disabled={!settings.can_change} onClick={addFolder}>
 				<AddFolderIcon/><span>{gettext("Add new folder")}</span>
 			</li>
-			<li role="option" onClick={() => openUploader(false)}>
+			<li role="option" aria-disabled={!settings.can_change} onClick={() => openUploader(false)}>
 				<UploadIcon/><span>{gettext("Upload local files")}</span>
 			</li>
-			<li role="option" onClick={() => openUploader(true)}>
+			<li role="option" aria-disabled={!settings.can_change} onClick={() => openUploader(true)}>
 				<FolderUploadIcon/><span>{gettext("Upload local folder")}</span>
 			</li>
 			<li role="option" aria-disabled={numSelectedFiles === 0} onClick={downloadSelectedFiles}>
@@ -262,15 +265,15 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 
 	function cutInodes() {
 		const current = columnRefs[currentFolderId].current;
-		if (current.inodes.find(inode => inode.selected)) {
-			const clipboard = current.inodes.filter(inode => inode.selected).map(inode => ({
+		if (current.inodes.find(inode => inode.selected && inode.can_change)) {
+			const clipboard = current.inodes.filter(inode => inode.selected && inode.can_change).map(inode => ({
 				id: inode.id,
 				parent: inode.parent,
 				selected: false,
-				cutted: true
+				cutted: true,
 			}));
 			setClipboard(clipboard);
-			current.setInodes(current.inodes.map(inode => ({...inode, selected: false, cutted: inode.selected})));
+			current.setInodes(current.inodes.map(inode => ({...inode, selected: false, cutted: inode.selected && inode.can_change})));
 			setNumSelectedInodes(0);
 			setNumSelectedFiles(0);
 		}
@@ -313,7 +316,7 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 			columnRefs[settings.folder_id].current.setInodes(
 				body.inodes.map(inode => ({...inode, elementRef: createRef()}))
 			);
-		} else if (response.status === 409) {
+		} else if (VERBOSE_HTTP_ERROR_CODES.has(response.status)) {
 			alert(await response.text());
 		} else {
 			console.error(response);
@@ -417,7 +420,7 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 					</MenuItem>
 					<SortingOptions refreshFilesList={refreshColumns} />
 					{settings.labels && <FilterByLabel refreshFilesList={refreshColumns} labels={settings.labels} />}
-					<MenuItem aria-disabled={numSelectedInodes === 0} onClick={cutInodes} tooltip={gettext("Cut selected to clipboard")}>
+					<MenuItem aria-disabled={numSelectedInodes === 0 || !settings.can_change} onClick={cutInodes} tooltip={gettext("Cut selected to clipboard")}>
 						<CutIcon/>
 					</MenuItem>
 					{settings.is_trash ? (<>
@@ -428,10 +431,10 @@ const MenuBar = forwardRef((props: any, forwardedRef) => {
 							<EraseIcon/>
 						</MenuItem>
 					</>) : (<>
-						<MenuItem aria-disabled={clipboard.length === 0} onClick={pasteInodes} tooltip={gettext("Paste from clipboard")}>
+						<MenuItem aria-disabled={clipboard.length === 0 || !settings.can_change} onClick={pasteInodes} tooltip={gettext("Paste from clipboard")}>
 							<PasteIcon/>
 						</MenuItem>
-						<MenuItem aria-disabled={numSelectedInodes === 0} onClick={deleteInodes} tooltip={gettext("Move selected to trash folder")}>
+						<MenuItem aria-disabled={numSelectedInodes === 0 || !settings.can_change} onClick={deleteInodes} tooltip={gettext("Move selected to trash folder")}>
 							<TrashIcon/>
 						</MenuItem>
 						<ExtraMenu

client/common/DropDownMenu.tsx

@@ -3,10 +3,13 @@ import {Tooltip, TooltipTrigger, TooltipContent} from '../common/Tooltip';
 
 
 export default function DropDownMenu(props) {
+	const {disabled} = props;
 	const ref = useRef(null);
 	const WrapperElement = props.wrapperElement ?? 'li';
 
 	useEffect(() => {
+		if (disabled)
+			return;
 		const handleClick = (event) => {
 			const current = ref.current as HTMLElement;
 			let target = event.target;
@@ -36,14 +39,15 @@ export default function DropDownMenu(props) {
 		const rootNode = ref.current.getRootNode();
 		rootNode.addEventListener('click', handleClick);
 		return () => rootNode.removeEventListener('click', handleClick);
-	}, []);
+	}, [disabled]);
 
 	return (
 		<WrapperElement
 			ref={ref}
 			role={props.role ? `combobox ${props.role}` : 'combobox'}
 			aria-haspopup="listbox"
 			aria-expanded="false"
+			aria-disabled={disabled ? 'true' : 'false'}
 			className={props.className}
 		>{
 		props.tooltip ? (

client/common/FileUploader.tsx

@@ -3,7 +3,7 @@ import {ProgressOverlay, ProgressBar} from './UploadProgress';
 
 
 const FileUploader = forwardRef((props: any, forwardedRef) => {
-	const {folderId, handleUpload} = props;
+	const {folderId, disabled, handleUpload} = props;
 	const multiple = 'multiple' in props;
 	const fileUploadRef = useRef(null);
 	const folderUploadRef = useRef(null);
@@ -47,6 +47,8 @@ const FileUploader = forwardRef((props: any, forwardedRef) => {
 	}
 
 	function uploadFiles(files: FileList) {
+		if (disabled)
+			return;
 		const uploadFile = file => new Promise<Response>((resolve, reject) => {
 			file.resolve = resolve;
 			file.reject = reject;
@@ -59,7 +61,8 @@ const FileUploader = forwardRef((props: any, forwardedRef) => {
 		Promise.all(promises).then(responses => {
 			handleUpload(folderId, responses);
 		}).catch((error) => {
-			alert(error);
+			alert(gettext("An error occurred during file upload."));
+			console.error(error);
 		}).finally(() => {
 			setUploading([]);
 		});
@@ -78,12 +81,20 @@ const FileUploader = forwardRef((props: any, forwardedRef) => {
 			{props.children}
 			<input type="file" name={`file:${folderId}`} multiple={multiple} ref={fileUploadRef} onChange={handleFileSelect} />
 			{multiple && <input type="file" name={`folder:${folderId}`} {...directory} ref={folderUploadRef} onChange={handleFileSelect}/>}
-			{(dragging || uploading.length > 0) &&
+			{(dragging || uploading.length > 0) && (
+			disabled ?
+			<div className="progress-overlay">
+				<div className="progress-indicator">
+					<p>{gettext("You don't have permission to upload files to this folder.")}</p>
+				</div>
+			</div>
+			:
 			<ProgressOverlay dragging={dragging}>{
 				uploading.map((file, index) =>
 					<ProgressBar key={index} file={file} targetId={folderId} settings={props.settings} />
 				)
 			}</ProgressOverlay>
+			)
 		}</div>
 	)
 });

client/components/editor/Image.tsx

@@ -22,6 +22,7 @@ interface GravityOption {
 
 export default function Image(props) {
 	const {settings, children} = props;
+	const disabled = !settings.can_change;
 	const cropFields = {
 		x: document.getElementById('id_crop_x') as HTMLInputElement,
 		y: document.getElementById('id_crop_y') as HTMLInputElement,
@@ -31,7 +32,7 @@ export default function Image(props) {
 	};
 	const gravityField = document.getElementById('id_gravity') as HTMLInputElement;
 	const [crop, setCrop] = useState<Crop>(null);
-	const [gravity, setGravity] = useState<string>(gravityField?.value);
+	const [gravity, setGravity] = useState<string>(disabled ? '' : gravityField.value);
 	const ref = useRef(null);
 	const gravityOptions: Record<string, GravityOption> = {
 		'': {label: gettext("Center"), icon: <GravityCenterIcon/>},
@@ -99,8 +100,8 @@ export default function Image(props) {
 
 	const controlButtons = [
 		<Fragment key="clear-crop">
-			<button type="button" onClick={() => handleChange(null)}><ClearCropIcon/>{gettext("Clear selection")}</button>
-			<DropDownMenu className="with-caret" wrapperElement="div" label={<Fragment>{gettext("Gravity")}: {gravityOptions[gravity]?.label}</Fragment>} tooltip={gettext("Align image before cropping")}>
+			<button type="button" disabled={disabled} onClick={() => handleChange(null)}><ClearCropIcon/>{gettext("Clear selection")}</button>
+			<DropDownMenu className="with-caret" disabled={disabled} wrapperElement="div" label={<Fragment>{gettext("Gravity")}: {gravityOptions[gravity]?.label}</Fragment>} tooltip={gettext("Align image before cropping")}>
 				{Object.entries(gravityOptions).map(([value, record]) => (
 					<li key={value} value={value} role="option" aria-selected={gravity === value} onClick={() => setGravityOption(value)}>
 						{record.icon}{record.label}
@@ -113,7 +114,7 @@ export default function Image(props) {
 	return (<>
 		{children}
 		<FileDetails controlButtons={controlButtons} {...props}>
-			<ReactCrop crop={crop} aspect={1} onChange={handleChange}>
+			<ReactCrop crop={crop} aspect={1} disabled={disabled} onChange={handleChange}>
 				<img className="editable" src={settings.download_url} ref={ref} />
 			</ReactCrop>
 		</FileDetails>