Add sharing settings to filesystem

res/static/style/layout.css

@@ -536,6 +536,7 @@ select.disabled {
 }
 
 .small_button {
+	margin: 1px;
 	padding: 1px 1px 1px 1px;
 }
 

svelte/src/filesystem/Filesystem.svelte

@@ -1,7 +1,7 @@
 <script>
 import { onMount } from 'svelte';
 import { formatDate, formatDataVolume, formatThousands } from '../util/Formatting.svelte'
-import { fs_get_file_url, fs_get_node } from './FilesystemAPI.js'
+import { fs_get_file_url, fs_get_node, fs_split_path } from './FilesystemAPI.js'
 import Sharebar from './Sharebar.svelte'
 import Modal from '../util/Modal.svelte'
 import FileManager from './filemanager/FileManager.svelte';
@@ -11,6 +11,7 @@ import Video from './viewers/Video.svelte';
 import PDF from './viewers/PDF.svelte';
 import PixeldrainLogo from '../util/PixeldrainLogo.svelte';
 import LoadingIndicator from '../util/LoadingIndicator.svelte';
+import EditWindow from './filemanager/EditWindow.svelte';
 
 let toolbar_visible = (window.innerWidth > 600)
 let toolbar_toggle = () => {
@@ -30,6 +31,7 @@ $: {
 
 let details
 let details_visible = false
+let edit_window
 let download_frame
 
 // State
@@ -83,18 +85,30 @@ const sort_children = children => {
 	})
 }
 
