Progress indicatorv1.2

7 files changed, 151 insertions, 19 deletions

diff --git a/TODO b/TODO
index 7b392e9..1cb0396 100644
--- a/TODO
+++ b/TODO
@@ -1,9 +1,8 @@
 Prio 1 (for next version)
 ======
 
+multi-upload
 gallery
-logout
-login page
 
 Prio 2 (for future versions)
 ======
@@ -12,7 +11,6 @@ links in path line, to dirs
 google pagespeed insights https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.kneipenband.com%2Fwebbox%2F&tab=mobile
 chromecast
 player
-sandclock during operations
 i18n
 forward/back button
 list: more info if appropriate
diff --git a/apache/fix-headers.patch b/apache/fix-headers.patch
new file mode 100644
index 0000000..b864de2
--- /dev/null
+++ b/apache/fix-headers.patch
@@ -0,0 +1,10 @@
+--- apache2-2.4.29.orig/modules/metadata/mod_headers.c
++++ apache2-2.4.29/modules/metadata/mod_headers.c
+@@ -904,6 +904,7 @@ static apr_status_t ap_headers_error_fil
+      * Server-wide first, then per-directory to allow overriding.
+      */
+     do_headers_fixup(f->r, f->r->err_headers_out, dirconf->fixup_err, 0);
++    do_headers_fixup(f->r, f->r->headers_out, dirconf->fixup_out, 0);
+ 
+     /*
+      * We've done our bit; remove ourself from the filter chain so there's
diff --git a/debian/README.Debian b/debian/README.Debian
index 312d00c..ee1c680 100644
--- a/debian/README.Debian
+++ b/debian/README.Debian
@@ -69,6 +69,8 @@ Webbox internally uses HTTP Auth for Authentication. E.g., Apache can
 be configured like this:
 
         <Directory "/usr/lib/webbox">
+                Header always edit WWW-Authenticate ^Basic SR_Basic
+                Header edit WWW-Authenticate ^Basic SR_Basic
 
 		...
 
@@ -82,6 +84,8 @@ Add a login/password pair to the password file:
 
 # htpasswd -c /etc/apache2/sites-available/mysite.htpasswd username
 
+Also, activate the Apache module mod_headers for the above Headers directive.
+
 Only the FastCGI application needs to secured. The static pages in
 /var/www/webbox should be accessible to the user for login purposes.
 
diff --git a/debian/changelog b/debian/changelog
index b59b8d7..3fe42d2 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,3 +1,11 @@
+webbox (1.2) unstable; urgency=medium
+
+  * New version
+  * Includes progress indication
+  * Includes fixed login screen
+
+ -- Roland Reichwein <mail@reichwein.it>  Fri, 19 Jan 2018 15:10:25 +0100
+
 webbox (1.1) unstable; urgency=medium
 
   * New version
diff --git a/html/index.html b/html/index.html
index 6885bd4..40390e0 100644
--- a/html/index.html
+++ b/html/index.html
@@ -53,6 +53,10 @@
 			</div>
 		</div>
 
+		<div class="progresswindow" id="progresswindow" hidden>
+			<canvas id="progresscanvas" class="progresscanvas" width="100" height="100"></canvas>
+		</div>
+
 		<div id="create-dir-dialog" hidden>
 			New folder:<br>
 			<input type="text" id="newdir" class="textinput"></input>
diff --git a/html/webbox.css b/html/webbox.css
index dbed171..b9421a5 100644
--- a/html/webbox.css
+++ b/html/webbox.css
@@ -79,6 +79,28 @@ div, td, h1 {
 	box-sizing: border-box;
 }
 
+
+.progresswindow {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0);
+	opacity: 1;
+	z-index: 20;
+	border-width: 0;
+	border-collapse: collapse;
+	box-sizing: border-box;
+}
+
+.progresscanvas {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	background-color: rgba(0, 0, 0, 0);
+}
 table.menudialog {
 	width: 100%;
 }
@@ -205,6 +227,15 @@ table.list td.name {
 		margin: 0;
 	}
 
+	.progresswindow {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+	}
+
 	table.list td {
 		padding: 5px;
 	}
@@ -244,3 +275,13 @@ table.list td.name {
 	padding: 0;
 	border-collapse: collapse;
 }
+
+::-moz-selection { /* Firefox */
+	color: #000000;
+	background: #FFFFFF;
+}
+
+::selection {
+	color: #000000;
+	background: #FFFFFF;
+}
diff --git a/html/webbox.js b/html/webbox.js
index fa24e29..5a55010 100644
--- a/html/webbox.js
+++ b/html/webbox.js
@@ -296,8 +296,15 @@ function initMainpage() {
 		if (this.status == 401) { // login error: goto login page
 			var authheader = this.getResponseHeader("WWW-Authenticate");
 			var title = "Webbox";
+			// For web servers with standard AUTH BASIC, triggering problems in
+			// client browsers, popping up the browser's "Authenticate" window
+			// but we want our own
 			if (authheader.startsWith("Basic realm=\"") && authheader.endsWith("\"")) {
 				title = authheader.substr(13, authheader.length - 14);
+			} else
+			// Fixed up Apache server
+			if (authheader.startsWith("SR_Basic realm=\"") && authheader.endsWith("\"")) {
+				title = authheader.substr(16, authheader.length - 17);
 			}
 			login(title);
 			return;
@@ -322,22 +329,6 @@ function initMainpage() {
 	xhrTitle.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhrTitle.send();
 
-	// default action for "Cancel" button: hide dialog window
-	document.getElementById("cancelbutton").onclick = hideDialog;
-
-	// on click outside of menu, close menu
-	document.getElementById("greyout").onclick = function() {
-		hideDialog();
-		hideMenu();
-	}
-	
-	// on Escape, globally hide dialog and menu window
-	document.onkeydown = function(evt) {
-		if (evt.key == "Escape") {
-			hideDialog();
-			hideMenu();
-		}
-	}
 }
 
 // deferred initialization after successful login
@@ -358,6 +349,23 @@ function initMainpage2() {
 	xhrFooter.open("GET", "/bin/query?command=version", true);
 	xhrFooter.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhrFooter.send();
+	
+	// default action for "Cancel" button: hide dialog window
+	document.getElementById("cancelbutton").onclick = hideDialog;
+
+	// on click outside of menu, close menu
+	document.getElementById("greyout").onclick = function() {
+		hideDialog();
+		hideMenu();
+	}
+	
+	// on Escape, globally hide dialog and menu window
+	document.onkeydown = function(evt) {
+		if (evt.key == "Escape") {
+			hideDialog();
+			hideMenu();
+		}
+	}
 }
 
 function setCurrentDir(newDir) {
@@ -404,8 +412,10 @@ function download(filename) {
 				var file = new Blob([this.response]);
 				a.href = window.URL.createObjectURL(file);
 				a.click();
+				progressOff();
 			}
 
+			progressOn();
 			var files = getSelectedFiles();
 			var parser = new DOMParser();
 			var xmlDocument = parser.parseFromString("<files></files>", "text/xml");
@@ -436,12 +446,14 @@ function download(filename) {
 			var file = new Blob([this.response]);
 			a.href = window.URL.createObjectURL(file);
 			a.click();
+			progressOff();
 		}
 
 		var dir = currentDir;
 		if (dir != "/") {
 			dir += "/"
 		}
+		progressOn();
 		xhr.open("GET", "/bin/query" + dir + filename, true);
 		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 		xhr.responseType = 'blob';
@@ -529,12 +541,15 @@ function onUploadFile() {
 			document.getElementById("cancelbutton").style.display = "block";
 		}
 		document.getElementById("okbutton").focus();
+		progressOff();
 	}
 
         var uploadfile = document.getElementById("uploadfile");
         var formData = new FormData();
         formData.append("uploadfile", uploadfile.files[0]);
 
+	progressOn();
+
         xhr.open("POST", "/bin/query" + currentDir + "?command=upload", true);
 	xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
         xhr.send(formData);
@@ -815,3 +830,55 @@ function logout() {
 	document.getElementById("dialog").innerHTML = document.getElementById("logout-dialog").innerHTML;
 }
 
+// Progress indication
+
+function drawDot(c, offsetx, offsety, radius, distance, phase) {
+        c.beginPath();
+        c.arc(distance * Math.sin(phase) + offsetx,
+                - distance * Math.cos(phase) + offsety, radius, 0, 2 * Math.PI);
+        c.fill();
+}
+
+function drawLogo(canvasid, rotation) {
+        var canvas = document.getElementById(canvasid);
+
+        var height = canvas.height;
+        var width = canvas.width;
+        var radius = height * 0.1;
+        var distance = height * 0.1 * 4 / 3;
+        
+        var c = canvas.getContext("2d");
+
+        c.clearRect(0, 0, width, height);
+        c.fillStyle = "#AAAADD";
+        drawDot(c, width / 2, height / 2, radius, distance, rotation);
+        drawDot(c, width / 2, height / 2, radius, distance, rotation + 2 * Math.PI / 3);
+        drawDot(c, width / 2, height / 2, radius, distance, rotation + 2 * Math.PI / 3 * 2);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI + 2 * Math.PI / 3);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI + 2 * Math.PI / 3 * 2);
+}
+
+var progressState = 0;
+
+function drawAni(timeStamp) {
+        var rotation = timeStamp / 1000 * 6;
+
+        drawLogo("progresscanvas", rotation);
+
+	if (progressState == 1) {
+	        requestAnimationFrame(drawAni);
+	}
+}
+
+function progressOn() {
+	progressState = 1;
+	document.getElementById("progresswindow").style.display = "block";
+        requestAnimationFrame(drawAni);
+}
+
+function progressOff() {
+	progressState = 0;
+	document.getElementById("progresswindow").style.display = "none";
+}
+