@seifer-webapp-factory/authorization 0.1.0

package/dist/scaffolder/index.js

@@ -0,0 +1,24 @@
+/**
+ * scaffolder (authorization) — de version-aware materializer van de authorization-capability-module.
+ *
+ * Composeert het manifest (US-Z0801/0802) tot een werkende generate + upgrade-merge, en levert de
+ * divergentie-ladder niveau 1–3 (configureren, uitbreiden, materialiseren & mergen). Nieuw t.o.v. de
+ * authentication-tier: de module→module presence-check (US-Z0803), want dit is de eerste module die
+ * van een ándere capability-module afhangt. Alle core-functies zijn puur/deterministisch; het
+ * wegschrijven en inlezen gaat via een geïnjecteerde fs-port. Geen module-globale mutable state, geen
+ * echt filesystem. Dit is een build/dev-tool, geen runtime-mechanisme.
+ */
+export { createMemoryFsPort } from './core/ports.js';
+// Materialize (US-Z0803): surface stampen + all-or-nothing collision-refusal.
+export { materializeAuthzModule, stampedVersions } from './core/materialize.js';
+// Three-way-merge / upgrade (US-Z0804 / US-Z1004).
+export { mergeSurface, upgradeSurface } from './core/three-way-merge.js';
+// Presence-check (US-Z0803): module→module-afhankelijkheid.
+export { checkRequiredModules, assertAssemblable } from './core/presence.js';
+// Configure (US-Z1001): niveau-1-divergentie.
+export { resolveAuthzConfig, filterSurfaceByConfig, authzConfigSchema } from './core/config.js';
+// Extend (US-Z1002): niveau-2-divergentie (additief).
+export { definePermissionExtension, createPolicyHookRegistry, defineRelationResolver, } from './core/extend.js';
+// Fouten.
+export { AuthzMaterializationConflictError, MissingRequiredPortError, MissingRequiredModuleError, AuthzConfigValidationError, } from './core/errors.js';
+//# sourceMappingURL=index.js.map

package/dist/scaffolder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../scaffolder/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,8EAA8E;AAC9E,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQhF,mDAAmD;AACnD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAazE,4DAA4D;AAC5D,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAG7E,8CAA8C;AAC9C,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOhG,sDAAsD;AACtD,OAAO,EACL,yBAAyB,EACzB,wBAAwB,EACxB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC;AAW1B,UAAU;AACV,OAAO,EACL,iCAAiC,EACjC,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,kBAAkB,CAAC"}

