Work-in-progress Web Interface
This commit is contained in:
Carlos
17
README.md
17
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
|
||||
|
||||
79
html/index.html
Normal file
79
html/index.html
Normal file
@ -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>
|
||||
27
html/scripts/WebConsole.js
Normal file
27
html/scripts/WebConsole.js
Normal file
@ -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){
|
||||
|
||||
}
|
||||
96
html/scripts/WebConsoleConnector.js
Normal file
96
html/scripts/WebConsoleConnector.js
Normal file
@ -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 = [];
|
||||
}
|
||||
}
|
||||
30
html/scripts/WebConsoleManager.js
Normal file
30
html/scripts/WebConsoleManager.js
Normal file
@ -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];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
89
html/scripts/WebConsolePersistenceManager.js
Normal file
89
html/scripts/WebConsolePersistenceManager.js
Normal file
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user