own auth

web/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-	<msapplication>
-		<tile>
-			<square150x150logo src="/mstile-150x150.png"/>
-			<TileColor>#2b5797</TileColor>
-		</tile>
-	</msapplication>
-</browserconfig>

web/index.html

@@ -4,22 +4,22 @@
 	<meta charset="utf-8" />
 	<title>Pi-KVM Index</title>
 
-	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-	<link rel="manifest" href="/site.webmanifest">
-	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+	<link rel="apple-touch-icon" sizes="180x180" href="/share/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/share/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/share/favicon-16x16.png">
+	<link rel="manifest" href="/share/site.webmanifest">
+	<link rel="mask-icon" href="/share/safari-pinned-tab.svg" color="#5bbad5">
 	<meta name="msapplication-TileColor" content="#2b5797">
 	<meta name="theme-color" content="#ffffff">
 
-	<link rel="stylesheet" href="css/vars.css">
-	<link rel="stylesheet" href="css/main.css">
-	<link rel="stylesheet" href="css/modals.css">
-	<link rel="stylesheet" href="css/index/index.css">
+	<link rel="stylesheet" href="share/css/vars.css">
+	<link rel="stylesheet" href="share/css/main.css">
+	<link rel="stylesheet" href="share/css/modals.css">
+	<link rel="stylesheet" href="share/css/index/index.css">
 
-	<script src="js/bb.js"></script>
-	<script src="js/tools.js"></script>
-	<script src="js/index/main.js"></script>
+	<script src="share/js/bb.js"></script>
+	<script src="share/js/tools.js"></script>
+	<script src="share/js/index/main.js"></script>
 
 	<script>window.onload = main;</script>
 </head>
@@ -30,7 +30,7 @@
 			<table>
 				<tr>
 					<td valign="top" class="logo">
-						<img class="svg-gray" src="svg/logo.svg" alt="Open Source Hardware" height="40" />
+						<img class="svg-gray" src="share/svg/logo.svg" alt="Open Source Hardware" height="40" />
 					</td>
 					<td valign="top">
 						<table>

web/kvm/index.html

@@ -4,40 +4,40 @@
 	<meta charset="utf-8" />
 	<title>Pi-KVM Session</title>
 
-	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-	<link rel="manifest" href="/site.webmanifest">
-	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+	<link rel="apple-touch-icon" sizes="180x180" href="/share/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/share/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/share/favicon-16x16.png">
+	<link rel="manifest" href="/share/site.webmanifest">
+	<link rel="mask-icon" href="/share/safari-pinned-tab.svg" color="#5bbad5">
 	<meta name="msapplication-TileColor" content="#2b5797">
 	<meta name="theme-color" content="#ffffff">
 
-	<link rel="stylesheet" href="../css/vars.css">
-	<link rel="stylesheet" href="../css/main.css">
-	<link rel="stylesheet" href="../css/menu.css">
-	<link rel="stylesheet" href="../css/windows.css">
-	<link rel="stylesheet" href="../css/modals.css">
-	<link rel="stylesheet" href="../css/leds.css">
-	<link rel="stylesheet" href="../css/sliders.css">
-	<link rel="stylesheet" href="../css/switches.css">
-	<link rel="stylesheet" href="../css/progress.css">
-	<link rel="stylesheet" href="../css/kvm/stream.css">
-	<link rel="stylesheet" href="../css/kvm/hid.css">
-	<link rel="stylesheet" href="../css/kvm/msd.css">
-	<link rel="stylesheet" href="../css/kvm/keyboard.css">
-	<link rel="stylesheet" href="../css/kvm/about.css">
+	<link rel="stylesheet" href="../share/css/vars.css">
+	<link rel="stylesheet" href="../share/css/main.css">
+	<link rel="stylesheet" href="../share/css/menu.css">
+	<link rel="stylesheet" href="../share/css/windows.css">
+	<link rel="stylesheet" href="../share/css/modals.css">
+	<link rel="stylesheet" href="../share/css/leds.css">
+	<link rel="stylesheet" href="../share/css/sliders.css">
+	<link rel="stylesheet" href="../share/css/switches.css">
+	<link rel="stylesheet" href="../share/css/progress.css">
+	<link rel="stylesheet" href="../share/css/kvm/stream.css">
+	<link rel="stylesheet" href="../share/css/kvm/hid.css">
+	<link rel="stylesheet" href="../share/css/kvm/msd.css">
+	<link rel="stylesheet" href="../share/css/kvm/keyboard.css">
+	<link rel="stylesheet" href="../share/css/kvm/about.css">
 
