sam/internet_use_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 2: device registry, dashboard cards, manual lock/unlock, audit

Browse Source 
- Device registry: add/edit name, child and platform, persisted in devices.
- Stable per-device topic derived from name + id, unchanged by renames.
- Desired state persisted in state; timed locks expire and are audited.
- Dashboard cards: name, child, platform, status dot, state and time left.
- Manual lock/unlock forms with CSRF; every change appends to audit (FR-15).
- Append-only activity list on the dashboard. No hard deletes (rule 10).
- Store and handler tests; version bumped to 0.2.0-phase2.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Sam Rolfe
2026-10-13 14:18:02 +11:00
parent c83c9df0a3
commit 7c88d3f52b
15 changed files with 1674 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
internal/web/templates/dashboard.html
View File

@@ -27,21 +27,39 @@
<main class="container">
<header class="page-head">
<h1 class="heading-1">Dashboard</h1>
<p class="page-head__sub">Phase 1 skeleton — the Control Service is up and answering.</p>
<p class="page-head__sub">Lock or unlock a device. State is saved in SQLite and written to the audit log.</p>
</header>
{{if .Flash}}<p class="flash flash--ok" role="status">{{.Flash}}</p>{{end}}
{{if .ErrMsg}}<p class="flash flash--error" role="alert">{{.ErrMsg}}</p>{{end}}
{{template "status.html" .}}
<section class="section" aria-labelledby="devices-title">
<div class="section__head">
<h2 id="devices-title" class="heading-2">Devices</h2>
<span class="category-pill"><span class="dot dot--faint"></span>0 registered</span>
<div class="section__actions">
<span class="category-pill"><span class="dot dot--faint"></span>{{len .Devices}} registered</span>
<a class="button-primary" href="/devices/new">Add device</a>
</div>
</div>
<div class="empty-state">
<p class="empty-state__title">No devices yet</p>
<p class="empty-state__body">Device registration arrives in Phase 2. Until then the
dashboard, session login and <code>/health</code> are the working pieces.</p>
{{if .Devices}}
{{template "device-cards.html" .}}
{{else}}
<div class="empty-state">
<p class="empty-state__title">No devices yet</p>
<p class="empty-state__body">Add Harry's phone or Finn's computer to give it a name,
a child, and a platform. Nothing is enforced until a later phase.</p>
</div>
{{end}}
</section>
<section class="section" aria-labelledby="audit-title">
<div class="section__head">
<h2 id="audit-title" class="heading-2">Activity</h2>
<span class="category-pill">append-only audit</span>
</div>
{{template "audit-list.html" .}}
</section>
</main>

80
internal/web/templates/device-form.html Normal file
View File

@@ -0,0 +1,80 @@
{{define "device-form.html"}}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>{{.Title}} — Internet Use Control</title>
<link rel="stylesheet" href="/static/tokens.css">
<link rel="stylesheet" href="/static/app.css">
</head>
<body class="app">
<nav class="nav-bar">
<a class="nav-bar__brand" href="/">
<span class="nav-bar__mark" aria-hidden="true"></span>
Internet Use Control
</a>
<div class="nav-bar__right">
<span class="nav-bar__user">{{.Username}}</span>
</div>
</nav>
<main class="container container--narrow">
<header class="page-head">
<p class="page-head__eyebrow"><a href="/">← Dashboard</a></p>
<h1 class="heading-1">{{.Heading}}</h1>
<p class="page-head__sub">{{.Sub}}</p>
</header>
{{if .Error}}<p class="flash flash--error" role="alert">{{.Error}}</p>{{end}}
<section class="card-panel">
<form method="post" action="{{.FormAction}}" class="stack-form">
<input type="hidden" name="csrf" value="{{.CSRF}}">
<label class="field">
<span class="field__label">Device name</span>
<input class="text-input" type="text" name="name" value="{{.Name}}"
placeholder="Harry's Pixel" maxlength="80" required
autocapitalize="words" spellcheck="false">
</label>
<label class="field">
<span class="field__label">Child</span>
<input class="text-input" type="text" name="child" value="{{.Child}}"
list="children" placeholder="Harry" maxlength="40" required autocapitalize="words">
<datalist id="children">
<option value="Harry"></option>
<option value="Finn"></option>
</datalist>
</label>
<fieldset class="field">
<legend class="field__label">Platform</legend>
<div class="radio-row">
<label class="radio-chip">
<input type="radio" name="platform" value="android" {{if eq .Platform "android"}}checked{{end}}>
<span>Android</span>
</label>
<label class="radio-chip">
<input type="radio" name="platform" value="windows" {{if eq .Platform "windows"}}checked{{end}}>
<span>Windows</span>
</label>
</div>
</fieldset>
<div class="form-actions">
<button class="button-primary" type="submit">Save device</button>
<a class="button-utility" href="/">Cancel</a>
</div>
</form>
</section>
</main>
<footer class="app-foot">
<span>Control Service · {{.Version}} · {{.AppEnv}}</span>
<span class="app-foot__sep">·</span>
<span>{{year}} Family Home Lab</span>
</footer>
</body>
</html>{{end}}