package/frontend/templates/components/PermissionMatrix.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+/**
+ * US-Z0205/US-Z0903 — PermissionMatrix (surface, design-system-agnostisch, herbruikbaar). Een
+ * toegankelijke, gelabelde `<table>` die de code-declared permissie-catalogus (US-Z0203/US-Z0104)
+ * als rijen toont met per rij een echte, toetsenbord-bedienbare checkbox-toggle. De component houdt
+ * géén eigen bron aan: hij krijgt de catalogus (`permissions`) en de geselecteerde sleutels
+ * (`modelValue`) via props en emit `update:modelValue` bij een wijziging (v-model-vorm) — geen
+ * transport, geen validatie (dat is de grens van de contract-client + forms-kit).
+ *
+ * Toegankelijkheid (P-UX, US-Z0205 AC2) is een invariant:
+ *  - correct gelabelde tabel met `<caption>` en `scope`-gekoppelde rij-/kolom-headers;
+ *  - elke toggle is een echte, met Tab bereikbare en met Space/Enter schakelbare checkbox met een
+ *    eigen `<label>` (visueel verborgen) én een `aria-describedby` naar de omschrijvingscel;
+ *  - elke gewijzigde toggle-status wordt via een `aria-live`-regio aangekondigd (geen kale sleutel).
+ */
+import { computed, ref } from 'vue';
+import type { Permission } from '../../contract/index.js';
+import { useTranslate } from '../runtime.js';
+
+const props = withDefaults(
+  defineProps<{
+    /** De permissie-catalogus (rijen). Sleutels zijn stabiel; omschrijvingen zijn menselijke tekst. */
+    permissions: readonly Permission[];
+    /** De geselecteerde permissie-sleutels (v-model). */
+    modelValue: readonly string[];
+    /** Presentatie-vlag: schakelt de toggles uit (bv. tijdens opslaan). */
+    disabled?: boolean;
+  }>(),
+  { disabled: false },
+);
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string[]): void;
+}>();
+
+const t = useTranslate();
+
+/** Snelle lookup van de geselecteerde sleutels (deny-by-default: onbekend => niet toegekend). */
+const selected = computed(() => new Set(props.modelValue));
+
+/** De laatst aangekondigde wijziging (screenreader-feedback via `aria-live`). */
+const announcement = ref('');
+
+function isGranted(key: string): boolean {
+  return selected.value.has(key);
+}
+
+/** Zet een permissie-toggle om en emit de nieuwe set; kondigt de wijziging toegankelijk aan. */
+function toggle(key: string): void {
+  if (props.disabled) return;
+  const next = new Set(props.modelValue);
+  if (next.has(key)) {
+    next.delete(key);
+    announcement.value = t('authz.matrix.announceRevoked', { permission: key });
+  } else {
+    next.add(key);
+    announcement.value = t('authz.matrix.announceGranted', { permission: key });
+  }
+  emit('update:modelValue', [...next]);
+}
+
+/** Stabiele, unieke id per checkbox (voor `<label for>`-koppeling). */
+function checkId(key: string): string {
+  return `authz-perm-${key}`;
+}
+/** Stabiele id per omschrijvingscel (voor `aria-describedby`). */
+function descId(key: string): string {
+  return `authz-perm-desc-${key}`;
+}
+</script>
+
+<template>
+  <div class="authz-matrix">
+    <table class="authz-matrix__table">
+      <caption class="authz-matrix__caption">{{ t('authz.matrix.caption') }}</caption>
+      <thead>
+        <tr>
+          <th scope="col" class="authz-matrix__col authz-matrix__col--permission">
+            {{ t('authz.matrix.colPermission') }}
+          </th>
+          <th scope="col" class="authz-matrix__col authz-matrix__col--description">
+            {{ t('authz.matrix.colDescription') }}
+          </th>
+          <th scope="col" class="authz-matrix__col authz-matrix__col--granted">
+            {{ t('authz.matrix.colGranted') }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="permissions.length === 0" class="authz-matrix__empty-row">
+          <td colspan="3" class="authz-matrix__empty">{{ t('authz.matrix.empty') }}</td>
+        </tr>
+        <tr
+          v-for="permission in permissions"
+          :key="permission.key"
+          class="authz-matrix__row"
+        >
+          <th scope="row" class="authz-matrix__key">
+            <code>{{ permission.key }}</code>
+          </th>
+          <td :id="descId(permission.key)" class="authz-matrix__description">
+            {{ permission.description }}
+          </td>
+          <td class="authz-matrix__cell">
+            <label class="authz-matrix__label" :for="checkId(permission.key)">
+              <span class="authz-matrix__label-text">
+                {{ t('authz.matrix.toggle', { permission: permission.key }) }}
+              </span>
+            </label>
+            <input
+              :id="checkId(permission.key)"
+              class="authz-matrix__checkbox"
+              type="checkbox"
+              :checked="isGranted(permission.key)"
+              :disabled="disabled"
+              :aria-describedby="descId(permission.key)"
+              :data-testid="`authz-perm-${permission.key}`"
+              @change="toggle(permission.key)"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <p
+      class="authz-matrix__announce"
+      role="status"
+      aria-live="polite"
+      data-testid="authz-matrix-announce"
+    >
+      {{ announcement }}
+    </p>
+  </div>
+</template>

package/frontend/templates/i18n/en.json

@@ -0,0 +1,61 @@
+{
+  "authz.roles.title": "Roles",
+  "authz.roles.subtitle": "Manage roles, their permissions and the role hierarchy.",
+  "authz.roles.new": "New role",
+  "authz.roles.colKey": "Key",
+  "authz.roles.colName": "Name",
+  "authz.roles.colPermissions": "Permissions",
+  "authz.roles.colParent": "Parent role",
+  "authz.roles.empty": "No roles have been created yet.",
+  "authz.roles.loading": "Loading roles…",
+  "authz.roles.noPermissions": "No permissions",
+  "authz.roles.noParent": "—",
+
+  "authz.role.title": "New role",
+  "authz.role.editTitle": "Edit role",
+  "authz.role.key": "Key",
+  "authz.role.keyHint": "Lowercase letters, digits and hyphens, for example content-editor.",
+  "authz.role.name": "Name",
+  "authz.role.permissions": "Permissions",
+  "authz.role.parent": "Parent role",
+  "authz.role.parentNone": "No parent role",
+  "authz.role.save": "Save",
+  "authz.role.saving": "Saving…",
+  "authz.role.saved": "The role has been saved.",
+  "authz.role.back": "Back to roles",
+
+  "authz.matrix.caption": "Permission matrix: tick which permissions this role receives.",
+  "authz.matrix.colPermission": "Permission",
+  "authz.matrix.colDescription": "Description",
+  "authz.matrix.colGranted": "Granted",
+  "authz.matrix.toggle": "Grant permission {permission} to this role",
+  "authz.matrix.empty": "The permission catalog has not been loaded yet.",
+  "authz.matrix.announceGranted": "Permission {permission} granted.",
+  "authz.matrix.announceRevoked": "Permission {permission} revoked.",
+
+  "authz.assign.title": "Assign access",
+  "authz.assign.subtitle": "Assign roles to a subject or revoke them.",
+  "authz.assign.subjectId": "Subject id",
+  "authz.assign.subjectIdHint": "The unique id of the user or subject.",
+  "authz.assign.load": "Load roles",
+  "authz.assign.role": "Role",
+  "authz.assign.assign": "Assign",
+  "authz.assign.revoke": "Revoke",
+  "authz.assign.currentRoles": "Current roles",
+  "authz.assign.noRoles": "This subject has no roles yet.",
+  "authz.assign.assigned": "The role has been assigned.",
+  "authz.assign.revoked": "The role has been revoked.",
+  "authz.assign.selectRole": "Choose a role…",
+
+  "authz.error.forbidden": "You are not allowed to perform this action.",
+  "authz.error.role_not_found": "This role no longer exists.",
+  "authz.error.permission_unknown": "One or more permissions are unknown in the catalog.",
+  "authz.error.role_cycle": "This change would create a cycle in the role hierarchy.",
+  "authz.error.assignment_exists": "This subject already has this role.",
+  "authz.error.self_lockout": "This change would lock you out of your own management access.",
+  "authz.error.escalation_denied": "You cannot grant rights that you do not hold yourself.",
+  "authz.error.invalid_relation": "The provided relation is invalid.",
+  "authz.error.unauthenticated": "You are no longer signed in. Please sign in again.",
+  "authz.error.validation_failed": "Please check the details you entered and try again.",
+  "authz.error.unknown": "Something went wrong. Please try again later."
+}

package/frontend/templates/i18n/nl.json

@@ -0,0 +1,61 @@
+{
+  "authz.roles.title": "Rollen",
+  "authz.roles.subtitle": "Beheer rollen, hun permissies en de rol-hiërarchie.",
+  "authz.roles.new": "Nieuwe rol",
+  "authz.roles.colKey": "Sleutel",
+  "authz.roles.colName": "Naam",
+  "authz.roles.colPermissions": "Permissies",
+  "authz.roles.colParent": "Bovenliggende rol",
+  "authz.roles.empty": "Er zijn nog geen rollen aangemaakt.",
+  "authz.roles.loading": "Rollen laden…",
+  "authz.roles.noPermissions": "Geen permissies",
+  "authz.roles.noParent": "—",
+
+  "authz.role.title": "Nieuwe rol",
+  "authz.role.editTitle": "Rol bewerken",
+  "authz.role.key": "Sleutel",
+  "authz.role.keyHint": "Kleine letters, cijfers en koppeltekens, bijvoorbeeld content-editor.",
+  "authz.role.name": "Naam",
+  "authz.role.permissions": "Permissies",
+  "authz.role.parent": "Bovenliggende rol",
+  "authz.role.parentNone": "Geen bovenliggende rol",
+  "authz.role.save": "Opslaan",
+  "authz.role.saving": "Bezig met opslaan…",
+  "authz.role.saved": "De rol is opgeslagen.",
+  "authz.role.back": "Terug naar rollen",
+
+  "authz.matrix.caption": "Permissie-matrix: kruis aan welke permissies deze rol krijgt.",
+  "authz.matrix.colPermission": "Permissie",
+  "authz.matrix.colDescription": "Omschrijving",
+  "authz.matrix.colGranted": "Toegekend",
+  "authz.matrix.toggle": "Permissie {permission} toekennen aan deze rol",
+  "authz.matrix.empty": "De permissie-catalogus is nog niet geladen.",
+  "authz.matrix.announceGranted": "Permissie {permission} toegekend.",
+  "authz.matrix.announceRevoked": "Permissie {permission} ingetrokken.",
+
+  "authz.assign.title": "Toegang toewijzen",
+  "authz.assign.subtitle": "Ken rollen toe aan een subject of trek ze in.",
+  "authz.assign.subjectId": "Subject-id",
+  "authz.assign.subjectIdHint": "De unieke id van de gebruiker of het subject.",
+  "authz.assign.load": "Rollen laden",
+  "authz.assign.role": "Rol",
+  "authz.assign.assign": "Toewijzen",
+  "authz.assign.revoke": "Intrekken",
+  "authz.assign.currentRoles": "Huidige rollen",
+  "authz.assign.noRoles": "Dit subject heeft nog geen rollen.",
+  "authz.assign.assigned": "De rol is toegewezen.",
+  "authz.assign.revoked": "De rol is ingetrokken.",
+  "authz.assign.selectRole": "Kies een rol…",
+
+  "authz.error.forbidden": "Je hebt geen toegang tot deze actie.",
+  "authz.error.role_not_found": "Deze rol bestaat niet (meer).",
+  "authz.error.permission_unknown": "Een of meer permissies zijn onbekend in de catalogus.",
+  "authz.error.role_cycle": "Deze wijziging zou een lus in de rol-hiërarchie veroorzaken.",
+  "authz.error.assignment_exists": "Dit subject heeft deze rol al.",
+  "authz.error.self_lockout": "Deze wijziging zou je eigen beheertoegang blokkeren.",
+  "authz.error.escalation_denied": "Je kunt geen rechten toekennen die je zelf niet hebt.",
+  "authz.error.invalid_relation": "De opgegeven relatie is ongeldig.",
+  "authz.error.unauthenticated": "Je bent niet (meer) ingelogd. Log opnieuw in.",
+  "authz.error.validation_failed": "Controleer de ingevulde gegevens en probeer het opnieuw.",
+  "authz.error.unknown": "Er ging iets mis. Probeer het later opnieuw."
+}

package/frontend/templates/middleware/permission.ts

@@ -0,0 +1,54 @@
+/**
+ * US-Z0503 — Route-middleware `permission` (surface, gematerialiseerd, Nuxt). Gate't de
+ * `/admin/*`-beheerroutes op `authz.manage` door de pinned `permissionGuard` (mechanism, uit de
+ * access-control-kit) te composeren tegen de door de plugin geprovide evaluator (`$authzEvaluator`,
+ * gehydrateerd uit `/authz/me/permissions`, US-Z0405). Deny-by-default (US-Z0701): zonder evaluator
+ * of zonder de permissie volgt de redirect-policy — anoniem => `/login` (met terugkeer-parameter),
+ * geauthenticeerd-maar-onvoldoende => `/403`. Geen module-globale state; elke navigatie wordt vers
+ * geëvalueerd.
+ *
+ * Gebruik op een pagina: `definePageMeta({ middleware: 'permission' })`, of globaal voor `/admin/*`.
+ */
+import { createRedirectPolicy, permissionGuard } from '../../src/index.js';
+import type { PermissionEvaluator } from '../../src/index.js';
+
+// Nuxt auto-imports (host-context).
+declare const defineNuxtRouteMiddleware: (
+  fn: (
+    to: { path: string; fullPath: string; meta: Record<string, unknown> },
+    from: { path: string; fullPath: string; meta: Record<string, unknown> },
+  ) => unknown,
+) => unknown;
+declare const useNuxtApp: () => {
+  $authzEvaluator?: PermissionEvaluator;
+  $authIsAuthenticated?: () => boolean;
+};
+declare const navigateTo: (to: unknown) => unknown;
+
+export default defineNuxtRouteMiddleware((to, from) => {
+  // Alleen de beheer-routes bewaken; overige routes ongemoeid laten.
+  if (!to.path.startsWith('/admin')) return;
+
+  const nuxt = useNuxtApp();
+  const evaluator = nuxt.$authzEvaluator;
+  const isAuthenticated = nuxt.$authIsAuthenticated ?? (() => false);
+
+  // Nog geen evaluator (plugin niet gebootstrapt): deny-by-default naar login.
+  if (evaluator === undefined) {
+    return navigateTo({ path: '/login', query: { redirect: to.fullPath } });
+  }
+
+  const guard = permissionGuard('authz.manage', {
+    evaluator,
+    isAuthenticated,
+    redirect: createRedirectPolicy({ forbidden: '/403', login: '/login', returnParam: 'redirect' }),
+  });
+
+  const decision = guard(
+    to as unknown as Parameters<ReturnType<typeof permissionGuard>>[0],
+    from as unknown as Parameters<ReturnType<typeof permissionGuard>>[1],
+  );
+  if (decision !== true && decision !== undefined) {
+    return navigateTo(decision);
+  }
+});

package/frontend/templates/pages/access-assignments.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+/**
+ * US-Z0304/US-Z0305 — Access-assignments-pagina (surface, gematerialiseerd, mag divergeren). Kiest
+ * een subject, laadt zijn rollen via `useAssignments().loadSubject` (mechanism) over de getypte
+ * contract-client (US-Z0105) tegen `GET /authz/subjects/:id/roles`, en kent rollen toe of trekt ze
+ * in (`POST`/`DELETE /authz/assignments`). De rollen-dropdown wordt gevuld via `useRoles`
+ * (`GET /authz/roles`). Security-invarianten aan de UI-kant: `escalation_denied` (geen
+ * rechten-escalatie, US-Z0302/US-Z0701) en `self_lockout` (eigen beheertoegang niet blokkeren,
+ * US-Z0303/US-Z0702) worden — net als elke taxonomie-fout (US-Z0102) — via i18n vertaald en in een
+ * `aria-live`-regio aangekondigd, zonder policy-detail te lekken. Geen eigen transport.
+ */
+import { computed, onMounted, ref } from 'vue';
+import { useAssignments, useRoles } from '../../src/composables.js';
+import { useOptionalToasts, useTranslate } from '../runtime.js';
+
+const t = useTranslate();
+const notifySuccess = useOptionalToasts();
+const assignments = useAssignments();
+const roles = useRoles();
+
+const subjectId = ref('');
+const selectedRoleId = ref('');
+/** Het subject waarvoor de rollen momenteel getoond worden (na een geslaagde load). */
+const loadedSubject = ref('');
+/** Laatste geslaagde mutatie-melding (toegankelijk aangekondigd). */
+const notice = ref('');
+
+onMounted(async () => {
+  await roles.refresh();
+});
+
+/** Vertaalde, veilige serverfout (of leeg). */
+const submitError = computed(() => (assignments.error.value !== null ? t(assignments.error.value) : ''));
+const hasSubject = computed(() => loadedSubject.value !== '');
+
+async function onLoad(): Promise<void> {
+  notice.value = '';
+  await assignments.loadSubject(subjectId.value);
+  if (assignments.error.value === null) loadedSubject.value = subjectId.value;
+}
+
+async function onAssign(): Promise<void> {
+  notice.value = '';
+  if (selectedRoleId.value === '' || loadedSubject.value === '') return;
+  const ok = await assignments.assign({ subjectId: loadedSubject.value, roleId: selectedRoleId.value });
+  if (!ok) return;
+  notice.value = t('authz.assign.assigned');
+  notifySuccess?.(notice.value);
+  await assignments.loadSubject(loadedSubject.value);
+}
+
+async function onRevoke(): Promise<void> {
+  notice.value = '';
+  if (selectedRoleId.value === '' || loadedSubject.value === '') return;
+  const ok = await assignments.revoke({ subjectId: loadedSubject.value, roleId: selectedRoleId.value });
+  if (!ok) return;
+  notice.value = t('authz.assign.revoked');
+  notifySuccess?.(notice.value);
+  await assignments.loadSubject(loadedSubject.value);
+}
+</script>
+
+<template>
+  <section class="authz-page authz-page--assignments">
+    <header class="authz-page__header">
+      <h1 class="authz-page__title">{{ t('authz.assign.title') }}</h1>
+      <p class="authz-page__subtitle">{{ t('authz.assign.subtitle') }}</p>
+    </header>
+
+    <p
+      v-if="submitError"
+      class="authz-page__error"
+      role="alert"
+      aria-live="assertive"
+      data-testid="authz-assign-error"
+    >
+      {{ submitError }}
+    </p>
+
+    <p
+      v-if="notice"
+      class="authz-page__status"
+      role="status"
+      aria-live="polite"
+      data-testid="authz-assign-notice"
+    >
+      {{ notice }}
+    </p>
+
+    <form class="authz-form authz-form--subject" novalidate @submit.prevent="onLoad">
+      <div class="authz-field">
+        <label class="authz-field__label" for="authz-subject-id">{{ t('authz.assign.subjectId') }}</label>
+        <input
+          id="authz-subject-id"
+          v-model="subjectId"
+          class="authz-field__input"
+          type="text"
+          required
+          aria-describedby="authz-subject-id-hint"
+        />
+        <p id="authz-subject-id-hint" class="authz-field__hint">{{ t('authz.assign.subjectIdHint') }}</p>
+      </div>
+      <button class="authz-form__submit" type="submit">{{ t('authz.assign.load') }}</button>
+    </form>
+
+    <div v-if="hasSubject" class="authz-assign__panel">
+      <form class="authz-form authz-form--assign" novalidate @submit.prevent="onAssign">
+        <div class="authz-field">
+          <label class="authz-field__label" for="authz-assign-role">{{ t('authz.assign.role') }}</label>
+          <select
+            id="authz-assign-role"
+            v-model="selectedRoleId"
+            class="authz-field__input"
+          >
+            <option value="">{{ t('authz.assign.selectRole') }}</option>
+            <option v-for="role in roles.roles.value" :key="role.id" :value="role.id">
+              {{ role.name }}
+            </option>
+          </select>
+        </div>
+        <div class="authz-form__actions">
+          <button class="authz-form__submit" type="submit" :disabled="selectedRoleId === ''">
+            {{ t('authz.assign.assign') }}
+          </button>
+          <button
+            class="authz-form__revoke"
+            type="button"
+            :disabled="selectedRoleId === ''"
+            @click="onRevoke"
+          >
+            {{ t('authz.assign.revoke') }}
+          </button>
+        </div>
+      </form>
+
+      <section class="authz-assign__current" aria-labelledby="authz-assign-current-title">
+        <h2 id="authz-assign-current-title" class="authz-assign__subtitle">
+          {{ t('authz.assign.currentRoles') }}
+        </h2>
+        <p v-if="assignments.subjectRoles.value.length === 0" class="authz-assign__empty">
+          {{ t('authz.assign.noRoles') }}
+        </p>
+        <ul v-else class="authz-assign__roles">
+          <li v-for="role in assignments.subjectRoles.value" :key="role.id">
+            {{ role.name }} (<code>{{ role.key }}</code>)
+          </li>
+        </ul>
+      </section>
+    </div>
+  </section>
+</template>

package/frontend/templates/pages/role-editor.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+/**
+ * US-Z0205 — Role-editor + permissie-matrix (surface, gematerialiseerd, mag divergeren). Bewerkt of
+ * maakt een rol via de pinned `useRoles`-composable (mechanism) over de getypte contract-client
+ * (US-Z0105) tegen `POST`/`PATCH /authz/roles`. Het hart is de toegankelijke `PermissionMatrix`,
+ * gevuld uit de code-declared permissie-catalogus (`GET /authz/permissions`, US-Z0203). Een
+ * parent-role-select stelt de rol-hiërarchie in. Serverfoutcodes uit de taxonomie (US-Z0102) —
+ * o.a. `permission_unknown`/`role_cycle` — worden via i18n vertaald en in een `aria-live`-regio
+ * aangekondigd (nooit rauwe details, no-catalog-leak). Geen eigen transport of validatiemechanisme.
+ *
+ * Design-system-agnostisch: plain semantische HTML; de host swapt zijn componenten in.
+ */
+import { computed, onMounted, ref } from 'vue';
+import type { Role } from '../../../contract/index.js';
+import { useRoles } from '../../src/composables.js';
+import PermissionMatrix from '../components/PermissionMatrix.vue';
+import { readQueryParam, useNavigate, useOptionalToasts, useTranslate } from '../runtime.js';
+
+const t = useTranslate();
+const navigate = useNavigate();
+const notifySuccess = useOptionalToasts();
+const roles = useRoles();
+
+/** Bewerk-modus: de rol-id komt uit de `?id=`-query. Leeg => aanmaak-modus. */
+const editingId = ref<string>(readQueryParam('id'));
+const isEditing = computed(() => editingId.value !== '');
+
+/** Formulier-velden. `key` is alleen bij aanmaak bewerkbaar (stabiele identiteit). */
+const key = ref('');
+const name = ref('');
+const parentRoleId = ref<string | null>(null);
+const selectedPermissions = ref<string[]>([]);
+
+/** Toont de bevestiging na een geslaagde opslag; togglet terug bij een nieuwe wijziging. */
+const saved = ref(false);
+
+/** De ouder-opties: alle rollen behalve de rol die we bewerken (geen zelf-referentie). */
+const parentOptions = computed(() => roles.roles.value.filter((role) => role.id !== editingId.value));
+
+/** Vult het formulier uit een bestaande rol (bewerk-modus). */
+function hydrateFrom(role: Role): void {
+  key.value = role.key;
+  name.value = role.name;
+  parentRoleId.value = role.parentRoleId;
+  selectedPermissions.value = [...role.permissions];
+}
+
+onMounted(async () => {
+  await roles.refresh();
+  if (isEditing.value) {
+    const existing = roles.roles.value.find((role) => role.id === editingId.value);
+    if (existing) hydrateFrom(existing);
+  }
+});
+
+/** Vertaalde, veilige serverfout (of leeg). */
+const submitError = computed(() => (roles.error.value !== null ? t(roles.error.value) : ''));
+
+async function onSubmit(): Promise<void> {
+  saved.value = false;
+  if (isEditing.value) {
+    const updated = await roles.update(editingId.value, {
+      name: name.value,
+      permissions: selectedPermissions.value,
+      parentRoleId: parentRoleId.value,
+    });
+    if (updated === undefined) return; // fout staat reactief in `roles.error` (i18n-sleutel)
+    hydrateFrom(updated);
+  } else {
+    const created = await roles.create({
+      key: key.value,
+      name: name.value,
+      permissions: selectedPermissions.value,
+      parentRoleId: parentRoleId.value,
+    });
+    if (created === undefined) return;
+    editingId.value = created.id; // wissel naar bewerk-modus op de nieuwe rol
+    hydrateFrom(created);
+  }
+  saved.value = true;
+  notifySuccess?.(t('authz.role.saved'));
+}
+</script>
+
+<template>
+  <section class="authz-page authz-page--role-editor">
+    <header class="authz-page__header">
+      <h1 class="authz-page__title">
+        {{ isEditing ? t('authz.role.editTitle') : t('authz.role.title') }}
+      </h1>
+    </header>
+
+    <form class="authz-form" novalidate @submit.prevent="onSubmit">
+      <p
+        v-if="submitError"
+        class="authz-form__error"
+        role="alert"
+        aria-live="assertive"
+        data-testid="authz-role-error"
+      >
+        {{ submitError }}
+      </p>
+
+      <p
+        v-if="saved"
+        class="authz-form__success"
+        role="status"
+        aria-live="polite"
+        data-testid="authz-role-saved"
+      >
+        {{ t('authz.role.saved') }}
+      </p>
+
+      <div v-if="!isEditing" class="authz-field">
+        <label class="authz-field__label" for="authz-role-key">{{ t('authz.role.key') }}</label>
+        <input
+          id="authz-role-key"
+          v-model="key"
+          class="authz-field__input"
+          type="text"
+          required
+          aria-describedby="authz-role-key-hint"
+        />
+        <p id="authz-role-key-hint" class="authz-field__hint">{{ t('authz.role.keyHint') }}</p>
+      </div>
+
+      <div class="authz-field">
+        <label class="authz-field__label" for="authz-role-name">{{ t('authz.role.name') }}</label>
+        <input
+          id="authz-role-name"
+          v-model="name"
+          class="authz-field__input"
+          type="text"
+          required
+        />
+      </div>
+
+      <div class="authz-field">
+        <label class="authz-field__label" for="authz-role-parent">{{ t('authz.role.parent') }}</label>
+        <select
+          id="authz-role-parent"
+          v-model="parentRoleId"
+          class="authz-field__input"
+        >
+          <option :value="null">{{ t('authz.role.parentNone') }}</option>
+          <option v-for="role in parentOptions" :key="role.id" :value="role.id">
+            {{ role.name }}
+          </option>
+        </select>
+      </div>
+
+      <fieldset class="authz-fieldset">
+        <legend class="authz-fieldset__legend">{{ t('authz.role.permissions') }}</legend>
+        <PermissionMatrix
+          v-model="selectedPermissions"
+          :permissions="roles.permissions.value"
+          :disabled="roles.pending.value"
+        />
+      </fieldset>
+
+      <div class="authz-form__actions">
+        <button class="authz-form__submit" type="submit" :disabled="roles.pending.value">
+          {{ roles.pending.value ? t('authz.role.saving') : t('authz.role.save') }}
+        </button>
+        <a class="authz-form__link" href="/admin/roles">{{ t('authz.role.back') }}</a>
+      </div>
+    </form>
+  </section>
+</template>