Now WebConsole can be used in English and Spanish

client/index.html

@@ -30,14 +30,22 @@
 								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>
+								<a class="dropdown-item" href data-toggle="modal" data-target="#addServerModal" id="add_server">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">
-						<!-- Elements on the right -->
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="lang_dropdown">
+								Language
+							</a>
+							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="langDropdown">
+								<a class="dropdown-item" href="#" onclick="setLanguage('en_US')">English</a>
+								<a class="dropdown-item" href="#" onclick="setLanguage('es_ES')">Español</a>
+							</div>
+						</li>
 					</ul>
 				</div>
 			</nav>
@@ -47,8 +55,8 @@
 		<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>
+				<h1 class="mt-5" id="home_header">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>
+				<p class="lead" id="home_description">Use the navigation bar to add a new Minecraft Server or connect to a previously added one.</p>
 			</div>
 			
 			<!-- Server management container -->
@@ -59,7 +67,7 @@
 					<div class="col-sm-3 mb-2">
 						<div class="card">
 							<div class="card-body">
-								<h5 class="card-title">Players Online</h5>
+								<h5 class="card-title" id="players_online">Players Online</h5>
 								<p class="card-text"><span id="connectedPlayers">0</span> / <span id="maxPlayers">Unknown</span></p>
 								<div class="progress flat-progressbar">
 									<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" id="playerProgressBar"></div>
@@ -118,25 +126,25 @@
 					<div class="modal-body">
 						<form>
 							<div class="form-group">
-								<label for="server-name" class="col-form-label">Server name:</label>
+								<label for="server-name" class="col-form-label" id="addServerModalSvName">Server name:</label>
 								<input type="text" class="form-control" id="server-name">
 							</div>
 							<div class="form-group">
-								<label for="server-ip" class="col-form-label">Server IP:</label>
+								<label for="server-ip" class="col-form-label" id="addServerModalSvIp">Server IP:</label>
 								<input type="text" class="form-control" id="server-ip" placeholder="localhost">
 							</div>
 							<div class="form-group">
-								<label for="server-port" class="col-form-label">Server port:</label>
+								<label for="server-port" class="col-form-label" id="addServerModalSvPort">Server port:</label>
 								<input type="number" class="form-control" id="server-port" placeholder="8080">
 							</div>
 							<div class="form-check">
 								<input class="form-check-input" type="checkbox" id="server-ssl">
-								<label class="form-check-label" for="server-ssl">Server is SSL enabled</label>
+								<label class="form-check-label" for="server-ssl" id="addServerModalSvSsl">Server is SSL enabled</label>
 							</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-secondary" data-dismiss="modal" id="addServerModalClose">Close</button>
 						<button type="button" class="btn btn-primary" data-dismiss="modal" id="saveAndConnectServerButton">Save and connect</button>
 					</div>
 				</div>
@@ -156,19 +164,19 @@
 					<div class="modal-body">
 						<form id="passwordForm">
 							<div class="form-group">
-								<label for="server-pwd" class="col-form-label">Password:</label>
+								<label for="server-pwd" class="col-form-label" id="passwordModalLabel">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>
+									<label class="form-check-label" for="rememberPwdCheckbox" id="passwordModalRememberLabel">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-secondary" data-dismiss="modal" id="passwordModalCloseButton">Close</button>
 						<button type="button" class="btn btn-primary" data-dismiss="modal" id="passwordSendButton">Login</button>
 					</div>
 				</div>
@@ -185,7 +193,7 @@
 							<span aria-hidden="true">&times;</span>
 						</button>
 					</div>
-					<div class="modal-body">
+					<div class="modal-body" id="disconnectionModalDescription">
 						Connection was lost with the server you were connected to. Moved back to welcome screen.
 					</div>
 					<div class="modal-footer">
@@ -198,7 +206,7 @@
 		<!-- Webpage footer -->
 		<footer class="footer mt-auto py-3">
 			<div class="container">
