From 7e152e4432317e55669a6b1f9649f215fb925b2f Mon Sep 17 00:00:00 2001
From: Niek Otten <not@respellion.nl>
Date: Mon, 13 Jul 2026 14:33:09 +0200
Subject: [PATCH] feat(portal-self-service): surface submit failures with a
 retryable alert (refs #68)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add an error branch to submit(): on a failed BFF call, set a `failed` signal,
re-enable the button, and render a role="alert" message so the user knows the
submit did not go through and can retry — instead of the click silently doing
nothing.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/app/registration/registration-page.html |  5 +++++
 .../src/app/registration/registration-page.ts   | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/apps/self-service/src/app/registration/registration-page.html b/apps/self-service/src/app/registration/registration-page.html
index 3aa25cf..a8b6627 100644
--- a/apps/self-service/src/app/registration/registration-page.html
+++ b/apps/self-service/src/app/registration/registration-page.html
@@ -8,6 +8,11 @@
       </p>
     } @else {
       <p utrecht-paragraph>U bent ingelogd met BSN {{ bsn() }}.</p>
+      @if (failed()) {
+        <p utrecht-paragraph role="alert">
+          Er ging iets mis bij het indienen van uw registratie. Probeer het opnieuw.
+        </p>
+      }
       <button
         utrecht-button
         appearance="primary-action-button"
diff --git a/apps/self-service/src/app/registration/registration-page.ts b/apps/self-service/src/app/registration/registration-page.ts
index b232f94..da526be 100644
--- a/apps/self-service/src/app/registration/registration-page.ts
+++ b/apps/self-service/src/app/registration/registration-page.ts
@@ -21,13 +21,22 @@ export class RegistrationPage {
   protected readonly submitting = signal(false);
   protected readonly reference = signal<string | undefined>(undefined);
   protected readonly submitted = signal(false);
+  protected readonly failed = signal(false);
 
   submit(): void {
     this.submitting.set(true);
-    this.bff.postSelfServiceRegistrations().subscribe((accepted: SubmitAccepted) => {
-      this.reference.set(accepted.registrationId);
-      this.submitted.set(true);
-      this.submitting.set(false);
+    this.failed.set(false);
+    this.bff.postSelfServiceRegistrations().subscribe({
+      next: (accepted: SubmitAccepted) => {
+        this.reference.set(accepted.registrationId);
+        this.submitted.set(true);
+        this.submitting.set(false);
+      },
+      // Surface the failure instead of swallowing it: re-enable the button so the user can retry.
+      error: () => {
+        this.failed.set(true);
+        this.submitting.set(false);
+      },
     });
   }
 }