udpated config to properly build for smtp

config.sh

@@ -722,6 +722,22 @@ NODE_ENV=production
 
 # Add allowed origin
 ALLOWED_ORIGINS=https://map.$new_domain,http://localhost:3000
+
+# Add allowed origin
+ALLOWED_ORIGINS=https://map.cmlite.org,http://localhost:3000
+
+# SMTP Configuration
+SMTP_HOST=smtp.insert.here
+SMTP_PORT=insert_port
+SMTP_SECURE=false
+SMTP_USER=cmlite@bnkops.ca
+SMTP_PASS=insert_pass_here
+EMAIL_FROM_NAME=CMlite Map
+EMAIL_FROM_ADDRESS=insert_from_address
+
+# App Configuration
+APP_NAME=CMlite Map
+
 EOL
     echo "✅ Created new map .env file at $MAP_ENV_FILE"
     return 0

map/app/public/login.html

@@ -151,13 +151,138 @@
         .password-recovery a:hover {
             text-decoration: underline;
         }
+        
+        /* Custom Modal Styles */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            backdrop-filter: blur(2px);
+        }
+        
+        .modal-overlay.show {
+            display: flex;
+        }
+        
+        .modal-content {
+            background: white;
+            border-radius: 8px;
+            padding: 30px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            animation: modalSlideIn 0.3s ease;
+        }
+        
+        @keyframes modalSlideIn {
+            from {
+                transform: translateY(-50px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+        
+        .modal-header {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        
+        .modal-header h3 {
+            margin: 0;
+            color: var(--dark-color);
+            font-size: 20px;
+        }
+        
+        .modal-header p {
+            margin: 8px 0 0 0;
+            color: var(--secondary-color);
+            font-size: 14px;
+        }
+        
+        .modal-form {
+            margin-bottom: 20px;
+        }
+        
+        .modal-form .form-group {
+            margin-bottom: 15px;
+        }
+        
+        .modal-form label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 500;
+            color: var(--dark-color);
+        }
+        
+        .modal-form input[type="email"] {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid var(--light-color);
+            border-radius: var(--border-radius);
+            font-size: 14px;
+            transition: border-color 0.3s ease;
+        }
+        
+        .modal-form input[type="email"]:focus {
+            outline: none;
+            border-color: var(--primary-color);
+        }
+        
+        .modal-buttons {
+            display: flex;
+            gap: 10px;
+            justify-content: flex-end;
+        }
+        
+        .modal-button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: var(--border-radius);
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .modal-button.primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        
+        .modal-button.primary:hover {
+            background-color: var(--primary-hover);
+        }
+        
+        .modal-button.secondary {
+            background-color: var(--light-color);
+            color: var(--dark-color);
+        }
+        
+        .modal-button.secondary:hover {
+            background-color: var(--secondary-color);
+        }
+        
+        .modal-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
     </style>
 </head>
 <body>
     <div class="login-container">
         <div class="login-card">
             <div class="login-header">
-                <h1>Location Map Viewer</h1>
+                <h1>BNKops Map</h1>
                 <p>Please sign in to continue</p>
             </div>
             
@@ -205,6 +330,33 @@
         </div>
     </div>
     
+    <!-- Password Recovery Modal -->
+    <div class="modal-overlay" id="password-recovery-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Password Recovery</h3>
+                <p>Enter your email address to receive your password</p>
+            </div>
+            <form class="modal-form" id="password-recovery-form">
+                <div class="form-group">
+                    <label for="recovery-email">Email Address</label>
+                    <input 
+                        type="email" 
+                        id="recovery-email" 
+                        name="recovery-email" 
+                        placeholder="Enter your email address"
+                        required
+                        autocomplete="email"
+                    >
+                </div>
+                <div class="modal-buttons">
+                    <button type="button" class="modal-button secondary" id="cancel-recovery">Cancel</button>
+                    <button type="submit" class="modal-button primary" id="send-recovery">Send Password</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
     <script>
         // Handle login form submission
         document.getElementById('login-form').addEventListener('submit', async (e) => {
@@ -282,11 +434,40 @@
             })
             .catch(console.error);
             
-        // Add password recovery handler
+        // Modal elements
-        document.getElementById('forgot-password-link').addEventListener('click', async (e) => {
+        const modal = document.getElementById('password-recovery-modal');
+        const forgotPasswordLink = document.getElementById('forgot-password-link');
+        const cancelButton = document.getElementById('cancel-recovery');
+        const recoveryForm = document.getElementById('password-recovery-form');
+        const recoveryEmailInput = document.getElementById('recovery-email');
+        const sendButton = document.getElementById('send-recovery');
+        
+        // Show modal when "Forgot password?" is clicked
+        forgotPasswordLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            modal.classList.add('show');
+            recoveryEmailInput.focus();
+        });
+        
+        // Hide modal when cancel is clicked
+        cancelButton.addEventListener('click', () => {
+            modal.classList.remove('show');
+            recoveryForm.reset();
+        });
+        
+        // Hide modal when clicking outside
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                modal.classList.remove('show');
+                recoveryForm.reset();
+            }
+        });
+        
+        // Handle password recovery form submission
+        recoveryForm.addEventListener('submit', async (e) => {
             e.preventDefault();
             
-            const email = prompt('Please enter your email address:');
+            const email = recoveryEmailInput.value.trim();
             if (!email) return;
             
             const errorMessage = document.getElementById('error-message');
@@ -296,6 +477,10 @@
             errorMessage.classList.remove('show');
             successMessage.classList.remove('show');
             
+            // Disable form during submission
+            sendButton.disabled = true;
+            sendButton.textContent = 'Sending...';
+            
             try {
                 const response = await fetch('/api/auth/recover-password', {
                     method: 'POST',
@@ -310,6 +495,10 @@
                 if (data.success) {
                     successMessage.textContent = data.message;
                     successMessage.classList.add('show');
+                    
+                    // Close modal on success
+                    modal.classList.remove('show');
+                    recoveryForm.reset();
                 } else {
                     errorMessage.textContent = data.error || 'Failed to process request';
                     errorMessage.classList.add('show');
@@ -318,6 +507,18 @@
                 console.error('Password recovery error:', error);
                 errorMessage.textContent = 'Failed to send password recovery email';
                 errorMessage.classList.add('show');
+            } finally {
+                // Re-enable form
+                sendButton.disabled = false;
+                sendButton.textContent = 'Send Password';
+            }
+        });
+        
+        // Handle Escape key to close modal
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && modal.classList.contains('show')) {
+                modal.classList.remove('show');
+                recoveryForm.reset();
             }
         });
     </script>