-				<span class="text-muted">WebConsole v1.1 (rev. 2) - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
+				<span class="text-muted">WebConsole v1.1 (rev. 3) - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
 			</div>
 		</footer>
 		
@@ -208,6 +216,7 @@
 		<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/WebConsoleLanguage.js"></script>
 		<script src="scripts/WebConsoleConnector.js"></script>
 		<script src="scripts/WebConsoleManager.js"></script>
 		<script src="scripts/WebConsolePersistenceManager.js"></script>

client/scripts/WebConsole.js

@@ -9,6 +9,7 @@
 */
 var persistenceManager = new WebConsolePersistenceManager();
 var connectionManager = new WebConsoleManager();
+var lang;
 var autoPasswordCompleted = false; //When true, saved password was used. If a 401 is received, then saved password is not correct
 var statusCommandsInterval = -1;
 var commandHistoryIndex = -1; //Saves current command history index. -1 when not browsing history.

client/scripts/WebConsoleJqueryHandler.js

@@ -10,6 +10,7 @@
 $(document).ready(function() {
 	$("#serverContainer").hide();
 	updateServerList();
+	setLanguage(persistenceManager.getLanguage());
 });
 
 /**
@@ -92,7 +93,7 @@ $("#sendCommandButton").click(function() {
 });
 
 /**
-* Enter or arrow up key on command input
+* Enter or arrow down/up key on command input
 */
 $("#commandInput").on('keydown', function (e) {
 	if(e.which === 13){ //Detect enter key

client/scripts/WebConsoleLanguage.js

@@ -0,0 +1,93 @@
+/**
+ WebConsole Language Manager for WebConsole
+ Used to save your preferred language into your browser
+ https://github.com/mesacarlos
+ 2019 Carlos Mesa under MIT License.
+*/
+function setLanguage(locale){
+	//Save to persistence
+	persistenceManager.setLanguage(locale);
+	//Set dialog phrases
+	switch(locale){
+		case "en_US":
+			lang = {
+				"home_link": "Home",
+				"home_header": "Select a server from the menu",
+				"home_description": "Use the navigation bar to add a new Minecraft Server or connect to a previously added one.",
+				"server_dropdown": "Your servers",
+				"add_server": "Add Server",
+				"lang_dropdown": "Language",
+				"addServerModalLongTitle": "Add a new server",
+				"addServerModalSvName": "Server name:",
+				"addServerModalSvIp": "Server IP:",
+				"addServerModalSvPort": "WebConsole port:",
+				"addServerModalSvSsl": "Server is SSL enabled",
+				"addServerModalClose": "Close",
+				"saveAndConnectServerButton": "Save and connect",
+				"passwordModalLongTitle": "Password required",
+				"passwordModalLabel": "Password:",
+				"passwordModalRememberLabel": "Remember password",
+				"passwordModalCloseButton": "Close",
+				"passwordSendButton": "Login",
+				"disconnectionModalLongTitle": "Disconnected",
+				"disconnectionModalDescription": "Connection was lost with the server you were connected to, probably caused by a server stop. Moved back to welcome screen.",
+				"players_online": "Players Online",
+				"deleteServerButton": "Delete server",
+				"sendCommandButton": "Send"
+			}
+			break;
+		case "es_ES":
+			lang = {
+				"home_link": "Inicio",
+				"home_header": "Selecciona un servidor del menú",
+				"home_description": "Usa la barra superior para añadir un nuevo servidor de Minecraft o para conectarte a un servidor añadido previamente.",
+				"server_dropdown": "Tus servidores",
+				"add_server": "Añadir Server",
+				"lang_dropdown": "Idioma",
+				"addServerModalLongTitle": "Añadir un nuevo servidor",
+				"addServerModalSvName": "Nombre del servidor:",
+				"addServerModalSvIp": "IP del servidor:",
+				"addServerModalSvPort": "Puerto WebConsole:",
+				"addServerModalSvSsl": "SSL está activado",
+				"addServerModalClose": "Cerrar",
+				"saveAndConnectServerButton": "Guardar y conectar",
+				"passwordModalLongTitle": "Se necesita contraseña",
+				"passwordModalLabel": "Contraseña:",
+				"passwordModalRememberLabel": "Recordar contraseña",
+				"passwordModalCloseButton": "Cerrar",
+				"passwordSendButton": "Iniciar sesión",
+				"disconnectionModalLongTitle": "Desconectado",
+				"disconnectionModalDescription": "Se ha perdido la conexión con el servidor al que estabas conectado. Esto puede ser debido a que el servidor se ha cerrado. Se ha vuelto a la ventana principal.",
+				"players_online": "Jugadores en línea",
+				"deleteServerButton": "Borrar servidor",
+				"sendCommandButton": "Enviar"
+			}
+			break;
+		default:
+			console.error("No language set");
+	}
+	//Set navbar phrases
+	document.getElementById("navbarHomeLink").textContent = lang.home_link;
+	document.getElementById("home_header").textContent = lang.home_header;
+	document.getElementById("home_description").textContent = lang.home_description;
+	document.getElementById("serversDropdown").textContent = lang.server_dropdown;
+	document.getElementById("add_server").textContent = lang.add_server;
+	document.getElementById("lang_dropdown").textContent = lang.lang_dropdown;
+	document.getElementById("addServerModalLongTitle").textContent = lang.addServerModalLongTitle;
+	document.getElementById("addServerModalSvName").textContent = lang.addServerModalSvName;
+	document.getElementById("addServerModalSvIp").textContent = lang.addServerModalSvIp;
+	document.getElementById("addServerModalSvPort").textContent = lang.addServerModalSvPort;
+	document.getElementById("addServerModalSvSsl").textContent = lang.addServerModalSvSsl;
+	document.getElementById("addServerModalClose").textContent = lang.addServerModalClose;
+	document.getElementById("saveAndConnectServerButton").textContent = lang.saveAndConnectServerButton;
+	document.getElementById("passwordModalLongTitle").textContent = lang.passwordModalLongTitle;
+	document.getElementById("passwordModalLabel").textContent = lang.passwordModalLabel;
+	document.getElementById("passwordModalRememberLabel").textContent = lang.passwordModalRememberLabel;
+	document.getElementById("passwordModalCloseButton").textContent = lang.passwordModalCloseButton;
+	document.getElementById("passwordSendButton").textContent = lang.passwordSendButton;
+	document.getElementById("disconnectionModalLongTitle").textContent = lang.disconnectionModalLongTitle;
+	document.getElementById("disconnectionModalDescription").textContent = lang.disconnectionModalDescription;
+	document.getElementById("players_online").textContent = lang.players_online;
+	document.getElementById("deleteServerButton").textContent = lang.deleteServerButton;
+	document.getElementById("sendCommandButton").textContent = lang.sendCommandButton;
+}

client/scripts/WebConsolePersistenceManager.js

@@ -82,6 +82,32 @@ class WebConsolePersistenceManager{
 		return storageObj.servers;
 	}
 
+	/**
+	 * Save language for this client
+	 */
+	setLanguage(lang){
+		this.initializeLocalStorage();
+
+		//Retrieve saved data
+		var storageObj = JSON.parse(window.localStorage.WebConsole);
+		storageObj.language = lang;
+		
+		//Save to WebStorage
+		window.localStorage.WebConsole = JSON.stringify(storageObj);
+	}
+
+	/**
+	 * Get saved language for this client
+	 */
+	getLanguage(){
+		this.initializeLocalStorage();
+		
+		var storageObj = JSON.parse(window.localStorage.WebConsole);
+		if(!storageObj.language)
+			return "en_US";
+		return storageObj.language;
+	}
+	
 	/**
 	* Create server list if not defined
 	*/
@@ -90,6 +116,7 @@ class WebConsolePersistenceManager{
 			//Create empty object
 			var storageObj = new Object();
 			storageObj.servers = new Array();
+			storageObj.language = "en_US";
 			
 			//Save to WebStorage
 			window.localStorage.WebConsole = JSON.stringify(storageObj);