Added regex

public/script.js

@@ -5,6 +5,7 @@ const messageButton = document.querySelector("#send")
 const menuButton = document.querySelector("#menu")
 const nameButton = document.querySelector("#name")
 const nameInput = document.querySelector("input")
+const roomInput = document.querySelector("#room")
 const roomContainer = document.querySelector("#room-container")
 const messageInput = document.querySelector("textarea")
 const login = document.querySelector("#login")
@@ -28,6 +29,31 @@ const submitMessage = () => {
     messageInput.value = ""
 }
 
+const type = (newText) => {
+    const element = document.activeElement
+    element.setRangeText(
+        newText,
+        element.selectionStart,
+        element.selectionEnd,
+        "end"
+    )
+}
+
+roomInput.addEventListener("keydown", (event) => {
+    if (event.code == "Space") {
+        event.preventDefault()
+        type("-")
+    } else if (!/^[-a-z0-9]+$/i.test(event.key)) event.preventDefault()
+})
+
+const checkAlphanumeric = (event) => {
+    const text = (event.clipboardData || event.dataTransfer).getData("Text")
+    if (!/^[-a-z0-9]+$/i.test(text)) event.preventDefault()
+}
+
+roomInput.addEventListener("paste", checkAlphanumeric)
+roomInput.addEventListener("drop", checkAlphanumeric)
+
 messageInput.addEventListener("keydown", (event) => {
     if (event.key != "Enter" || event.shiftKey) return
     event.preventDefault()
@@ -68,6 +94,14 @@ if (roomName) {
     }
 }
 
+document.querySelector("#room-form").addEventListener("submit", (event) => {
+    if (!roomInput.value.trim()) {
+        event.preventDefault()
+        roomInput.required = true
+        document.querySelector("#room-button").classList.add("required")
+    }
+})
+
 menuButton.addEventListener("click", toggleOpen)
 
 if (!localStorage.getItem("name")) login.classList.remove("done")

public/style.css

@@ -36,6 +36,7 @@ body {
 #rooms {
     background-color: var(--secondary);
     width: 0;
+    padding: 20px 0;
     overflow: hidden;
     align-items: center;
     transition: width 0.6s, padding 0.6s;
@@ -294,12 +295,16 @@ button:is(:disabled, :hover) {
     display: flex;
 }
 
-:is(input[type="text"], textarea):required {
+:required {
     animation: shake 0.2s ease-in-out 0s 2;
     border-color: red !important;
 }
 
-:is(input[type="text"], textarea):required::placeholder {
+.required {
+    border-color: red !important;
+}
+
+:required::placeholder {
     color: #f20000;
 }
 
@@ -313,12 +318,14 @@ button:is(:disabled, :hover) {
 
 .input-field {
     flex: 1;
+    background-color: #3b3b3b;
     width: 100%;
+    color: #f5f5f5;
     font-size: 1em;
 }
 
 .input-field::placeholder {
-    color: var(--secondary) !important;
+    color: #f5f5f5;
 }
 
 .input-field:not(:first-child) {

server.js

@@ -31,7 +31,7 @@ app.get("/", (_, res) => {
 })
 
 app.post("/", (req, res) => {
-    if (rooms[req.body.room] != null) {
+    if (!req.body.room.trim() || rooms[req.body.room]) {
         return res.redirect("/")
     }
     rooms[req.body.room] = { users: {} }

views/index.ejs

@@ -49,10 +49,10 @@
                 <h1 class="medium-header" id="no-rooms">No rooms</h1>
                 <%} %>
             </ul>
-            <form method="POST" action="/">
+            <form method="POST" action="/" id="room-form" novalidate>
                 <div class="input-group">
                     <input placeholder="Room Name" type="text" name="room" id="room" class="input-field" />
-                    <button class="input-item" type="submit">
+                    <button class="input-item" type="submit" id="room-button">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
                             <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                             <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>