logout

7 files changed, 116 insertions, 21 deletions

diff --git a/web/index.html b/web/index.html
index e1113454..0f519ee3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -14,11 +14,13 @@
 
 	<link rel="stylesheet" href="share/css/vars.css">
 	<link rel="stylesheet" href="share/css/main.css">
+	<link rel="stylesheet" href="share/css/windows.css">
 	<link rel="stylesheet" href="share/css/modals.css">
 	<link rel="stylesheet" href="share/css/index/index.css">
 
 	<script src="share/js/bb.js"></script>
 	<script src="share/js/tools.js"></script>
+	<script src="share/js/wm.js"></script>
 	<script src="share/js/index/main.js"></script>
 
 	<script>window.onload = main;</script>
diff --git a/web/kvm/index.html b/web/kvm/index.html
index 92f503fb..f106dd2c 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -46,7 +46,7 @@
 	<ul id="menu">
 		<li class="menu-left-items">
 			<a id="menu-logo" href="/">
-				&#8617;&nbsp;&nbsp;
+				&larr;&nbsp;&nbsp;
 				<img class="svg-gray" src="../share/svg/logo.svg" alt="&pi;-kvm" />
 			</a>
 		</li>
diff --git a/web/login/index.html b/web/login/index.html
index 10ca2e2b..be63bf86 100644
--- a/web/login/index.html
+++ b/web/login/index.html
@@ -14,11 +14,13 @@
 
 	<link rel="stylesheet" href="../share/css/vars.css">
 	<link rel="stylesheet" href="../share/css/main.css">
+	<link rel="stylesheet" href="../share/css/windows.css">
 	<link rel="stylesheet" href="../share/css/modals.css">
 	<link rel="stylesheet" href="../share/css/login/login.css">
 
 	<script src="../share/js/bb.js"></script>
 	<script src="../share/js/tools.js"></script>
+	<script src="../share/js/wm.js"></script>
 	<script src="../share/js/login/main.js"></script>
 
 	<script>window.onload = main;</script>
