Login / Logoutv1.1

2 files changed, 72 insertions, 13 deletions

diff --git a/html/index.html b/html/index.html
index 3b75f44..6885bd4 100644
--- a/html/index.html
+++ b/html/index.html
@@ -80,6 +80,19 @@
 			<input type="text" id="renamenew" class="textinput"></input>
 			<br/>
 		</div>
+		
+		<div id="login-dialog" hidden>
+			<span id="logintitle">Webbox</span><br/>
+			<br/>
+			Username:<br/>
+			<input type="text" id="loginusername" class="textinput"></input>
+			Password:<br/>
+			<input type="password" id="loginpassword" class="textinput"></input>
+		</div>
+
+		<div id="logout-dialog" hidden>
+			Are you sure you want to log out?
+		</div>
 
 		<a id="download-a" hidden></a>
 
diff --git a/html/webbox.js b/html/webbox.js
index b408078..fa24e29 100644
--- a/html/webbox.js
+++ b/html/webbox.js
@@ -6,7 +6,7 @@ var password = "password";
 
 function clearContents() {
 	var result = "<table class=\"list\">";
-	result += "<tr><td class=\"type\"></td><td class=\"name\">(empty)</td></tr>";
+	// empty list
 	result += "</table>"
 	
 	var listElement = document.getElementById("list");
@@ -247,10 +247,42 @@ function prepareReadOnly(readOnly) {
 	}
 }
 
-function login() {
-	username = "kneipen";
-	password = "band";
-	initMainpage();
+function login(title) {
+	showDialog();
+
+	document.getElementById("okbutton").onclick = function() {
+		// restore dialog buttons
+		document.getElementById("cancelbutton").style.display = "block";
+		document.getElementById("okbutton").childNodes[0].nodeValue = "OK";
+		hideDialog();
+
+		username = document.getElementById("loginusername").value;
+		password = document.getElementById("loginpassword").value;
+		
+		initMainpage();
+	}
+
+	// rearrange dialog buttons
+	document.getElementById("cancelbutton").style.display = "none";
+	document.getElementById("okbutton").childNodes[0].nodeValue = "Login";
+	
+	document.getElementById("dialog").innerHTML = document.getElementById("login-dialog").innerHTML;
+	
+	document.getElementById("logintitle").childNodes[0].nodeValue = title;
+	
+	document.getElementById("loginusername").focus();
+
+	document.getElementById("loginusername").onkeydown = function(evt) {
+		if (evt.key == "Enter") {
+			document.getElementById("okbutton").click();
+		}
+	}
+	
+	document.getElementById("loginpassword").onkeydown = function(evt) {
+		if (evt.key == "Enter") {
+			document.getElementById("okbutton").click();
+		}
+	}
 }
 
 function initMainpage() {
@@ -262,7 +294,12 @@ function initMainpage() {
 			return;
 		}
 		if (this.status == 401) { // login error: goto login page
-			login();
+			var authheader = this.getResponseHeader("WWW-Authenticate");
+			var title = "Webbox";
+			if (authheader.startsWith("Basic realm=\"") && authheader.endsWith("\"")) {
+				title = authheader.substr(13, authheader.length - 14);
+			}
+			login(title);
 			return;
 		} else
 		if (this.status != 200) {
@@ -759,13 +796,22 @@ function refresh() {
 }
 
 function logout() {
-	var menu = document.getElementsByClassName("menu")[0];
-	var firsttd = menu.getElementsByClassName("firsttd")[0];
-	firsttd.innerHTML = "/";
+	showDialog();
+
+	document.getElementById("okbutton").onclick = function() {
+		hideDialog();
 
-	clearContents();
+		var menu = document.getElementsByClassName("menu")[0];
+		var firsttd = menu.getElementsByClassName("firsttd")[0];
+		firsttd.innerHTML = "/";
 
-	username = "notaname";
-	password = "password";
-	initMainpage();
+		clearContents();
+
+		username = "notaname";
+		password = "password";
+		initMainpage();
+	}
+
+	document.getElementById("dialog").innerHTML = document.getElementById("logout-dialog").innerHTML;
 }
+