-	<script src="../js/bb.js"></script>
-	<script src="../js/tools.js"></script>
-	<script src="../js/wm.js"></script>
-	<script src="../js/kvm/stream.js"></script>
-	<script src="../js/kvm/atx.js"></script>
-	<script src="../js/kvm/keyboard.js"></script>
-	<script src="../js/kvm/mouse.js"></script>
-	<script src="../js/kvm/hid.js"></script>
-	<script src="../js/kvm/msd.js"></script>
-	<script src="../js/kvm/session.js"></script>
-	<script src="../js/kvm/main.js"></script>
+	<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/kvm/stream.js"></script>
+	<script src="../share/js/kvm/atx.js"></script>
+	<script src="../share/js/kvm/keyboard.js"></script>
+	<script src="../share/js/kvm/mouse.js"></script>
+	<script src="../share/js/kvm/hid.js"></script>
+	<script src="../share/js/kvm/msd.js"></script>
+	<script src="../share/js/kvm/session.js"></script>
+	<script src="../share/js/kvm/main.js"></script>
 
 	<script>window.onload = main;</script>
 </head>
@@ -47,16 +47,16 @@
 		<li class="menu-left-items">
 			<a id="menu-logo" href="/">
 				&#8617;&nbsp;&nbsp;
-				<img class="svg-gray" src="../svg/logo.svg" alt="&pi;-kvm" />
+				<img class="svg-gray" src="../share/svg/logo.svg" alt="&pi;-kvm" />
 			</a>
 		</li>
 
 		<li class="menu-right-items">
 			<a class="menu-item" href="#">
-				<img data-dont-hide-menu id="link-led" class="led-gray" src="../svg/link-led.svg" />
-				<img data-dont-hide-menu id="stream-led" class="led-gray" src="../svg/stream-led.svg" />
-				<img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="../svg/hid-keyboard-led.svg" />
-				<img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="../svg/hid-mouse-led.svg" />
+				<img data-dont-hide-menu id="link-led" class="led-gray" src="../share/svg/link-led.svg" />
+				<img data-dont-hide-menu id="stream-led" class="led-gray" src="../share/svg/stream-led.svg" />
+				<img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="../share/svg/hid-keyboard-led.svg" />
+				<img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="../share/svg/hid-mouse-led.svg" />
 				System &#8628;
 			</a>
 			<div data-dont-hide-menu class="menu-item-content">
@@ -118,8 +118,8 @@
 
 		<li class="menu-right-items">
 			<a class="menu-item" href="#">
-				<img data-dont-hide-menu id="atx-power-led" class="led-gray" src="../svg/atx-power-led.svg" />
-				<img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="../svg/atx-hdd-led.svg" />
+				<img data-dont-hide-menu id="atx-power-led" class="led-gray" src="../share/svg/atx-power-led.svg" />
+				<img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="../share/svg/atx-hdd-led.svg" />
 				ATX &#8628;
 			</a>
 			<div class="menu-item-content menu-item-content-buttons">
@@ -132,7 +132,7 @@
 
 		<li class="menu-right-items">
 			<a class="menu-item" href="#">
-				<img data-dont-hide-menu id="msd-led" class="led-gray" src="../svg/msd-led.svg" />
+				<img data-dont-hide-menu id="msd-led" class="led-gray" src="../share/svg/msd-led.svg" />
 				Mass Storage &#8628;
 			</a>
 			<div data-dont-hide-menu id="msd-menu" class="menu-item-content">
@@ -140,7 +140,7 @@
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
-								<td><img src="../svg/warning.svg" /></td>
+								<td><img src="../share/svg/warning.svg" /></td>
 								<td><b>Mass Storage Device is not operational</b></td>
 							</tr>
 						</table>
