ZDDC
ef849ab3fa
Drop the bottom-right floating "Admin mode" switch in favour of a proper
account menu in the header's upper-right (every tool's .header-right).
New shared/profile-menu.{js,css}: a circular avatar button (email initial)
opening a dropdown with the signed-in email, an "Admin mode" item (only for
can_elevate principals — drives elevation.setOn/setOff, drops on leave),
Profile (/.profile), and Access tokens (/.tokens). The panel is portaled to
<body> + position:fixed so it overlays content reliably regardless of the
app's stacking contexts; the button shows a red ring while elevated.
No logout: authentication is the upstream proxy's concern (oauth2-proxy /
Authelia) — ZDDC owns no session, so the menu doesn't render sign-out.
elevation.js keeps the state machine (cookie, armed banner/frame, ephemeral
pagehide-clear, zddc:elevationchange, ?admin= URL) but no longer renders any
control — the profile menu is the UI. elevation.css drops the floating-
toggle styles (keeps banner + frame). All 7 templates drop the dead
elevation-toggle placeholder; all 7 build.sh bundle profile-menu.{js,css}.
Validated in a containerized browser: menu items, links, elevation arming +
armed ring, dropdown overlays content, no floating toggle.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
104 lines
4.4 KiB
HTML
104 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ZDDC Form</title>
|
|
<link rel="icon" type="image/svg+xml" href="{{FAVICON}}">
|
|
<style>
|
|
{{CSS_PLACEHOLDER}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-left">
|
|
<svg class="app-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
|
|
<rect width="64" height="64" rx="12" fill="#1e3a5f"/>
|
|
<g fill="#fff">
|
|
<rect x="14" y="18" width="36" height="7"/>
|
|
<polygon points="43,25 50,25 21,43 14,43"/>
|
|
<rect x="14" y="43" width="36" height="7"/>
|
|
</g>
|
|
</svg>
|
|
<div class="header-title-group">
|
|
<span class="app-header__title" id="form-title">ZDDC Form</span>
|
|
<span class="build-timestamp">{{BUILD_LABEL}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)">◐</button>
|
|
<button id="help-btn" class="btn btn-secondary" title="Help" aria-label="Help">?</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="form-main">
|
|
<div id="form-status" class="form-status" hidden></div>
|
|
<form id="form-root" class="form-root" novalidate></form>
|
|
<div class="form-actions">
|
|
<button type="button" id="submit-btn" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Help Panel -->
|
|
<aside id="help-panel" class="help-panel" hidden aria-labelledby="help-panel-title">
|
|
<div class="help-panel__header">
|
|
<h2 id="help-panel-title" class="help-panel__title">Help — ZDDC Form</h2>
|
|
<button type="button" class="help-panel__close" id="help-panel-close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="help-panel__body">
|
|
<h3>What is this form?</h3>
|
|
<p>This is a schema-driven form rendered by zddc-server. Every
|
|
<code><name>.form.yaml</code> file in the archive becomes an
|
|
editable form at <code><path>/<name>.form.html</code>.
|
|
Submissions are saved as <code><name>/<id>.yaml</code>
|
|
files alongside the schema, and re-render with their data filled in
|
|
when revisited.</p>
|
|
|
|
<h3>Filling in the form</h3>
|
|
<dl>
|
|
<dt>Required fields</dt>
|
|
<dd>Marked with an asterisk in their label. Submitting with a
|
|
required field empty re-renders the form with an inline error.</dd>
|
|
<dt>Validation</dt>
|
|
<dd>Server-side via JSON Schema 2020-12 (subset). Client-side
|
|
hints (<code>required</code>, <code>min</code>, <code>max</code>,
|
|
<code>pattern</code>) are added where the schema specifies them.</dd>
|
|
<dt>Submit</dt>
|
|
<dd>POSTs to the same URL the form was loaded from. On success the
|
|
browser navigates to the saved submission's URL. On failure the
|
|
form re-renders with errors inline at each invalid field.</dd>
|
|
</dl>
|
|
|
|
<h3>Editing existing submissions</h3>
|
|
<p>Open the saved submission's URL — the form re-renders with its
|
|
current data and any errors. Submitting overwrites the same file.
|
|
History is in git via your normal commit cycle.</p>
|
|
|
|
<h3>Header buttons</h3>
|
|
<dl>
|
|
<dt>◐ Theme</dt>
|
|
<dd>Cycle auto / light / dark.</dd>
|
|
<dt>? Help</dt>
|
|
<dd>This panel. Press <kbd>Esc</kbd> to close.</dd>
|
|
</dl>
|
|
</div>
|
|
</aside>
|
|
|
|
<!--
|
|
Server injects the form context here on render. Shape:
|
|
{
|
|
"title": "Optional page title override",
|
|
"schema": { JSON Schema 2020-12 subset },
|
|
"ui": { RJSF-style ui:* hints, recursively keyed },
|
|
"data": { existing submission data, or null for empty form },
|
|
"submitUrl": "/path/to/submit",
|
|
"errors": [{path, message}] // only populated on POST→422 re-render
|
|
}
|
|
-->
|
|
<script id="form-context" type="application/json">{}</script>
|
|
|
|
<script>
|
|
{{JS_PLACEHOLDER}}
|
|
</script>
|
|
</body>
|
|
</html>
|