Web UI login with the kiosk's PIN/password; shortcuts list on the Sites page

When the kiosk's password protection is on, the Web UI now asks for the same
PIN/password the lock screen uses: random session cookie (12 h, HttpOnly,
SameSite=Strict), the lock screen's wrong-code slowdown, sessions end when
the kiosk's code changes, sign out. With protection off nothing changes.
The Sites page (Web UI and terminal menu) lists the back/forward/home and
site-switching keys.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013wi3ZQveYdjfcrEsyazq32

webui/public/app.js

@@ -1,3 +1,12 @@
+// Signed out (or the kiosk's code changed): any 401 from the server sends
+// the page back to the login screen.
+const nativeFetch = window.fetch.bind(window);
+window.fetch = async (...args) => {
+    const res = await nativeFetch(...args);
+    if (res.status === 401 && !String(args[0]).includes('/api/login')) location.reload();
+    return res;
+};
+
 'use strict';
 
 // webui/public/app.js - vanilla JS, no framework/build step. Every
@@ -32,6 +41,23 @@ document.querySelectorAll('.nav-item').forEach((btn) => {
 
 document.getElementById('brand-sub').textContent = location.host || 'this kiosk';
 
+// When the kiosk's password protection is on, this page is behind the same
+// PIN/password - say so, and offer Sign out.
+fetch('/api/auth').then((r) => r.json()).then((s) => {
+    if (!s.required) return;
+    const foot = document.getElementById('sidebar-footer');
+    foot.textContent = "Signed in with the kiosk's " + (s.codeType === 'pin' ? 'PIN' : 'password') + '. ';
+    const out = document.createElement('a');
+    out.href = '#';
+    out.textContent = 'Sign out';
+    out.addEventListener('click', async (e) => {
+        e.preventDefault();
+        await fetch('/api/logout', { method: 'POST' });
+        location.reload();
+    });
+    foot.appendChild(out);
+}).catch(() => {});
+
 /* ---------------------------------------------------------------------- */
 /* Config API (Sites / Display / Lockout)                                 */
 /* ---------------------------------------------------------------------- */

webui/public/index.html

@@ -46,7 +46,7 @@
       </button>
     </div>
 
-    <div class="sidebar-footer">No login of its own - front this with your own reverse proxy + Authelia if it needs to be reachable beyond a trusted LAN.</div>
+    <div class="sidebar-footer" id="sidebar-footer">Open to anyone on this network while the kiosk's password protection is off. Turn it on (Lockout) and this page asks for the same PIN/password. Beyond a trusted LAN, front it with your own reverse proxy + Authelia.</div>
   </nav>
 
   <main class="main">
@@ -65,6 +65,18 @@
           <button type="button" id="save-sites">Save Sites &amp; Page Timing</button>
         </div>
       </div>
+      <div class="card">
+        <h2 style="margin-top:0">Keyboard shortcuts</h2>
+        <p class="hint" style="margin-bottom:10px">For a keyboard on the kiosk. They act on the page that's on screen, and don't work while the screen is locked.</p>
+        <table class="shortcuts">
+          <tr><td><kbd>Alt</kbd> + <kbd>Left</kbd></td><td>Back (previous page in this site)</td></tr>
+          <tr><td><kbd>Alt</kbd> + <kbd>Right</kbd></td><td>Forward</td></tr>
+          <tr><td><kbd>Alt</kbd> + <kbd>Home</kbd></td><td>Home: back to this page's own address, as set above</td></tr>
+          <tr><td><kbd>Ctrl</kbd> + <kbd>Tab</kbd> / <kbd>Ctrl</kbd> + <kbd>PageDown</kbd></td><td>Next site</td></tr>
+          <tr><td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Tab</kbd> / <kbd>Ctrl</kbd> + <kbd>PageUp</kbd></td><td>Previous site</td></tr>
+        </table>
+        <p class="hint" style="margin-top:10px">Screens with no keyboard can show on-screen back / home / forward buttons: Display &rarr; "On-screen back / home / forward buttons". A mouse's side buttons also go back and forward.</p>
+      </div>
     </section>
 
     <!-- Display & Interaction -->

webui/public/login.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Kiosk Web UI - sign in</title>
+<link rel="stylesheet" href="style.css">
+<style>
+  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
+  .login { width: min(360px, 92vw); padding: 28px; border-radius: 14px; background: var(--surface, #fff);
+           box-shadow: 0 6px 30px rgba(0,0,0,.18); }
+  .login h1 { font-size: 20px; margin: 0 0 6px; }
+  .login p { margin: 0 0 16px; opacity: .75; font-size: 14px; }
+  .login input { width: 100%; box-sizing: border-box; padding: 12px; font-size: 18px; margin-bottom: 12px; }
+  .login button { width: 100%; padding: 12px; font-size: 16px; cursor: pointer; }
+  #err { color: #c0392b; min-height: 20px; margin-top: 10px; font-size: 14px; }
+</style>
+</head>
+<body>
+<form class="login" id="form">
+  <h1>Kiosk Web UI</h1>
+  <p id="hint">Enter the kiosk's code to continue.</p>
+  <input id="code" type="password" autocomplete="current-password" autofocus>
+  <button type="submit" id="go">Sign in</button>
+  <div id="err"></div>
+</form>
+<script>
+  const $ = (id) => document.getElementById(id);
+  fetch('/api/auth').then((r) => r.json()).then((s) => {
+    if (s.authed) { location.href = '/'; return; }
+    if (s.codeType === 'pin') {
+      $('hint').textContent = "Enter the kiosk's PIN to continue.";
+      $('code').setAttribute('inputmode', 'numeric');
+    } else {
+      $('hint').textContent = "Enter the kiosk's password to continue.";
+    }
+  }).catch(() => {});
+  $('form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    $('go').disabled = true;
+    $('err').textContent = '';
+    try {
+      const res = await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ code: $('code').value }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (res.ok && data.ok) { location.href = '/'; return; }
+      $('err').textContent = data.error || 'Sign in failed';
+      $('code').value = '';
+      $('code').focus();
+    } catch (err) {
+      $('err').textContent = 'Could not reach the kiosk';
+    }
+    $('go').disabled = false;
+  });
+</script>
+</body>
+</html>

webui/public/style.css

@@ -393,3 +393,14 @@ button.danger:hover { background: var(--danger-soft); }
   .sidebar-footer { display: none; }
   .main { padding: 20px; }
 }
+
+/* Keyboard shortcuts list on the Sites page */
+.shortcuts { border-collapse: collapse; width: 100%; font-size: 13.5px; }
+.shortcuts td { padding: 6px 10px 6px 0; vertical-align: top; }
+.shortcuts td:first-child { white-space: nowrap; }
+kbd {
+  display: inline-block; padding: 1px 6px; font: inherit; font-size: 12px;
+  border: 1px solid var(--border, #cfd4da); border-bottom-width: 2px; border-radius: 4px;
+  background: var(--surface-2, rgba(127,127,127,.12));
+}
+