feat(site): Mijn Zuiddrecht: the sign-in page of the design and the own area under the portal's name

[rubenvdlinde]

What this adds

"Mijn Zuiddrecht" for the Zuiddrecht example site: the sign-in page of the approved Inloggen board, and the resident's own area under the name on the button.

OpenSpec change: example-site-zuiddrecht (two requirements added).

• The sign-in cards in lib/Settings/sites/zuiddrecht.json: "Als inwoner" with DigiD and "Namens een bedrijf" with eHerkenning, the heading "Inloggen op Mijn Zuiddrecht", the introduction and the notice "Geen DigiD?". All text is the board's. The page itself is feat(site): the header, footer, sign-in page and motif of the school designs #1202's SignInPage.
• The own area carries the portal's name. A portal that names its account button ("Mijn Zuiddrecht") now gets that name in the breadcrumb, the resident menu, the header link and the tab title, where the site said "Mijn omgeving". One translator wrapper, withAreaName. A portal without accountLabel gets the translator back unchanged.

What a resident sees after signing in

Nothing in this PR builds those pages: the portal already draws them from what the installed apps contribute. With dossiq on the instance that is the overview, "Mijn zaken" and the page of one case. Read in dossiq's contribution on its development branch: the case list with case number, subject, status and "Uiterlijk klaar op", and the case page with its steps, its details ("Zaaknummer", "Onderwerp", "Status", "Toelichting op de status", "Gestart op", "Uiterlijk klaar op") and its documents. Those are the labels of the MijnZaken and Zaak boards.

Depends on

Nothing open. #1206 is merged (squash 41adb1c8) and development is merged into this branch, so the diff is this change only: 8 files. thematiq #1099 is merged too.

The install never changes a portal that exists. A site installed before this change gets the cards after a remove and a new install.

Also in this PR

• A breadcrumb keeps its own room under the menu line. The rule that makes room for the motif replaced the breadcrumb bar's own padding with the motif's height, so the trail stood against the line (seen on the live check, on the waste page and the sign-in page). A bar with a trail now gets both: 16px between the line and the trail on Zuiddrecht. A page without a trail, such as the home page, is unchanged (measured 5px before and after).
• Docs: from a source checkout the public site needs its own build (webpack --config webpack.site.js); npm run dev builds the admin screens only.

Verified

On head 168033eb, after development was merged in.

• tests/example-site.spec.mjs: 13 pass (three tests of this change: the sign-in cards against the board, the name of the own area through the real accountCrumbs and ownAreaLink, the breadcrumb rule).
• Each of the 113 checks of check:specs run on its own, without a build in js/: 113 pass.
• PHPUnit for the example site: 24 tests green, exit 0.
• npm run lint exit 0, format exit 0, stylelint exit 0.
• hydra gates (base origin/development): exit 0, all 86 applicable gates passed and ran.
• composer check:strict not run: this change holds no PHP file.

Seen live

By the coordinator on a throwaway Nextcloud with OpenRegister, on head 95c7736c of this branch: after remove and install, the "Mijn Zuiddrecht" button opens "Inloggen op Mijn Zuiddrecht" with both cards and the notice, and the breadcrumb reads "Home", "Mijn Zuiddrecht".

The breadcrumb room was added after that check. It was measured in the lane's preview (this branch's CSS, the content API answered through the real PortalShell): 16px on the waste page and the sign-in page, 5px on the home page as before.

Not seen: anything signed in. The overview, the case list and the case page need an instance with dossiq, a resident account and cases.

Still to check live

Sign in as a resident with a case in dossiq (on a test instance: occ config:app:set portaliq dev_login_enabled --value=yes). Expect the resident menu and the breadcrumb under the name "Mijn Zuiddrecht", "Mijn zaken" with the case, and its page with steps and details. And one page with a trail: the trail stands 16px under the red line.

Follow-up, not in this PR

The check marks on the home page's "Mijn Zuiddrecht" card are red on the deep blue. The card draws them in the set's accent, which suits the school sets (yellow on dark) and not Zuiddrecht. It needs a token in thematiq for a mark on a dark card, and one line in NlSignIn.vue that reads it before the accent. The marks are decoration; the text beside them is white on #234A78, 9.04:1.

Left out of the design, and why

• "Goedemiddag, Sanne", "Wat u nog moet doen" and the case cards with a progress bar on the overview: the greeting and highlight blocks exist since feat(site): Mijn omgeving displays for the school portals: greeting, highlight tasks, dated rows, bars, chips, segmented hours, calendar tiles #1198, and an app has to declare them in its contribution. That is dossiq's side.
• Menu groups "Zaken en taken", "Openbare informatie", "Vragen en meldingen", "Uw gegevens" with counts: groups come from each app's pages; counts are feat(site): the resident menu lists children with a subtitle, counts and the organisation card #1203.
• "Lopend" and "Afgerond" tabs on Mijn zaken, the "Een vraag over deze zaak?" form, and adding a document from the case page: whatever dossiq's contribution offers shows; this PR adds none.
• Demo residents and demo cases: this site ships no accounts and no case data.

🤖 Generated with Claude Code

[github-actions]

Quality Report — ConductionNL/portaliq @ 911377b

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
build		✅
check-specs		❌
check-manifest		✅
format		✅
check-l10n-js		✅
check-schema-l10n		❌
check-reuse		✅
composer			✅	✅ 108/108
npm			✅	✅ 984/984
app:check-code	⏭️
info.xml	✅
REUSE	✅
lockfile sync		✅
PHPUnit					✅
Newman					✅
Playwright					⏭️ deferred: E2E runs locally and on the promotion path only. This pull request targets development, so the suite is asked once per promotion into beta and main rather than once per push per open pull request. Run it locally with npx playwright test, or from the Actions tab on a branch with no open pull request into development.
Hydra gates					❌

---

Quality workflow — 2026-10-05 17:57 UTC

Download the full PDF report from the workflow artifacts.

[github-actions]

Quality Report — ConductionNL/portaliq @ b5e1866

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	✅
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		✅
stylelint		✅
build		✅
check-specs		✅
check-manifest		✅
format		✅
check-l10n-js		✅
check-schema-l10n		✅
check-reuse		✅
composer			✅	✅ 108/108
npm			✅	✅ 984/984
app:check-code	⏭️
info.xml	✅
REUSE	✅
lockfile sync		✅
PHPUnit					✅
Newman					✅
Playwright					⏭️ deferred: E2E runs locally and on the promotion path only. This pull request targets development, so the suite is asked once per promotion into beta and main rather than once per push per open pull request. Run it locally with npx playwright test, or from the Actions tab on a branch with no open pull request into development.
Hydra gates					✅

---

Quality workflow — 2026-10-05 22:05 UTC

Download the full PDF report from the workflow artifacts.