From aeb98eb86c1041f65debb14d80dd52bc2057ef73 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Tue, 12 Aug 2025 09:36:04 +0000
Subject: [PATCH] fix: email config field mapping issue

- Frontend was looking for smtpHost/smtpPort but backend returns server/port
- Fixed field mapping in NotificationsAPI to use correct field names
- Email SMTP server now properly displays saved value instead of placeholder
---
 frontend-modern/src/api/notifications.ts      | 15 ++++++------
 .../components/Alerts/EmailProviderSelect.tsx | 10 ++++++++
 frontend-modern/src/pages/Alerts.tsx          | 23 ++++++++++++-------
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/frontend-modern/src/api/notifications.ts b/frontend-modern/src/api/notifications.ts
index 1228e7d92..172559a49 100644
--- a/frontend-modern/src/api/notifications.ts
+++ b/frontend-modern/src/api/notifications.ts
@@ -72,12 +72,12 @@ export class NotificationsAPI {
     }
     const backendConfig = await response.json();
     
-    // Convert backend field names to frontend field names
+    // Backend already returns fields with correct names (server, port)
     return {
       enabled: backendConfig.enabled || false,
       provider: backendConfig.provider || '',
-      server: backendConfig.smtpHost || '',
-      port: backendConfig.smtpPort || 587,
+      server: backendConfig.server || '',
+      port: backendConfig.port || 587,
       username: backendConfig.username || '',
       password: backendConfig.password || '',
       from: backendConfig.from || '',
@@ -88,17 +88,18 @@ export class NotificationsAPI {
   }
 
   static async updateEmailConfig(config: EmailConfig): Promise<{ success: boolean }> {
-    // Convert frontend field names to backend field names
+    // Backend expects fields with these names (server, port)
     const backendConfig = {
       enabled: config.enabled,
-      smtpHost: config.server,
-      smtpPort: config.port,
+      server: config.server,
+      port: config.port,
       username: config.username,
       password: config.password,
       from: config.from,
       to: config.to,
       tls: config.tls || false,
-      startTLS: config.startTLS || false
+      startTLS: config.startTLS || false,
+      provider: config.provider || ''
     };
     
     const response = await fetch(`${this.baseUrl}/email`, {
diff --git a/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx b/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
index f19ae63a8..67e18a336 100644
--- a/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
+++ b/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
@@ -40,6 +40,16 @@ export function EmailProviderSelect(props: EmailProviderSelectProps) {
   const [showProviders, setShowProviders] = createSignal(false);
   const [showAdvanced, setShowAdvanced] = createSignal(false);
   
+  // Debug logging
+  createEffect(() => {
+    console.log('EmailProviderSelect received config:', {
+      server: props.config.server,
+      port: props.config.port,
+      from: props.config.from,
+      enabled: props.config.enabled
+    });
+  });
+  
   // Load email providers
   createEffect(async () => {
     try {
diff --git a/frontend-modern/src/pages/Alerts.tsx b/frontend-modern/src/pages/Alerts.tsx
index b140f140a..a43472b22 100644
--- a/frontend-modern/src/pages/Alerts.tsx
+++ b/frontend-modern/src/pages/Alerts.tsx
@@ -263,22 +263,24 @@ export function Alerts() {
     if (activeTab() === 'destinations') {
       // Reload email config from server when switching to destinations tab
       NotificationsAPI.getEmailConfig().then(emailConfigData => {
+        console.log('Loading email config from API:', emailConfigData);
         setEmailConfig({
           enabled: emailConfigData.enabled,
-          provider: emailConfigData.provider,
-          server: emailConfigData.server,
-          port: emailConfigData.port,
-          username: emailConfigData.username,
+          provider: emailConfigData.provider || '',
+          server: emailConfigData.server || '',
+          port: emailConfigData.port || 587,
+          username: emailConfigData.username || '',
           password: emailConfigData.password || '',
-          from: emailConfigData.from,
-          to: emailConfigData.to,
-          tls: emailConfigData.tls,
-          startTLS: emailConfigData.startTLS,
+          from: emailConfigData.from || '',
+          to: emailConfigData.to || [],
+          tls: emailConfigData.tls !== undefined ? emailConfigData.tls : true,
+          startTLS: emailConfigData.startTLS || false,
           replyTo: '',
           maxRetries: 3,
           retryDelay: 5,
           rateLimit: 60
         });
+        console.log('Email config after setting:', emailConfig());
       }).catch(err => {
         console.error('Failed to reload email configuration:', err);
       });
@@ -1440,6 +1442,11 @@ function DestinationsTab(props: DestinationsTabProps) {
   const [testingEmail, setTestingEmail] = createSignal(false);
   const [testingWebhook, setTestingWebhook] = createSignal<string | null>(null);
   
+  // Debug logging
+  createEffect(() => {
+    console.log('DestinationsTab emailConfig:', props.emailConfig());
+  });
+  
   // Load webhooks on mount (email config is now loaded in parent)
   onMount(async () => {
     try {