@mmlogic/components 0.1.7 → 0.1.8

package/dist/collection/dev/app.js

@@ -0,0 +1,521 @@
+/* =====================================================================
+   APP STATE
+   ===================================================================== */
+
+let _selectedTenant = null;
+let _selectedType   = null; // { name, pluralName }
+let _relationMeta   = {};   // relatedClass / mostSignificantClass → { name, mostSignificantClass }
+let _tableDataHref  = null; // base href for the current table view (without ?page=)
+
+/* =====================================================================
+   UTILITIES
+   ===================================================================== */
+
+function escHtml(str) {
+  if (str == null) return '';
+  return String(str)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function httpStatusText(code) {
+  const map = {
+    200: 'OK', 201: 'Created', 204: 'No Content',
+    400: 'Bad Request', 401: 'Unauthorized', 403: 'Forbidden',
+    404: 'Not Found', 409: 'Conflict', 422: 'Unprocessable Entity',
+    500: 'Internal Server Error',
+  };
+  return map[code] || '';
+}
+
+function logEvent(type, data) {
+  document.getElementById('event-log').textContent =
+    '[' + type + ']\n' + JSON.stringify(data, null, 2);
+}
+
+/* =====================================================================
+   TAB SWITCHING
+   ===================================================================== */
+
+function showTab(name) {
+  document.querySelectorAll('.tab-btn').forEach((btn, i) => {
+    const names = ['embedded', 'live-api'];
+    btn.classList.toggle('active', names[i] === name);
+  });
+  document.getElementById('tab-embedded').classList.toggle('active', name === 'embedded');
+  document.getElementById('tab-live-api').classList.toggle('active', name === 'live-api');
+}
+
+/* =====================================================================
+   TENANT SELECTION
+   ===================================================================== */
+
+async function loadTenants() {
+  const panel = document.getElementById('panel-tenant');
+  panel.classList.remove('hidden');
+  const grid = document.getElementById('tenant-grid');
+  grid.innerHTML = '<span class="spinner"></span>';
+
+  try {
+    const tenants = await apiFetchTenants(authGetToken());
+    renderTenants(tenants);
+  } catch (err) {
+    grid.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
+  }
+}
+
+function renderTenants(tenants) {
+  const grid = document.getElementById('tenant-grid');
+  if (!tenants || tenants.length === 0) {
+    grid.innerHTML = '<em style="color:var(--mrd-color-neutral-500)">Geen tenants gevonden.</em>';
+    return;
+  }
+
+  grid.innerHTML = tenants.map((t, i) => {
+    const code = t.tenantCode || t.code || t.id || String(i);
+    const name = t.name || code;
+    const desc = t.description || '';
+    return `
+      <div class="tenant-card">
+        <input type="radio" name="tenant" id="tenant-${escHtml(code)}" value="${escHtml(code)}"
+               onchange="onTenantChange('${escHtml(code)}', '${escHtml(name)}')">
+        <label for="tenant-${escHtml(code)}">
+          ${escHtml(name)}
+          ${desc ? `<small>${escHtml(desc)}</small>` : ''}
+        </label>
+      </div>`;
+  }).join('');
+
+  const savedTenant = localStorage.getItem('last_tenant');
+  if (savedTenant) {
+    const radio = document.getElementById(`tenant-${savedTenant}`);
+    if (radio) {
+      radio.checked = true;
+      const label = document.querySelector(`label[for="tenant-${savedTenant}"]`);
+      const name  = label ? (label.firstChild?.textContent?.trim() || savedTenant) : savedTenant;
+      onTenantChange(savedTenant, name);
+    }
+  }
+}
+
+async function onTenantChange(code, name) {
+  _selectedTenant = code;
+  localStorage.setItem('last_tenant', code);
+  _selectedType   = null;
+  document.getElementById('panel-table').classList.add('hidden');
+  document.getElementById('panel-form').classList.add('hidden');
+  document.getElementById('panel-response').innerHTML = '';
+
+  const typePanel = document.getElementById('panel-type');
+  typePanel.classList.remove('hidden');
+  const sel = document.getElementById('type-select');
+  sel.innerHTML = '<option value="">⏳ laden...</option>';
+  sel.disabled = true;
+
+  try {
+    const types = await apiFetchTypes(authGetToken(), code);
+    renderTypes(types);
+  } catch (err) {
+    sel.innerHTML = '<option value="">— fout bij laden —</option>';
+    sel.disabled = false;
+    typePanel.querySelector('h3').insertAdjacentHTML('afterend',
+      `<p style="color:var(--mrd-color-danger);font-size:.875rem;margin:0 0 .75rem">❌ ${escHtml(err.message)}</p>`);
+  }
+}
+
+function renderTypes(types) {
+  const sel = document.getElementById('type-select');
+  if (!types || types.length === 0) {
+    sel.innerHTML = '<option value="">— geen types gevonden —</option>';
+    sel.disabled = true;
+    return;
+  }
+  sel.innerHTML = '<option value="">— selecteer type —</option>' +
+    types.map(t => {
+      const plural = t.pluralName || t.name;
+      return `<option value="${escHtml(plural)}" data-name="${escHtml(t.name)}">${escHtml(t.name)}</option>`;
+    }).join('');
+  sel.disabled = false;
+}
+
+/* =====================================================================
+   TABLE
+   ===================================================================== */
+
+async function loadTable() {
+  const sel = document.getElementById('type-select');
+  const pluralName = sel.value;
+  if (!pluralName) return;
+
+  const opt = sel.options[sel.selectedIndex];
+  _selectedType = { name: opt.dataset.name || pluralName, pluralName };
+
+  const tablePanel = document.getElementById('panel-table');
+  tablePanel.classList.remove('hidden');
+  tablePanel.innerHTML = '<span class="spinner"></span> Lijst laden...';
+  document.getElementById('panel-form').classList.add('hidden');
+  document.getElementById('panel-response').innerHTML = '';
+  _tableDataHref = null;
+
+  try {
+    const dashboard = await apiFetchDashboard(authGetToken(), _selectedTenant, pluralName);
+
+    const viewKey  = dashboard.layouts?.[0]?.items?.[0]?.name;
+    const view     = viewKey && dashboard.views?.[viewKey];
+    const dataHref = viewKey && dashboard._links?.[viewKey]?.href;
+    if (!view || !dataHref) throw new Error('Geen geldige view gevonden in dashboard response.');
+
+    // Strip any ?page= from href so we control pagination ourselves
+    _tableDataHref = dataHref.replace(/([?&])page=\d+/, '').replace(/\?$/, '');
+
+    const columns     = (view.values ?? []).map(mapApiItem);
+    const defaultSort = view.defaultSort ?? '';
+
+    // Fetch page 0 for totalElements + first rows (including defaultSort)
+    const page0    = await apiFetchPage(authGetToken(), _tableDataHref, 0, defaultSort);
+    const meta     = page0.page ?? {};
+    const total    = meta.totalElements ?? 0;
+    const pageSize = meta.size ?? 20;
+    const embedded = page0._embedded ?? {};
+    const rows0    = Object.values(embedded)[0] ?? [];
+
+    renderTable(columns, total, pageSize, rows0, _tableDataHref, defaultSort);
+  } catch (err) {
+    tablePanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
+  }
+}
+
+function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defaultSort = '') {
+  const tablePanel = document.getElementById('panel-table');
+  tablePanel.innerHTML = '<mrd-table id="live-table"></mrd-table>';
+
+  customElements.whenDefined('mrd-table').then(async () => {
+    const table = document.getElementById('live-table');
+
+    table.columns       = columns;
+    table.locale        = 'nl-NL';
+    table.pageSize      = pageSize;
+    table.tableHeight   = 500;
+    table.totalElements = totalElements;
+    table.defaultSort   = defaultSort;
+
+    // Register mrdLoadPage before init() so scroll events are caught immediately
+    table.addEventListener('mrdLoadPage', async (e) => {
+      const { page, sort } = e.detail;
+      try {
+        const result   = await apiFetchPage(authGetToken(), dataHref, page, sort);
+        const embedded = result._embedded ?? {};
+        const rows     = Object.values(embedded)[0] ?? [];
+        await table.setPage(page, rows);
+      } catch (err) {
+        console.error('[mrd-table] pagina laden mislukt', page, err);
+      }
+    });
+
+    // Open form with existing record on row click
+    table.addEventListener('mrdRowClick', async (e) => {
+      await loadRecord(e.detail);
+    });
+
+    await table.init();
+    await table.setPage(0, page0Rows); // inject pre-fetched page 0 — no extra request
+  });
+}
+
+/* =====================================================================
+   FORM — LOAD & RENDER
+   ===================================================================== */
+
+/**
+ * Load an existing record by clicking a table row.
+ * Fetches the record (GET _links.self.href) and the form layout in parallel,
+ * then opens the form pre-filled and in PATCH mode.
+ */
+async function loadRecord(row) {
+  const selfHref = row?._links?.self?.href;
+  if (!selfHref) { console.warn('[loadRecord] geen _links.self.href in rij', row); return; }
+
+  const sel = document.getElementById('type-select');
+  if (!sel.value) return;
+
+  const formPanel = document.getElementById('panel-form');
+  formPanel.classList.remove('hidden');
+  formPanel.innerHTML = '<span class="spinner"></span> Record laden...';
+  document.getElementById('panel-table').classList.add('hidden');
+  document.getElementById('panel-response').innerHTML = '';
+
+  try {
+    // Fetch the record first so we can read _links.form.href for the exact layout URL
+    const recordResp = await apiRequest('GET', selfHref, authGetToken());
+    if (!recordResp.ok) throw new Error(`${recordResp.status}: kon record niet ophalen`);
+
+    const formHref = recordResp.body?._links?.form?.href ?? null;
+    const layout   = await apiFetchForm(authGetToken(), _selectedTenant, _selectedType.pluralName, formHref);
+    renderForm(layout, recordResp.body, selfHref);
+  } catch (err) {
+    formPanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
+  }
+}
+
+async function loadForm() {
+  const sel = document.getElementById('type-select');
+  const pluralName = sel.value;
+  if (!pluralName) return;
+
+  const opt = sel.options[sel.selectedIndex];
+  _selectedType = { name: opt.dataset.name || pluralName, pluralName };
+
+  const formPanel = document.getElementById('panel-form');
+  formPanel.classList.remove('hidden');
+  formPanel.innerHTML = '<span class="spinner"></span> Formulier laden...';
+  document.getElementById('panel-response').innerHTML = '';
+
+  try {
+    const layout = await apiFetchForm(authGetToken(), _selectedTenant, pluralName);
+    renderForm(layout);
+  } catch (err) {
+    formPanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
+  }
+}
+
+/**
+ * Mount mrd-form and wire up all event handlers.
+ *
+ * @param layout   - mrd-form layout descriptor
+ * @param record   - existing record for edit mode (null = new record)
+ * @param selfHref - absolute URL for PATCH; null = POST (new record)
+ */
+function renderForm(layout, record = null, selfHref = null) {
+  // Build relation metadata map keyed by both relatedClass and mostSignificantClass
+  // so lookups work regardless of which value arrives in events (mrdSearch uses mostSignificantClass).
+  _relationMeta = {};
+  function collectRelations(items) {
+    if (!Array.isArray(items)) return;
+    items.forEach(item => {
+      if (item.type === 'RELATION' && item.relation) {
+        const meta = {
+          name:                 item.relation.name,
+          mostSignificantClass: item.relation.mostSignificantClass,
+        };
+        _relationMeta[item.relation.relatedClass] = meta;
+        if (item.relation.mostSignificantClass) {
+          _relationMeta[item.relation.mostSignificantClass] = meta;
+        }
+      }
+      if (Array.isArray(item.items)) collectRelations(item.items);
+    });
+  }
+  collectRelations(layout.items);
+
+  // Build initial form values from the fetched record (edit mode)
+  const relationFieldNames = new Set(Object.values(_relationMeta).map(m => m.name));
+  let initialValues = {};
+  if (record) {
+    for (const [key, val] of Object.entries(record)) {
+      if (key === '_links' || key === '_embedded') continue;
+      initialValues[key] = val;
+    }
+    // Relation fields: convert _links entries to { id, label } for mrd-relation-field pre-fill
+    for (const relName of relationFieldNames) {
+      const link = record._links?.[relName];
+      if (!link) continue;
+      if (Array.isArray(link)) {
+        initialValues[relName] = link.map(l => ({ id: l.href, label: l.name ?? '' }));
+      } else if (link.href) {
+        initialValues[relName] = { id: link.href, label: link.name ?? '' };
+      }
+    }
+  }
+
+  const formPanel = document.getElementById('panel-form');
+  formPanel.innerHTML = '<mrd-form id="live-form" locale="nl-NL"></mrd-form>';
+
+  customElements.whenDefined('mrd-form').then(() => {
+    const form = document.getElementById('live-form');
+    form.layout = layout;
+    if (record) form.values = initialValues;
+
+    // Upload files immediately on selection; write binary URI back via setFieldValue
+    form.addEventListener('mrdChange', async (e) => {
+      const { name, value } = e.detail;
+      if (!(value instanceof File)) return;
+      try {
+        const uri = await apiUploadFile(authGetToken(), _selectedTenant, value);
+        await form.setFieldValue(name, uri);
+      } catch (err) {
+        console.error(`[upload] mislukt voor veld "${name}":`, err);
+      }
+    });
+
+    form.addEventListener('mrdSubmit', async (e) => {
+      document.getElementById('panel-response').innerHTML =
+        '<div class="response-card" style="background:var(--mrd-color-neutral-100);border-color:var(--mrd-color-neutral-300);max-width:860px"><span class="spinner"></span> Bezig met indienen...</div>';
+
+      // Transform relation values: { id: href, label } → href string
+      const transformValues = (source) => {
+        const out = {};
+        for (const [key, val] of Object.entries(source)) {
+          if (relationFieldNames.has(key)) {
+            if (Array.isArray(val)) {
+              out[key] = val.map(v => (v && typeof v === 'object' ? v.id : v));
+            } else if (val && typeof val === 'object' && val.id) {
+              out[key] = val.id;
+            } else {
+              out[key] = val;
+            }
+          } else {
+            out[key] = val;
+          }
+        }
+        return out;
+      };
+
+      if (selfHref) {
+        // PATCH mode: send only changed fields
+        const submitted = transformValues(e.detail);
+        const original  = transformValues(initialValues);
+        const patch = {};
+        for (const [key, val] of Object.entries(submitted)) {
+          if (JSON.stringify(val) !== JSON.stringify(original[key])) {
+            patch[key] = val;
+          }
+        }
+        if (Object.keys(patch).length === 0) {
+          renderResponse(200, 'Geen wijzigingen.');
+          return;
+        }
+        const result = await apiRequest('PATCH', selfHref, authGetToken(), patch);
+        renderResponse(result.status, result.body);
+      } else {
+        // POST mode: new record
+        const values = transformValues(e.detail);
+        const result = await apiSubmitForm(authGetToken(), _selectedTenant, _selectedType.pluralName, values);
+        renderResponse(result.status, result.body);
+      }
+    });
+
+    form.addEventListener('mrdSearch', async (e) => {
+      logEvent('mrdSearch (live)', e.detail);
+      const { query, relatedClass } = e.detail;
+      const meta = _relationMeta[relatedClass];
+      if (!meta || !query || query.length < 2) return;
+
+      try {
+        const results = await apiSearchRelation(authGetToken(), _selectedTenant, meta.mostSignificantClass, query);
+        const host = Array.from(document.querySelectorAll('mrd-relation-field'))
+          .find(el => el.name === meta.name);
+        if (host && typeof host.setSearchResults === 'function') {
+          host.setSearchResults(results);
+        }
+      } catch (err) {
+        console.error('[mrdSearch] relation search failed:', err);
+      }
+    });
+
+    form.addEventListener('mrdFetchAll', async (e) => {
+      logEvent('mrdFetchAll (live)', e.detail);
+      const { name, mostSignificantClass, filter, filterValue } = e.detail;
+      if (!mostSignificantClass) return;
+
+      const host = Array.from(document.querySelectorAll('mrd-relation-field'))
+        .find(el => el.name === name);
+      if (!host || typeof host.setAllRecords !== 'function') return;
+
+      // If a filter is required but no value is set yet, clear the dropdown
+      if (filter && !filterValue) {
+        host.setAllRecords([]);
+        return;
+      }
+
+      try {
+        // Build URL: /data/{tenant}/{mostSignificantClass}?{filter}={filterValue}&page=0
+        let baseHref = `/data/${_selectedTenant}/${mostSignificantClass}`;
+        if (filter && filterValue) baseHref += `?${encodeURIComponent(filter)}=${encodeURIComponent(filterValue)}`;
+        const result   = await apiFetchPage(authGetToken(), baseHref, 0);
+        const embedded = result._embedded ?? {};
+        const records  = Object.values(embedded)[0] ?? [];
+        host.setAllRecords(records.map(r => ({ id: r._links?.self?.href ?? r.id, label: r.name })));
+      } catch (err) {
+        console.error('[mrdFetchAll] failed:', err);
+      }
+    });
+  });
+}
+
+/* =====================================================================
+   RESPONSE RENDERING
+   ===================================================================== */
+
+function renderResponse(status, body) {
+  const isOk  = status >= 200 && status < 300;
+  const cls   = isOk ? 'success' : 'error';
+  const icon  = isOk ? '✅' : '❌';
+  const label = httpStatusText(status);
+
+  let inner = '';
+
+  if (!isOk && body && typeof body === 'object') {
+    const msg   = body.message || body.error || '';
+    const trace = body.trace   || body.stackTrace || '';
+    inner = `
+      <h4>${icon} ${status} ${escHtml(label)}</h4>
+      ${msg ? `<p style="margin:.25rem 0;font-size:.875rem">${escHtml(msg)}</p>` : ''}
+      ${trace ? `<details><summary>trace</summary><pre>${escHtml(trace)}</pre></details>` : ''}
+      ${!msg && !trace ? `<pre>${escHtml(JSON.stringify(body, null, 2))}</pre>` : ''}`;
+  } else {
+    const text = typeof body === 'string' ? body : JSON.stringify(body, null, 2);
+    inner = `
+      <h4>${icon} ${status} ${escHtml(label)}</h4>
+      ${text ? `<pre>${escHtml(text)}</pre>` : ''}`;
+  }
+
+  document.getElementById('panel-response').innerHTML =
+    `<div class="response-card ${cls}">${inner}</div>`;
+}
+
+/* =====================================================================
+   EMBEDDED FORM (demo tab)
+   ===================================================================== */
+
+customElements.whenDefined('mrd-form').then(() => {
+  const form = document.getElementById('demo-form');
+  form.layout = window.EXAMPLE_LAYOUT;
+  form.values = window.EXAMPLE_VALUES;
+
+  form.addEventListener('mrdSubmit',   (e) => { console.log('[mrdSubmit]',   e.detail); logEvent('mrdSubmit',   e.detail); });
+  form.addEventListener('mrdSearch',   (e) => { console.log('[mrdSearch]',   e.detail); logEvent('mrdSearch',   e.detail); });
+  form.addEventListener('mrdFetchAll', (e) => { console.log('[mrdFetchAll]', e.detail); logEvent('mrdFetchAll', e.detail); });
+});
+
+document.getElementById('locale-select').addEventListener('change', (e) => {
+  document.getElementById('demo-form').locale = e.target.value;
+});
+
+document.getElementById('btn-inject-results').addEventListener('click', () => {
+  const relationField = document.querySelector('mrd-relation-field');
+  if (relationField && typeof relationField.setSearchResults === 'function') {
+    relationField.setSearchResults([
+      { id: '1', label: 'Alice Johnson',    description: 'Senior Engineer' },
+      { id: '2', label: 'Bob van der Berg', description: 'Product Manager' },
+      { id: '3', label: 'Carol Martínez',   description: 'UX Designer' },
+      { id: '4', label: 'David Müller',     description: 'DevOps Lead' },
+    ]);
+  } else {
+    logEvent('info', 'Type 2+ chars in the Project Manager field first, then click this');
+  }
+});
+
+/* =====================================================================
+   BOOT
+   ===================================================================== */
+
+document.addEventListener('DOMContentLoaded', async () => {
+  authRestoreSession();
+  await authHandleCallback();
+
+  if (authGetToken()) {
+    showTab('live-api');
+    showAuthStatus();
+    loadTenants();
+  }
+});

