Added a error message when trying to connect without a username or room

html/index.html

@@ -50,5 +50,9 @@
       </div>
       <p class="version-number">V2.0.1</p>
     </div>
+    <div id="errorPopup" class="error-popup">
+      <p id="errorText">Please enter a username and a chatroom.</p>
+      <button id="errorButton" class="button2" onclick="closeErrorPopup()">Continue</button>
+    </div>
   </body>
 </html>

html/script.js

@@ -44,25 +44,33 @@ function onload(){
       document.getElementById("Message"+i).style.color = getComputedStyle(document.body).color;
     }
   })
+
+  // Ensure that the error popup is not displayed when the page is loaded
+  document.getElementById('errorPopup').style.display = 'none';
 }
 
 function Connect(){
-  // Get the username and room from the input fields
   var username = usernameInput.value.trim();
   var room = chatIDInput.value.trim();
-
-  // Check if the username and room are not empty
   if(username && room){
     socket.emit("join", room, username);
     chatRoom.innerHTML = "Chatroom : " + room;
-    // Hide the chat div initially when attempting to connect
     document.getElementById("Chat").style.display = "none";
     document.getElementById('AccessPort').style.display = 'none';
   } else {
-    // Maybe show an error message to the user that they need to fill in both fields
+    showErrorPopup("Please enter a username and a chatroom.");
   }
 }
 
+function showErrorPopup(message) {
+  document.getElementById('errorText').textContent = message;
+  document.getElementById('errorPopup').style.display = 'flex';
+}
+
+function closeErrorPopup() {
+  document.getElementById('errorPopup').style.display = 'none';
+}
+
 function LeaveRoom(){
   // Show access port to join another chat room.
   document.getElementById('AccessPort').style.display = 'block';

html/style.css

@@ -63,6 +63,62 @@ input{
   padding: 20px 40px; /* Increase the padding to make the button bigger */
   font-size: 20px; /* Increase the font-size for better readability on small screens */
 }
+#errorButton {
+  padding: 16px 31px;
+  border-radius: 10px;
+  transition: background-color 0.3s ease;
+  text-decoration: none;
+  width: auto;
+  margin: 0.5em 0;
+  background-color: rgba(255, 255, 255, 0.2); /* Slightly white transparent background */
+  transition: background-color 0.3s ease; /* Transition for button hover effects */
+  border: 0px solid #000000;
+  cursor: pointer;
+  color: #000000;
+  font-size: 17px;
+  text-shadow: 0px 1px 0px #000000;
+  display: block;
+  margin: 20px;
+}
+
+#errorButton:hover {
+  background-color: #000000;
+  color: #ffffff;
+}
+
+#errorButton:active {
+  position: relative;
+  top: 1px;
+}
+#errorText {
+  margin-left: 20px;
+}
+.error-popup {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.4);
+  backdrop-filter: blur(20px); /* Provide a translucent frosted-glass effect */
+  -webkit-backdrop-filter: blur(20px);
+  z-index: 2;
+  justify-content: center;
+  align-items: center;
+}
+
+.error-popup-content {
+  background-color: #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  border-radius: 5px;
+  text-align: center; /* Center the content inside the error popup */
+}
 .button {
   background-color:transparent;
   border-radius:28px;
@@ -108,6 +164,15 @@ body.dark-mode .input {
 body.dark-mode .version-number {
   color: #ffffff; /* Dark button background color */
 }
+body.dark-mode #errorButton {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+
+body.dark-mode #errorButton:hover {
+  background-color: #000000;
+  color: #ffffff;
+}
 .input {
   border-radius: 10px;
   padding: 6px;