97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
|
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');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|