This commit is contained in:
Devaev Maxim 2018-12-16 04:13:19 +03:00
parent d7fb06d22e
commit 6626e514b3
7 changed files with 116 additions and 21 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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);
}
}
});
}

View File

@ -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();
}

View File

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

53
web/share/svg/logout.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 1.9 KiB