Add SMTP password field in Mail Settings and Fix: Ensure Add Service dialog respects theme

application/src/components/services/AddServiceDialog.tsx

@@ -25,10 +25,10 @@ export function AddServiceDialog({ open, onOpenChange }: AddServiceDialogProps)
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-black text-white border-gray-800 sm:max-w-[500px] max-h-[90vh] flex flex-col">
+      <DialogContent className="sm:max-w-[500px] max-h-[90vh] flex flex-col">
         <DialogHeader>
           <DialogTitle className="text-xl">Create New Service</DialogTitle>
-          <DialogDescription className="text-gray-400">
+          <DialogDescription>
             Fill in the details to create a new service to monitor.
           </DialogDescription>
         </DialogHeader>
@@ -40,4 +40,4 @@ export function AddServiceDialog({ open, onOpenChange }: AddServiceDialogProps)
       </DialogContent>
     </Dialog>
   );
-}
+}

application/src/components/services/ServiceEditDialog.tsx

@@ -51,10 +51,10 @@ export function ServiceEditDialog({ open, onOpenChange, service }: ServiceEditDi
         onOpenChange(newOpen);
       }
     }}>
-      <DialogContent className="bg-black text-white border-gray-800 sm:max-w-[500px] max-h-[90vh] flex flex-col">
+      <DialogContent className="sm:max-w-[500px] max-h-[90vh] flex flex-col">
         <DialogHeader>
           <DialogTitle className="text-xl">Edit Service</DialogTitle>
-          <DialogDescription className="text-gray-400">
+          <DialogDescription>
             Update the details of your monitored service.
           </DialogDescription>
         </DialogHeader>
@@ -74,4 +74,4 @@ export function ServiceEditDialog({ open, onOpenChange, service }: ServiceEditDi
       </DialogContent>
     </Dialog>
   );
-}
+}

application/src/components/services/add-service/ServiceBasicFields.tsx

@@ -20,7 +20,6 @@ export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
             <FormControl>
               <Input 
                 placeholder="Service Name" 
-                className="bg-black border-gray-700" 
                 {...field} 
               />
             </FormControl>
@@ -38,7 +37,6 @@ export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
             <FormControl>
               <Input 
                 placeholder="https://example.com" 
-                className="bg-black border-gray-700" 
                 {...field}
                 onChange={(e) => {
                   console.log("URL field changed:", e.target.value);
@@ -52,4 +50,4 @@ export function ServiceBasicFields({ form }: ServiceBasicFieldsProps) {
       />
     </>
   );
-}
+}

application/src/components/services/add-service/ServiceConfigFields.tsx

@@ -21,7 +21,6 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
               <Input 
                 type="number" 
                 placeholder="60" 
-                className="bg-black border-gray-700" 
                 {...field} 
               />
             </FormControl>
@@ -39,7 +38,6 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
               <Input 
                 type="number" 
                 placeholder="3" 
-                className="bg-black border-gray-700" 
                 {...field} 
               />
             </FormControl>
@@ -48,4 +46,4 @@ export function ServiceConfigFields({ form }: ServiceConfigFieldsProps) {
       />
     </>
   );
-}
+}

application/src/components/services/add-service/ServiceFormActions.tsx