package/dist/collection/dev/auth.js

@@ -0,0 +1,156 @@
+/* =====================================================================
+   AUTH0 PKCE
+   ===================================================================== */
+
+const AUTH0_DOMAIN   = 'login.develop.rulebooks.nl';
+const AUTH0_CLIENT   = '5zpghu11GLFrx95eg5jMl1f0BEnkIenF';
+const AUTH0_AUDIENCE = 'https://api.mosterd';
+const REDIRECT_URI   = 'http://localhost:3333';
+
+let _accessToken = null;
+let _userEmail   = null;
+
+function authRestoreSession() {
+  const token = localStorage.getItem('auth_token');
+  const exp   = parseInt(localStorage.getItem('auth_exp') || '0', 10);
+  if (!token || (exp && Date.now() / 1000 >= exp - 60)) {
+    localStorage.removeItem('auth_token');
+    localStorage.removeItem('auth_email');
+    localStorage.removeItem('auth_exp');
+    return;
+  }
+  _accessToken = token;
+  _userEmail   = localStorage.getItem('auth_email') || null;
+}
+
+function base64url(buffer) {
+  return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+async function pkceGenerateVerifier() {
+  const bytes = crypto.getRandomValues(new Uint8Array(96));
+  return base64url(bytes);
+}
+
+async function pkceGenerateChallenge(verifier) {
+  const data = new TextEncoder().encode(verifier);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return base64url(hash);
+}
+
+async function authLogin() {
+  const verifier  = await pkceGenerateVerifier();
+  const challenge = await pkceGenerateChallenge(verifier);
+  sessionStorage.setItem('pkce_verifier', verifier);
+
+  const params = new URLSearchParams({
+    response_type:         'code',
+    client_id:             AUTH0_CLIENT,
+    redirect_uri:          REDIRECT_URI,
+    audience:              AUTH0_AUDIENCE,
+    scope:                 'openid profile email',
+    code_challenge:        challenge,
+    code_challenge_method: 'S256',
+  });
+
+  window.location.href = `https://${AUTH0_DOMAIN}/authorize?${params}`;
+}
+
+async function authHandleCallback() {
+  const url   = new URL(window.location.href);
+  const code  = url.searchParams.get('code');
+  const error = url.searchParams.get('error');
+
+  if (error) {
+    showAuthError(url.searchParams.get('error_description') || error);
+    cleanUrl();
+    return;
+  }
+
+  if (!code) return;
+
+  const verifier = sessionStorage.getItem('pkce_verifier');
+  if (!verifier) {
+    showAuthError('PKCE verifier missing — please try logging in again.');
+    cleanUrl();
+    return;
+  }
+  sessionStorage.removeItem('pkce_verifier');
+
+  try {
+    const resp = await fetch(`https://${AUTH0_DOMAIN}/oauth/token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        grant_type:    'authorization_code',
+        client_id:     AUTH0_CLIENT,
+        code,
+        redirect_uri:  REDIRECT_URI,
+        code_verifier: verifier,
+      }),
+    });
+
+    const data = await resp.json();
+    if (!resp.ok) throw new Error(data.error_description || data.error || resp.statusText);
+
+    _accessToken = data.access_token;
+
+    // Decode id_token for email (no signature validation needed on test page)
+    if (data.id_token) {
+      try {
+        const payload = JSON.parse(atob(data.id_token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
+        _userEmail = payload.email || payload.name || null;
+      } catch (_) { /* ignore */ }
+    }
+
+    // Persist session in localStorage
+    try {
+      const payload = JSON.parse(atob(data.access_token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
+      localStorage.setItem('auth_token', _accessToken);
+      localStorage.setItem('auth_email', _userEmail || '');
+      if (payload.exp) localStorage.setItem('auth_exp', String(payload.exp));
+    } catch (_) { /* ignore */ }
+  } catch (err) {
+    showAuthError(err.message);
+  }
+
+  cleanUrl();
+}
+
+function cleanUrl() {
+  const clean = window.location.pathname;
+  window.history.replaceState({}, document.title, clean);
+}
+
+function authGetToken() { return _accessToken; }
+
+function showAuthError(msg) {
+  document.getElementById('auth-status-area').innerHTML =
+    `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(msg)}</span>
+     <button class="btn-secondary" onclick="authLogin()">Opnieuw proberen</button>`;
+}
+
+function showAuthStatus() {
+  const area  = document.getElementById('auth-status-area');
+  const label = _userEmail ? `Ingelogd als <strong>${escHtml(_userEmail)}</strong>` : 'Ingelogd';
+  area.innerHTML =
+    `<span class="badge-ok">✓ ${label}</span>
+     <button class="btn-secondary" onclick="authLogout()">Uitloggen</button>`;
+}
+
+function authLogout() {
+  _accessToken = null;
+  _userEmail   = null;
+  localStorage.removeItem('auth_token');
+  localStorage.removeItem('auth_email');
+  localStorage.removeItem('auth_exp');
+  localStorage.removeItem('last_tenant');
+  document.getElementById('auth-status-area').innerHTML =
+    `<button class="btn-primary" id="btn-login" onclick="authLogin()">Login met Auth0</button>`;
+  document.getElementById('panel-tenant').classList.add('hidden');
+  document.getElementById('panel-type').classList.add('hidden');
+  document.getElementById('panel-table').classList.add('hidden');
+  document.getElementById('panel-form').classList.add('hidden');
+  document.getElementById('panel-response').innerHTML = '';
+}