-const navigate = (path, push_history) => {
+const navigate = async (path, push_history) => {
 	state.loading = true
+	console.debug("Navigating to path", path, push_history)
 
-	fs_get_node(state.root.id, path).then(resp => {
+	try {
+		let resp = await fs_get_node(state.root.id, path)
 		open_node(resp, push_history)
-	}).catch(err => {
-		console.error(err)
-		alert(err)
-	}).finally(() => {
+	} catch (err) {
+		let errj = JSON.parse(err)
+
+		if (errj.value === "path_not_found") {
+			if (path !== "/" && path !== "") {
+				console.debug("Path", path, "was not found, trying to navigate to parent")
+				navigate(fs_split_path(path).parent, push_history)
+			}
+		} else {
+			console.error(err)
+			alert("Error: "+err)
+		}
+	} finally {
 		state.loading = false
-	})
+	}
 }
+const reload = () => { navigate(state.base.path, false) }
 
 const open_node = (node, push_history) => {
 	// We need to properly URL encode the file paths so they don't cause
@@ -354,9 +368,11 @@ const share = () => {
 			<button on:click={details.toggle} class="toolbar_button" class:button_highlight={details_visible}>
 				<i class="icon">help</i> Deta<u>i</u>ls
 			</button>
-			<button id="btn_edit" class="toolbar_button" style="display: none;">
-				<i class="icon">edit</i> <u>E</u>dit
-			</button>
+			{#if state.base.path !== "/"}
+				<button on:click={() => edit_window.edit(state.base)} class="toolbar_button">
+					<i class="icon">edit</i> <u>E</u>dit
+				</button>
+			{/if}
 		</div>
 		<Sharebar bind:this={sharebar}></Sharebar>
 
@@ -386,11 +402,19 @@ const share = () => {
 			<tr><td>Type</td><td>{state.base.type}</td></tr>
 			<tr><td>Date created</td><td>{formatDate(state.base.date_created, true, true, true)}</td></tr>
 			<tr><td>Date modified</td><td>{formatDate(state.base.date_modified, true, true, true)}</td></tr>
+			<tr><td>Mode</td><td>{state.base.mode_string}</td></tr>
+			{#if state.base.id}
+				<tr>
+					<td>Public ID</td>
+					<td><a href="/d/{state.base.id}">{state.base.id}</a></td>
+				</tr>
+			{/if}
 			{#if state.base.type === "file"}
 			<tr><td>File type</td><td>{state.base.file_type}</td></tr>
 			<tr><td>File size</td><td>{formatDataVolume(state.base.file_size)}</td></tr>
 			<tr><td>SHA256 sum</td><td>{state.base.sha256_sum}</td></tr>
 			{/if}
+
 			<tr><td colspan="2"><h3>Bucket details</h3></td></tr>
 			<tr><td>ID</td><td>{state.root.id}</td></tr>
 			<tr><td>Name</td><td>{state.root.name}</td></tr>
@@ -398,6 +422,8 @@ const share = () => {
 			<tr><td>Date modified</td><td>{formatDate(state.root.date_modified, true, true, true)}</td></tr>
 		</table>
 	</Modal>
+
+	<EditWindow bind:this={edit_window} bucket={state.root.id} on:reload={() => reload()}/>
 </div>
 
 <style>

svelte/src/filesystem/FilesystemAPI.js

@@ -6,6 +6,11 @@ export const fs_get_file_url = (bucket, path) => {
 	return path_url(bucket, path)
 }
 
+export const fs_split_path = (path) => {
+	let patharr = path.split("/")
+	return { base: patharr.pop(), parent: patharr.join("/") }
+}
+
 export const fs_mkdir = async (bucket, path, opts = null) => {
 	const form = new FormData()
 	form.append("action", "mkdir")
@@ -23,7 +28,7 @@ export const fs_mkdir = async (bucket, path, opts = null) => {
 export const fs_get_node = async (bucket, path) => {
 	const resp = await fetch(path_url(bucket, path) + "?stat");
 	if (resp.status >= 400) {
-		throw new Error(await resp.text())
+		throw await resp.text()
 	}
 	return resp.json()
 }
@@ -39,18 +44,24 @@ export const fs_update = async (bucket, path, opts) => {
 	const form = new FormData()
 	form.append("action", "update")
 
-	if (opts.created) {
+	if (opts.created !== undefined) {
 		form.append("created", opts.created.toISOString())
 	}
-	if (opts.modified) {
+	if (opts.modified !== undefined) {
 		form.append("modified", opts.modified.toISOString())
 	}
-	if (opts.mode) {
+	if (opts.mode !== undefined) {
 		form.append("mode", opts.mode)
 	}
-	if (opts.shared) {
+	if (opts.shared !== undefined) {
 		form.append("shared", opts.shared)
 	}
+	if (opts.read_password !== undefined) {
+		form.append("read_password", opts.read_password)
+	}
+	if (opts.write_password !== undefined) {
+		form.append("write_password", opts.write_password)
+	}
 
 	const resp = await fetch(path_url(bucket, path), { method: "POST", body: form })
 	if (resp.status >= 400) {

svelte/src/filesystem/filemanager/EditWindow.svelte

@@ -0,0 +1,85 @@
+<script>
+import { fs_rename, fs_update } from "../FilesystemAPI";
+import Modal from "../../util/Modal.svelte";
+import { createEventDispatcher } from "svelte";
+
+let dispatch = createEventDispatcher()
+
+export let bucket = ""
+let file = {
+	path: "",
+	name: "",
+	id: "",
+	mode_octal: "",
+};
+
+let window;
+export const edit = (f) => {
+	console.log("Editing file", f)
+	file = f
+
+	file_name = file.name
+	shared = !(file.id === undefined || file.id === "")
+	read_password = file.read_password ? file.read_password : ""
+	write_password = file.write_password ? file.write_password : ""
+	mode = file.mode_octal
+	window.show()
+}
+
+let file_name = ""
+let shared = false
+let read_password = ""
+let write_password = ""
+let mode = ""
+
+const save = async () => {
+	try {
+		await fs_update(
+			bucket,
+			file.path,
+			{
+				mode: mode,
+				shared: shared,
+				read_password: read_password,
+				write_password: write_password,
+			},
+		)
+
+		if (file_name !== file.name) {
+			let parent = file.path.slice(0, -file.name.length)
+			console.log("Moving", file.path, "to", parent+file_name)
+
+			await fs_rename(bucket, file.path, parent+file_name)
+		}
+	} catch (err) {
+		console.error(err)
+		alert(err)
+		return
+	}
+
+	dispatch("reload")
+	window.hide()
+}
+
+</script>
+
+
+<Modal bind:this={window} title="Edit" width="700px">
+	<form on:submit|preventDefault={save} style="display: flex; padding: 8px;">
+		<div class="form">
+			<label for="file_name">Name:</label>
+			<input bind:value={file_name} id="file_name" type="text" class="form_input"/>
+			<label for="file_name">Shared:</label>
+			<input bind:checked={shared} id="file_name" type="checkbox" class="form_input"/>
+			<label for="read_password">Read password:</label>
+			<input bind:value={read_password} id="read_password" type="text" class="form_input"/>
+			<label for="write_password">Write password:</label>
+			<input bind:value={write_password} id="write_password" type="text" class="form_input"/>
+			<label for="mode">Mode:</label>
+			<input bind:value={mode} id="mode" type="text" class="form_input"/>
+			<button type="submit" style="flex: 0 0 auto" class="button_highlight">
+				<i class="icon">save</i> Save
+			</button>
+		</div>
+	</form>
+</Modal>

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -5,6 +5,7 @@ import CreateDirectory from './CreateDirectory.svelte'
 import FileUploader from './FileUploader.svelte'
 import ListView from './ListView.svelte'
 import GalleryView from './GalleryView.svelte'
+import EditWindow from './EditWindow.svelte';
 let dispatch = createEventDispatcher()
 
 export let state
@@ -31,6 +32,11 @@ const node_click = e => {
 		state.children[index].fm_selected = !state.children[index].fm_selected
 	}
 }
+
+let edit_window;
+const node_settings = e => {
+	edit_window.edit(state.children[e.detail])
+}
 const navigate_up = () => {
 	creating_dir = false
 
@@ -175,12 +181,14 @@ const toggle_select = () => {
 	</div>
 
 	{#if directory_view === "list"}
-		<ListView state={state} show_hidden={show_hidden} on:node_click={node_click}></ListView>
+		<ListView state={state} show_hidden={show_hidden} on:node_click={node_click} on:node_settings={node_settings}></ListView>
 	{:else if directory_view === "gallery"}
-		<GalleryView state={state} show_hidden={show_hidden} on:node_click={node_click}></GalleryView>
+		<GalleryView state={state} show_hidden={show_hidden} on:node_click={node_click} on:node_settings={node_settings}></GalleryView>
 	{/if}
 </div>
 
+<EditWindow bind:this={edit_window} bucket={state.root.id} on:reload={() => reload()}/>
+
 <style>
 .container {
 	height: 100%;

svelte/src/filesystem/filemanager/ListView.svelte

@@ -72,12 +72,17 @@ const node_icon = node => {
 					{formatDataVolume(child.file_size, 3)}
 				{/if}
 			</td>
-			<td>
+			<td class="node_icons">
 				{#if child.id}
-					<a href="/d/{child.id}" on:click|stopPropagation>
+					<a href="/d/{child.id}" on:click|stopPropagation class="button small_button">
 						<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
 					</a>
 				{/if}
+				{#if state.permissions.update}
+					<button class="small_button" on:click|preventDefault|stopPropagation={() => {dispatch("node_settings", index)}}>
+						<i class="icon">settings</i>
+					</button>
+				{/if}
 			</td>
 		</a>
 	{/each}
@@ -141,6 +146,10 @@ td {
 	min-width: 50px;
 	white-space: nowrap;
 }
+.node_icons {
+	white-space: nowrap;
+	text-align: right;
+}
 .hidden {
 	display: none;
 }