From 49674f7ffed704fcf5312c5236f28f062d93d0d3 Mon Sep 17 00:00:00 2001
From: Carlos <28845529+mesacarlos@users.noreply.github.com>
Date: Mon, 12 Aug 2019 02:53:46 +0200
Subject: [PATCH] Work-in-progress Web Interface

---
 README.md                                    | 17 ++++
 html/index.html                              | 79 ++++++++++++++++
 html/scripts/WebConsole.js                   | 27 ++++++
 html/scripts/WebConsoleConnector.js          | 96 ++++++++++++++++++++
 html/scripts/WebConsoleManager.js            | 30 ++++++
 html/scripts/WebConsolePersistenceManager.js | 89 ++++++++++++++++++
 6 files changed, 338 insertions(+)
 create mode 100644 html/index.html
 create mode 100644 html/scripts/WebConsole.js
 create mode 100644 html/scripts/WebConsoleConnector.js
 create mode 100644 html/scripts/WebConsoleManager.js
 create mode 100644 html/scripts/WebConsolePersistenceManager.js
diff --git a/README.md b/README.md
index b873f3a..e38c28e 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,23 @@ Dont worry about privacy: all data is stored in your browser offline and your PC
 If generated with
 keytool -genkey -keyalg RSA -validity 3650 -keystore "keystore.jks" -storepass "storepassword" -keypass "keypassword" -alias "default" -dname "CN=127.0.0.1, OU=MyOrgUnit, O=MyOrg, L=MyCity, S=MyRegion, C=MyCountry"
 then need to https://localhost:8080/
