The /api/v1/caddycode/{generate,validate,templates} endpoints already
existed (commit 7f83151, GLM grade B); the frontend visual builder
page is the missing piece. This commit ships:
- status/js/caddy-builder.js — IIFE module that injects a modal with
a form-driven visual builder. Form state → JSON payload → live
POST /generate → preview pane. 5 presets loaded from
/api/v1/caddycode/templates (simple, websocket, auth-gated,
cors-api, subdirectory). Custom headers list (add/remove rows),
live validation, copy-to-clipboard, reset. State machine is a
single plain-object `state` snapshot — debounced regeneration
(250 ms). Exposes window.__caddyBuilder for testing.
- status/css/caddy-builder.css — page-specific styles, themed
via existing --bg / --border / --accent / --ok-fg / --warn-fg /
--err-fg CSS variables. Mobile-friendly single-column layout
below 880 px.
- status/index.html — adds /css/caddy-builder.css link + the
"🔧 Reverse Proxy Builder" button in the Tools menu (id
caddy-builder-btn). No other UI changes.
- status/build.js — registers caddy-builder.js in features.js
bundle. Same load-order conventions as the surrounding modules.
- dashcaddy-api/__tests__/unit/caddy-builder.unit.test.js — 19
pure-function tests covering state defaults, buildPayload
(whitespace trim, blank-key drop, authService/stripPrefix
nullification, all booleans explicit), applyTemplate (5
presets + unknown-id no-op), and generate() against mocked
fetch (POST shape, 400 error capture, network-failure
graceful handling, short-circuit on missing fields).
Includes XSS regression: verifies the global escapeHtml
contract used by renderHeadersList is safe against
<script>/quote-injection.
Verified:
- jest __tests__/unit/caddy-builder.unit.test.js: 19/19 pass
- jest __tests__/routes/caddycode-fleet.routes.test.js: 8/8 pass
- node build.js: features.js now bundles 27 files (was 26),
no errors, new SW cache tag dashcaddy-shell-1ceeb68cff
- Live dry-run of the backend /generate endpoint with the
state the form produces matches the existing 1633-test
baseline (no regression in caddycode routes)
- Frontend bundle grep finds 6 distinct caddy-builder
identifiers in dist/features.js
DashCaddy Onboarding System
This directory contains the JavaScript modules for the user onboarding tooltip system.
Files
- onboarding.js - Main entry point, initializes the onboarding system
- tour-manager.js - Orchestrates the onboarding flow and manages tour state
- progress-tracker.js - Manages persistent storage of user progress
- tooltip-definitions.js - Defines all tooltip content and positioning
- dns-template-selector.js - Presents DNS server template options
- theme-adapter.js - Ensures tooltips match the current dashboard theme
Load Order
The scripts are loaded in the following order (as defined in status/index.html):
- progress-tracker.js
- theme-adapter.js
- tooltip-definitions.js
- dns-template-selector.js
- tour-manager.js
- onboarding.js (main initialization)
Dependencies
- Driver.js - Loaded from CDN (https://cdn.jsdelivr.net/npm/driver.js@1.3.1/)
- Dashboard CSS variables (for theming)
- Browser localStorage API (for progress tracking)
Integration
The onboarding system integrates with:
- Dashboard theme system (via CSS variables)
- App template selector (for DNS server deployment)
- Local storage (for progress persistence)
Development
Each module is wrapped in an IIFE (Immediately Invoked Function Expression) to avoid global namespace pollution. Modules communicate through well-defined interfaces and the window object where necessary.