From 57f6f2f8d8cc5dfe4481427748b4ffabd8f9503b Mon Sep 17 00:00:00 2001
From: Edwin van den Houdt <eho@respellion.nl>
Date: Thu, 23 Jul 2026 08:05:40 +0200
Subject: [PATCH] =?UTF-8?q?style(registratie):=20WP-34=20=E2=80=94=20BRP?=
 =?UTF-8?q?=20address=20as=20datablock,=20phone=20in=20grey=20fieldset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restyle the contact-change form with house CIBG surfaces instead of hand-rolled
markup: the read-only BRP address now uses app-data-block/app-data-row (grey
datablock), and the phone field sits in a plain <fieldset> inside the existing
.form-horizontal form (inherits the CIBG grey box). No new CSS surfaces; row keys
reuse the address.* i18n ids. Logic/machine/specs unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../backlog/WP-34-adres-phone-brp-readonly.md |  2 +-
 .../change-request-form.component.ts          | 84 +++++++++++--------
 src/locale/messages.en.xlf                    |  8 ++
 src/locale/messages.xlf                       | 55 ++++++++----
 4 files changed, 94 insertions(+), 55 deletions(-)

diff --git a/docs/project/backlog/WP-34-adres-phone-brp-readonly.md b/docs/project/backlog/WP-34-adres-phone-brp-readonly.md
index f426113..747f196 100644
--- a/docs/project/backlog/WP-34-adres-phone-brp-readonly.md
+++ b/docs/project/backlog/WP-34-adres-phone-brp-readonly.md
@@ -5,7 +5,7 @@ Phase: 7 — refinements
 
 ## Why
 
-The "Mijn gegevens" screen let the user *edit* their address (straat/postcode/woonplaats) and
+The "Mijn gegevens" screen let the user _edit_ their address (straat/postcode/woonplaats) and
 submit it as an adreswijziging. But the BRP (Basisregistratie Personen) is the authority for a
 person's address — you change it at the municipality, not in a register self-service portal.
 This WP corrects that: the address is shown **read-only** (rendered from the BRP data the
diff --git a/src/app/registratie/ui/change-request-form/change-request-form.component.ts b/src/app/registratie/ui/change-request-form/change-request-form.component.ts
index d9a3385..f4d3a42 100644
--- a/src/app/registratie/ui/change-request-form/change-request-form.component.ts
+++ b/src/app/registratie/ui/change-request-form/change-request-form.component.ts
@@ -5,6 +5,8 @@ import { HeadingComponent } from '@shared/ui/heading/heading.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { FormFieldComponent } from '@shared/ui/form-field/form-field.component';
 import { TextInputComponent } from '@shared/ui/text-input/text-input.component';
+import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
+import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 import { Adres } from '@registratie/domain/person';
 import { createStore } from '@shared/application/store';
 import { whenTag } from '@shared/kernel/fp';
@@ -32,21 +34,20 @@ import { createSubmitChangeRequest } from '@registratie/application/submit-chang
     AlertComponent,
     FormFieldComponent,
     TextInputComponent,
+    DataBlockComponent,
+    DataRowComponent,
   ],
   styles: [
     `
-      .brp {
-        margin-block-end: var(--rhc-space-max-lg);
-      }
-      .brp dt {
-        font-weight: var(--rhc-text-font-weight-semi-bold);
-      }
-      .brp dd {
-        margin: 0 0 var(--rhc-space-max-sm) 0;
-      }
-      .brp .source {
+      .source {
         color: var(--rhc-color-grijs-700);
         font-size: var(--rhc-text-font-size-sm);
+        margin-block-end: var(--rhc-space-max-lg);
+      }
+      legend {
+        padding: 0;
+        font-weight: var(--rhc-text-font-weight-semi-bold);
+        margin-block-end: var(--rhc-space-max-md);
       }
     `,
   ],
