Add acknowledgements

2020-12-15 16:25:20 +01:00
parent e35e6b0f45
commit 75ca29d06b
10 changed files with 397 additions and 299 deletions
--- a/go.mod
+++ b/go.mod
@@ -18,6 +18,6 @@ require (
 	github.com/Fornaxian/pd_mime_type v0.0.0-20200204165508-2815edf3a145
 	github.com/google/uuid v1.1.1
 	github.com/julienschmidt/httprouter v1.3.0
-	github.com/microcosm-cc/bluemonday v1.0.3
-	github.com/russross/blackfriday/v2 v2.0.1
+	github.com/microcosm-cc/bluemonday v1.0.4
+	github.com/russross/blackfriday/v2 v2.1.0
 )
--- a/res/include/md/acknowledgements.md
+++ b/res/include/md/acknowledgements.md
@@ -0,0 +1,43 @@
+# Acknowledgements
+
+## Software used
+
+ * [Go](https://golang.org/)
+ * [ScyllaDB](https://www.scylladb.com/)
+ * [CockroachDB](https://www.cockroachlabs.com/)
+ * [Nginx](https://www.nginx.com/)
+ * [Ubuntu Server edition](https://ubuntu.com/)
+ * [Debian](https://www.debian.org/)
+
+## Programming libraries
+
+ * [scylladb/gocql](https://github.com/scylladb/gocql)
+ * [scylladb/gocqlx](https://github.com/scylladb/gocqlx)
+ * [lib/pq](github.com/lib/pq)
+ * [jmoiron/sqlx](https://github.com/jmoiron/sqlx)
+ * [BurntSushi/toml](https://github.com/BurntSushi/toml)
+ * [julienschmidt/httprouter](https://github.com/julienschmidt/httprouter)
+ * [gabriel-vasile/mimetype](https://github.com/gabriel-vasile/mimetype)
+ * [disintegration/imaging](github.com/disintegration/imaging)
+ * [gorilla/websocket](github.com/gorilla/websocket)
+ * [shopspring/decimal](github.com/shopspring/decimal)
+ * [jhillyerd/enmime](github.com/jhillyerd/enmime)
+ * [russross/blackfriday](https://github.com/russross/blackfriday)
+ * [microcosm-cc/bluemonday](github.com/microcosm-cc/bluemonday)
+
+### Web framework
+
+ * [Svelte](https://svelte.dev/)
+
+## Security work
+
+ * 2020-12-06 Security researcher Arian Firoozfar reported a cross-site
+   scripting vulnerability on the file viewer page. The issue was fixed the
+   following day.
+
+ * 2017-12-04 Security researcher Hangyi reported a cross-site scripting
+   vulnerability on the file viewer page. The issue was fixed on the 6th.
+
+If you have discovered a security issue in pixeldrain please disclose it
+responsibly at [support@pixeldrain.com](mailto:support@pixeldrain.com). We do
+not have a bug bounty program.
--- a/res/include/script/admin.js
+++ b/res/include/script/admin.js
@@ -210,19 +210,8 @@ function getStats(order) {
 		last_remote_read_size = resp.remote_read_size;


-		let c = document.getElementById("tconnstat_body")
-		c.innerHTML = ""
-		resp.db_connection_stats.forEach(v => {
-			let row = document.createElement("tr")
-			row.innerHTML = `\
-			<td>${v.name}</td>
-			<td>${v.available}</td>
-			<td>${v.max_connections}</td>
-			<td>${v.open_connections}</td>
-			<td>${v.connections_in_use}</td>
-			<td>${v.connections_idle}</td>`
-			c.appendChild(row)
-		})
+		document.getElementById("db_time").innerText = printDate(new Date(resp.db_time), true, true, true);
+		document.getElementById("db_latency").innerText = formatNumber(resp.db_latency / 1000, 3) + " ms";

 		let p = document.getElementById("tbody_peers")
 		p.innerHTML = ""
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -24,6 +24,7 @@
 	font-family: 'Material Icons';
 	font-style: normal;
 	font-weight: 400;
+	font-display: block;
 	src: local('Material Icons'),
 		local('MaterialIcons-Regular'),
 		url(/res/misc/MaterialIcons-Regular.woff2) format('woff2'),
@@ -95,7 +96,7 @@ body{
 	position: fixed;
 	backface-visibility: hidden;
 	z-index: 99;
-	width: 250px;
+	width: 18em;
 	height: 100%;
 	left: 0;
 	float: left;
@@ -115,7 +116,7 @@ body{
 	z-index: 200;
 	right: 0;
 	height: auto;
-	left: 250px;
+	left: 18em;
 	min-width: 300px;
 	display: inline-block;
 	text-align: center; /* Center the header and body */
@@ -127,7 +128,7 @@ body{
 }
@media (max-width: 800px) {
 	.page_navigation {
-		left: -250px;
+		left: -18em;
 	}
 	.page_body {
 		left: 0;
--- a/res/template/admin.html
+++ b/res/template/admin.html
@@ -15,8 +15,7 @@
 					<h3>Bandwidth and views</h3>
 				</div>
 				<div class="highlight_dark">
-					<button onclick="loadGraph(720, 1, true);">Live</button>
-					<button onclick="loadGraph(1440, 10, true);">Day</button>
+					<button onclick="loadGraph(1440, 1, true);">Day</button>
 					<button onclick="loadGraph(10080, 10, false);">Week</button>
 					<button onclick="loadGraph(20160, 60, false);">Two Weeks</button>
 					<button onclick="loadGraph(43200, 60, false);">Month</button>
@@ -52,19 +51,13 @@
 				<br/>

 				<div class="limit_width">
-					<h3>Database connection statistics</h3>
 					<table>
-						<thead>
 						<tr>
-								<td>Name</td>
-								<td>Available</td>
-								<td>Max</td>
-								<td>Open</td>
-								<td>In use</td>
-								<td>Idle</td>
+							<td>DB Time</td>
+							<td id="db_time"></td>
+							<td>DB Latency</td>
+							<td id="db_latency"></td>
 						</tr>
-						</thead>
-						<tbody id="tconnstat_body"></tbody>
 					</table>
 					<h3>Pixelstore peers</h3>
 					<table>
--- a/res/template/fragments/page_wrap.html
+++ b/res/template/fragments/page_wrap.html
@@ -15,9 +15,9 @@
 	{{end}}
 	<hr />
 	<a href="/about">About</a>
-	<!--<a href="/technology">Technology</a>-->
-	<a href="/api">API</a>
 	<a href="/appearance">Appearance</a>
+	<a href="/api">API</a>
+	<a href="/acknowledgements">Acknowledgements</a>
 </div>
 <script>
 	function toggleMenu() {
--- a/svelte/src/filesystem/filemanager/FileManager.svelte
+++ b/svelte/src/filesystem/filemanager/FileManager.svelte
@@ -269,7 +269,7 @@ const toggle_select = () => {
 }
 .directory :global(.node_icon) {
 	height: 32px;
-	width: auto;
+	width: 32px;
 	vertical-align: middle;
 }
 .directory :global(.node_name) {
--- a/svelte/src/filesystem/filemanager/FileUploader.svelte
+++ b/svelte/src/filesystem/filemanager/FileUploader.svelte
@@ -1,13 +1,13 @@
 <script>
 	import { createEventDispatcher } from "svelte";
-let dispatch = createEventDispatcher()
+	let dispatch = createEventDispatcher();

-export let bucket_id
-export let target_dir
+	export let bucket_id;
+	export let target_dir;

-let upload_jobs = []
-let upload_threads = 0
-let max_upload_threads = 4
+	let upload_jobs = [];
+	let upload_threads = 0;
+	let max_upload_threads = 3;

 	// Adds files to the upload queue. The file_list parameter needs to be of type
 	// FileList. Upload will also create the necessary directories to place nested
@@ -21,103 +21,117 @@ export const upload = (file_list) => {
 				uploading: false,
 				finished: false,
 				tries: 0,
-		})
+			});
 		}

 		// This updates the UI
-	upload_jobs = upload_jobs
+		upload_jobs = upload_jobs;

 		while (upload_threads < max_upload_threads) {
-		upload_threads++
-		setTimeout(upload_file, 1)
-	}
+			upload_threads++;
+			setTimeout(upload_file, 1);
 		}
+	};

 	const uploads_finished = () => {
-	dispatch("finished")
-}
+		dispatch("finished");
+	};

 	const upload_file = () => {
-	let job = null
+		let job = null;
 		for (let i = 0; i < upload_jobs.length; i++) {
 			// If a file is done we remove it from the array
 			if (upload_jobs[i].progress >= 1) {
-			upload_jobs.splice(i, 1)
-			continue
+				upload_jobs.splice(i, 1);
+				continue;
 			}

-		if (upload_jobs[i].uploading === false && upload_jobs[i].finished === false) {
-			job = upload_jobs[i]
-			job.uploading = true
-			upload_jobs = upload_jobs
-			break
+			if (
+				upload_jobs[i].uploading === false &&
+				upload_jobs[i].finished === false
+			) {
+				job = upload_jobs[i];
+				job.uploading = true;
+				upload_jobs = upload_jobs;
+				break;
 			}
 		}
 		if (job === null) {
-		upload_threads--
+			upload_threads--;

 			if (upload_threads === 0) {
-			uploads_finished()
+				uploads_finished();
 			}
-		return
+			return;
 		}

-	console.log(job)
+		console.log(job);

 		let form = new FormData();
-	form.append("type", "file")
-	form.append("file", job.file)
+		form.append("type", "file");
+		form.append("file", job.file);

 		let xhr = new XMLHttpRequest();
 		xhr.open(
 			"POST",
-		"/api/filesystem/"+bucket_id+encodeURIComponent(
-			job.target_dir+"/"+job.file.name,
-		),
-		true,
+			"/api/filesystem/" +
+				bucket_id +
+				encodeURIComponent(job.target_dir + "/" + job.file.name),
+			true
 		);
 		xhr.timeout = 21600000; // 6 hours, to account for slow connections

 		// Report progress updates back to the caller
-	xhr.upload.addEventListener("progress", evt => {
+		xhr.upload.addEventListener("progress", (evt) => {
 			if (evt.lengthComputable) {
-			job.progress = evt.loaded / evt.total
-			upload_jobs = upload_jobs
+				job.progress = evt.loaded / evt.total;
+				upload_jobs = upload_jobs;
 			}
 		});

 		xhr.onreadystatechange = () => {
 			// readystate 4 means the upload is done
-		if (xhr.readyState !== 4) { return; }
+			if (xhr.readyState !== 4) {
+				return;
+			}

 			if (xhr.status >= 100 && xhr.status < 400) {
 				// Request is a success

 				// Finish the upload job
-			job.uploading = false
-			job.finished = true
-			upload_file()
+				job.uploading = false;
+				job.finished = true;
+				upload_file();
 			} else if (xhr.status >= 400) {
 				// Request failed
-			console.log("Upload error. status: " + xhr.status + " response: " + xhr.response);
+				console.log(
+					"Upload error. status: " +
+						xhr.status +
+						" response: " +
+						xhr.response
+				);
 				let resp = JSON.parse(xhr.response);
-			if (job.tries === 3) { // Upload failed
-				return
-			} else { // Try again
+				if (job.tries === 3) {
+					// Upload failed
+					return;
+				} else {
+					// Try again
 					job.tries++;
-				job.uploading = false
-				job.finished = false
+					job.uploading = false;
+					job.finished = false;
 				}

 				// Sleep the upload thread for 5 seconds
 				setTimeout(upload_file, 5000);
 			} else {
 				// Request did not arrive
-			if (job.tries === 3) { // Upload failed
-				alert("upload failed "+xhr.responseText)
-				job.uploading = false
-				job.finished = false
-			} else { // Try again
+				if (job.tries === 3) {
+					// Upload failed
+					alert("upload failed " + xhr.responseText);
+					job.uploading = false;
+					job.finished = false;
+				} else {
+					// Try again
 					job.tries++;
 				}

@@ -125,62 +139,46 @@ const upload_file = () => {
 				setTimeout(upload_file, 5000);
 			}

-		upload_jobs = upload_jobs
+			upload_jobs = upload_jobs;
 		};
 		xhr.send(form);
-}
+	};

 	// File input dialog handling
-let file_input
-export const picker = () => { file_input.click() }
-const file_input_change = e => {
-	upload(e.target.files)
-	file_input.nodeValue = ""
-}
+	let file_input;
+	export const picker = () => {
+		file_input.click();
+	};
+	const file_input_change = (e) => {
+		upload(e.target.files);
+		file_input.nodeValue = "";
+	};

 	// Drag and drop upload
-let hidden = true
-const dragover = e => { hidden = false }
-const dragleave = e => { hidden = true }
-const drop = e => {
-	hidden = true
-	upload(e.dataTransfer.files)
-}
-const paste = e => {
+	let hidden = true;
+	const dragover = (e) => {
+		hidden = false;
+	};
+	const dragleave = (e) => {
+		hidden = true;
+	};
+	const drop = (e) => {
+		hidden = true;
+		upload(e.dataTransfer.files);
+	};
+	const paste = (e) => {
 		if (e.clipboardData.files[0]) {
-		e.preventDefault()
-		e.stopPropagation()
-		console.log(e.clipboardData.files[0].getAsFile())
+			e.preventDefault();
+			e.stopPropagation();
+			console.log(e.clipboardData.files[0].getAsFile());
 		}
-}
-
+	};
 </script>

-<svelte:body
-	on:dragover|preventDefault|stopPropagation={dragover}
-	on:dragleave|preventDefault|stopPropagation={dragleave}
-	on:drop|preventDefault|stopPropagation={drop}
-	on:paste={paste}
-/>
-
-<div>
-	<input class="file_input" bind:this={file_input} on:change={file_input_change} type="file" multiple="multiple"/>
-	<div class:hidden class="highlight_green">
-		Drop files here to upload them
-	</div>
-
-	{#each upload_jobs as c}
-		<div class="file_upload">
-			&nbsp;{c.file.name}&nbsp;<br/>
-			<div class="upload_progress_bar">
-				<div class="upload_progress" style="width: {c.progress*100}%"></div>
-			</div>
-		</div>
-	{/each}
-</div>
-
 <style>
-.hidden {display: none;}
+	.hidden {
+		display: none;
+	}

 	.file_input {
 		display: block;
@@ -208,3 +206,32 @@ const paste = e => {
 		height: 100%;
 	}
 </style>
+
+<svelte:body
+	on:dragover|preventDefault|stopPropagation={dragover}
+	on:dragleave|preventDefault|stopPropagation={dragleave}
+	on:drop|preventDefault|stopPropagation={drop}
+	on:paste={paste} />
+
+<div>
+	<input
+		class="file_input"
+		bind:this={file_input}
+		on:change={file_input_change}
+		type="file"
+		multiple="multiple" />
+	<div class:hidden class="highlight_green">
+		Drop files here to upload them
+	</div>
+
+	{#each upload_jobs as c}
+		<div class="file_upload">
+			&nbsp;{c.file.name}&nbsp;<br />
+			<div class="upload_progress_bar">
+				<div
+					class="upload_progress"
+					style="width: {c.progress * 100}%" />
+			</div>
+		</div>
+	{/each}
+</div>
--- a/svelte/src/user_buckets/UserBuckets.svelte
+++ b/svelte/src/user_buckets/UserBuckets.svelte
@@ -3,37 +3,81 @@ import { onMount } from "svelte";
 import Spinner from "../util/Spinner.svelte";
 import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";

-let loading = true
-let buckets = []
+let loading = true;
+let buckets = [];

 const get_buckets = async () => {
 	try {
-		let resp = await fs_get_buckets()
-		buckets = resp.buckets
+		let resp = await fs_get_buckets();
+		buckets = resp.buckets;
 	} catch (err) {
-		alert(err)
+		alert(err);
 	} finally {
-		loading = false
+		loading = false;
 	}
+};
+
+const expand_bucket = () => {
+
 }

-onMount(get_buckets)
-
+onMount(get_buckets);
 </script>

 <div>
 	{#if loading}
-		<div class="spinner_container"><Spinner></Spinner></div>
+		<div class="spinner_container">
+			<Spinner />
+		</div>
 	{/if}

+	<div class="limit_width">
 		{#each buckets as bucket}
-	<a href={"/d/"+bucket.id}>{bucket.name}</a>
+			<a class="bucket_header" href={'/d/' + bucket.id}>
+				<div class="bucket_title">{bucket.name}</div>
+				<button class="bucket_expand" on:click|preventDefault={expand_bucket}><i class="icon">expand_more</i></button>
+			</a>
+			<div class="bucket_details">
+				Hello!
+			</div>
 		{/each}
 	</div>
+</div>
+
 <style>
 .spinner_container {
 	display: inline-block;
 	height: 100px;
 	width: 100px;
 }
+.bucket_header {
+	display: flex;
+	flex-direction: row;
+	text-decoration: none;
+	color: var(--text_color);
+	background-color: var(--layer_3_color);
+	transition: box-shadow 0.5s;
+	box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);
+}
+.bucket_header:hover {
+	box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
+	color: var(--highlight_color);
+	text-decoration: none;
+}
+.bucket_title {
+	flex: 1 1 auto;
+	align-self: center;
+	padding: 0.4em;
+}
+.bucket_expand {
+	flex: 0 0 auto;
+}
+.bucket_details {
+	display: flex;
+	flex-direction: column;
+	text-decoration: none;
+	color: var(--text_color);
+	background-color: var(--layer_3_color);
+	transition: box-shadow 0.5s;
+}
 </style>
--- a/webcontroller/web_controller.go
+++ b/webcontroller/web_controller.go
@@ -119,6 +119,7 @@ func New(
 		{GET, "appearance" /*      */, wc.serveTemplate("appearance", false)},
 		{GET, "hosting" /*         */, wc.serveMarkdown("hosting.md", false)},
 		{GET, "brave" /*           */, wc.serveMarkdown("brave.md", false)},
+		{GET, "acknowledgements" /**/, wc.serveMarkdown("acknowledgements.md", false)},

 		// User account pages
 		{GET, "register" /*        */, wc.serveForm(wc.registerForm, false)},