Merge pull request #33 from operacle/develop

Add SMTP password field in Mail Settings and Fix: Ensure Add Service dialog respects theme
2025-06-05 17:40:17 +07:00
parent 4ec0c7a8fa 4ef84b5469
commit 4dc005c7e4
15 changed files with 80 additions and 55 deletions
@@ -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>
  );
-}
+}
@@ -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>
  );
-}
+}
@@ -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) {
      />
    </>
  );
-}
+}
@@ -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) {
      />
    </>
  );
-}
+}
@@ -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>
  );
-}
+}
@@ -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}>
@@ -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) {
      )}
    />
  );
-}
+}
@@ -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>
  );
-};
+};
@@ -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: ''
@@ -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}
@@ -36,6 +36,7 @@ export interface GeneralSettings {
    port?: number;
    host?: string;
    username?: string;
+    password?: string;
    authMethod?: string;
    tls?: boolean;
    localName?: string;
@@ -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",
@@ -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",
@@ -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: "ការតភ្ជាប់បរាជ័យ"
 };
@@ -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;