Files
armarium-suite/frontend/src/app/accounts/account-list/account-list.ts
T
Daniel Krähenbühl 1a7ef09805 feat: Armarium v1.1.0 — dashboard, auth, 2FA, SMTP, settings, deploy
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
2026-05-25 22:46:30 +02:00

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)
});
}
}