@@ -152,7 +152,7 @@
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
-								<td><img src="../svg/warning.svg" /></td>
+								<td><img src="../share/svg/warning.svg" /></td>
 								<td><b>Current image is broken!</b><br><sub>Perhaps uploading was interrupted</sub></td>
 							</tr>
 						</table>
@@ -164,7 +164,7 @@
 					<div class="menu-item-content-text">
 						<table>
 							<tr>
-								<td><img src="../svg/info.svg" /></td>
+								<td><img src="../share/svg/info.svg" /></td>
 								<td><b>Another user uploads an image</b></td>
 							</tr>
 						</table>
@@ -233,7 +233,7 @@
 
 		<li class="menu-right-items">
 			<a class="menu-item" href="#">
-				<img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="../svg/gear-led.svg" />
+				<img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="../share/svg/gear-led.svg" />
 				Shortcuts &#8628;
 			</a>
 			<div data-dont-hide-menu class="menu-item-content">
@@ -282,7 +282,7 @@
 		</div>
 		<div id="stream-info"></div>
 		<div id="stream-box" class="stream-box-inactive">
-			<img id="stream-image" class="stream-image-inactive" src="../png/blank-stream.png" />
+			<img id="stream-image" class="stream-image-inactive" src="../share/png/blank-stream.png" />
 		</div>
 		<div id="stream-mouse-buttons">
 			<button data-mouse-button="left" class="row50">Left Click</button>
@@ -534,7 +534,7 @@
 			<table>
 				<tr>
 					<td valign="top" class="logo">
-						<img class="svg-gray" src="../svg/logo.svg" alt="Open Source Hardware" height="40" />
+						<img class="svg-gray" src="../share/svg/logo.svg" alt="Open Source Hardware" height="40" />
 					</td>
 					<td valign="top">
 						<table>

web/login/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>Pi-KVM Login</title>
+
+	<link rel="apple-touch-icon" sizes="180x180" href="/share/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/share/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/share/favicon-16x16.png">
+	<link rel="manifest" href="/share/site.webmanifest">
+	<link rel="mask-icon" href="/share/safari-pinned-tab.svg" color="#5bbad5">
+	<meta name="msapplication-TileColor" content="#2b5797">
+	<meta name="theme-color" content="#ffffff">
+
+	<link rel="stylesheet" href="../share/css/vars.css">
+	<link rel="stylesheet" href="../share/css/main.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/login/main.js"></script>
+
+	<script>window.onload = main;</script>
+</head>
+
+<body>
+	<div id="login-box">
+		<div id="login">
+			<table>
+				<tr>
+					<td>Username:</td>
+					<td><input type="text" id="user-input"></td>
+				</tr>
+				<tr>
+					<td>Password:</td>
+					<td><input type="password" id="passwd-input"></td>
+				</tr>
+				<tr>
+					<td></td>
+					<td><button id="login-button">Login</button></td>
+				</tr>
+			</table>
+		</div>
+	</div>
+</body>
+</html>

web/share/css/login/login.css

@@ -0,0 +1,25 @@
+div#login-box {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	min-height: 100vh;
+}
+
+div#login {
+	text-align: left;
+	outline: none;
+	word-wrap: break-word;
+	max-width: 400px;
+	border: var(--border-window-thin);
+	border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: var(--shadow-big);
+	background-color: var(--cs-window-default-bg);
+	padding: 15px;
+}
+
+input[type="text"]#user-input, input[type="password"]#passwd-input {
+	text-align: center;
+}

web/share/css/main.css

@@ -62,6 +62,7 @@ img.svg-gray {
 button, select {
 	box-shadow: none;
 	border: none;
+	border-radius: 4px;
 	color: var(--cs-control-default-fg);
 	background-color: var(--cs-control-default-bg);
 	display: block;
@@ -116,8 +117,18 @@ select:active {
 	background-image: url("../svg/select-arrow-intensive.svg") !important;
 }
 
+input[type=text], input[type=password] {
+	overflow-x: auto;
+	font-family: monospace;
+	border: thin;
+	border-radius: 4px;
+	color: var(--cs-code-default-fg);
+	background-color: var(--cs-code-default-bg);
+	padding: 2px;
+}
+
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
-	button, select {
+	button, select, input[type=text], input[type=password] {
 		height: 45px !important;
 	}
 }

web/share/css/menu.css

@@ -98,6 +98,7 @@ ul#menu li div.menu-item-content-text {
 }
 
 ul#menu li div.menu-item-content button, select {
+	border-radius: 0;
 	text-align: left;
 	padding: 0 16px;
 }

