1a7ef09805
Dashboard: - ApexCharts bar chart (income vs fixed costs vs expenses) and donut chart - KPI cards: income, fixed costs, savings rate with configurable goal - Greeting with time-of-day and locale-aware date/time display Authentication & security: - Email-based login (no username), case-insensitive lookup - JWT access/refresh tokens with rotation and blacklist - TOTP 2FA with QR code, backup codes (copy + PDF export) - 2FA recovery via email code - Cloudflare Turnstile CAPTCHA on login and register Email flows: - Email verification on registration (24h token) - Password reset flow (15min token, anti-enumeration) - Brevo SMTP integration with HTML + plaintext email templates - Notification emails: 2FA recovery, password changed, email changed Settings page: - 2FA management (enable/disable, QR, backup codes) - Active sessions list with per-device revoke - Data export: ZIP with 6 PDFs via fpdf2 - Notification preferences (3 toggles) - Danger zone: account deletion with mandatory export + confirmation phrase UI & layout: - Sidebar with collapsible/flyout mode, Angular signal-based dropdowns - Dark mode (class-based), language switcher (DE/FR/IT/EN) - Mobile-responsive layout with touch-friendly targets - Roboto font via @fontsource (GDPR-compliant, no Google CDN) - Pure Tailwind CSS v3 Infrastructure: - Forgejo Actions CI/CD pipeline (auto-deploy on push to main) - Gunicorn + Nginx + PostgreSQL production setup - Rate limiting, HSTS, secure cookies, CSRF protection
122 lines
2.8 KiB
TypeScript
122 lines
2.8 KiB
TypeScript
import { Component, OnInit, signal } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { TranslateModule } from '@ngx-translate/core';
|
|
import { ApiService } from '../../services/api';
|
|
|
|
@Component({
|
|
selector: 'app-account-list',
|
|
standalone: true,
|
|
imports: [CommonModule, FormsModule, TranslateModule],
|
|
templateUrl: './account-list.html',
|
|
styleUrl: './account-list.css',
|
|
})
|
|
export class AccountList implements OnInit {
|
|
accounts = signal<any[]>([]);
|
|
|
|
// Create Modal
|
|
showCreateModal = signal(false);
|
|
newName = '';
|
|
newBalance = 0;
|
|
newType = 'asset';
|
|
|
|
// Edit Modal
|
|
showEditModal = signal(false);
|
|
editId = 0;
|
|
|
|
// Delete Modal
|
|
showDeleteModal = signal(false);
|
|
deleteTargetId = 0;
|
|
editName = '';
|
|
editBalance = 0;
|
|
editType = 'asset';
|
|
|
|
constructor(private api: ApiService) {}
|
|
|
|
ngOnInit(): void {
|
|
this.loadAccounts();
|
|
}
|
|
|
|
loadAccounts() {
|
|
this.api.getAccounts().subscribe({
|
|
next: (data) => this.accounts.set(data.filter((a: any) => a.account_type === 'asset' || a.account_type === 'revenue')),
|
|
error: (err) => console.error('Fehler:', err)
|
|
});
|
|
}
|
|
|
|
// Create
|
|
openCreateModal() {
|
|
this.showCreateModal.set(true);
|
|
}
|
|
|
|
closeCreateModal() {
|
|
this.showCreateModal.set(false);
|
|
this.newName = '';
|
|
this.newBalance = 0;
|
|
this.newType = 'asset';
|
|
}
|
|
|
|
createAccount() {
|
|
if (!this.newName) return;
|
|
this.api.createAccount({
|
|
name: this.newName,
|
|
balance: this.newBalance,
|
|
account_type: this.newType
|
|
}).subscribe({
|
|
next: () => {
|
|
this.loadAccounts();
|
|
this.closeCreateModal();
|
|
},
|
|
error: (err) => console.error('Fehler beim Erstellen:', err)
|
|
});
|
|
}
|
|
|
|
// Edit
|
|
openEditModal(account: any) {
|
|
this.editId = account.id;
|
|
this.editName = account.name;
|
|
this.editBalance = account.balance;
|
|
this.editType = account.account_type;
|
|
this.showEditModal.set(true);
|
|
}
|
|
|
|
closeEditModal() {
|
|
this.showEditModal.set(false);
|
|
}
|
|
|
|
updateAccount() {
|
|
if (!this.editName) return;
|
|
this.api.updateAccount(this.editId, {
|
|
name: this.editName,
|
|
balance: this.editBalance,
|
|
account_type: this.editType
|
|
}).subscribe({
|
|
next: () => {
|
|
this.loadAccounts();
|
|
this.closeEditModal();
|
|
},
|
|
error: (err) => console.error('Fehler beim Bearbeiten:', err)
|
|
});
|
|
}
|
|
|
|
// Delete
|
|
openDeleteModal(id: number) {
|
|
this.deleteTargetId = id;
|
|
this.showDeleteModal.set(true);
|
|
}
|
|
|
|
closeDeleteModal() {
|
|
this.showDeleteModal.set(false);
|
|
this.deleteTargetId = 0;
|
|
}
|
|
|
|
confirmDelete() {
|
|
this.api.deleteAccount(this.deleteTargetId).subscribe({
|
|
next: () => {
|
|
this.loadAccounts();
|
|
this.closeDeleteModal();
|
|
},
|
|
error: (err) => console.error('Error deleting account:', err)
|
|
});
|
|
}
|
|
} |