feat(self-service): resume an existing registration after refresh (refs #111)

Frontend half of S-26. registration-page asks the BFF for the caller's current open
registration on init (regenerated api-client → getSelfServiceRegistrations) and
restores the submitted view — reference + the documenten/withdraw actions — instead
of dropping back to the blank form after a refresh; 204 (none) shows the form as
before. Component test covers resume-on-load; a Playwright e2e submits, reloads, and
asserts the reference + actions persist.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/self-service/src/app/registration/registration-page.spec.ts

@@ -21,16 +21,20 @@ function providers(
   post = vi.fn().mockReturnValue(of({ registrationId: 'reg-9', status: 'Ingediend' })),
   withdraw = vi.fn().mockReturnValue(of(undefined)),
   provideDocuments = vi.fn().mockReturnValue(of(undefined)),
+  // Resume lookup (S-26): default to 204/empty — no in-flight registration, so the submit form shows.
+  getCurrent = vi.fn().mockReturnValue(of(undefined)),
 ) {
   return {
     post,
     withdraw,
     provideDocuments,
+    getCurrent,
     providers: [
       { provide: AuthService, useClass: FakeAuth },
       {
         provide: BffApiV1Service,
         useValue: {
+          getSelfServiceRegistrations: getCurrent,
           postSelfServiceRegistrations: post,
           postSelfServiceRegistrationsIdWithdraw: withdraw,
           postSelfServiceRegistrationsIdDocuments: provideDocuments,
@@ -56,6 +60,21 @@ describe('RegistrationPage', () => {
     expect(await screen.findByText(/ontvangen/i)).toBeTruthy();
   });
 
+  it('resumes an existing registration on load, without submitting again (S-26)', async () => {
+    const { post, providers: p } = providers(
+      undefined,
+      undefined,
+      undefined,
+      vi.fn().mockReturnValue(of({ registrationId: 'reg-77', status: 'Ingediend' })),
+    );
+    await render(RegistrationPage, { providers: p });
+
+    // The confirmation view is restored from the in-flight registration — no submit click.
+    expect(await screen.findByText(/ontvangen/i)).toBeTruthy();
+    expect(screen.getByText(/reg-77/)).toBeTruthy();
+    expect(post).not.toHaveBeenCalled();
+  });
+
   it('shows an error and keeps the submit available when the BFF call fails', async () => {
     const { post, providers: p } = providers(vi.fn().mockReturnValue(throwError(() => new Error('BFF rejected'))));
     await render(RegistrationPage, { providers: p });

apps/self-service/src/app/registration/registration-page.ts

@@ -1,5 +1,5 @@
-import { Component, inject, signal } from '@angular/core';
-import { BffApiV1Service, type SubmitAccepted } from 'api-client';
+import { Component, inject, type OnInit, signal } from '@angular/core';
+import { BffApiV1Service, type CurrentRegistration, type SubmitAccepted } from 'api-client';
 import { AuthService } from 'auth';
 import { UtrechtComponentsModule } from 'ui';
 
@@ -8,13 +8,16 @@ import { UtrechtComponentsModule } from 'ui';
  * registration. The bsn comes from the DigiD token (not a form field), so this is a confirm-and-
  * submit flow that posts to the BFF and shows the returned reference (ADR-0010; S-08c). After
  * submitting they can withdraw it — "trek aanvraag in" — keyed by that reference (S-11c).
+ *
+ * On load it asks the BFF for the caller's current open registration and restores the submitted view
+ * if there is one, so a page refresh no longer strands an in-flight registration (S-26).
  */
 @Component({
   selector: 'app-registration-page',
   imports: [UtrechtComponentsModule],
   templateUrl: './registration-page.html',
 })
-export class RegistrationPage {
+export class RegistrationPage implements OnInit {
   private readonly auth = inject(AuthService);
   private readonly bff = inject(BffApiV1Service);
 
@@ -31,6 +34,23 @@ export class RegistrationPage {
   protected readonly provideDocumentsFailed = signal(false);
   protected readonly selectedFile = signal<File | undefined>(undefined);
 
+  /** Resume an existing in-flight registration after a refresh (S-26): the BFF returns the caller's
+   * current open registration, or 204 (empty body) when there is none — in which case we show the
+   * submit form as before. Failures are non-fatal for the same reason. */
+  ngOnInit(): void {
+    this.bff.getSelfServiceRegistrations().subscribe({
+      next: (current: CurrentRegistration | void) => {
+        if (current && current.registrationId) {
+          this.reference.set(current.registrationId);
+          this.submitted.set(true);
+        }
+      },
+      error: () => {
+        // No resumable registration (or the lookup failed) — fall back to the submit form.
+      },
+    });
+  }
+
   submit(): void {
     this.submitting.set(true);
     this.failed.set(false);

libs/api-client/src/lib/generated/bff-api.ts

@@ -24,6 +24,11 @@ import {
   Observable
 } from 'rxjs';
 
+export interface CurrentRegistration {
+  registrationId: string;
+  status: string;
+}
+
 export interface DecideRequest {
   besluit: string;
 }
@@ -200,6 +205,37 @@ export class BffApiV1Service {
     );
   }
 
+ getSelfServiceRegistrations<TData = CurrentRegistration | void>( options?: HttpClientBodyOptions): Observable<TData>;
+ getSelfServiceRegistrations<TData = CurrentRegistration | void>( options?: HttpClientEventOptions): Observable<HttpEvent<TData>>;
+ getSelfServiceRegistrations<TData = CurrentRegistration | void>( options?: HttpClientResponseOptions): Observable<AngularHttpResponse<TData>>;
+  getSelfServiceRegistrations<TData = CurrentRegistration | void>(
+     options?: HttpClientObserveOptions): Observable<TData | HttpEvent<TData> | AngularHttpResponse<TData>> {
+    if (options?.observe === 'events') {
+      return this.http.get<TData>(
+      `/self-service/registrations`,{
+        ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'events',
+      }
+    );
+    }
+
+    if (options?.observe === 'response') {
+      return this.http.get<TData>(
+      `/self-service/registrations`,{
+        ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'response',
+      }
+    );
+    }
+
+    return this.http.get<TData>(
+      `/self-service/registrations`,{
+        ...(options as Omit<NonNullable<typeof options>, 'observe'>),
+        observe: 'body',
+      }
+    );
+  }
+
  postSelfServiceRegistrationsIdWithdraw<TData = void>(id: string, options?: HttpClientBodyOptions): Observable<TData>;
  postSelfServiceRegistrationsIdWithdraw<TData = void>(id: string, options?: HttpClientEventOptions): Observable<HttpEvent<TData>>;
  postSelfServiceRegistrationsIdWithdraw<TData = void>(id: string, options?: HttpClientResponseOptions): Observable<AngularHttpResponse<TData>>;

tests/e2e/resume.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test';
+
+// S-26: a zorgprofessional submits, then reloads the self-service portal. On load the portal asks the
+// BFF for the caller's current open registration (owner-scoped by the DigiD token's bsn) and restores
+// the submitted view — so a refresh no longer strands the in-flight registration and its actions.
+test('DigiD submit → reload → self-service restores the existing registration', async ({ page }) => {
+  await page.goto('/');
+
+  await page.locator('#username').fill('jan-burger');
+  await page.locator('#password').fill('test123');
+  await page.locator('#kc-login').click();
+
+  await expect(page.getByRole('heading', { name: /Zelfservice/i })).toBeVisible();
+  await page.getByRole('button', { name: /indienen/i }).click();
+
+  const confirmation = page.getByText(/ontvangen/i);
+  await expect(confirmation).toBeVisible();
+  const reference = (await confirmation.textContent())?.match(/Referentie:\s*([0-9a-fA-F-]+)/)?.[1];
+  expect(reference, 'the confirmation shows a registration reference').toBeTruthy();
+
+  // Reload: the component's in-memory submitted state is gone, but the DigiD session persists and the
+  // portal resumes from the BFF instead of dropping back to the blank submit form.
+  await page.reload();
+
+  await expect(page.getByText(/ontvangen/i)).toBeVisible();
+  // The same reference the citizen saw before the reload is restored...
+  await expect(page.getByText(new RegExp(reference!))).toBeVisible();
+  // ...and its actions are reachable again (e.g. "trek aanvraag in").
+  await expect(page.getByRole('button', { name: /trek aanvraag in/i })).toBeVisible();
+});