Chỉnh sửa hộp thoại đăng nhập

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) */
+}

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="text" id="username-input" placeholder="Username" onkeydown="if(event.key === 'Enter') handleLogin()">
-                    <input type="password" id="password-input" placeholder="Password">
+                    <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>

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');
 }
 
 /**