diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 9f7c8a4..069f56b 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -5,5 +5,6 @@ export const routes: Routes = [ { path: 'login', loadComponent: () => import('./pages/login/login.page').then(m => m.LoginPage) }, { path: 'dashboard', loadComponent: () => import('./pages/dashboard/dashboard.page').then(m => m.DashboardPage) }, { path: 'registratie', loadComponent: () => import('./pages/registration-detail/registration-detail.page').then(m => m.RegistrationDetailPage) }, + { path: 'herregistratie', loadComponent: () => import('./pages/herregistratie/herregistratie.page').then(m => m.HerregistratiePage) }, { path: '**', redirectTo: 'login' }, ]; diff --git a/src/app/pages/dashboard/dashboard.page.ts b/src/app/pages/dashboard/dashboard.page.ts index 3da4043..89037ae 100644 --- a/src/app/pages/dashboard/dashboard.page.ts +++ b/src/app/pages/dashboard/dashboard.page.ts @@ -28,6 +28,9 @@ import { RegistrationService } from '../../core/registration.service';

Gegevens bekijken of een wijziging doorgeven →

+

+ Herregistratie aanvragen → +

`, }) diff --git a/src/app/pages/herregistratie/herregistratie.page.ts b/src/app/pages/herregistratie/herregistratie.page.ts new file mode 100644 index 0000000..a5f7255 --- /dev/null +++ b/src/app/pages/herregistratie/herregistratie.page.ts @@ -0,0 +1,59 @@ +import { Component, signal } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { PageLayoutComponent } from '../../templates/page-layout/page-layout.component'; +import { HeadingComponent } from '../../atoms/heading/heading.component'; +import { AlertComponent } from '../../atoms/alert/alert.component'; +import { ButtonComponent } from '../../atoms/button/button.component'; +import { LinkComponent } from '../../atoms/link/link.component'; +import { FormFieldComponent } from '../../molecules/form-field/form-field.component'; +import { TextInputComponent } from '../../atoms/text-input/text-input.component'; + +/** A whole new page built from existing building blocks — no new components. + This is the atomic-design payoff: a new flow is just composition. */ +@Component({ + selector: 'app-herregistratie-page', + imports: [ + FormsModule, PageLayoutComponent, HeadingComponent, AlertComponent, + ButtonComponent, LinkComponent, FormFieldComponent, TextInputComponent, + ], + template: ` + +

← Terug naar overzicht

+ Herregistratie aanvragen + + + Uw huidige registratie verloopt op 1 september 2027. Vraag tijdig herregistratie aan. + + + @if (submitted()) { +
+ Uw aanvraag tot herregistratie is ontvangen. +
+ } @else { +
+ + + + + + +
+ Herregistratie aanvragen +
+
+ } +
+ `, +}) +export class HerregistratiePage { + uren = ''; + punten = ''; + urenError = signal(''); + submitted = signal(false); + + onSubmit() { + if (!this.uren.trim()) { this.urenError.set('Vul het aantal gewerkte uren in.'); return; } + this.urenError.set(''); + this.submitted.set(true); + } +}