Uplandustries/WebConsole-2.4-PLUS
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Preparing to make repo public

Browse Source
This commit is contained in:
Carlos
2019-08-12 20:10:14 +02:00
parent 4ce66aec2e
commit 9b0e919e02
5 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
client/index.html Normal file
View File

@ -0,0 +1,168 @@
<!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="index.html">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 data-toggle="modal" data-target="#addServerModal">Add Server</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item servermenuitem" href="#">Example server</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">
<!-- Welcome container -->
<div class="container" id="welcomeContainer">
<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" id="serverContainer" style="display: none;">
<h1 class="mt-5" id="serverTitle"></h1>
<div class="input-group mb-3">
<textarea class="form-control" rows="20" id="consoleTextArea" disabled style="resize: none;"></textarea>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" id="commandInput">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="sendCommandButton">Send</button>
</div>
</div>
</div>
</main>
<!-- Add Server Modal -->
<div class="modal fade" id="addServerModal" tabindex="-1" role="dialog" aria-labelledby="addServerModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addServerModalLongTitle">Add a new server</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="CloseAddServer">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="server-name" class="col-form-label">Server name:</label>
<input type="text" class="form-control" id="server-name">
</div>
<div class="form-group">
<label for="server-uri" class="col-form-label">Server URI:</label>
<input type="text" class="form-control" id="server-uri" placeholder="ws://localhost:8080">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="saveAndConnectServerButton">Save and connect</button>
</div>
</div>
</div>
</div>
<!-- Password Modal -->
<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="passwordModalLongTitle">Password required</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="passwordForm">
<div class="form-group">
<label for="server-pwd" class="col-form-label">Password:</label>
<input type="password" class="form-control" id="server-pwd">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="rememberPwdCheckbox">
<label class="form-check-label" for="rememberPwdCheckbox">Remember password</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="passwordSendButton">Login</button>
</div>
</div>
</div>
</div>
<!-- Disconnection Modal -->
<div class="modal fade" id="disconnectionModal" tabindex="-1" role="dialog" aria-labelledby="disconnectionModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="disconnectionModalLongTitle">Disconnected</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Connection was lost with the server you were connected to. Moved back to welcome screen.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- 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/WebConsoleConnector.js"></script>
<script src="scripts/WebConsoleManager.js"></script>
<script src="scripts/WebConsolePersistenceManager.js"></script>
<script src="scripts/WebConsole.js"></script>
</body>
</html>

195
client/scripts/WebConsole.js Normal file
View File

@ -0,0 +1,195 @@
/**
Main JS file for WebConsole.
Version v1.0.0
https://github.com/mesacarlos
2019 Carlos Mesa under MIT License.
*/
/**
* Global variables
*/
var persistenceManager = new WebConsolePersistenceManager();
var connectionManager = new WebConsoleManager();
var autoPasswordCompleted = false; //When true, saved password was used. If a 401 is received, then saved password is not correct
/**
* Show saved serverlist on startup
*/
$(document).ready(function() {
$("#serverContainer").hide();
updateServerList();
});
/**
* Server saver button click handler
*/
$("#saveAndConnectServerButton").click(function() {
//Save server
var name = $("#server-name").val();
var uri = $("#server-uri").val();
persistenceManager.saveServer(new WSServer(name, uri));
//Empty all modal values
$("#server-name").val("");
$("#server-uri").val("");
//Update GUI serverlist
updateServerList();
//Connect to server
openServer(name);
});
/**
* Server password typed (modal 'done' button clicked)
*/
$("#passwordSendButton").click(function() {
//Close modal
$('#passwordModal').modal('hide');
});
/**
* Enter button keyboard pressed on password modal
*/
$("#passwordForm").submit(function(event){
//Solves bug with forms:
event.preventDefault();
//Close modal
$('#passwordModal').modal('hide');
});
$('#passwordModal').on('hidden.bs.modal', function (e) {
//Send LOGIN command to server
var pwd = $("#server-pwd").val();
connectionManager.sendPassword(pwd);
//Save password if set
var savePasswordChecked = $("#rememberPwdCheckbox").prop("checked");
if(savePasswordChecked){
var serverName = connectionManager.activeConnection.serverName;
var serverURI = connectionManager.activeConnection.serverURI;
var svObj = new WSServer(serverName, serverURI);
svObj.setPassword(pwd);
persistenceManager.saveServer(svObj);
}
//Remove password from modal
$("#server-pwd").val('');
});
/**
* Prepare and show server to user
*/
function openServer(serverName){
//Hide welcome div if user is in welcome page
$("#welcomeContainer").hide();
$("#serverContainer").show();
//Change server name and related info
$("#serverTitle").text(serverName);
$("#consoleTextArea").text("");
//New server, new variables:
autoPasswordCompleted = false;
//Create or retrieve connection
connectionManager.loadConnection(serverName);
//Load saved messages
var i;
var messages = connectionManager.activeConnection.messages;
for(i = 0; i < messages.length; i++){
if(messages[i].status != 401){
onWebSocketsMessage(messages[i]);
}
}
//Subscribe a function
connectionManager.activeConnection.subscribe(onWebSocketsMessage);
}
function onWebSocketsMessage(message){
switch (message.status) {
case 10:
//Console Output
writeToWebConsole(message.message);
break;
case 200:
//Processed
writeToWebConsole(message.message);
break;
case 400:
//Unknown Command
writeToWebConsole(message.message);
break;
case 401:
//Waiting for login. Show password modal or retrieve password
var savedPwd = persistenceManager.getServer(connectionManager.activeConnection.serverName).serverPassword;
if(typeof savedPwd !== "undefined" && !autoPasswordCompleted){
connectionManager.sendPassword(savedPwd);
autoPasswordCompleted = true;
}else{
$('#passwordModal').modal('show');
}
break;
default:
console.log('Unknown server response:');
}
console.log(message);
}
/**
* Write to console
*/
function writeToWebConsole(msg){
$("#consoleTextArea").append(msg.replace("<", "&lt;") + "\n");
}
/**
* On send command button click
*/
$("#sendCommandButton").click(function() {
connectionManager.sendConsoleCmd($('#commandInput').val());
$('#commandInput').val('');
});
/**
* Called from WebConsoleConnector only.
*/
function closedConnection(serverName){
if(connectionManager.activeConnection.serverName == serverName){
//Disable GUI, back to welcome page
$("#welcomeContainer").show();
$("#serverContainer").hide();
//Inform user
$('#disconnectionModal').modal('show');
}
connectionManager.deleteConnection(serverName);
}
/**
* Update dropdown with saved server list
*/
function updateServerList(){
//Delete all servers in dropdown
$('.servermenuitem').remove();
//Add all servers
var servers = persistenceManager.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>');
}
//Show a "no servers" message when no servers are added
if(servers.length == 0){
$('#ServerListDropDown').append('<a class="dropdown-item servermenuitem disabled" href="#">No Servers added</a>');
}
}

