From 3dbf2f2bbf80ce546a9ce7caac8e46e69518f687 Mon Sep 17 00:00:00 2001
From: locphamtran <tranloclqd@gmail.com>
Date: Mon, 8 Jun 2026 16:02:27 +0700
Subject: [PATCH] =?UTF-8?q?Ch=E1=BB=89nh=20s=E1=BB=ADa=20h=E1=BB=99p=20tho?=
 =?UTF-8?q?=E1=BA=A1i=20=C4=91=C4=83ng=20nh=E1=BA=ADp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/css/style.css  | 11 +++++++++++
 frontend/index.html     | 25 ++++++++++++++++++++----
 frontend/js/main_map.js | 43 +++++++++++++++++++++++++++++++++++------
 3 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/frontend/css/style.css b/frontend/css/style.css
index 1b2195b..4ddceff 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -586,3 +586,14 @@ html, body {
     display: block;
     margin-bottom: 3px;
 }
+
+.logout-modal-dark {
+    background: rgba(30, 30, 30, 0.95) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
+}
+
+#logout-confirm-modal {
+    z-index: 5500; /* Cao hơn Dashboard (4500) và Close Button (5000) */
+}
diff --git a/frontend/index.html b/frontend/index.html
index e0ce405..820873f 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -31,8 +31,9 @@
             <div id="user-dropdown" class="dropdown-content">
                 <div id="auth-guest">
                     <h3>Login / Register</h3>
-                    <input type="text" id="username-input" placeholder="Username">
-                    <input type="password" id="password-input" placeholder="Password">
+                    <input type="text" id="username-input" placeholder="Username" onkeydown="if(event.key === 'Enter') handleLogin()">
+                    <input type="password" id="password-input" placeholder="Password" onkeydown="if(event.key === 'Enter') handleLogin()">
+                    <p id="login-error-msg" style="color: #ff4d4d; font-size: 12px; margin: 0 20px 10px 20px; display: none;"></p>
                     <div class="btn-group">
                         <button onclick="handleLogin()">Login</button>
                         <button onclick="handleRegister()">Register</button>
@@ -41,7 +42,7 @@
                 <div id="auth-logged-in" style="display: none;">
                     <!--<p>Welcome, <strong id="logged-username"></strong> (<span id="logged-role"></span>)</p>-->
                     <button onclick="openDashboard()">Manage Profile</button>
-                    <button onclick="handleLogout()">Logout</button>
+                    <button onclick="showLogoutConfirm()">Đăng xuất</button>
                 </div>
             </div>
         </div>
@@ -68,7 +69,7 @@
                 <button class="tab-btn admin-only" id="admin-tab-users" onclick="openDashboardTab('user-management')">Quản lí users</button>
                 <button class="tab-btn admin-only" id="admin-tab-system" onclick="openDashboardTab('system-settings')">Cài đặt hệ thống</button>
                 <!-- Dòng 9: Đăng xuất -->
-                <button class="tab-btn logout-item" onclick="handleLogout()">Đăng xuất</button>
+                <button class="tab-btn logout-item" onclick="showLogoutConfirm()">Đăng xuất</button>
             </div>
             <div id="dashboard-tab-content">
                 <div id="tab-profile" class="dashboard-tab-pane active">
@@ -211,6 +212,22 @@
         </div>
     </div>
 
+    <!-- Logout Confirmation Modal -->
+    <div id="logout-confirm-modal" class="modal-overlay">
+        <div class="modal-content action-modal-content logout-modal-dark">
+            <h2 style="color: #fff; margin-bottom: 10px;">Xác nhận</h2>
+            <p style="color: #ccc; margin-bottom: 25px;">Bạn có chắc chắn muốn đăng xuất khỏi tài khoản này không?</p>
+            <div class="action-buttons">
+                <button onclick="handleLogout()" class="delete-btn-large">
+                    Đăng xuất
+                </button>
+                <button onclick="closeLogoutConfirm()" class="edit-btn-large" style="background: #6c757d;">
+                    Hủy bỏ
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- 3D Panorama Viewer Container -->
     <div id="viewer-container" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; background: #000;">
         <div id="panorama-viewer"></div>
diff --git a/frontend/js/main_map.js b/frontend/js/main_map.js
index 8e03e59..80b72f2 100644
--- a/frontend/js/main_map.js
+++ b/frontend/js/main_map.js
@@ -285,11 +285,17 @@ function checkAuthStatus() {
  * Handles user login
  */
 async function handleLogin() {
+    const errorMsg = document.getElementById('login-error-msg');
+    if (errorMsg) errorMsg.style.display = 'none';
+
     const username = document.getElementById('username-input').value.trim();
     const password = document.getElementById('password-input').value.trim();
 
     if (!username || !password) {
-        alert('Please fill in both fields');
+        if (errorMsg) {
+            errorMsg.innerText = 'Vui lòng nhập đầy đủ thông tin';
+            errorMsg.style.display = 'block';
+        }
         return;
     }
 
@@ -301,7 +307,7 @@ async function handleLogin() {
         });
 
         const data = await response.json();
-        if (!response.ok) throw new Error(data.message || 'Login failed');
+        if (!response.ok) throw new Error(data.message || 'Đăng nhập thất bại');
 
         localStorage.setItem('jwt', data.token);
         localStorage.setItem('username', data.user.username);
@@ -311,9 +317,15 @@ async function handleLogin() {
         checkAuthStatus();
         toggleDropdown(); // Đóng dropdown sau khi đăng nhập
         loadScenes(); // Reload scenes to show member/private scenes
-        alert('Logged in successfully!');
+        
+        // Làm sạch form
+        document.getElementById('username-input').value = '';
+        document.getElementById('password-input').value = '';
     } catch (error) {
-        alert(error.message);
+        if (errorMsg) {
+            errorMsg.innerText = error.message;
+            errorMsg.style.display = 'block';
+        }
     }
 }
 
@@ -345,6 +357,22 @@ async function handleRegister() {
     }
 }
 
+/**
+ * Hiển thị hộp thoại xác nhận đăng xuất
+ */
+function showLogoutConfirm() {
+    const modal = document.getElementById('logout-confirm-modal');
+    if (modal) modal.style.display = 'flex';
+}
+
+/**
+ * Đóng hộp thoại xác nhận đăng xuất
+ */
+function closeLogoutConfirm() {
+    const modal = document.getElementById('logout-confirm-modal');
+    if (modal) modal.style.display = 'none';
+}
+
 /**
  * Handles user logout
  */
@@ -363,9 +391,12 @@ function handleLogout() {
     }
     
     checkAuthStatus();
-    toggleDropdown(); // Đóng dropdown sau khi đăng xuất
+    if (document.getElementById('user-dropdown').classList.contains('show')) {
+        toggleDropdown();
+    }
+    closeLogoutConfirm();
+    closeDashboard();
     loadScenes(); // Reload scenes to filter out private ones
-    alert('Logged out successfully');
 }
 
 /**