Add the administration pages to the web interface

Running the server meant running the API by hand: invites, accounts,
groups and grants existed only as endpoints and CLI commands, so the
browser could create a vault and nothing else.

/web/groups walks the group tree and opens onto one group's members,
roles and vault access, including the grants it inherits from above and
where they come from. /web/users lists the accounts you may see, and
lets a server administrator disable, enable, clear a lost second
factor, promote, demote or delete one. /web/invites shows the
outstanding links with their use counts, issues new ones and revokes
them.

Every administrative change is now a function of the state and the
caller in admin.go, which both the JSON handlers and the forms call. The
alternative was a second copy of the permission rules behind the pages,
which would have drifted on the first change. The same move gave the API
the two verbs it was missing: DELETE /api/v1/invites/{token} and
PATCH /api/v1/users/{id}.

Account changes are server-administrator only. A group administrator
decides who reaches which vault; disabling an account or clearing
somebody's second factor reaches past the group they share. Disable and
delete revoke that account's sessions, and the three changes that would
lock the caller out are refused on their own account.

Pages go through webPage and forms through webForm, so the session and
CSRF checks cannot be forgotten on a new form. No page carries any
JavaScript.

Server 0.6.0.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Reactorcoremeltdown
2026-10-30 12:32:08 +01:00
co-authored by Claude Opus 5
parent 3a499532f3
commit 81094c0228
11 changed files with 1783 additions and 274 deletions
+39 -19
View File
@@ -5,9 +5,12 @@ import (
"net/http"
)
// The server has no browsable UI. These three pages exist only because a
// browser is the right place to approve a device, redeem an invite and run an
// OIDC round trip.
// The pages: sign-in, the vault list, the administration pages in
// pagesadmin.go, and the three one-shot pages a browser is the right place
// for — approving a device, redeeming an invite and finishing an OIDC round
// trip. There is no JavaScript anywhere in them: every control is a form,
// which is what makes the whole interface work in a locked-down browser and
// keeps the security surface down to the CSRF token.
var pages = template.Must(template.New("layout").Parse(`
{{define "layout"}}<!doctype html>
<html lang="en"><head><meta charset="utf-8">
@@ -17,10 +20,11 @@ var pages = template.Must(template.New("layout").Parse(`
:root{color-scheme:light dark;--fg:#1a1a1a;--bg:#fafafa;--card:#fff;--line:#d8d8d8;--accent:#2d6a4f}
@media(prefers-color-scheme:dark){:root{--fg:#e8e8e8;--bg:#161616;--card:#1f1f1f;--line:#3a3a3a;--accent:#74c69d}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--fg);
body{margin:0;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
background:var(--bg);color:var(--fg);
font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;padding:24px}
body.wide{place-items:start center}
main{width:100%;max-width:26rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px}
main{width:100%;min-width:0;max-width:26rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px}
body.wide main{max-width:54rem}
h1{font-size:1.25rem;margin:0 0 .25rem}
p.sub{margin:0 0 1.25rem;opacity:.7;font-size:.9rem}
@@ -56,7 +60,29 @@ border:1px solid var(--line);border-radius:8px}
fieldset{border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem 1.4rem;margin:0}
legend{padding:0 .4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.empty{opacity:.7;font-size:.9rem;margin:.5rem 0 1.5rem}
</style></head><body{{if .Wide}} class="wide"{{end}}><main>{{template "body" .}}</main></body></html>{{end}}
nav{display:flex;gap:.25rem;flex-wrap:wrap;margin:0 0 1.25rem;padding-bottom:.75rem;
border-bottom:1px solid var(--line)}
nav a,nav .here{padding:.3rem .6rem;border-radius:7px;font-size:.9rem;text-decoration:none;color:var(--accent)}
nav .here{background:var(--accent);color:#fff;font-weight:600}
nav form.out{margin:0 0 0 auto}
nav button{width:auto;margin:0;padding:.3rem .6rem;font:inherit;font-size:.85rem;font-weight:500;
background:transparent;color:var(--accent);border:1px solid var(--line)}
a{color:var(--accent)}
td form{display:inline;margin:0}
td button{width:auto;margin:0 .25rem .25rem 0;padding:.3rem .5rem;font-size:.8rem;font-weight:500;
background:transparent;color:var(--accent);border:1px solid var(--line)}
td button.danger{color:#b02a37}
@media(prefers-color-scheme:dark){td button.danger{color:#f2b8c0}}
.inline{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;margin:0}
.inline>div{flex:1 1 9rem}
.inline label{margin-top:0}
.inline button{width:auto;margin:0;padding:.6rem 1.1rem}
input[readonly]{min-width:17rem;font-family:ui-monospace,SFMono-Regular,monospace;
font-size:.8rem;opacity:.85}
.scroll{max-width:100%;overflow-x:auto}
fieldset+fieldset{margin-top:1.5rem}
.gone{opacity:.55}
</style></head><body{{if .Wide}} class="wide"{{end}}><main>{{if .Nav}}<nav>{{range .Nav}}{{if .Current}}<span class="here">{{.Label}}</span>{{else}}<a href="{{.Href}}">{{.Label}}</a>{{end}}{{end}}<form class="out" method="post" action="/web/signout"><input type="hidden" name="csrf" value="{{.CSRF}}"><button type="submit">Sign out {{.User}}</button></form></nav>{{end}}{{template "body" .}}</main></body></html>{{end}}
`))
var deviceTmpl = template.Must(template.Must(pages.Clone()).Parse(`
@@ -101,17 +127,12 @@ var signInTmpl = template.Must(template.Must(pages.Clone()).Parse(`
var vaultsTmpl = template.Must(template.Must(pages.Clone()).Parse(`
{{define "body"}}
<header>
<div><h1>Your vaults</h1><p class="sub">{{.User}}</p></div>
<form method="post" action="/web/signout">
<input type="hidden" name="csrf" value="{{.CSRF}}">
<button type="submit">Sign out</button>
</form>
</header>
<h1>Your vaults</h1>
<p class="sub">The files your KeepOrg client keeps in sync.</p>
{{if .Error}}<p class="err">{{.Error}}</p>{{end}}
{{if .Notice}}<p class="ok">{{.Notice}}</p>{{end}}
{{if .Vaults}}
<table>
<div class="scroll"><table>
<thead><tr><th>Vault</th><th>Access</th><th>On conflict</th><th>Version</th><th>Last saved</th></tr></thead>
<tbody>
{{range .Vaults}}<tr>
@@ -121,7 +142,7 @@ var vaultsTmpl = template.Must(template.Must(pages.Clone()).Parse(`
<td>{{.Version}}</td>
<td>{{.Updated}}{{if .By}}<br><small>by {{.By}}</small>{{end}}</td>
</tr>{{end}}
</tbody></table>
</tbody></table></div>
{{else}}
<p class="empty">No vaults yet. Create one below, then open it from the KeepOrg client
on your computer or phone.</p>
@@ -201,10 +222,9 @@ func (s *Server) renderSignIn(w http.ResponseWriter, errMsg string) {
func (s *Server) renderVaults(w http.ResponseWriter, sess *webSession, errMsg, notice string) {
vaults, groups := s.vaultRows(sess.user)
render(w, vaultsTmpl, map[string]any{
"Title": "Vaults", "Wide": true, "User": sess.user.Username, "CSRF": sess.csrf,
"Vaults": vaults, "Groups": groups, "Error": errMsg, "Notice": notice,
})
d := s.shell(sess, "Vaults", "Vaults")
d["Vaults"], d["Groups"], d["Error"], d["Notice"] = vaults, groups, errMsg, notice
render(w, vaultsTmpl, d)
}
func (s *Server) renderDone(w http.ResponseWriter, title, msg string) {