feat: base UI shell with themes, auth pages, profile, and role navigation (phase 4)
- 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
@@ -0,0 +1,24 @@
|
||||
{{define "content"}}
|
||||
<div class="card">
|
||||
<h1>Change password</h1>
|
||||
{{if .User.MustChangePassword}}
|
||||
<p class="hint">You must set a new password before continuing.</p>
|
||||
{{end}}
|
||||
<div class="error-box" id="error" role="alert"></div>
|
||||
<form id="change-password-form" class="mt">
|
||||
<div class="field">
|
||||
<label for="current">Current password</label>
|
||||
<input type="password" id="current" autocomplete="current-password" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="new">New password</label>
|
||||
<input type="password" id="new" autocomplete="new-password" minlength="8" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="confirm">Confirm new password</label>
|
||||
<input type="password" id="confirm" autocomplete="new-password" minlength="8" required>
|
||||
</div>
|
||||
<button class="btn primary" type="submit">Change password</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,41 @@
|
||||
{{define "content"}}
|
||||
<h1>Welcome, {{.User.Name}}</h1>
|
||||
<div class="grid">
|
||||
{{if .User.Roles.Developer}}
|
||||
<div class="card">
|
||||
<h2>Bounty Board</h2>
|
||||
<p class="muted">Browse published tasks and request assignments.</p>
|
||||
<a class="btn primary" href="/board">Open board</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>My Tasks</h2>
|
||||
<p class="muted">Track your assigned and in-progress work.</p>
|
||||
<a class="btn" href="/my-tasks">Open my tasks</a>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .User.Roles.Consultant}}
|
||||
<div class="card">
|
||||
<h2>Atomization Board</h2>
|
||||
<p class="muted">Subdivide imported tickets and publish bounties.</p>
|
||||
<a class="btn primary" href="/consultant/board">Open atomization</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Review Queue</h2>
|
||||
<p class="muted">Approve or request changes on submitted work.</p>
|
||||
<a class="btn" href="/consultant/reviews">Open reviews</a>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if .User.Roles.Admin}}
|
||||
<div class="card">
|
||||
<h2>Administration</h2>
|
||||
<p class="muted">Customers, users, settings, audit log, service status.</p>
|
||||
<a class="btn primary" href="/admin">Open admin</a>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="card">
|
||||
<h2>Messages</h2>
|
||||
<p class="muted">Direct, group and project conversations.</p>
|
||||
<a class="btn" href="/messages">Open messages</a>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -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}}
|
||||
@@ -0,0 +1,25 @@
|
||||
{{define "content"}}
|
||||
<div class="card">
|
||||
<h1>Log in</h1>
|
||||
<div class="error-box" id="error" role="alert">{{.Error}}</div>
|
||||
<form id="login-form">
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" autocomplete="email" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" autocomplete="current-password" required>
|
||||
</div>
|
||||
<div class="spread">
|
||||
<button class="btn primary" type="submit">Log in</button>
|
||||
<a href="/register">Create an account</a>
|
||||
</div>
|
||||
</form>
|
||||
{{if .OIDCEnabled}}
|
||||
<div class="mt">
|
||||
<a class="btn" href="/api/v1/auth/oidc/login">Continue with SSO</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,7 @@
|
||||
{{define "content"}}
|
||||
<div class="card">
|
||||
<h1>{{.Title}}</h1>
|
||||
<p class="muted">This area is under construction — it arrives in a later build phase.</p>
|
||||
<a class="btn" href="/">Back to home</a>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,78 @@
|
||||
{{define "content"}}
|
||||
<h1>Your profile</h1>
|
||||
<div class="error-box" id="error" role="alert"></div>
|
||||
<div class="ok-box" id="ok" role="status"></div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Avatar</h2>
|
||||
<div class="spread">
|
||||
<span id="avatar-preview">
|
||||
{{if .User.AvatarFileID}}
|
||||
<img class="avatar large" src="/files/{{.User.AvatarFileID}}" alt="Current avatar">
|
||||
{{else}}
|
||||
<span class="avatar large" aria-hidden="true">{{initials .User.Name}}</span>
|
||||
{{end}}
|
||||
</span>
|
||||
<div>
|
||||
<label for="avatar-file">Upload new avatar (image)</label>
|
||||
<input type="file" id="avatar-file" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="profile-form" class="card" data-version="{{.User.Version}}">
|
||||
<h2>Basics</h2>
|
||||
<div class="field">
|
||||
<label for="p-name">Name</label>
|
||||
<input type="text" id="p-name" value="{{.User.Name}}" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="p-bio">Bio</label>
|
||||
<textarea id="p-bio">{{.User.Bio}}</textarea>
|
||||
</div>
|
||||
|
||||
<h2>Contact</h2>
|
||||
<div class="row">
|
||||
<div class="field">
|
||||
<label for="p-phone">Phone</label>
|
||||
<input type="text" id="p-phone" value="{{.User.Contact.Phone}}" autocomplete="tel">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="p-location">Location</label>
|
||||
<input type="text" id="p-location" value="{{.User.Contact.Location}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="p-links">Links (one per line)</label>
|
||||
<textarea id="p-links">{{range .User.Contact.Links}}{{.}}
|
||||
{{end}}</textarea>
|
||||
</div>
|
||||
|
||||
<h2>Additional fields</h2>
|
||||
<p class="hint">Arbitrary key/value details shown on your profile card.</p>
|
||||
<div id="extra-rows"></div>
|
||||
<button class="btn small" type="button" id="extra-add">+ Add field</button>
|
||||
|
||||
<h2 class="mt">Appearance</h2>
|
||||
<div class="field">
|
||||
<label for="p-theme">Theme</label>
|
||||
<select id="p-theme">
|
||||
<option value="light" {{if eq .User.Settings.Theme "light"}}selected{{end}}>Light (beige)</option>
|
||||
<option value="dark" {{if eq .User.Settings.Theme "dark"}}selected{{end}}>Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn primary" type="submit">Save profile</button>
|
||||
</form>
|
||||
|
||||
<div class="card">
|
||||
<h2>Security</h2>
|
||||
{{if .HasLocalAuth}}
|
||||
<p><a class="btn" href="/change-password">Change password</a></p>
|
||||
{{else}}
|
||||
<p class="muted">This account signs in via SSO and has no local password.</p>
|
||||
{{end}}
|
||||
<p><button class="btn danger" type="button" id="logout-all">Log out everywhere</button></p>
|
||||
<p class="hint">Revokes every active session for your account, including this one.</p>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,26 @@
|
||||
{{define "content"}}
|
||||
<div class="card">
|
||||
<h1>Create account</h1>
|
||||
<p class="hint">Self-registration creates a developer account. Consultant and admin roles are granted by an administrator.</p>
|
||||
<div class="error-box" id="error" role="alert"></div>
|
||||
<form id="register-form" class="mt">
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" autocomplete="name" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" autocomplete="email" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" autocomplete="new-password" minlength="8" required>
|
||||
<p class="hint">At least 8 characters.</p>
|
||||
</div>
|
||||
<div class="spread">
|
||||
<button class="btn primary" type="submit">Create account</button>
|
||||
<a href="/login">I already have an account</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user