config changes to better build map .env and updates to the login ui controls

map/app/public/css/style.css

@@ -698,6 +698,17 @@ body {
 
 .mobile-dropdown-item:last-child {
     border-bottom: none;
+    border-top: 1px solid #ddd;
+    background-color: #fff5f5;
+}
+
+.mobile-dropdown-item:last-child button {
+    color: var(--danger-color);
+    font-weight: 500;
+}
+
+.mobile-dropdown-item:last-child:hover {
+    background-color: #fee;
 }
 
 .mobile-dropdown-item.location-info {
@@ -711,6 +722,38 @@ body {
     color: var(--dark-color);
 }
 
+/* Add logout button specific styles */
+.mobile-dropdown-item button {
+    background: none;
+    border: none;
+    color: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+    padding: 0;
+    font-family: inherit;
+}
+
+.mobile-dropdown-item button:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Logout button danger styling */
+.mobile-dropdown-item.logout-item {
+    border-top: 1px solid #eee;
+    background-color: #fee;
+}
+
+.mobile-dropdown-item.logout-item button {
+    color: var(--danger-color);
+    font-weight: 500;
+}
+
+.mobile-dropdown-item.logout-item:hover {
+    background-color: #fdd;
+}
+
 /* Floating sidebar for mobile */
 .mobile-sidebar {
     position: fixed;

map/app/public/index.html

@@ -28,6 +28,11 @@
                     <span class="user-email" id="user-email">Loading...</span>
                 </div>
                 <div class="location-count" id="location-count">0 locations</div>
+                <!-- Add logout button for desktop -->
+                <button id="logout-btn" class="btn btn-danger">
+                    <span class="btn-icon">🚪</span>
+                    <span class="btn-text">Logout</span>
+                </button>
             </div>
             
             <!-- Mobile dropdown menu -->
@@ -46,6 +51,12 @@
                     <div class="mobile-dropdown-item user-info">
                         <span id="mobile-user-email">Loading...</span>
                     </div>
+                    <!-- Add logout button for mobile -->
+                    <div class="mobile-dropdown-item">
+                        <button id="mobile-logout-btn" style="background: none; border: none; color: inherit; font-size: inherit; cursor: pointer; width: 100%; text-align: left;">
+                            🚪 Logout
+                        </button>
+                    </div>
                 </div>
             </div>
         </header>

map/app/public/js/ui-controls.js

@@ -6,6 +6,42 @@ import { loadLocations, handleAddLocation, handleEditLocation, handleDeleteLocat
 export let userLocationMarker = null;
 export let isAddingLocation = false;
 
+// Add logout function
+async function logout() {
+    try {
+        const response = await fetch('/api/auth/logout', {
+            method: 'POST',
+            credentials: 'include'
+        });
+        
+        if (response.ok) {
+            // Clear any local storage or session storage
+            localStorage.clear();
+            sessionStorage.clear();
+            
+            // Redirect to login page
+            window.location.href = '/login.html';
+        } else {
+            throw new Error('Logout failed');
+        }
+    } catch (error) {
+        console.error('Logout error:', error);
+        showStatus('Logout failed, redirecting anyway...', 'warning');
+        // Force redirect even if logout request fails
+        setTimeout(() => {
+            window.location.href = '/login.html';
+        }, 1000);
+    }
+}
+
+// Add logout handler function
+function handleLogout(e) {
+    e.preventDefault();
+    if (confirm('Are you sure you want to logout?')) {
+        logout();
+    }
+}
+
 export function getUserLocation() {
     if (!navigator.geolocation) {
         showStatus('Geolocation is not supported by your browser', 'error');
@@ -284,7 +320,6 @@ export function setupGeoLocationSync() {
     }
 }
 
-// ...existing code...
 export function setupEventListeners() {
     // Desktop controls
     document.getElementById('refresh-btn')?.addEventListener('click', () => {
@@ -297,6 +332,10 @@ export function setupEventListeners() {
     document.getElementById('add-location-btn')?.addEventListener('click', toggleAddLocationMode);
     document.getElementById('fullscreen-btn')?.addEventListener('click', toggleFullscreen);
     
+    // Add logout button event listeners
+    document.getElementById('logout-btn')?.addEventListener('click', handleLogout);
+    document.getElementById('mobile-logout-btn')?.addEventListener('click', handleLogout);
+    
     // Mobile controls
     document.getElementById('mobile-refresh-btn')?.addEventListener('click', () => {
         loadLocations();