diff --git a/web/share/js/index/main.js b/web/share/js/index/main.js
index 8f5c74a6..f42b9af6 100644
--- a/web/share/js/index/main.js
+++ b/web/share/js/index/main.js
@@ -1,4 +1,8 @@
+var wm;
+
 function main() {
+	wm = new WindowManager();
+
 	if (checkBrowser()) {
 		__setAppText();
 		__loadKvmdInfo();
@@ -36,20 +40,12 @@ function __loadKvmdInfo() {
 
 				$("apps-box").innerHTML = "<ul id=\"apps\"></ul>";
 				apps.forEach(function(app) {
-					$("apps").innerHTML += `
-						<li>
-							<div class="app">
-								<a href="${app.path}">
-									<div>
-										<img class="svg-gray" src="${app.icon}">
-										${app.name}
-									</div>
-								</a>
-							</div>
-						</li>
-					`;
+					$("apps").innerHTML += __makeApp(null, app.path, app.icon, app.name);
 				});
 
+				$("apps").innerHTML += __makeApp("logout-button", "#", "share/svg/logout.svg", "Logout");
+				tools.setOnClick($("logout-button"), __logout);
+
 				if (info.meta && info.meta.server && info.meta.server.host) {
 					$("kvmd-meta-server-host").innerHTML = info.meta.server.host;
 					document.title = "Pi-KVM Index: " + info.meta.server.host;
@@ -63,3 +59,28 @@ function __loadKvmdInfo() {
 		}
 	});
 }
+
+function __makeApp(id, path, icon, name) {
+	return `<li>
+		<div ${id ? "id=\"" + id + "\"" : ""} class="app">
+			<a href="${path}">
+				<div>
+					<img class="svg-gray" src="${icon}">
+					${name}
+				</div>
+			</a>
+		</div>
+	</li>`;
+}
+
+function __logout() {
+	var http = tools.makeRequest("POST", "/kvmd/auth/logout", function() {
+		if (http.readyState === 4) {
+			if (http.status === 200) {
+				document.location.href = "/login";
+			} else {
+				wm.error("Logout error:<br>", http.responseText);
+			}
+		}
+	});
+}
diff --git a/web/share/js/login/main.js b/web/share/js/login/main.js
index dc45d03f..1362f821 100644
--- a/web/share/js/login/main.js
+++ b/web/share/js/login/main.js
@@ -1,12 +1,17 @@
+var wm;
+
 function main() {
 	if (checkBrowser()) {
+		wm = new WindowManager();
+
 		tools.setOnClick($("login-button"), __login);
-		document.onkeyup = function(event) {
+		$("user-input").onkeyup = $("passwd-input").onkeyup = function(event) {
 			if (event.code == "Enter") {
 				event.preventDefault();
 				__login();
 			}
 		};
+
 		$("user-input").focus();
 	}
 }
@@ -15,17 +20,18 @@ function __login() {
 	var user = $("user-input").value;
 	var passwd = $("passwd-input").value;
 	var body = `user=${encodeURIComponent(user)}&passwd=${encodeURIComponent(passwd)}`;
+
 	var http = tools.makeRequest("POST", "/kvmd/auth/login", function() {
 		if (http.readyState === 4) {
 			if (http.status === 200) {
 				document.location.href = "/";
+			} else if (http.status === 403) {
+				wm.error("Invalid username or password").then(__tryAgain);
+			} else {
+				wm.error("Login error:<br>", http.responseText).then(__tryAgain);
 			}
-			__setDisabled(false);
-			$("passwd-input").focus();
-			$("passwd-input").select();
 		}
 	}, body, "application/x-www-form-urlencoded");
-	http.send();
 	__setDisabled(true);
 }
 
@@ -34,3 +40,9 @@ function __setDisabled(disabled) {
 	$("passwd-input").disabled = disabled;
 	$("login-button").disabled = disabled;
 }
+
+function __tryAgain() {
+	__setDisabled(false);
+	$("passwd-input").focus();
+	$("passwd-input").select();
+}
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index c292ece7..5dae326d 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -141,7 +141,7 @@ function WindowManager() {
 			var view = self.getViewGeometry();
 			var rect = el_window.getBoundingClientRect();
 
-			el_window.style.top = Math.max($("menu").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
+			el_window.style.top = Math.max(__getMenuHeight(), Math.round((view.bottom - rect.height) / 2)) + "px";
 			el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
 			el_window.setAttribute("data-centered", "");
 		}
@@ -154,13 +154,18 @@ function WindowManager() {
 
 	self.getViewGeometry = function() {
 		return {
-			top: $("menu").clientHeight,
+			top: __getMenuHeight(),
 			bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
 			left: 0,
 			right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
 		};
 	};
 
+	var __getMenuHeight = function() {
+		var el_menu = $("menu");
+		return (el_menu ? el_menu.clientHeight : 0);
+	};
+
 	var __isWindowOnPage = function(el_window) {
 		var view = self.getViewGeometry();
 		var rect = el_window.getBoundingClientRect();
@@ -257,7 +262,7 @@ function WindowManager() {
 			if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
 				var rect = el_window.getBoundingClientRect();
 
-				el_window.style.top = Math.max($("menu").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
+				el_window.style.top = Math.max(__getMenuHeight(), Math.round((view.bottom - rect.height) / 2)) + "px";
 				el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
 				el_window.setAttribute("data-centered", "");
 			}
diff --git a/web/share/svg/logout.svg b/web/share/svg/logout.svg
new file mode 100644
index 00000000..dff97004
--- /dev/null
+++ b/web/share/svg/logout.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="46.782px" height="46.782px" viewBox="0 0 46.782 46.782" style="enable-background:new 0 0 46.782 46.782;"

+	 xml:space="preserve">

+<g>

+	<g>

+		<path d="M46.629,33.693l-1.262-2.219c-0.204-0.358-0.709-0.651-1.121-0.651L27.75,30.825c-0.412,0-0.979-0.25-1.256-0.555

+			l-0.985-1.08c-0.278-0.305-0.844-0.554-1.256-0.554h-5.604l-0.231-2.796c-0.347-2.177-2.387-3.554-4.535-3.072l-9.977,2.247

+			c-2.148,0.483-3.904,2.669-3.903,4.871L0,38.807c0,2.194,1.758,4.386,3.903,4.873l9.979,2.245

+			c2.148,0.482,4.188-0.896,4.535-3.075l0.231-2.792l0,0l3.609-0.001c0.412,0,0.978-0.25,1.255-0.556l0.984-1.078

+			c0.277-0.305,0.843-0.555,1.255-0.555h1.163c0.412,0,0.9-0.302,1.084-0.672l0.154-0.313c0.185-0.37,0.673-0.673,1.084-0.673h0.705

+			c0.412,0,0.836,0.326,0.94,0.726l0.056,0.208c0.105,0.398,0.514,0.725,0.904,0.725s0.862-0.302,1.047-0.672l0.155-0.314

+			c0.185-0.37,0.671-0.672,1.083-0.672h0.705c0.412,0,0.835,0.326,0.939,0.726l0.055,0.208c0.104,0.398,0.527,0.727,0.939,0.727

+			h7.478c0.411,0,0.917-0.293,1.12-0.652l1.263-2.219C46.833,34.639,46.833,34.052,46.629,33.693z M6.883,40.389

+			c-1.857,0-3.357-2.705-3.357-6.042c0-3.338,1.5-6.043,3.357-6.043c1.855,0,3.356,2.705,3.356,6.043

+			C10.239,37.684,8.738,40.389,6.883,40.389z"/>

+		<polygon points="17.709,21.248 23.5,15.458 29.291,21.248 33.744,16.794 27.953,11.006 33.744,5.214 29.291,0.761 23.5,6.553 

+			17.709,0.761 13.256,5.214 19.048,11.006 13.256,16.794 		"/>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>