@@ -68,14 +69,15 @@ import { createSubmitChangeRequest } from '@registratie/application/submit-chang
       <app-heading [level]="2" i18n="@@changeRequest.heading">Contactgegevens wijzigen</app-heading>
 
       @if (brpAdres(); as a) {
-        <dl class="brp app-section">
-          <dt i18n="@@changeRequest.brpAdresLabel">Adres (BRP)</dt>
-          <dd>{{ a.straat }}<br />{{ a.postcode }} {{ a.woonplaats }}</dd>
-          <dd class="source" i18n="@@changeRequest.brpAdresBron">
-            Uw adres komt uit de Basisregistratie Personen en kan hier niet worden gewijzigd. Wijzig
-            het bij uw gemeente.
-          </dd>
-        </dl>
+        <app-data-block class="app-section" [heading]="brpHeading" [level]="2">
+          <div app-data-row [key]="straatLabel" [value]="a.straat"></div>
+          <div app-data-row [key]="postcodeLabel" [value]="a.postcode"></div>
+          <div app-data-row [key]="woonplaatsLabel" [value]="a.woonplaats"></div>
+        </app-data-block>
+        <p class="source" i18n="@@changeRequest.brpAdresBron">
+          Uw adres komt uit de Basisregistratie Personen en kan hier niet worden gewijzigd. Wijzig
+          het bij uw gemeente.
+        </p>
       }
 
       <form (ngSubmit)="onSubmit()" class="form-horizontal app-section">
@@ -84,24 +86,27 @@ import { createSubmitChangeRequest } from '@registratie/application/submit-chang
             <span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span>
           </div>
         </div>