14
internal/web/templates/partials/audit-list.html Normal file
View File

@@ -0,0 +1,14 @@
{{define "audit-list.html"}}<ul class="audit-list">
{{range .Audit}}
<li class="audit-item">
<span class="audit-item__badge">{{.ActionLabel}}</span>
<span class="audit-item__body">
{{if .DeviceName}}<strong>{{.DeviceName}}</strong>{{end}}
{{if .Detail}}<span class="audit-item__detail">{{.Detail}}</span>{{end}}
</span>
<span class="audit-item__meta">{{.Actor}} · {{.CreatedAtLocal}}</span>
</li>
{{else}}
<li class="audit-item audit-item--empty">No activity yet.</li>
{{end}}
</ul>{{end}}

49
internal/web/templates/partials/device-cards.html Normal file
View File

@@ -0,0 +1,49 @@
{{define "device-cards.html"}}<div class="device-grid">
{{range .Devices}}
<article class="device-card">
<header class="device-card__head">
<div class="device-card__id">
<h3 class="device-card__name">{{.Name}}</h3>
<p class="device-card__meta">{{.Child}} · {{.PlatformLabel}}</p>
</div>
<span class="status-pill {{if .Locked}}status-pill--off{{else}}status-pill--on{{end}}">
<span class="dot {{if .Locked}}dot--off{{else}}dot--on{{end}}"></span>{{.StateLabel}}
</span>
</header>
<p class="device-card__state">
{{if .Locked}}Blocked{{if .TimeLeft}} · {{.TimeLeft}}{{end}}{{else}}No block active{{end}}
</p>
{{if .Until}}<p class="device-card__until">Lifts {{.UntilLocal}}</p>{{end}}
<div class="device-card__actions">
<form method="post" action="/devices/{{.ID}}/lock" class="inline-form">
<input type="hidden" name="csrf" value="{{$.CSRF}}">
<select class="select-input" name="minutes" aria-label="Lock duration">
<option value="0">until I unlock</option>
<option value="15">15 min</option>
<option value="30" selected>30 min</option>
<option value="60">1 hour</option>
</select>
<button class="button-primary" type="submit">{{if .Locked}}Re-lock{{else}}Lock{{end}}</button>
</form>
{{if .Locked}}
<form method="post" action="/devices/{{.ID}}/unlock" class="inline-form">
<input type="hidden" name="csrf" value="{{$.CSRF}}">
<button class="button-utility" type="submit">Unlock</button>
</form>
{{end}}
<a class="button-utility" href="/devices/{{.ID}}/edit">Edit</a>
</div>
<p class="device-card__foot">
<span class="device-card__presence">
<span class="dot {{if .Online}}dot--on{{else}}dot--faint{{end}}"></span>
{{if .Online}}online{{else}}offline{{end}}
</span>
{{if .HasLastSeen}}<span>· last seen {{.LastSeen}}</span>{{else}}<span>· never connected</span>{{end}}
</p>
<p class="device-card__topic"><code>{{.Topic}}</code></p>
</article>
{{end}}
</div>{{end}}