88
client/scripts/WebConsoleConnector.js Normal file
View File

@ -0,0 +1,88 @@
/**
WebConsole Connector for WebConsole v1.0.0
Used to connect to WebSocketsServer
https://github.com/mesacarlos
2019 Carlos Mesa under MIT License.
*/
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){
closedConnection(this.serverName);
}
/**
* 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 = [];
}
}

73
client/scripts/WebConsoleManager.js Normal file
View File

@ -0,0 +1,73 @@
/**
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 = []; //Active Connectors list
}
/**
* Loads a existing connection or creates a new one
*/
loadConnection(serverName){
//If a connection is already active, delete all subscribers
if(this.activeConnection){
this.activeConnection.removeSubscribers();
}
//If connection exists, load it
var manager = this;
var i;
for (i = 0; i < this.activeConnections.length; i++) {
if(this.activeConnections[i].serverName == serverName){
manager.activeConnection = this.activeConnections[i];
return;
}
}
//If not created yet, create it
var serverObj = new WebConsolePersistenceManager().getServer(serverName);
this.activeConnection = new WebConsoleConnector(serverObj.serverName, serverObj.serverURI);
this.activeConnection.connect();
//Save to connections list
this.activeConnections.push(this.activeConnection);
}
/**
* Deletes connection (for example, if a connection was closed by server).
* Called by WebConsole.js
*/
deleteConnection(serverName){
//Delete from active connection (if it is the active one)
if(this.activeConnection.serverName == serverName){
this.activeConnection = null;
}
//Delete from array
var i;
for (i = 0; i < this.activeConnections.length; i++) {
if(this.activeConnections[i].serverName == serverName){
this.activeConnections.splice(i, 1);
}
}
}
/**
* Send password to server
*/
sendPassword(pwd){
this.activeConnection.sendToServer("LOGIN " + pwd);
}
/**
* Send console command to server
*/
sendConsoleCmd(cmd){
this.activeConnection.sendToServer("EXEC " + cmd);
}
}

122
client/scripts/WebConsolePersistenceManager.js Normal file
View File

@ -0,0 +1,122 @@
/**
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 or updates server into WebStorage
*/
saveServer(serverObject){
this.initializeLocalStorage();
//Check if server exists
var i;
var found = false;
var servers = this.getAllServers();
for (i = 0; i < servers.length; i++) {
if(servers[i].serverName == serverObject.serverName){
//Exists, replacing it
servers[i] = serverObject;
found = true;
}
}
//Not found, adding it
if(found == false){
servers.push(serverObject);
}
this.replaceAllServers(servers);
}
/**
* Delete server from saved servers
*/
deleteServer(serverName){
this.initializeLocalStorage();
//Find server
var i;
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.initializeLocalStorage();
var i;
var servers = this.getAllServers();
for (i = 0; i < servers.length; i++) {
if(servers[i].serverName == serverName){
return servers[i];
}
}
}
/**
* Get all servers
*/
getAllServers(){
this.initializeLocalStorage();
var storageObj = JSON.parse(window.localStorage.WebConsole);
return storageObj.servers;
}
/**
* Create server list if not defined
*/
initializeLocalStorage(){
if (typeof window.localStorage.WebConsole === 'undefined') {
//Create empty object
var storageObj = new Object();
storageObj.servers = new Array();
//Save to WebStorage
window.localStorage.WebConsole = JSON.stringify(storageObj);
}
}
/**
* Replaces all server list with provided list
*/
replaceAllServers(newServerList){
//Retrieve saved data
var storageObj = JSON.parse(window.localStorage.WebConsole);
storageObj.servers = newServerList;
//Save to WebStorage
window.localStorage.WebConsole = JSON.stringify(storageObj);
}
}
class WSServer{
constructor(serverName, serverURI){
this.serverName = serverName;
this.serverURI = serverURI;
}
setPassword(pwd){
this.serverPassword = pwd;
}
}