etalon/BountyBoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: base UI shell with themes, auth pages, profile, and role navigation (phase 4)

Browse Source 
- embedded Go templates + vanilla ES-module JS + hand-written CSS, no build step
- exact §10 beige light / dark design tokens, square edges (radius 2px),
  system font stack, visible focus rings
- theme toggle persisted to localStorage and the user profile
- login/register/change-password pages wired to the auth API
- profile page: avatar upload (image-sniffed, old file cleanup), bio,
  contacts, arbitrary extra key/value fields, optimistic-concurrency 409
- role-based top navigation with placeholders for later-phase areas
- GET /files/{id} with scope-based access (session) or signed token (§5.1)
- security headers incl. CSP without unsafe-inline scripts

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
etalon
2026-06-12 18:39:38 +02:00
parent c1cc781279
commit 34bf5b5ac2
27 changed files with 1579 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/layout.html
+55
View File
@@ -0,0 +1,55 @@
{{define "layout"}}<!doctype html>
<html lang="en" data-theme="light" data-default-theme="{{.DefaultTheme}}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.Title}} · Bounty Board</title>
<link rel="stylesheet" href="/static/css/app.css">
<script src="/static/js/theme.js"></script>
</head>
<body {{if .User}}data-logged-in="1"{{end}}>
<nav class="topnav">
<a class="brand" href="/">Bounty Board</a>
<div class="links">
{{if .User}}
{{if .User.Roles.Developer}}
<a href="/board" {{if eq .Active "board"}}aria-current="page"{{end}}>Bounty Board</a>
<a href="/my-tasks" {{if eq .Active "my-tasks"}}aria-current="page"{{end}}>My Tasks</a>
{{end}}
{{if .User.Roles.Consultant}}
<a href="/consultant/board" {{if eq .Active "atomization"}}aria-current="page"{{end}}>Atomization</a>
<a href="/consultant/reviews" {{if eq .Active "reviews"}}aria-current="page"{{end}}>Reviews</a>
<a href="/consultant/pool" {{if eq .Active "pool"}}aria-current="page"{{end}}>Pool</a>
{{end}}
{{if .User.Roles.Admin}}
<a href="/admin" {{if eq .Active "admin"}}aria-current="page"{{end}}>Admin</a>
{{end}}
<a href="/messages" {{if eq .Active "messages"}}aria-current="page"{{end}}>Messages</a>
<a href="/metrics" {{if eq .Active "metrics"}}aria-current="page"{{end}}>Metrics</a>
{{end}}
</div>
<div class="right">
<button class="btn ghost small" id="nav-theme" type="button" aria-label="Toggle dark / light theme">◐</button>
{{if .User}}
<a href="/profile" aria-label="Your profile">
{{if .User.AvatarFileID}}
<img class="avatar" src="/files/{{.User.AvatarFileID}}" alt="">
{{else}}
<span class="avatar" aria-hidden="true">{{initials .User.Name}}</span>
{{end}}
</a>
<button class="btn small" id="nav-logout" type="button">Log out</button>
{{else}}
<a class="btn small" href="/login">Log in</a>
{{end}}
</div>
</nav>
<main class="container{{if .Narrow}} narrow{{end}}">
{{template "content" .}}
</main>
<div id="toasts" aria-live="polite"></div>
<script type="module" src="/static/js/nav.js"></script>
{{range .Scripts}}<script type="module" src="{{.}}"></script>
{{end}}
</body>
</html>{{end}}