From 20287030ac6d3a2488b8833ed1a50914757a9921 Mon Sep 17 00:00:00 2001
From: cdez <cdez4200@gmail.com>
Date: Fri, 28 Mar 2025 18:18:51 -0700
Subject: [PATCH] Improve the selfhosted webclient with a few new buttons!

---
 chatserver/templates/index.html | 42 +++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/chatserver/templates/index.html b/chatserver/templates/index.html
index 46a4d96..0c23526 100644
--- a/chatserver/templates/index.html
+++ b/chatserver/templates/index.html
@@ -109,11 +109,13 @@
 <body class="dark-mode">
     <!-- Top Bar -->
     <div id="topBar">
-        <span id="userInfo">Username: <strong id="currentUsername"></strong> | Chat Room: <strong id="currentChatRoom"></strong></span>
+        <span id="userInfo">Username: <strong id="currentUsername"></strong> | Chat Room: <strong id="currentChatRoom"></strong> | Server: <strong id="currentServer"></strong></span>
         <div>
             <button onclick="changeUsername()">Change Username</button>
             <button onclick="changeChatRoom()">Change Chat Room</button>
             <button onclick="toggleTheme()">Toggle Theme</button>
+            <button onclick="disconnectServer()">Disconnect</button>
+            <button onclick="changeServer()">Change Server</button>
         </div>
     </div>
 
@@ -131,7 +133,7 @@
         const defaultServerUrl = `${window.location.protocol}//${window.location.hostname}:5000`;
 
         // Ask the user for the server URL, defaulting to the web client's host
-        const serverUrl = prompt(`Enter the WebSocket server URL (default: ${defaultServerUrl}):`) || defaultServerUrl;
+        let serverUrl = prompt(`Enter the WebSocket server URL (default: ${defaultServerUrl}):`) || defaultServerUrl;
 
         // Connect to the WebSocket server
         const socket = io(serverUrl);
@@ -140,6 +142,10 @@
         const messageInput = document.getElementById('message');
         const currentUsernameElement = document.getElementById('currentUsername');
         const currentChatRoomElement = document.getElementById('currentChatRoom');
+        const currentServerElement = document.getElementById('currentServer');
+
+        // Set the initial server URL in the top bar
+        currentServerElement.textContent = serverUrl;
 
         // Ask the user for their username and chat room
         let username = prompt("Enter your username:") || "Anonymous";
@@ -211,6 +217,38 @@
             }
         }
 
+        // Disconnect from the current server
+        function disconnectServer() {
+            if (socket.connected) {
+                socket.disconnect();
+                console.log("Disconnected from the server");
+                alert("You have been disconnected from the server.");
+                currentServerElement.textContent = "Disconnected"; // Update the displayed server URL
+            } else {
+                alert("You are not connected to any server.");
+            }
+        }
+
+        // Change the server to connect to
+        function changeServer() {
+            if (socket.connected) {
+                socket.disconnect();
+                console.log("Disconnected from the current server");
+            }
+
+            const newServerUrl = prompt("Enter the new WebSocket server URL (e.g., http://localhost:5000):");
+            if (newServerUrl && newServerUrl.trim() !== "") {
+                serverUrl = newServerUrl.trim();
+                console.log(`Connecting to new server: ${serverUrl}`);
+                socket.io.uri = serverUrl; // Update the server URL
+                socket.connect(); // Reconnect to the new server
+                currentServerElement.textContent = serverUrl; // Update the displayed server URL
+                alert(`Connected to the new server: ${serverUrl}`);
+            } else {
+                alert("Server URL cannot be empty.");
+            }
+        }
+
         // Toggle between light mode and dark mode
         function toggleTheme() {
             const body = document.body;