feat(acl): diploma upload stored in the ZGW Documenten API (S-10b, closes #103) (#108)

## What & why

S-10b: the self-service **diploma upload** is now real. After submitting, the citizen picks a PDF and
uploads it; the portal base64-encodes it client-side → BFF → domain → **ACL**, which stores it in the
ZGW **Documenten (DRC) API** as an `enkelvoudiginformatieobject` and relates it to the zaak, then the
`WachtOpDocumenten` wait completes and the case advances to beoordeling. Per §8.1 only the ACL talks to
ZGW.

Closes #103

Mechanism in **ADR-0018** (proposal #107). Builds on S-10a (#102). The zaak-close-on-expiry item is
carved to **#106 (S-10c)**.

## Definition of Done

- [x] Linked Gitea issue (above).
- [x] Failing test committed before the implementation (red→green per layer).
- [x] Conventional Commits referencing the issue (`refs #103`).
- [ ] CI green — all Gitea Actions jobs (pending on this PR).
- [x] `docker compose up` health unaffected (ACL boots on a placeholder informatieobjecttype URL; the real one is injected by verify-domain).
- [x] Docs updated (ADR-0018, demo-script, BACKLOG + S-10c).
- [x] ADR added (`docs/architecture/adr-0018-diploma-upload-via-acl-documenten.md`).
- [x] Demo note in `docs/demo-script.md`.

## Notes for reviewers

- **ACL** (`OpenZaakGateway.StoreDocumentAsync` + `AclService.StoreDiplomaAsync` + `POST /documenten`) reuses the existing gateway patterns (ZGW Bearer, buffered non-chunked body, **no CRS** — Documenten isn't geo). Unit-tested via the stub handler; an **integration test** stores a real document against live OpenZaak (verify-acl).
- **Transport:** base64 JSON on every hop (portal encodes client-side) — I deviated from proposal #107's multipart to keep one contract shape and avoid `IFormFile`/antiforgery/multipart-client plumbing; fine at diploma size (ADR-0018 §Alternatives).
- **Infra:** `seed_catalogus.py` seeds + publishes a "Diploma" `informatieobjecttype` and relates it to the zaaktype (while both concept); `verify-domain` injects its URL into the ACL. No new ZGW scopes (seed applicatie has `heeft_alle_autorisaties`).
- **e2e:** uploads a real PDF (`setInputFiles`) after the openbaar INGEDIEND row confirms the zaak is open (so storage doesn't race the OpenZaak worker).
- **Scope boundary:** the ZGW zaak is not set to a cancellation status on 30-day expiry — that's #106 (S-10c).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #108

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

@@ -19,11 +19,20 @@
               Het aanleveren van uw documenten is niet gelukt. Probeer het opnieuw.
             </p>
           }
+          <p utrecht-paragraph>Lever uw diploma aan (PDF).</p>
+          <label utrecht-form-label for="diploma">Diploma</label>
+          <input
+            id="diploma"
+            type="file"
+            accept="application/pdf"
+            [disabled]="providingDocuments()"
+            (change)="onFileSelected($event)"
+          />
           <button
             utrecht-button
             appearance="primary-action-button"
             type="button"
-            [disabled]="providingDocuments()"
+            [disabled]="providingDocuments() || !selectedFile()"
             (click)="provideDocuments()"
           >
             Documenten aanleveren

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

@@ -83,21 +83,29 @@ describe('RegistrationPage', () => {
     expect(await screen.findByText(/ingetrokken/i)).toBeTruthy();
   });
 
-  it('offers to provide documents after submitting, and doing so confirms', async () => {
+  // A small PDF file the citizen "uploads"; the component base64-encodes it client-side.
+  const diploma = () => new File([new Uint8Array([1, 2, 3])], 'diploma.pdf', { type: 'application/pdf' });
+
+  it('uploads a chosen diploma after submitting, and doing so confirms', async () => {
     const { provideDocuments, providers: p } = providers();
     await render(RegistrationPage, { providers: p });
 
     fireEvent.click(screen.getByRole('button', { name: /indienen/i }));
     await screen.findByText(/ontvangen/i);
 
+    // Choose the file, then upload it.
+    fireEvent.change(screen.getByLabelText(/diploma/i), { target: { files: [diploma()] } });
     fireEvent.click(await screen.findByRole('button', { name: /documenten aanleveren/i }));
 
-    // The provide-documents call is keyed by the reference the submit returned, and the page confirms.
-    expect(provideDocuments).toHaveBeenCalledWith('reg-9');
+    // The upload is keyed by the reference and carries the base64 file + its name; the page confirms.
     expect(await screen.findByText(/documenten.*aangeleverd/i)).toBeTruthy();
+    expect(provideDocuments).toHaveBeenCalledWith(
+      'reg-9',
+      expect.objectContaining({ fileName: 'diploma.pdf', contentType: 'application/pdf', contentBase64: expect.any(String) }),
+    );
   });
 
-  it('surfaces a provide-documents failure and keeps the action available', async () => {
+  it('surfaces a diploma-upload failure and keeps the action available', async () => {
     const { providers: p } = providers(
       vi.fn().mockReturnValue(of({ registrationId: 'reg-9', status: 'Ingediend' })),
       vi.fn().mockReturnValue(of(undefined)),
@@ -107,6 +115,7 @@ describe('RegistrationPage', () => {
 
     fireEvent.click(screen.getByRole('button', { name: /indienen/i }));
     await screen.findByText(/ontvangen/i);
+    fireEvent.change(screen.getByLabelText(/diploma/i), { target: { files: [diploma()] } });
     fireEvent.click(await screen.findByRole('button', { name: /documenten aanleveren/i }));
 
     expect(await screen.findByRole('alert')).toBeTruthy();

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

@@ -29,6 +29,7 @@ export class RegistrationPage {
   protected readonly providingDocuments = signal(false);
   protected readonly documentsProvided = signal(false);
   protected readonly provideDocumentsFailed = signal(false);
+  protected readonly selectedFile = signal<File | undefined>(undefined);
 
   submit(): void {
     this.submitting.set(true);
@@ -47,24 +48,44 @@ export class RegistrationPage {
     });
   }
 
-  provideDocuments(): void {
+  onFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.selectedFile.set(input.files?.[0] ?? undefined);
+  }
+
+  async provideDocuments(): Promise<void> {
     const reference = this.reference();
-    if (!reference) {
+    const file = this.selectedFile();
+    if (!reference || !file) {
       return;
     }
     this.providingDocuments.set(true);
     this.provideDocumentsFailed.set(false);
-    this.bff.postSelfServiceRegistrationsIdDocuments(reference).subscribe({
-      next: () => {
-        this.documentsProvided.set(true);
-        this.providingDocuments.set(false);
-      },
-      // Surface the failure instead of swallowing it: keep the action so the user can retry.
-      error: () => {
-        this.provideDocumentsFailed.set(true);
-        this.providingDocuments.set(false);
-      },
-    });
+    let contentBase64: string;
+    try {
+      contentBase64 = await readAsBase64(file);
+    } catch {
+      this.provideDocumentsFailed.set(true);
+      this.providingDocuments.set(false);
+      return;
+    }
+    this.bff
+      .postSelfServiceRegistrationsIdDocuments(reference, {
+        contentBase64,
+        fileName: file.name,
+        contentType: file.type || 'application/pdf',
+      })
+      .subscribe({
+        next: () => {
+          this.documentsProvided.set(true);
+          this.providingDocuments.set(false);
+        },
+        // Surface the failure instead of swallowing it: keep the action so the user can retry.
+        error: () => {
+          this.provideDocumentsFailed.set(true);
+          this.providingDocuments.set(false);
+        },
+      });
   }
 
   withdraw(): void {
@@ -87,3 +108,13 @@ export class RegistrationPage {
     });
   }
 }
+
+/** Read a file's bytes as a base64 string (without the `data:...;base64,` prefix). */
+function readAsBase64(file: File): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(((reader.result as string) ?? '').split(',', 2)[1] ?? '');
+    reader.onerror = () => reject(reader.error ?? new Error('Could not read the file.'));
+    reader.readAsDataURL(file);
+  });
+}