update

ui/src/app/features/settings/settings.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ApiService } from '../../core/services/api.service';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div class="px-4 sm:px-0">
+      <h1 class="text-3xl font-bold text-gray-900 mb-8">Settings</h1>
+
+      <div class="space-y-6">
+        <!-- Cloudflare Settings -->
+        <div class="card">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">Cloudflare DNS</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="label">API Key</label>
+              <input type="password" [(ngModel)]="settings.cloudflareAPIKey" class="input" />
+            </div>
+            <div>
+              <label class="label">Email</label>
+              <input type="email" [(ngModel)]="settings.cloudflareEmail" class="input" />
+            </div>
+            <div>
+              <label class="label">Zone ID</label>
+              <input type="text" [(ngModel)]="settings.cloudflareZoneID" class="input" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Server Settings -->
+        <div class="card">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">Server</h2>
+          <div class="space-y-4">
+            <div>
+              <label class="label">Server IP</label>
+              <input type="text" [(ngModel)]="settings.serverIP" class="input" placeholder="1.2.3.4" />
+            </div>
+            <div>
+              <label class="label">HTTP Port</label>
+              <input type="number" [(ngModel)]="settings.httpPort" class="input" placeholder="3000" />
+            </div>
+          </div>
+        </div>
+
+        <!-- SSL Settings -->
+        <div class="card">
+          <h2 class="text-lg font-medium text-gray-900 mb-4">SSL / ACME</h2>
+          <div>
+            <label class="label">ACME Email</label>
+            <input type="email" [(ngModel)]="settings.acmeEmail" class="input" placeholder="admin@example.com" />
+          </div>
+        </div>
+
+        <!-- Save Button -->
+        <div class="flex justify-end">
+          <button (click)="saveSettings()" class="btn btn-primary">
+            Save Settings
+          </button>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class SettingsComponent implements OnInit {
+  private apiService = inject(ApiService);
+  settings: any = {};
+
+  ngOnInit(): void {
+    this.loadSettings();
+  }
+
+  loadSettings(): void {
+    this.apiService.getSettings().subscribe({
+      next: (response) => {
+        if (response.success && response.data) {
+          this.settings = response.data;
+        }
+      },
+    });
+  }
+
+  saveSettings(): void {
+    // Save each setting individually
+    const promises = Object.entries(this.settings).map(([key, value]) =>
+      this.apiService.updateSetting(key, value as string).toPromise()
+    );
+
+    Promise.all(promises).then(() => {
+      alert('Settings saved successfully');
+    });
+  }
+}