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

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';
import { ToastService } from '../../core/services/toast.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);
  private toastService = inject(ToastService);
  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(() => {
      this.toastService.success('Settings saved successfully');
    }).catch((error) => {
      this.toastService.error('Failed to save settings: ' + (error.message || 'Unknown error'));
    });
  }
}