add delete function from servers storarage and other

server/frontend/public/js/connect/main.js

@@ -23,7 +23,7 @@ document.body.innerHTML = `<nav id="navbar-main" class="navbar navbar-connect-da
 
 	<div class="vr" style="margin-right:5px"></div>
 	<div class="d-flex" style="margin-right:10px" id="navbar-user-menu">
-		<button id="toggle-theme" class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="far fa-eye"></i> Light theme</button>
+		<button id="toggle-theme" class="btn btn-outline-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-sun"></i></button>
 	</div>
 </nav>
 <div id="server.area">

server/frontend/public/js/main.js

@@ -96,6 +96,7 @@ fl.bindLoad("/connect", () => {
 				const portSelected = +(address.value.match(/:[0-9]{1,5}$/).at(0).slice(1,));
 				address.value = address.value.slice(0, -1 * (":"+portSelected).length);
 				port.value = portSelected;
+				document.getElementById("custom-conn-port").focus();
 			}
 			
 			if (!port.value) {
@@ -141,6 +142,7 @@ fl.bindLoad("/connect", () => {
 				
 				const servers = localServers.concat(JSON.parse(xhr.response).result.map(x => { x.fromLocal = false; return x }));
 				const serversByItemID = new Object();
+				const serversByAddress = new Object();
 				const items = [];
 				const itemIDs = [];
 				const mp = servers.map(async serverItem => {
@@ -155,15 +157,19 @@ fl.bindLoad("/connect", () => {
 								data.tls = serverItem.tls;
 								itemIDs.push({
 									...data,
-									itemID: `con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}`
+									itemID: `con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}`,
+									deleteID: `remove-con:${serverItem.address}:${serverItem.port}`,
+									address: `${serverItem.address}:${serverItem.port}`,
 								});
 								serversByItemID[`con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}`] = { data, serverItem };
+								serversByAddress[`${serverItem.address}:${serverItem.port}`] = { data, serverItem };
 								resolve(items.push(`<tr${!data.tls ? ' style="background-color: #7F6003"' : ""}>
 									<td${!data.tls ? ' style="background-color: #7F6003"' : ""}>${data.name}</td>
 									<td${!data.tls ? ' style="background-color: #7F6003"' : ""}>${serverItem.address}:${serverItem.port}</td>
 									<td${!data.tls ? ' style="background-color: #7F6003"' : ""}>${!data.tls ? '<font color="red"><i class="fas fa-exclamation-triangle"></i></font>' : '<font color="green"><i class="fas fa-lock"></i></font>'}</td>
 									<td${!data.tls ? ' style="background-color: #7F6003"' : ""}>${ping}</td>
 									<td${!data.tls ? ' style="background-color: #7F6003"' : ""}><button class="btn btn-secondary" id="con-btn-to:${data.tag}:${serverItem.address}:${serverItem.port}">${tr("/connect", "connect-to-server-btn") ?? "Connect"}</button></td>
+									<td${!data.tls ? ' style="background-color: #7F6003"' : ""}><button class="btn btn-outline-danger" id="remove-con:${serverItem.address}:${serverItem.port}"${!serverItem.fromLocal ? ' disabled' : ''}><i class="fas fa-trash"></i></button></td>
 								</tr>`));
 							};
 							socket.send(JSON.stringify({
@@ -172,12 +178,18 @@ fl.bindLoad("/connect", () => {
 						};
 						socket.onerror = (err) => {
 							console.error(err);
+							itemIDs.push({
+								deleteID: `remove-con:${serverItem.address}:${serverItem.port}`,
+								address: `${serverItem.address}:${serverItem.port}`,
+							});
+							serversByAddress[`${serverItem.address}:${serverItem.port}`] = { serverItem };
 							resolve(items.push(`<tr>
 								<td style="background-color: #7F0000"><font color="red">${tr("/connect", "offline-server") ?? "Offline"}</font></td>
 								<td style="background-color: #7F0000">${serverItem.address}:${serverItem.port}</td>
 								<td style="background-color: #7F0000"><font color="red"><i class="fas fa-exclamation-triangle"></i></font></td>
 								<td style="background-color: #7F0000"><font color="red">${tr("/connect", "offline-server") ?? "Offline"}</font></td>
 								<td style="background-color: #7F0000"><button class="btn btn-danger" disabled>${tr("/connect", "offline-server") ?? "Offline"}</button></td>
+								<td style="background-color: #7F0000"><button class="btn btn-outline-danger" id="remove-con:${serverItem.address}:${serverItem.port}"${!serverItem.fromLocal ? ' disabled' : ''}><i class="fas fa-trash"></i></button></td>
 							</tr>`));
 						};
 					});
@@ -185,7 +197,7 @@ fl.bindLoad("/connect", () => {
 				});
 				
 				await Promise.all(mp);
-				items.push(`<tr><td colspan="5"><center><button class="btn btn-primary" id="conn-to-custom">${tr("/connect", "add-custon-server") ?? "Connect to custom server"}</button></center></td></tr>`);
+				items.push(`<tr><td colspan="6"><center><button class="btn btn-primary" id="conn-to-custom">${tr("/connect", "add-custon-server") ?? "Connect to custom server"}</button></center></td></tr>`);
 				document.getElementById("loading-servers").innerHTML = `<table class="table table-dark">
 					<thead>
 						<th scope="col">${tr("/connect", "server-name-tbl") ?? "Name"}</th>
@@ -193,6 +205,7 @@ fl.bindLoad("/connect", () => {
 						<th scope="col">${tr("/connect", "server-encryption") ?? "Encrypted"}</th>
 						<th scope="col">${tr("/connect", "server-ping") ?? "Ping"}</th>
 						<th scope="col">${tr("/connect", "server-action") ?? "Action"}</th>
+						<th scope="col"></th>
 					</thead>
 					<tbody>
 						${items.join("\n")}
@@ -200,12 +213,25 @@ fl.bindLoad("/connect", () => {
 				</table>`;
 				
 				itemIDs.forEach(btn => {
+					//console.log("btn:", btn);
+					if (btn.itemID)
 						document.getElementById(btn.itemID).onclick = () => {
 							checkContentWarning(() => {
 								const serverInfo = serversByItemID[btn.itemID].serverItem;
 								window.open(`/connect-area?server=${serverInfo.address}:${serverInfo.port}&encrypted=${serverInfo.tls ? "true" : "false"}`);
 							});
 						};
+
+					document.getElementById(btn.deleteID).onclick = () => {
+						const serverInfo = serversByAddress[btn.address].serverItem;
+						console.log("serverInfo:", serverInfo);
+						const savedServers = (JSON.parse(localStorage.getItem("savedServers") ?? "null") ?? [])
+							.filter(server => {
+								return !(server.address === serverInfo.address && server.port === serverInfo.port)
+							});
+						localStorage.setItem("savedServers", JSON.stringify(savedServers));
+						connectServers();
+					};
 				});
 				
 				document.getElementById("conn-to-custom").onclick = function () {