Prepared login page (WIP)

2 files changed, 73 insertions, 25 deletions

diff --git a/html/index.html b/html/index.html
index 904d5e0..3b75f44 100644
--- a/html/index.html
+++ b/html/index.html
@@ -81,7 +81,7 @@
 			<br/>
 		</div>
 
-		<a download="webbox-download.zip" id="download-a" hidden></a>
+		<a id="download-a" hidden></a>
 
 		<div class="footer">
 		</div>
diff --git a/html/webbox.js b/html/webbox.js
index 7c1b43f..6cbf23d 100644
--- a/html/webbox.js
+++ b/html/webbox.js
@@ -1,6 +1,8 @@
 var currentDir = "/";
 var listElements;
 var numberOfSelectedRows = 0;
+var username = "notaname";
+var password = "password";
 
 function clearContents() {
 	var result = "<table class=\"list\">";
@@ -56,6 +58,7 @@ function loadContents(dir) {
 	}
 
 	xhr.open("GET", "/bin/query" + currentDir + "?command=list", true);
+	xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhr.send();
 }
 
@@ -244,26 +247,13 @@ function prepareReadOnly(readOnly) {
 	}
 }
 
-function initMainpage() {
-	setCurrentDir("/");
-
-	// 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 login() {
+	username = "kneipen";
+	password = "band";
+	initMainpage();
+}
 
+function initMainpage() {
 	// load title
 	var xhrTitle = new XMLHttpRequest();
 
@@ -271,6 +261,10 @@ function initMainpage() {
 		if (this.readyState != 4) {
 			return;
 		}
+		if (this.status == 401) { // login error: goto login page
+			login();
+			return;
+		} else
 		if (this.status != 200) {
 			document.getElementsByClassName("title")[0].innerHTML = "HTTP error";
 			return;
@@ -282,11 +276,38 @@ function initMainpage() {
 
 		var readOnly = serverInfo.getElementsByTagName("readonly")[0].textContent;
 		prepareReadOnly(readOnly);
+
+		// if successful: continue loading
+		initMainpage2();
 	}
 
 	xhrTitle.open("GET", "/bin/query?command=server-info", true);
+	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
+function initMainpage2() {
+	// fill file list initially
+	setCurrentDir("/");
+
 	// load footer
 	var xhrFooter = new XMLHttpRequest();
 
@@ -298,6 +319,7 @@ function initMainpage() {
 	}
 
 	xhrFooter.open("GET", "/bin/query?command=version", true);
+	xhrFooter.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhrFooter.send();
 }
 
@@ -341,6 +363,7 @@ function download(filename) {
 				}
 
 				var a = document.getElementById("download-a");
+				a.setAttribute("download", "webbox-download.zip");
 				var file = new Blob([this.response]);
 				a.href = window.URL.createObjectURL(file);
 				a.click();
@@ -358,16 +381,34 @@ function download(filename) {
 			}
 
 			xhr.open("POST", "/bin/query" + currentDir + "?command=download-zip", true);
+			xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 			xhr.setRequestHeader("Content-type", "text/xml");
 			xhr.responseType = 'blob';
 			xhr.send(xmlDocument);
 		}
-	} else {
+	} else { // single file download
+		var xhr = new XMLHttpRequest();
+
+		xhr.onreadystatechange = function() {
+			if (this.readyState != 4 || this.status != 200) {
+				return;
+			}
+
+			var a = document.getElementById("download-a");
+			a.setAttribute("download", filename);
+			var file = new Blob([this.response]);
+			a.href = window.URL.createObjectURL(file);
+			a.click();
+		}
+
 		var dir = currentDir;
 		if (dir != "/") {
 			dir += "/"
 		}
-		document.location.href = "/bin/query" + dir + filename;
+		xhr.open("GET", "/bin/query" + dir + filename, true);
+		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
+		xhr.responseType = 'blob';
+		xhr.send();
 	}
 }
 
@@ -400,6 +441,7 @@ function createDir() {
 		dirElement.appendChild(document.createTextNode(document.getElementById("newdir").value));
 
 		xhr.open("POST", "/bin/query" + currentDir + "?command=newdir", true);
+		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 		xhr.setRequestHeader("Content-type", "text/xml");
 		xhr.send(xmlDocument);
 	}
@@ -457,6 +499,7 @@ function onUploadFile() {
         formData.append("uploadfile", uploadfile.files[0]);
 
         xhr.open("POST", "/bin/query" + currentDir + "?command=upload", true);
+	xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
         xhr.send(formData);
 }
 
@@ -506,6 +549,7 @@ function deleteItems() {
 		}
 
 		xhr.open("POST", "/bin/query" + currentDir + "?command=delete", true);
+		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 		xhr.setRequestHeader("Content-type", "text/xml");
 		xhr.send(xmlDocument);
 	}
@@ -570,10 +614,12 @@ function move() {
 		}
 
 		xhr.open("POST", "/bin/query" + currentDir + "?command=move", true);
+		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 		xhr.setRequestHeader("Content-type", "text/xml");
 		xhr.send(xmlDocument);
 	}
 }
+
 function rename() {
 	showDialog();
 	
@@ -634,6 +680,7 @@ function rename() {
 		filesElement.appendChild(newnameElement);
 
 		xhr.open("POST", "/bin/query" + currentDir + "?command=rename", true);
+		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 		xhr.setRequestHeader("Content-type", "text/xml");
 		xhr.send(xmlDocument);
 	}
@@ -681,6 +728,7 @@ function info() {
 	}
 
 	xhr.open("POST", "/bin/query" + currentDir + "?command=info", true);
+	xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhr.setRequestHeader("Content-type", "text/xml");
 	xhr.send(xmlDocument);
 }
@@ -717,7 +765,7 @@ function logout() {
 
 	clearContents();
 
-	var p = window.location.protocol + '//'
-	// current location must return 200 OK for this GET
-	window.location = window.location.href.replace(p, p + 'logout:password@')
+	username = "notaname";
+	password = "password";
+	initMainpage();
 }