@@ -28,14 +28,12 @@ export function ServiceFormActions({
         onClick={handleCancel}
         variant="outline"
         disabled={isSubmitting}
-        className="border-gray-700 text-gray-300 hover:bg-gray-800 hover:text-white"
       >
         Cancel
       </Button>
       <Button 
         type="submit" 
         disabled={isSubmitting}
-        className="bg-primary text-primary-foreground hover:bg-primary/90"
       >
         {isSubmitting ? (
           <>
@@ -48,4 +46,4 @@ export function ServiceFormActions({
       </Button>
     </div>
   );
-}
+}

application/src/components/services/add-service/ServiceNotificationFields.tsx

@@ -82,10 +82,10 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
                   }} 
                   value={displayValue}
                 >
-                  <SelectTrigger className="bg-black border-gray-700">
+                  <SelectTrigger>
                     <SelectValue placeholder="Select a notification channel" />
                   </SelectTrigger>
-                  <SelectContent className="bg-gray-900 text-white border-gray-700">
+                  <SelectContent>
                     <SelectItem value="none">None</SelectItem>
                     {alertConfigs.map((config) => (
                       <SelectItem key={config.id} value={config.id || ""}>
@@ -119,10 +119,10 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
                   }} 
                   value={displayValue}
                 >
-                  <SelectTrigger className="bg-black border-gray-700">
+                  <SelectTrigger>
                     <SelectValue placeholder="Select an alert template" />
                   </SelectTrigger>
-                  <SelectContent className="bg-gray-900 text-white border-gray-700">
+                  <SelectContent>
                     <SelectItem value="default">Default</SelectItem>
                     {templates?.map((template) => (
                       <SelectItem key={template.id} value={template.id}>

application/src/components/services/add-service/ServiceTypeField.tsx

@@ -22,7 +22,7 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
               onValueChange={field.onChange} 
               defaultValue={field.value}
             >
-              <SelectTrigger className="bg-black border-gray-700">
+              <SelectTrigger>
                 <SelectValue>
                   {field.value === "http" && (
                     <div className="flex items-center gap-2">
@@ -33,14 +33,14 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
                   {field.value !== "http" && "Select a service type"}
                 </SelectValue>
               </SelectTrigger>
-              <SelectContent className="bg-gray-900 text-white border-gray-700">
+              <SelectContent>
                 <SelectItem value="http">
                   <div className="flex flex-col">
                     <div className="flex items-center gap-2">
                       <Globe className="w-4 h-4" />
                       <span>HTTP/S</span>
                     </div>
-                    <p className="text-xs text-gray-400 mt-1">
+                    <p className="text-xs text-muted-foreground mt-1">
                       Monitor websites and REST APIs with HTTP/HTTPS protocol
                     </p>
                   </div>
@@ -55,4 +55,4 @@ export function ServiceTypeField({ form }: ServiceTypeFieldProps) {
       )}
     />
   );
-}
+}

application/src/components/services/service-row/ServiceRowActions.tsx

@@ -112,10 +112,10 @@ export const ServiceRowActions = ({
         </DropdownMenuTrigger>
         <DropdownMenuContent 
           align="end" 
-          className="w-48 bg-gray-900 border border-gray-800 text-white"
+          className="w-48"
         >
           <DropdownMenuItem 
-            className="flex items-center gap-2 cursor-pointer hover:bg-gray-800 focus:bg-gray-800 text-base py-2.5"
+            className="flex items-center gap-2 cursor-pointer text-base py-2.5"
             onClick={(e) => {
               e.stopPropagation();
               onViewDetail(service);
@@ -125,7 +125,7 @@ export const ServiceRowActions = ({
             <span>View Detail</span>
           </DropdownMenuItem>
           <DropdownMenuItem 
-            className="flex items-center gap-2 cursor-pointer hover:bg-gray-800 focus:bg-gray-800 text-base py-2.5"
+            className="flex items-center gap-2 cursor-pointer text-base py-2.5"
             onClick={handlePauseResume}
           >
             {service.status === "paused" ? (
@@ -141,7 +141,7 @@ export const ServiceRowActions = ({
             )}
           </DropdownMenuItem>
           <DropdownMenuItem 
-            className="flex items-center gap-2 cursor-pointer hover:bg-gray-800 focus:bg-gray-800 text-base py-2.5"
+            className="flex items-center gap-2 cursor-pointer text-base py-2.5"
             onClick={(e) => {
               e.stopPropagation();
               onEdit(service);
@@ -151,7 +151,7 @@ export const ServiceRowActions = ({
             <span>Edit</span>
           </DropdownMenuItem>
           <DropdownMenuItem 
-            className="flex items-center gap-2 cursor-pointer hover:bg-gray-800 focus:bg-gray-800 text-base py-2.5"
+            className="flex items-center gap-2 cursor-pointer text-base py-2.5"
             onClick={handleMuteAlerts}
           >
             {alertsMuted ? (
@@ -166,9 +166,9 @@ export const ServiceRowActions = ({
               </>
             )}
           </DropdownMenuItem>
-          <DropdownMenuSeparator className="bg-gray-700" />
+          <DropdownMenuSeparator />
           <DropdownMenuItem 
-            className="flex items-center gap-2 text-red-500 cursor-pointer hover:bg-gray-800 focus:bg-gray-800 text-base py-2.5"
+            className="flex items-center gap-2 text-destructive cursor-pointer text-base py-2.5"
             onClick={(e) => {
               e.stopPropagation();
               onDelete(service);
@@ -181,4 +181,4 @@ export const ServiceRowActions = ({
       </DropdownMenu>
     </div>
   );
-};
+};

application/src/components/settings/general/GeneralSettingsPanel.tsx

@@ -47,6 +47,7 @@ const GeneralSettingsPanel: React.FC<GeneralSettingsPanelProps> = () => {
         port: 587,
         host: '',
         username: '',
+        password: '',
         authMethod: '',
         tls: true,
         localName: ''
@@ -73,6 +74,7 @@ const GeneralSettingsPanel: React.FC<GeneralSettingsPanelProps> = () => {
           port: 587,
           host: '',
           username: '',
+          password: '',
           authMethod: '',
           tls: true,
           localName: ''
@@ -131,6 +133,7 @@ const GeneralSettingsPanel: React.FC<GeneralSettingsPanelProps> = () => {
           port: 587,
           host: '',
           username: '',
+          password: '',
           authMethod: '',
           tls: true,
           localName: ''

application/src/components/settings/general/MailSettingsTab.tsx

@@ -140,6 +140,26 @@ const MailSettingsTab: React.FC<MailSettingsTabProps> = ({
           />
         </div>
 
+        <div className="mt-4">
+          <FormField
+            control={form.control}
+            name="smtp.password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("smtpPassword", "settings")}</FormLabel>
+                <FormControl>
+                  <Input 
+                    {...field} 
+                    type="password"
+                    disabled={!isEditing || !form.watch('smtp.enabled')}
+                    placeholder="••••••••"
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+        </div>
+
         <div className="mt-4">
           <FormField
             control={form.control}

application/src/services/settingsService.ts

@@ -36,6 +36,7 @@ export interface GeneralSettings {
     port?: number;
     host?: string;
     username?: string;
+    password?: string;
     authMethod?: string;
     tls?: boolean;
     localName?: string;

application/src/translations/de/settings.ts

@@ -18,6 +18,7 @@ export const settingsTranslations: SettingsTranslations = {
   smtpHost: "SMTP-Host",
   smtpPort: "SMTP-Port",
   smtpUsername: "SMTP-Benutzername",
+  smtpPassword: "SMTP Password",
   smtpAuthMethod: "Authentifizierungsmethode",
   enableTLS: "TLS aktivieren",
   localName: "Lokaler Name",

application/src/translations/en/settings.ts

@@ -19,6 +19,7 @@ export const settingsTranslations: SettingsTranslations = {
   smtpHost: "SMTP Host",
   smtpPort: "SMTP Port",
   smtpUsername: "SMTP Username",
+  smtpPassword: "SMTP Password",
   smtpAuthMethod: "Authentication Method",
   enableTLS: "Enable TLS",
   localName: "Local Name",
@@ -28,6 +29,7 @@ export const settingsTranslations: SettingsTranslations = {
   saving: "Saving...",
   settingsUpdated: "Settings updated successfully",
   errorSavingSettings: "Error saving settings",
+  errorFetchingSettings: "Error loading settings",
   testConnection: "Test Connection",
   testingConnection: "Testing Connection...",
   connectionSuccess: "Connection successful",

application/src/translations/km/settings.ts

@@ -3,33 +3,35 @@ import { SettingsTranslations } from '../types/settings';
 
 export const settingsTranslations: SettingsTranslations = {
   // Tabs
-  systemSettings: "System Settings",
-  mailSettings: "Mail Settings",
+  systemSettings: "ការកំណត់ប្រព័ន្ធ",
+  mailSettings: "ការកំណត់សំបុត្រ",
 
   // System Settings
-  appName: "Application Name",
-  appURL: "Application URL",
-  senderName: "Sender Name",
-  senderEmail: "Sender Email Address",
-  hideControls: "Hide Controls",
+  appName: "ឈ្មោះកម្មវិធី",
+  appURL: "URL កម្មវិធី",
+  senderName: "ឈ្មោះអ្នកផ្ញើ",
+  senderEmail: "អាសយដ្ឋានអ៊ីមែលអ្នកផ្ញើ",
+  hideControls: "លាក់ការគ្រប់គ្រង",
 
   // Mail Settings
-  smtpSettings: "SMTP Configuration",
-  smtpEnabled: "Enable SMTP",
-  smtpHost: "SMTP Host",
-  smtpPort: "SMTP Port",
-  smtpUsername: "SMTP Username",
-  smtpAuthMethod: "Authentication Method",
-  enableTLS: "Enable TLS",
-  localName: "Local Name",
+  smtpSettings: "ការកំណត់រចនាសម្ព័ន្ធ SMTP",
+  smtpEnabled: "បើក SMTP",
+  smtpHost: "ម៉ាស៊ីន SMTP",
+  smtpPort: "ច្រក SMTP",
+  smtpUsername: "ឈ្មោះអ្នកប្រើ SMTP",
+  smtpPassword: "ពាក្យសម្ងាត់ SMTP",
+  smtpAuthMethod: "វិធីសាស្ត្រផ្ទៀងផ្ទាត់",
+  enableTLS: "បើក TLS",
+  localName: "ឈ្មោះមូលដ្ឋាន",
 
   // Actions and status
-  save: "Save Changes",
-  saving: "Saving...",
-  settingsUpdated: "Settings updated successfully",
-  errorSavingSettings: "Error saving settings",
-  testConnection: "Test Connection",
-  testingConnection: "Testing Connection...",
-  connectionSuccess: "Connection successful",
-  connectionFailed: "Connection failed"
+  save: "រក្សាទុកការផ្លាស់ប្ដូរ",
+  saving: "កំពុងរក្សាទុក...",
+  settingsUpdated: "បានធ្វើបច្ចុប្បន្នភាពការកំណត់ដោយជោគជ័យ",
+  errorSavingSettings: "មានបញ្ហាក្នុងការរក្សាទុកការកំណត់",
+  errorFetchingSettings: "មានបញ្ហាក្នុងការទាញយកការកំណត់",
+  testConnection: "សាកល្បងការតភ្ជាប់",
+  testingConnection: "កំពុងសាកល្បងការតភ្ជាប់...",
+  connectionSuccess: "ការតភ្ជាប់ជោគជ័យ",
+  connectionFailed: "ការតភ្ជាប់បរាជ័យ"
 };

application/src/translations/types/settings.ts

@@ -12,11 +12,12 @@ export interface SettingsTranslations {
   hideControls: string;
 
   // Mail Settings
-  smtpSettings: string;
+  smtpSettings?: string;
   smtpEnabled: string;
   smtpHost: string;
   smtpPort: string;
   smtpUsername: string;
+  smtpPassword: string;
   smtpAuthMethod: string;
   enableTLS: string;
   localName: string;
@@ -26,6 +27,7 @@ export interface SettingsTranslations {
   saving: string;
   settingsUpdated: string;
   errorSavingSettings: string;
+  errorFetchingSettings: string;
   testConnection: string;
   testingConnection: string;
   connectionSuccess: string;