summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/index.html2
-rw-r--r--web/kvm/index.html2
-rw-r--r--web/login/index.html2
-rw-r--r--web/share/js/index/main.js45
-rw-r--r--web/share/js/login/main.js22
-rw-r--r--web/share/js/wm.js11
-rw-r--r--web/share/svg/logout.svg53
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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 22:34:43 +0000