-        <app-form-field
-          i18n-label="@@changeRequest.telefoonLabel"
-          label="Telefoonnummer"
-          fieldId="cr-telefoon"
-          required
-          [error]="errors().telefoon"
-        >
-          <app-text-input
-            inputId="cr-telefoon"
-            [invalid]="!!errors().telefoon"
-            [ngModel]="telefoon()"
-            (ngModelChange)="dispatch({ tag: 'SetField', key: 'telefoon', value: $event })"
-            name="telefoon"
-            i18n-placeholder="@@changeRequest.telefoonPlaceholder"
-            placeholder="0612345678"
-            [ngModelOptions]="{ standalone: true }"
-          />
-        </app-form-field>
+        <fieldset>
+          <legend i18n="@@changeRequest.contactLegend">Contactgegevens</legend>
+          <app-form-field
+            i18n-label="@@changeRequest.telefoonLabel"
+            label="Telefoonnummer"
+            fieldId="cr-telefoon"
+            required
+            [error]="errors().telefoon"
+          >
+            <app-text-input
+              inputId="cr-telefoon"
+              [invalid]="!!errors().telefoon"
+              [ngModel]="telefoon()"
+              (ngModelChange)="dispatch({ tag: 'SetField', key: 'telefoon', value: $event })"
+              name="telefoon"
+              i18n-placeholder="@@changeRequest.telefoonPlaceholder"
+              placeholder="0612345678"
+              [ngModelOptions]="{ standalone: true }"
+            />
+          </app-form-field>
+        </fieldset>
 
         @if (failedError()) {
           <app-alert type="error"
@@ -136,6 +141,13 @@ export class ChangeRequestFormComponent {
   protected readonly submitLabel = $localize`:@@changeRequest.submit:Wijziging indienen`;
   protected readonly submitBezigLabel = $localize`:@@changeRequest.submitBezig:Bezig met indienen…`;
 
+  // Datablock heading + row keys (data-block/data-row take plain string inputs, so these
+  // are $localize fields, not template i18n). Row keys reuse the existing address.* ids.
+  protected readonly brpHeading = $localize`:@@changeRequest.brpAdresLabel:Adres (BRP)`;
+  protected readonly straatLabel = $localize`:@@address.straat:Straat en huisnummer`;
+  protected readonly postcodeLabel = $localize`:@@address.postcode:Postcode`;
+  protected readonly woonplaatsLabel = $localize`:@@address.woonplaats:Woonplaats`;
+
   private editing = computed(() => whenTag(this.state(), 'Editing'));
   protected errors = computed(() => this.editing()?.errors ?? {});
   protected failedError = computed(() => whenTag(this.state(), 'Failed')?.error ?? '');
diff --git a/src/locale/messages.en.xlf b/src/locale/messages.en.xlf
index 72a9edf..9a379b5 100644
--- a/src/locale/messages.en.xlf
+++ b/src/locale/messages.en.xlf
@@ -1318,6 +1318,14 @@
           <context context-type="linenumber">40,41</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="changeRequest.contactLegend" datatype="html">
+        <source>Contactgegevens</source>
+        <target datatype="html">Contact details</target>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">88</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="changeRequest.brpAdresLabel" datatype="html">
         <source>Adres (BRP)</source>
         <target datatype="html">Address (BRP)</target>
diff --git a/src/locale/messages.xlf b/src/locale/messages.xlf
index 52d5c3d..5b20e4e 100644
--- a/src/locale/messages.xlf
+++ b/src/locale/messages.xlf
@@ -17,7 +17,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">84,86</context>
+          <context context-type="linenumber">86,88</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/shared/layout/wizard-shell/wizard-shell.component.ts</context>
@@ -1688,7 +1688,7 @@
         <source>Voer een geldig telefoonnummer in, bijv. 0612345678.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/domain/value-objects/telefoonnummer.ts</context>
-          <context context-type="linenumber">18</context>
+          <context context-type="linenumber">21</context>
         </context-group>
       </trans-unit>
       <trans-unit id="validation.uren" datatype="html">
@@ -1753,6 +1753,10 @@
           <context context-type="sourcefile">src/app/registratie/ui/address-fields/address-fields.component.ts</context>
           <context context-type="linenumber">39,40</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">147</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="address.postcode" datatype="html">
         <source>Postcode</source>
@@ -1760,6 +1764,10 @@
           <context context-type="sourcefile">src/app/registratie/ui/address-fields/address-fields.component.ts</context>
           <context context-type="linenumber">55,56</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">148</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="address.postcodePlaceholder" datatype="html">
         <source>1234 AB</source>
@@ -1774,6 +1782,10 @@
           <context context-type="sourcefile">src/app/registratie/ui/address-fields/address-fields.component.ts</context>
           <context context-type="linenumber">73,74</context>
         </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">149</context>
+        </context-group>
       </trans-unit>
       <trans-unit id="address.legend" datatype="html">
         <source>Adres</source>
@@ -1786,70 +1798,77 @@
         <source> Uw wijziging is ontvangen (referentie <x id="INTERPOLATION" equiv-text="{{ referentie() }}"/>). U ontvangt binnen 5 werkdagen bericht. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">56,58</context>
+          <context context-type="linenumber">57,59</context>
         </context-group>
       </trans-unit>
       <trans-unit id="changeRequest.nieuwe" datatype="html">
         <source>Nieuwe wijziging doorgeven</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">64,66</context>
+          <context context-type="linenumber">65,67</context>
         </context-group>
       </trans-unit>
       <trans-unit id="changeRequest.heading" datatype="html">
         <source>Contactgegevens wijzigen</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">68,70</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="changeRequest.brpAdresLabel" datatype="html">
-        <source>Adres (BRP)</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">72,73</context>
+          <context context-type="linenumber">69,71</context>
         </context-group>
       </trans-unit>
       <trans-unit id="changeRequest.brpAdresBron" datatype="html">
         <source> Uw adres komt uit de Basisregistratie Personen en kan hier niet worden gewijzigd. Wijzig het bij uw gemeente. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">75,78</context>
+          <context context-type="linenumber">78,82</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="changeRequest.contactLegend" datatype="html">
+        <source>Contactgegevens</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">90,92</context>
         </context-group>
       </trans-unit>
       <trans-unit id="changeRequest.telefoonLabel" datatype="html">
         <source>Telefoonnummer</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">89,91</context>
+          <context context-type="linenumber">93,95</context>
         </context-group>
       </trans-unit>
       <trans-unit id="changeRequest.telefoonPlaceholder" datatype="html">
         <source>0612345678</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">101,102</context>
+          <context context-type="linenumber">105,106</context>
         </context-group>
       </trans-unit>
       <trans-unit id="changeRequest.failed" datatype="html">
         <source>Het indienen is niet gelukt:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">108,109</context>
+          <context context-type="linenumber">113,114</context>
         </context-group>
       </trans-unit>
       <trans-unit id="changeRequest.submit" datatype="html">
         <source>Wijziging indienen</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">136</context>
+          <context context-type="linenumber">141</context>
         </context-group>
       </trans-unit>
       <trans-unit id="changeRequest.submitBezig" datatype="html">
         <source>Bezig met indienen…</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
-          <context context-type="linenumber">137</context>
+          <context context-type="linenumber">142</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="changeRequest.brpAdresLabel" datatype="html">
+        <source>Adres (BRP)</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/registratie/ui/change-request-form/change-request-form.component.ts</context>
+          <context context-type="linenumber">146</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dashboard.heading" datatype="html">