root/ubuntu-based-kiosk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Web UI addon: browser-based config editor (v2.16.0)

Browse Source 
New Addons -> Web UI: a small Node/Express app (webui/) installed as a
systemd service running as $KIOSK_USER, giving a browser-based editor
for Sites & Page Timing, Display & Interaction, and Password Protection
& Lockout - the three Core Settings menus that are pure config.json
read/write with no privileged system mutation involved. Runs with no
sudo at all, since config.json is already owned by $KIOSK_USER.

webui/lib/config.js re-implements lib/config.sh's exact schema and
merge-on-save contract in JS (kiosk-app/main.js already reads the same
config.json directly in JS, so this isn't a new pattern), so it can
never silently clobber fields it doesn't track - the same bug
previously fixed in lib/config.sh's own history.

No login of its own by design: Authelia runs elsewhere, and the
expectation is a reverse proxy (e.g. Caddy) with Authelia forward-auth
in front of it, the same way other self-hosted apps get protected -
Authelia integration is explicitly out of scope for this repo.

Deliberately narrow scope for this first pass: WiFi, Timezone,
Power/Display/Quiet Hours, Complete Uninstall, every other addon, and
everything in Advanced remain terminal-only, since a network-facing
process shouldn't be handed sudo-level system mutation without a lot
more thought than this pass gives it. Wired into Complete Uninstall
(webui_do_uninstall) and Clone Settings (addon-presence detection) the
same way every other addon is.

This is the single-kiosk piece of the web-based GUI this repo's
"Modular Management" notes have mentioned for a while - a central
multi-kiosk fleet dashboard is an intentional follow-up.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VfsFSoRqfbRG7XAg5RoE7e
This commit is contained in:
Claude
2026-08-19 16:01:20 +00:00
parent d0b76dc6cf
commit b6ed4aad9c
17 changed files with 2312 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/public/index.html
+139
View File
@@ -0,0 +1,139 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kiosk Web UI</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Kiosk Web UI</h1>
<p class="subtitle">Sites, display behavior, and lockout - saved directly to this kiosk's config.json.</p>
</header>
<main>
<section id="msg" class="banner" hidden></section>
<section class="card">
<h2>Sites &amp; Page Timing</h2>
<div id="sites-list"></div>
<div class="button-row">
<button type="button" id="add-site" class="secondary">Add a page</button>
<button type="button" id="save-sites">Save Sites &amp; Page Timing</button>
</div>
</section>
<section class="card">
<h2>Display &amp; Interaction</h2>
<form id="display-form">
<label>
Touch gesture mode
<select name="swipeMode">
<option value="dual">Dual-direction (recommended for touchscreens)</option>
<option value="standard">Standard</option>
</select>
</label>
<label>
Link navigation security
<select name="allowNavigation">
<option value="restricted">Restricted - only the loaded URL</option>
<option value="same-origin">Same-origin - links within the same domain (recommended)</option>
<option value="open">Open - any link</option>
</select>
</label>
<label class="checkbox"><input type="checkbox" name="enablePauseButton"> Pause button</label>
<label class="checkbox"><input type="checkbox" name="enableKeyboardButton"> On-screen keyboard button</label>
<label class="checkbox"><input type="checkbox" name="enableNavButton"> Navigation/help button</label>
<fieldset>
<legend>Home page</legend>
<label>
Home page
<select name="homeTabIndex" id="home-tab-select">
<option value="-1">Disabled</option>
</select>
</label>
<label>
Inactivity timeout (minutes)
<input type="number" name="inactivityTimeoutMinutes" min="1" max="240" step="1">
</label>
</fieldset>
<button type="submit">Save Display &amp; Interaction</button>
</form>
</section>
<section class="card">
<h2>Password Protection &amp; Lockout</h2>
<form id="lockout-form">
<label class="checkbox"><input type="checkbox" name="enablePasswordProtection" id="lockout-enabled"> Enable password protection</label>
<div id="lockout-fields">
<label>
<span id="password-label">Set lockout password</span>
<input type="password" name="newLockoutPassword" autocomplete="new-password">
</label>
<label>
Confirm password
<input type="password" id="lockout-password-confirm" autocomplete="new-password">
</label>
<label>
Inactivity lockout timeout (minutes, 0 = boot/wake only)
<input type="number" name="lockoutTimeoutMinutes" min="0" max="1440" step="1">
</label>
<label class="checkbox">
<input type="checkbox" id="daily-lock-enabled"> Lock at a specific time daily
</label>
<label>
Daily lock time
<input type="time" name="lockoutAtTime" id="lockout-at-time" disabled>
</label>
<label class="checkbox"><input type="checkbox" name="requirePasswordOnBoot"> Require password on system boot</label>
</div>
<button type="submit">Save Password Protection &amp; Lockout</button>
</form>
</section>
</main>
<template id="site-row-template">
<div class="site-row card-inset">
<div class="site-row-grid">
<label>
URL
<input type="text" class="site-url" placeholder="example.com or https://example.com">
</label>
<label>
Name (optional)
<input type="text" class="site-name" placeholder="Shown instead of the URL">
</label>
<label>
Duration (seconds; -1=hidden, 0=manual, &gt;0=auto-rotate)
<input type="number" class="site-duration" min="-1" max="86400" step="1" value="180">
</label>
</div>
<details class="site-auth">
<summary>HTTP Basic Auth <span class="auth-state"></span></summary>
<label class="checkbox"><input type="checkbox" class="site-auth-enable"> Requires a username/password</label>
<label>
Username
<input type="text" class="site-auth-username">
</label>
<label>
New password <span class="hint">(leave blank to keep the current one)</span>
<input type="password" class="site-auth-password" autocomplete="new-password">
</label>
</details>
<button type="button" class="remove-site danger">Remove page</button>
</div>
</template>
<script src="app.js"></script>
</body>
</html>