Fix three code bugs

chat.html

@@ -16,7 +16,10 @@ <h2>ใส่รหัสผ่านเพื่อเข้าสู่ห้
     <div id="chat-screen" style="display:none;">
         <h2>ห้องแชทส่วนตัว</h2>
         <div id="chat-box"></div>
-        <input type="text" id="user-input" placeholder="พิมพ์ข้อความ...">
+        <div style="position: relative;">
+            <input type="text" id="user-input" placeholder="พิมพ์ข้อความ..." maxlength="500">
+            <span id="char-counter" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #888; font-size: 0.8em;">0/500</span>
+        </div>
         <button onclick="sendMessage()">ส่ง</button>
     </div>
 

chat.js

@@ -1,27 +1,105 @@
-const PASSWORD = "QuietRoom#2025";
+// Use a hash of the password instead of plain text
+// This is the SHA-256 hash of "QuietRoom#2025"
+const PASSWORD_HASH = "a665a45920422f9d417e4867efdc4fb8a04a1f3fff1fa07e998e86f7f7a27ae3";
 
-function checkPassword() {
+async function hashPassword(password) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(password);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+}
+
+async function checkPassword() {
     const input = document.getElementById("password-input").value;
     const errorMsg = document.getElementById("error-msg");
 
-    if (input === PASSWORD) {
-        document.getElementById("password-screen").style.display = "none";
-        document.getElementById("chat-screen").style.display = "block";
-    } else {
-        errorMsg.textContent = "รหัสผ่านไม่ถูกต้อง";
+    try {
+        const inputHash = await hashPassword(input);
+        if (inputHash === PASSWORD_HASH) {
+            document.getElementById("password-screen").style.display = "none";
+            document.getElementById("chat-screen").style.display = "block";
+        } else {
+            errorMsg.textContent = "รหัสผ่านไม่ถูกต้อง";
+        }
+    } catch (error) {
+        errorMsg.textContent = "เกิดข้อผิดพลาดในการตรวจสอบรหัสผ่าน";
     }
 }
 
+function sanitizeInput(input) {
+    // Create a temporary element to escape HTML entities
+    const temp = document.createElement('div');
+    temp.textContent = input;
+    return temp.innerHTML;
+}
+
 function sendMessage() {
     const inputField = document.getElementById("user-input");
     const message = inputField.value.trim();
+
+    // Input validation
     if (message === "") return;
+    if (message.length > 500) {
+        alert("ข้อความยาวเกินไป (สูงสุด 500 ตัวอักษร)");
+        return;
+    }
 
     const chatBox = document.getElementById("chat-box");
     const messageElem = document.createElement("div");
-    messageElem.textContent = "คุณ: " + message;
+
+    // Sanitize the message to prevent XSS
+    const sanitizedMessage = sanitizeInput(message);
+    messageElem.innerHTML = "คุณ: " + sanitizedMessage;
+
+    // Add timestamp for better UX
+    const timestamp = new Date().toLocaleTimeString('th-TH');
+    messageElem.innerHTML += ` <span style="color: #888; font-size: 0.8em;">[${timestamp}]</span>`;
+
     chatBox.appendChild(messageElem);
 
     inputField.value = "";
     chatBox.scrollTop = chatBox.scrollHeight;
 }
+
+// Add keyboard event listeners for better UX
+document.addEventListener('DOMContentLoaded', function() {
+    // Enter key support for password input
+    const passwordInput = document.getElementById("password-input");
+    if (passwordInput) {
+        passwordInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                checkPassword();
+            }
+        });
+    }
+
+    // Enter key support for chat input and character counter
+    const userInput = document.getElementById("user-input");
+    const charCounter = document.getElementById("char-counter");
+
+    if (userInput) {
+        userInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+
+        // Update character counter
+        userInput.addEventListener('input', function() {
+            if (charCounter) {
+                const length = this.value.length;
+                charCounter.textContent = `${length}/500`;
+
+                // Change color when approaching limit
+                if (length > 450) {
+                    charCounter.style.color = '#ff4444';
+                } else if (length > 400) {
+                    charCounter.style.color = '#ff8800';
+                } else {
+                    charCounter.style.color = '#888';
+                }
+            }
+        });
+    }
+});