From 9b8530900258f405344c4d761bf68367421dfb40 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 25 Jun 2026 14:27:18 +0200
Subject: [PATCH] Add herregistratie page composed entirely from existing
 components

Demonstrates the atomic-design payoff: a whole new flow (route + page + nav
link) reuses page-layout, heading, alert, form-field, text-input, button and
link with no new component files.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/app.routes.ts                         |  1 +
 src/app/pages/dashboard/dashboard.page.ts     |  3 +
 .../herregistratie/herregistratie.page.ts     | 59 +++++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 src/app/pages/herregistratie/herregistratie.page.ts

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';
       <p style="margin-top:2rem">
         <app-link to="/registratie">Gegevens bekijken of een wijziging doorgeven →</app-link>
       </p>
+      <p>
+        <app-link to="/herregistratie">Herregistratie aanvragen →</app-link>
+      </p>
     </app-page-layout>
   `,
 })
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: `
+    <app-page-layout>
+      <p><app-link to="/dashboard">← Terug naar overzicht</app-link></p>
+      <app-heading [level]="1">Herregistratie aanvragen</app-heading>
+
+      <app-alert type="info">
+        Uw huidige registratie verloopt op 1 september 2027. Vraag tijdig herregistratie aan.
+      </app-alert>
+
+      @if (submitted()) {
+        <div style="margin-top:1.5rem">
+          <app-alert type="ok">Uw aanvraag tot herregistratie is ontvangen.</app-alert>
+        </div>
+      } @else {
+        <form (ngSubmit)="onSubmit()" style="max-width:28rem;margin-top:1.5rem">
+          <app-form-field label="Gewerkte uren (afgelopen 5 jaar)" fieldId="uren" [error]="urenError()">
+            <app-text-input inputId="uren" [(ngModel)]="uren" name="uren" [invalid]="!!urenError()" placeholder="bijv. 4160" />
+          </app-form-field>
+          <app-form-field label="Behaalde nascholingspunten" fieldId="punten">
+            <app-text-input inputId="punten" [(ngModel)]="punten" name="punten" placeholder="bijv. 200" />
+          </app-form-field>
+          <div style="margin-top:1rem">
+            <app-button type="submit" variant="primary">Herregistratie aanvragen</app-button>
+          </div>
+        </form>
+      }
+    </app-page-layout>
+  `,
+})
+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);
+  }
+}