From 07c101617c7564c6429bce82d2fc9db6cb0aafad Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Wed, 13 Aug 2025 23:08:10 +0700
Subject: [PATCH] feat: Add SMTP password field for email

- Add an input field for SMTP password in the "Add Notification Channel" dialog. This field will be used for SMTP authentication.
---
 .../NotificationChannelDialog.tsx             | 28 +++++++++++++++----
 .../src/services/alertConfigService.ts        | 16 +++++------
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/application/src/components/settings/notification-settings/NotificationChannelDialog.tsx b/application/src/components/settings/notification-settings/NotificationChannelDialog.tsx
index ef0469a..b366940 100644
--- a/application/src/components/settings/notification-settings/NotificationChannelDialog.tsx
+++ b/application/src/components/settings/notification-settings/NotificationChannelDialog.tsx
@@ -1,3 +1,4 @@
+
 import React, { useEffect } from "react";
 import { 
   Dialog, 
@@ -75,6 +76,7 @@ const emailSchema = baseSchema.extend({
   email_sender_name: z.string().min(1, "Sender name is required"),
   smtp_server: z.string().min(1, "SMTP server is required"),
   smtp_port: z.string().min(1, "SMTP port is required"),
+  smtp_password: z.string().min(1, "SMTP password is required"),
 });
 
 const webhookSchema = baseSchema.extend({
@@ -112,31 +114,31 @@ const notificationTypeOptions = [
     value: "discord", 
     label: "Discord", 
     description: "Send notifications to Discord webhook",
-    icon: "/upload/notification/discord.png" 
+    icon: "/upload/notification/discord.png"
   },
   { 
     value: "slack", 
     label: "Slack", 
     description: "Send notifications to Slack webhook",
-    icon: "/upload/notification/slack.png" 
+    icon: "/upload/notification/slack.png"
   },
   { 
     value: "signal", 
     label: "Signal", 
     description: "Send notifications via Signal",
-    icon: "/upload/notification/signal.png" 
+    icon: "/upload/notification/signal.png"
   },
   { 
     value: "google_chat", 
     label: "Google Chat", 
     description: "Send notifications to Google Chat webhook",
-    icon: "/upload/notification/google.png" 
+    icon: "/upload/notification/google.png"
   },
   { 
     value: "email", 
     label: "Email", 
     description: "Send notifications via email",
-    icon: "/upload/notification/email.png" 
+    icon: "/upload/notification/email.png"
   },
   { 
     value: "webhook", 
@@ -540,6 +542,22 @@ export const NotificationChannelDialog = ({
                     )}
                   />
                 </div>
+                <FormField
+                  control={form.control}
+                  name="smtp_password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>SMTP Password</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Enter your SMTP password" {...field} type="password" />
+                      </FormControl>
+                      <FormDescription>
+                        Password for authenticating with the SMTP server
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
               </>
             )}
 
diff --git a/application/src/services/alertConfigService.ts b/application/src/services/alertConfigService.ts
index e845696..80f899e 100644
--- a/application/src/services/alertConfigService.ts
+++ b/application/src/services/alertConfigService.ts
@@ -24,6 +24,7 @@ export interface AlertConfiguration {
   email_sender_name?: string;
   smtp_server?: string;
   smtp_port?: string;
+  smtp_password?: string;
   webhook_id?: string;
   channel_id?: string;
 }
@@ -44,7 +45,7 @@ export const alertConfigService = {
   },
 
   async createAlertConfiguration(config: Omit<AlertConfiguration, 'id' | 'collectionId' | 'collectionName' | 'created' | 'updated'>): Promise<AlertConfiguration | null> {
-    
+  
     try {
       // Build the configuration object with proper field mapping
       const cleanConfig: any = {
@@ -54,7 +55,7 @@ export const alertConfigService = {
         enabled: config.enabled,
         template_id: config.template_id || "",
       };
-
+     
       // Add type-specific fields based on notification type
       if (config.notification_type === "telegram") {
         cleanConfig.telegram_chat_id = config.telegram_chat_id || "";
@@ -67,23 +68,22 @@ export const alertConfigService = {
         cleanConfig.signal_number = config.signal_number || "";
       } else if (config.notification_type === "google_chat") {
         cleanConfig.google_chat_webhook_url = config.google_chat_webhook_url || "";
-      } else if (config.notification_type === "email") {
-      
+      } else if (config.notification_type === "email") {      
         cleanConfig.email_address = config.email_address || "";
         cleanConfig.email_sender_name = config.email_sender_name || "";
         cleanConfig.smtp_server = config.smtp_server || "";
         cleanConfig.smtp_port = config.smtp_port || "";
-        
+        cleanConfig.smtp_password = config.smtp_password || "";
+
       }
-
       const result = await pb.collection('alert_configurations').create(cleanConfig);
-
+         
       toast({
         title: "Success",
         description: "Notification channel created successfully",
       });
       return result as AlertConfiguration;
-    } catch (error) {
+    } catch (error) {    
       // Try to get more details from the error
       if (error && typeof error === 'object') {
       }