source: Klonkt/src/views/pages/viewer-blocked.ejs@ 544cd86

main
Last change on this file since 544cd86 was 8afbdd6, checked in by roboburr <roboburr@…>, 3 months ago

feat: viewer role + artists directory + Klonkt Hub Beta rebrand

Viewer role (replaces the separate view-mode/readonly toggle):

  • 'kijker' is now a real role (VALID_ROLES) selectable in Admin. May view EVERYTHING including Admin, but cannot modify anything.
  • isViewer(user) (= role kijker or legacy readonly flag) is the source; requireGod/requireSiteManager(BySlug) let a viewer through (viewing), the global guard 403s every write. Existing readonly accounts are migrated on each role change (readonly=0).
  • Write leaks via GET patched: /prutter/new (INSERT) blocks for viewers, /prutter/:id skips markAsRead (UPDATE); WS upgrade rejects viewers (the HTTP guard doesn't cover WebSockets).
  • Clean "Viewer mode" page (viewer-blocked) instead of raw 403 text; styled sticky banner; account page shows read-only UI instead of an upload button that silently 403s. canMutate hides write buttons.

Scalability (>50 artists):

  • Hub home shows max 24 (most active first) + "All N artists ->".
  • New searchable, paginated /artiesten directory (hub only).
  • 'user' + 'artiesten' reserved as slugs.

Rebrand PrutFolio v1 -> Klonkt Hub Beta (footer, PWA manifest, account/
admin texts, default page title, startup, README; internal package +
PWA id 'prutfolio' remain for stability).

Co-Authored-By: Claude <noreply@…>
  • Property mode set to 100644
File size: 1.9 KB
Line 
1<div class="container vb-page">
2 <div class="vb-card">
3 <div class="vb-ico" aria-hidden="true">👁️</div>
4 <h1 class="vb-title">Kijker-modus</h1>
5 <p class="vb-text">
6 Dit is een alleen-lezen account. Je kunt alles bekijken, maar
7 <strong>niets wijzigen</strong> — opslaan, uploaden, verwijderen en
8 reageren zijn uitgeschakeld.
9 </p>
10 <div class="vb-actions">
11 <button type="button" class="vb-btn vb-btn-primary" onclick="history.back()">← Terug</button>
12 <a class="vb-btn" href="/">Naar de hoofdpagina</a>
13 </div>
14 </div>
15</div>
16
17<style>
18.vb-page { max-width: 540px; margin: 3rem auto 4rem; padding: 0 1rem; }
19.vb-card {
20 text-align: center;
21 background: var(--paper);
22 border: 1px solid var(--rule);
23 border-radius: 16px;
24 padding: 2.5rem 1.75rem;
25}
26.vb-ico {
27 width: 64px; height: 64px; margin: 0 auto 1rem;
28 display: flex; align-items: center; justify-content: center;
29 font-size: 1.8rem; border-radius: 50%;
30 background: color-mix(in srgb, var(--accent) 14%, var(--paper-2));
31}
32.vb-title { font-family: var(--font-display, serif); font-size: 1.6rem; margin: 0 0 0.5rem; }
33.vb-text { color: var(--ink-muted, var(--ink-soft)); font-size: 0.95rem; line-height: 1.55; margin: 0 auto 1.5rem; max-width: 42ch; }
34.vb-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
35.vb-btn {
36 display: inline-flex; align-items: center; justify-content: center;
37 padding: 0.6rem 1.1rem; min-height: 42px;
38 border: 1px solid var(--rule); border-radius: 8px;
39 background: var(--paper-2); color: var(--ink);
40 font-family: var(--font-ui, system-ui), sans-serif; font-size: 0.9rem; font-weight: 600;
41 text-decoration: none; cursor: pointer; transition: border-color 120ms, opacity 120ms;
42}
43.vb-btn:hover { border-color: var(--accent); }
44.vb-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
45.vb-btn-primary:hover { opacity: 0.92; }
46</style>
Note: See TracBrowser for help on using the repository browser.