atomic-design-poc/apps/ssp/src/app/showcase/pii.section.ts

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
import { TextInputComponent } from '@shared/ui/atoms/text-input/text-input.component';
import { MaskedValueComponent } from '@shared/ui/atoms/masked-value/masked-value.component';
import { parseBsn } from '@shared/kernel/bsn';
import { maskBsn } from '@shared/kernel/pii';
import { ConceptCardComponent } from './concept-card.component';
import { SNIPPETS } from './snippets.generated';
import { highlightTs } from './highlight-ts';

/** Section 6: PII — masking and parsing. A BSN (Dutch citizen service number) is
    special-category personal data (GDPR art. 9): masked by default, revealed only after
    a logged action; "parse, don't validate" on the most sensitive field — a pure function
    enforces the checksum. Composition-only. The ok/err result nests its own
    `<app-concept-card>` for its label, for the same reason section 2 does. */
@Component({
  selector: 'app-concepts-pii-section',
  imports: [
    FormsModule,
    HeadingComponent,
    TextInputComponent,
    MaskedValueComponent,
    ConceptCardComponent,
  ],
  template: `
    <section class="app-section">
      <app-heading [level]="2">6 · PII — maskeren & parsen</app-heading>
      <p class="app-lead">
        Een BSN is bijzondere persoonsgegevens (AVG art. 9). Dataminimalisatie: standaard gemaskeerd
        tonen, alleen tonen na een vastgelegde handeling; en"parse, don't validate" op het
        gevoeligste veld — een pure functie die de <em>elfproef</em> afdwingt.
      </p>
      <div class="app-cols">
        <app-concept-card
          variant="good"
          tag="Maskeren — atom"
          [code]="code['mask']"
          [src]="src['mask']"
        >
          <p>
            BSN:
            <app-masked-value
              [value]="bsnShown()"
              [canReveal]="true"
              revealLabel="Toon BSN"
              (reveal)="bsnRevealed.set(true)"
            />
          </p>
          <p class="app-note">
            Standaard gemaskeerd; het echte tonen is step-up-geverifieerd én vastgelegd (zie het
            behandelscherm). De atom bevat de maskeer-detectie — geen los <code>*</code>-gesnuffel
            bij elke gebruiker.
          </p>
        </app-concept-card>
        <app-concept-card
          tag="Parse (elfproef) → Result"
          [code]="code['parseBsn']"
          [src]="src['parseBsn']"
        >
          <app-text-input
            inputId="bsn"
            [ngModel]="bsnRaw()"
            (ngModelChange)="bsnRaw.set($event)"
            name="bsn"
            placeholder="Typ een BSN, bijv. 123456782"
          />
          @let b = bsnParsed();
          @if (bsnRaw()) {
            <div animate.enter="app-item-enter">
              <app-concept-card [variant]="b.ok ? 'good' : 'bad'" [tag]="b.ok ? 'ok' : 'err'">
                @if (b.ok) {
                  <pre class="app-code">Bsn ="{{ b.value }}"</pre>
                } @else {
                  <pre class="app-code">{{ b.error }}</pre>
                }
              </app-concept-card>
            </div>
          }
        </app-concept-card>
      </div>
    </section>
  `,
})
export class PiiSection {
  // Masked-by-default value that reveals locally (the real reveal is step-up-gated +
  // audited elsewhere); plus a live elfproef parse mirroring the postcode demo.
  demoBsn = '123456782';
  bsnRevealed = signal(false);
  bsnShown = computed(() => (this.bsnRevealed() ? this.demoBsn : maskBsn(this.demoBsn)));
  bsnRaw = signal('');
  bsnParsed = computed(() => parseBsn(this.bsnRaw()));

  protected readonly code: Record<string, string> = {
    mask: highlightTs(SNIPPETS['mask']),
    parseBsn: highlightTs(SNIPPETS['parseBsn']),
  };
  protected readonly src: Record<string, string> = {
    mask: 'shared/kernel/pii.ts',
    parseBsn: 'shared/kernel/bsn.ts',
  };
}