web/share/css/modals.css

@@ -47,6 +47,7 @@ div.modal div.modal-window div.modal-buttons {
 }
 
 div.modal div.modal-window div.modal-buttons button {
+	border-radius: 0;
 	height: 40px;
 }
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

web/share/js/kvm/session.js

@@ -14,8 +14,7 @@ function Session() {
 	var __streamer = new Streamer();
 
 	var __init__ = function() {
-		$("link-led").title = "Not connected yet...";
-		__startPoller();
+		__startSession();
 	};
 
 	/********************************************************************************/
@@ -44,24 +43,15 @@ function Session() {
 		$("about-version-streamer").innerHTML = `${state.version.streamer} (${state.streamer})`;
 	};
 
-	var __startPoller = function() {
+	var __startSession = function() {
 		$("link-led").className = "led-yellow";
 		$("link-led").title = "Connecting...";
-
-		var http = tools.makeRequest("GET", "/ws_auth", function() {
-			if (http.readyState === 4) {
-				if (http.status === 200) {
-					var proto = (location.protocol === "https:" ? "wss" : "ws");
-					__ws = new WebSocket(`${proto}://${location.host}/kvmd/ws`);
-					__ws.onopen = __wsOpenHandler;
-					__ws.onmessage = __wsMessageHandler;
-					__ws.onerror = __wsErrorHandler;
-					__ws.onclose = __wsCloseHandler;
-				} else {
-					__wsCloseHandler(null);
-				}
-			}
-		});
+		var proto = (location.protocol === "https:" ? "wss" : "ws");
+		__ws = new WebSocket(`${proto}://${location.host}/kvmd/ws`);
+		__ws.onopen = __wsOpenHandler;
+		__ws.onmessage = __wsMessageHandler;
+		__ws.onerror = __wsErrorHandler;
+		__ws.onclose = __wsCloseHandler;
 	};
 
 	var __wsOpenHandler = function(event) {
@@ -118,7 +108,7 @@ function Session() {
 
 		setTimeout(function() {
 			$("link-led").className = "led-yellow";
-			setTimeout(__startPoller, 500);
+			setTimeout(__startSession, 500);
 		}, 500);
 	};
 

web/share/js/login/main.js

@@ -0,0 +1,36 @@
+function main() {
+	if (checkBrowser()) {
+		tools.setOnClick($("login-button"), __login);
+		document.onkeyup = function(event) {
+			if (event.code == "Enter") {
+				event.preventDefault();
+				__login();
+			}
+		};
+		$("user-input").focus();
+	}
+}
+
+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 = "/";
+			}
+			__setDisabled(false);
+			$("passwd-input").focus();
+			$("passwd-input").select();
+		}
+	}, body, "application/x-www-form-urlencoded");
+	http.send();
+	__setDisabled(true);
+}
+
+function __setDisabled(disabled) {
+	$("user-input").disabled = disabled;
+	$("passwd-input").disabled = disabled;
+	$("login-button").disabled = disabled;
+}

web/share/js/tools.js

@@ -1,12 +1,15 @@
 var tools = new function() {
 	var __debug = (new URL(window.location.href)).searchParams.get("debug");
 
-	this.makeRequest = function(method, url, callback, timeout=null) {
+	this.makeRequest = function(method, url, callback, body=null, content_type=null) {
 		var http = new XMLHttpRequest();
 		http.open(method, url, true);
+		if (content_type) {
+			http.setRequestHeader("Content-Type", content_type);
+		}
 		http.onreadystatechange = callback;
-		http.timeout = (timeout ? timeout : 5000);
-		http.send();
+		http.timeout = 5000;
+		http.send(body);
 		return http;
 	};
 

web/share/site.webmanifest

@@ -3,7 +3,7 @@
 	"short_name": "",
 	"icons": [
 		{
-			"src": "/android-chrome-192x192.png",
+			"src": "/share/android-chrome-192x192.png",
 			"sizes": "192x192",
 			"type": "image/png"
 		}