Preliminary version of Web client finished

html/index.html

@@ -53,8 +53,15 @@
 			<!-- Server management container -->
 			<div class="container" id="serverContainer">
 				<h1 class="mt-5">Survival</h1>
-				<p class="lead">Manage now your Minecraft Server.</p>
+				<div class="input-group mb-3">
-				<p>Here will be all control buttons and console logs</p>
+					<textarea class="form-control" rows="20" id="consoleTextArea" disabled></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>
 		
@@ -64,7 +71,7 @@
 				<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="Close">
+						<button type="button" class="close" data-dismiss="modal" aria-label="CloseAddServer">
 							<span aria-hidden="true">&times;</span>
 						</button>
 					</div>
@@ -78,16 +85,6 @@
 								<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>
-							<div class="form-group">
-								<label for="server-pwd" class="col-form-label">Password:</label>
-								<input type="text" 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">
@@ -103,16 +100,16 @@
 			<div class="modal-dialog modal-dialog-centered" role="document">
 				<div class="modal-content">
 					<div class="modal-header">
-						<h5 class="modal-title" id="passwordModalLongTitle">Add a new server</h5>
+						<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>
+						<form id="passwordForm">
 							<div class="form-group">
 								<label for="server-pwd" class="col-form-label">Password:</label>
-								<input type="text" class="form-control" id="server-pwd">
+								<input type="password" class="form-control" id="server-pwd">
 							</div>
 							<div class="form-group">
 								<div class="form-check">
@@ -124,7 +121,27 @@
 					</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="passwordTypedButton">Save and connect</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>

html/scripts/WebConsole.js

@@ -10,6 +10,7 @@
 */
 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
@@ -39,14 +40,47 @@ $("#saveAndConnectServerButton").click(function() {
 	openServer(name);
 });
 
-/**
-* Server saver button click handler
-*/
-$("#passwordTypedButton").click(function() {
-	//Send LOGIN command to server
 
+
+
+/**
+* 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);
+	}
+});
+
+
+
+
 /**
 * Prepare and show server to user
 */
@@ -55,44 +89,39 @@ function openServer(serverName){
 	$("#welcomeContainer").hide();
 	$("#serverContainer").show();
 	
-	//If a connection is already active, delete all subscribers
+	//New server, new variables:
-	if(typeof connectionManager.activeConnection  !== "undefined"){
+	autoPasswordCompleted = false;
-		connectionManager.activeConnection.removeSubscribers();
-	}
 	
-	//Start connection or retrieve it if already exists
+	//Create or retrieve connection
-	if(typeof connectionManager.getConnection(serverName)  === "undefined"){
+	connectionManager.loadConnection(serverName);
-		//Retrieve from persistence
-		var serverObj = persistenceManager.getServer(serverName);
-		connectionManager.activeConnection = new WebConsoleConnector(serverObj.serverName, serverObj.serverURI);
-	}else{
-		//Use active connection
-		connectionManager.activeConnection = connectionManager.getConnection(serverName);
 	
-	}
+	//Subscribe a function
-	
-	//Subscribe a function and connect
 	connectionManager.activeConnection.subscribe(onWebSocketsMessage);
-	connectionManager.activeConnection.connect();
 }
 
 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
+			//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;
 		case 403:
 			//Forbidden
@@ -100,11 +129,40 @@ function onWebSocketsMessage(message){
 			break;
 		default:
 			console.log('Unknown server response:');
-			console.log(message);
 	}
 	console.log(message);
 }
 
+/**
+* Write to console
+*/
+function writeToWebConsole(msg){
+	$("#consoleTextArea").append(msg + "\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
 */

html/scripts/WebConsoleConnector.js

@@ -4,14 +4,6 @@
  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) {
@@ -45,7 +37,7 @@ class WebConsoleConnector {
 	* Internal function
 	*/
 	onClose(evt){
-		//TODO
+		closedConnection(this.serverName);
 	}
 	
 	/**

html/scripts/WebConsoleManager.js

@@ -10,22 +10,64 @@ class WebConsoleManager {
 	}
 	
 	/**
-	* Adds connection to list
+	* Loads a existing connection or creates a new one
 	*/
-	addConnection(connection){
+	loadConnection(serverName){
-		this.activeConnections.push(connection);
+		//If a connection is already active, delete all subscribers
-	}
+		if(this.activeConnection){
+			this.activeConnection.removeSubscribers();
+		}
 		
-	/**
+		//If connection exists, load it
-	* Retrieve server by name
+		var manager = this;
-	*/
-	getConnection(serverName){
 		var i;
 		for (i = 0; i < this.activeConnections.length; i++) { 
 			if(this.activeConnections[i].serverName == serverName){
-				return this.activeConnections[i];
+				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);
+	}
+	
 }

html/scripts/WebConsolePersistenceManager.js

@@ -115,4 +115,8 @@ class WSServer{
 		this.serverName = serverName;
 		this.serverURI = serverURI;
 	}
+	
+	setPassword(pwd){
+		this.serverPassword = pwd;
+	}
 }