logout

3 files changed, 58 insertions, 20 deletions

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", "");
 			}