+If generated with letsencrypt https://gist.github.com/xkr47/920ffe94f6a4c171ee59
+
+# input: fullchain.pem and privkey.pem as generated by the "letsencrypt-auto" script when run with
+# the "auth" aka "certonly" subcommand
+
+# convert certificate chain + private key to the PKCS#12 file format
+# este comando pide una pass para exportar, es la storepassword
+openssl pkcs12 -export -out keystore.pkcs12 -in fullchain.pem -inkey privkey.pem
+
+# convert PKCS#12 file into Java keystore format
+keytool -importkeystore -srckeystore keystore.pkcs12 -srcstoretype PKCS12 -destkeystore keystore.jks
+
+# don't need the PKCS#12 file anymore
+rm keystore.pkcs12
+
+# Now use "keystore.jks" as keystore in jetty with the keystore password you specfied when you ran
+# the "keytool" command
 
 
 ## How it works
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..d4d0713
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<!-- Required meta tags -->
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		
+		<!-- Bootstrap CSS -->
+		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+		
+		<title>WebConsole</title>
+	</head>
+	<body class="d-flex flex-column h-100">
+		<header>
+			<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
+				<a class="navbar-brand" href="index.html">WebConsole</a>
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContainer" aria-controls="navbarContainer" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse" id="navbarContainer">
+					<ul class="navbar-nav mr-auto">
+						<li class="nav-item">
+							<a class="nav-link" href="#">Home</a>
+						</li>
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="serversDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+								Your servers
+							</a>
+							<div class="dropdown-menu" id="ServerListDropDown" aria-labelledby="serversDropdown">
+								<a class="dropdown-item" href="#">Add Server</a>
+								<div class="dropdown-divider"></div>
+								<a class="dropdown-item servermenuitem" href="#">Survival</a>
+								<a class="dropdown-item servermenuitem" href="#">SkyBlock</a>
+							</div>
+						</li>
+					</ul>
+					<ul class="navbar-nav ml-auto">
+						<li class="nav-item">
+							<a class="nav-link" href="#">Something</a>
+						</li>
+					</ul>
+				</div>
+			</nav>
+		</header>
+		
+		<!-- Begin page content -->
+		<main role="main" class="flex-shrink-0">
+			<!-- Index container -->
+			<div class="container">
+				<h1 class="mt-5">Select a server from the menu</h1>
+				<p class="lead">Use the navigation bar to add a new Minecraft Server or connect to a previously added one.</p>
+			</div>
+			
+			<!-- Server management container -->
+			<div class="container" hidden>
+				<h1 class="mt-5">Survival</h1>
+				<p class="lead">Manage now your Minecraft Server.</p>
+			</div>
+		</main>
+		
+		<!-- Webpage footer -->
+		<footer class="footer mt-auto py-3">
+			<div class="container">
+				<span class="text-muted">WebConsole 1.0.0 - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
+			</div>
+		</footer>
+		
+		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+		
+		<!-- WebConsole JS Scripts -->
+		<script src="scripts/WebConsole.js"></script>
+		<script src="scripts/WebConsolePersistenceManager.js"></script>
+		<script src="scripts/WebConsoleManager.js"></script>
+		<script src="scripts/WebConsoleConnector.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/html/scripts/WebConsole.js b/html/scripts/WebConsole.js
new file mode 100644
index 0000000..e9f5e43
--- /dev/null
+++ b/html/scripts/WebConsole.js
@@ -0,0 +1,27 @@
+/**
+ Main JS file for WebConsole.
+ Version v1.0.0
+ https://github.com/mesacarlos
+ 2019 Carlos Mesa under MIT License.
+*/
+
+/**
+* Update dropdown with saved server list
+*/
+function updateServerList(){
+	//Delete all servers in dropdown
+	$('.servermenuitem').remove();
+	
+	//Add all servers
+	var servers = new WebConsolePersistenceManager().getAllServers();
+	for(var i = 0; i < servers.length; i++){
+		$('#ServerListDropDown').append('<a class="dropdown-item servermenuitem" href="#" onclick=openServer("' + servers[i].serverName + '")>' + servers[i].serverName + '</a>');
+	}
+}
+
+/**
+* Prepare and show server to user
+*/
+function openServer(serverName){
+	
+}
\ No newline at end of file
diff --git a/html/scripts/WebConsoleConnector.js b/html/scripts/WebConsoleConnector.js
new file mode 100644
index 0000000..bc39d89
--- /dev/null
+++ b/html/scripts/WebConsoleConnector.js
@@ -0,0 +1,96 @@
+/**
+ WebConsole Connector for WebConsole v1.0.0
+ Used to connect to WebSocketsServer
+ https://github.com/mesacarlos
+ 2019 Carlos Mesa under MIT License.
+*/
+/* 
+USAGE
+1 Create needed GUI
+2 Create a object of this class
+3 subscribe a function to receive the login required message
+4 show password modal
+5 subscribe console output list etc...
+*/
+class WebConsoleConnector {
+	
+	constructor(serverName, serverURI) {
+		this.serverName = serverName;
+		this.serverURI = serverURI;
+		this.subscribers = []; //List of functions called when a new message arrive
+		this.messages = []; //All messages retrieved since connection start
+	}
+	
+	/**
+	* Connect to WebSocket
+	*/
+	connect(){
+		var connector = this;
+		this.websocket = new WebSocket(this.serverURI);
+		this.websocket.onopen = function(evt) { connector.onOpen(evt) };
+		this.websocket.onclose = function(evt) { connector.onClose(evt) };
+		this.websocket.onmessage = function(evt) { connector.onMessage(evt) };
+		this.websocket.onerror = function(evt) { connector.onError(evt) };
+	}
+	
+	/**
+	* Internal function
+	*/
+	onOpen(evt){
+		//TODO Check que la version es correcta, y que es un WebSocket del plugin y no de otra cosa
+		//No es necesario notificar al usuario porque ya se recibe un console output de ello
+	}
+	
+	/**
+	* Internal function
+	*/
+	onClose(evt){
+		//TODO
+	}
+	
+	/**
+	* Internal function
+	*/
+	onMessage(evt){
+		var obj = JSON.parse(evt.data);
+		this.notify(obj); //Notify all subscribers
+		this.messages.push(obj);
+	}
+	
+	/**
+	* Internal function
+	*/
+	onError(evt){
+		//TODO
+	}
+	
+	/**
+	* Sends a WebSocket command to Server
+	*/
+	sendToServer(message){
+		this.websocket.send(message);
+	}
+	
+	/**
+	* Notifies a new message to all subscribers
+	*/
+	notify(obj){
+		this.subscribers.forEach(function(fun) {
+			fun(obj); //Calls function with this object
+		});
+	}
+	
+	/**
+	* Adds a function to subscriber list
+	*/
+	subscribe(func){
+		this.subscribers.push(func);
+	}
+	
+	/**
+	* Unsubscribe all subscribers
+	*/
+	removeSubscribers(){
+		this.subscribers = [];
+	}
+}
\ No newline at end of file
diff --git a/html/scripts/WebConsoleManager.js b/html/scripts/WebConsoleManager.js
new file mode 100644
index 0000000..8086fd0
--- /dev/null
+++ b/html/scripts/WebConsoleManager.js
@@ -0,0 +1,30 @@
+/**
+ WebConsole Manager for WebConsole v1.0.0
+ Used to manage active connections
+ https://github.com/mesacarlos
+ 2019 Carlos Mesa under MIT License.
+*/
+class WebConsoleManager {
+	constructor(){
+		this.activeConnections = [];
+	}
+	
+	/**
+	* Adds connection to list
+	*/
+	addConnection(connection){
+		this.activeConnections.push(connection);
+	}
+	
+	/**
+	* Retrieve server by name
+	*/
+	getConnection(serverName){
+		for (i = 0; i < this.activeConnections.length; i++) { 
+			if(this.activeConnections[i].serverName == serverName){
+				return this.activeConnections[i];
+			}
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/html/scripts/WebConsolePersistenceManager.js b/html/scripts/WebConsolePersistenceManager.js
new file mode 100644
index 0000000..6092434
--- /dev/null
+++ b/html/scripts/WebConsolePersistenceManager.js
@@ -0,0 +1,89 @@
+/**
+ WebConsole Persistence Manager for WebConsole v1.0.0
+ Used to save your servers into your browser
+ https://github.com/mesacarlos
+ 2019 Carlos Mesa under MIT License.
+*/
+class WebConsolePersistenceManager{
+	
+	/**
+	* Saves server into WebStorage
+	*/
+	saveServer(serverName, serverURI, serverPassword){
+		this.createListIfUndefined();
+		
+		//Create anonymous object
+		var server = new Object();
+		server.serverName = serverName;
+		server.serverURI = serverURI;
+		server.serverPassword = serverPassword;
+		
+		//Save to WebStorage
+		var servers = this.getAllServers();
+		servers.push(server);
+		this.replaceAllServers(servers);
+	}
+	
+	/**
+	* Delete server from saved servers
+	*/
+	deleteServer(serverName){
+		this.createListIfUndefined();
+		
+		//Find server
+		var index = -1;
+		var servers = this.getAllServers();
+		for (i = 0; i < servers.length; i++) { 
+			if(servers[i].serverName == serverName){
+				index = i;
+			}
+		}
+		
+		//Delete it
+		if(index > -1){
+			servers.splice(index, 1);
+		}
+		
+		//Save to WebStorage
+		this.replaceAllServers(servers);
+	}
+	
+	/**
+	* Get server details as object
+	*/
+	getServer(serverName){
+		this.createListIfUndefined();
+		
+		var servers = this.getAllServers();
+		for (i = 0; i < servers.length; i++) { 
+			if(servers[i].serverName == serverName){
+				return servers[i];
+			}
+		}
+	}
+	
+	/**
+	* Get all servers
+	*/
+	getAllServers(){
+		this.createListIfUndefined();
+		return JSON.parse(window.localStorage.servers);
+	}
+	
+	/**
+	* Create server list if not defined
+	*/
+	createListIfUndefined(){
+		if (typeof window.localStorage.servers === 'undefined') {
+			window.localStorage.servers = JSON.stringify(new Array());
+		}
+	}
+	
+	/**
+	* Replaces all server list with provided list
+	*/
+	replaceAllServers(newServerList){
+		window.localStorage.servers = JSON.stringify(newServerList);
+	}
+	
+}
\ No newline at end of file
