P1-23 / P1-28: base layout, login, session-aware nav + Tailwind build
P1-28: Tailwind standalone CLI wired into the Makefile. `make tailwind` downloads the pinned v3.4.17 binary into bin/tailwindcss (gitignored), builds web/styles/input.css → web/static/css/styles.css. `make build` now runs the CSS pass first; `make tailwind-watch` for dev. Output is embedded in the binary via web.FS — single static binary, no Node. The CSS source carries every component class the v1 mockups defined (status dots, buttons, host row, log viewer, progress bar, fields, chips, snippet panel, empty state) so screens that land later can just reach for them. P1-23: html/template tree at web/templates with two layouts (base with chrome, chromeless for login + bootstrap), one nav partial, and two pages (dashboard placeholder, login). internal/server/ui parses the tree at startup; ui_handlers.go in the http package wires: GET / dashboard (303 → /login when unauthed) GET /login sign-in form POST /login consume form, mint session cookie, 303 → / POST /logout drop cookie, 303 → /login GET /static/* embedded Tailwind bundle The HTML login flow shares store/session logic with /api/auth/login via a new authenticateAndSession helper — same security guarantees, two surface representations (HTML form / JSON). Verified end-to-end: bootstrap → form-login → authed dashboard → sign-out → 303 cycle works in the browser; Tailwind output emits only the component classes referenced in the live templates (9.6kB minified). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,11 @@
|
||||
// Package web embeds the html/template tree and the static assets
|
||||
// (compiled Tailwind CSS) so the server is a single static binary.
|
||||
//
|
||||
// Templates live at templates/, static at static/. Both trees are
|
||||
// served by internal/server/ui and internal/server/http respectively.
|
||||
package web
|
||||
|
||||
import "embed"
|
||||
|
||||
//go:embed templates/* static/*
|
||||
var FS embed.FS
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,231 @@
|
||||
/* ============================================================
|
||||
* v1 design tokens + components.
|
||||
*
|
||||
* Source of truth for the operator-console register. Anything not
|
||||
* defined here doesn't exist in v1. New components get added here
|
||||
* first, then templated.
|
||||
*
|
||||
* Built via the Tailwind standalone CLI (no Node):
|
||||
* make tailwind
|
||||
* outputs:
|
||||
* web/static/css/styles.css
|
||||
* ============================================================ */
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* surface */
|
||||
--bg: oklch(0.17 0.006 250);
|
||||
--panel: oklch(0.20 0.007 250);
|
||||
--panel-hi: oklch(0.23 0.008 250);
|
||||
|
||||
/* line */
|
||||
--line: oklch(0.27 0.010 250);
|
||||
--line-soft: oklch(0.23 0.008 250);
|
||||
|
||||
/* ink */
|
||||
--ink: oklch(0.96 0.005 250);
|
||||
--ink-mid: oklch(0.78 0.005 250);
|
||||
--ink-mute: oklch(0.58 0.006 250);
|
||||
--ink-fade: oklch(0.42 0.006 250);
|
||||
|
||||
/* state */
|
||||
--ok: oklch(0.78 0.14 155);
|
||||
--warn: oklch(0.82 0.13 80);
|
||||
--bad: oklch(0.70 0.20 25);
|
||||
--off: oklch(0.50 0.005 250);
|
||||
|
||||
/* accent */
|
||||
--accent: oklch(0.82 0.12 195);
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body {
|
||||
font-feature-settings: 'cv11', 'ss01', 'ss03';
|
||||
}
|
||||
::selection { background: color-mix(in oklch, var(--accent), transparent 70%); }
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* ---------- typography helpers ---------- */
|
||||
.mono {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ---------- surface helpers ---------- */
|
||||
.panel { background: var(--panel); border: 1px solid var(--line-soft); }
|
||||
.hairline { box-shadow: inset 0 -1px 0 var(--line-soft); }
|
||||
|
||||
/* ---------- status dots ---------- */
|
||||
.dot { width: 7px; height: 7px; border-radius: 9999px; display: inline-block; }
|
||||
.dot-online { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok), transparent 80%); }
|
||||
.dot-degraded { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warn), transparent 80%); }
|
||||
.dot-offline { background: var(--off); }
|
||||
.dot-failed { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in oklch, var(--bad), transparent 80%); }
|
||||
.pulse { animation: rm-pulse 2.4s ease-in-out infinite; }
|
||||
@keyframes rm-pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent), transparent 80%); }
|
||||
50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent), transparent 92%); }
|
||||
}
|
||||
|
||||
/* ---------- buttons ---------- */
|
||||
.btn {
|
||||
font-size: 12px; font-weight: 500;
|
||||
padding: 6px 11px; border-radius: 5px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--ink-mid);
|
||||
transition: all 120ms ease;
|
||||
cursor: pointer;
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:hover { background: var(--panel-hi); color: var(--ink); }
|
||||
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
|
||||
.btn-primary { color: oklch(0.18 0.01 195); background: var(--accent); border-color: var(--accent); }
|
||||
.btn-primary:hover { filter: brightness(1.08); }
|
||||
.btn-ghost { border-color: transparent; }
|
||||
.btn-ghost:hover { background: var(--panel-hi); border-color: transparent; }
|
||||
.btn-danger { color: var(--bad); border-color: color-mix(in oklch, var(--bad), transparent 70%); }
|
||||
.btn-danger:hover {
|
||||
background: color-mix(in oklch, var(--bad), transparent 88%);
|
||||
border-color: color-mix(in oklch, var(--bad), transparent 50%);
|
||||
color: oklch(0.85 0.10 25);
|
||||
}
|
||||
.btn-lg { font-size: 13px; padding: 9px 14px; }
|
||||
.btn-block { width: 100%; justify-content: center; }
|
||||
|
||||
/* ---------- nav tabs ---------- */
|
||||
.nav-tab {
|
||||
font-size: 13px; padding: 18px 0;
|
||||
color: var(--ink-mute);
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-right: 28px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-tab.active { color: var(--ink); border-color: var(--accent); }
|
||||
.nav-tab:hover { color: var(--ink); }
|
||||
|
||||
/* secondary tabs (host detail sub-nav) */
|
||||
.sub-tab {
|
||||
font-size: 13px; padding: 12px 0;
|
||||
color: var(--ink-mute);
|
||||
border-bottom: 1.5px solid transparent;
|
||||
margin-right: 24px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sub-tab.active { color: var(--ink); border-color: var(--ink); }
|
||||
|
||||
/* ---------- tags ---------- */
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
font-size: 11px; line-height: 1; padding: 4px 7px;
|
||||
border: 1px solid var(--line); color: var(--ink-mid);
|
||||
border-radius: 3px; letter-spacing: 0.01em;
|
||||
}
|
||||
.tag-removable .x { color: var(--ink-fade); cursor: pointer; padding-left: 2px; }
|
||||
|
||||
/* ---------- form fields ---------- */
|
||||
.field-label { font-size: 12px; color: var(--ink-mid); margin-bottom: 6px; display: block; }
|
||||
.field-help { font-size: 12px; color: var(--ink-mute); margin-top: 6px; line-height: 1.55; }
|
||||
.field-error { font-size: 12px; color: oklch(0.85 0.10 25); margin-top: 6px; }
|
||||
.field {
|
||||
width: 100%; padding: 9px 12px;
|
||||
background: var(--bg); border: 1px solid var(--line-soft);
|
||||
color: var(--ink); border-radius: 5px;
|
||||
font-size: 13px; font-family: inherit; outline: none;
|
||||
transition: border-color 120ms ease;
|
||||
}
|
||||
.field:focus { border-color: var(--accent); }
|
||||
.field.invalid { border-color: color-mix(in oklch, var(--bad), transparent 50%); }
|
||||
.field.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
|
||||
.field.with-prefix { padding-left: 64px; }
|
||||
.field-prefix {
|
||||
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 12px;
|
||||
color: var(--ink-mute); pointer-events: none;
|
||||
}
|
||||
|
||||
/* ---------- host row (the dashboard's load-bearing component) ---------- */
|
||||
.host-row {
|
||||
display: grid; align-items: center;
|
||||
grid-template-columns: 24px 1.4fr 0.95fr 1.5fr 0.75fr 0.7fr 0.7fr 1.1fr 92px;
|
||||
padding: 11px 16px; font-size: 13px;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.host-row.head {
|
||||
padding-top: 10px; padding-bottom: 10px;
|
||||
font-size: 11px; color: var(--ink-fade);
|
||||
text-transform: uppercase; letter-spacing: 0.08em;
|
||||
}
|
||||
.host-row.degraded { border-left-color: color-mix(in oklch, var(--warn), transparent 50%); }
|
||||
.host-row.failed { border-left-color: color-mix(in oklch, var(--bad), transparent 50%); }
|
||||
.host-row.offline { border-left-color: color-mix(in oklch, var(--off), transparent 70%); }
|
||||
.host-row:hover { background: var(--panel-hi); }
|
||||
|
||||
/* ---------- log viewer ---------- */
|
||||
.log {
|
||||
background: var(--bg); border: 1px solid var(--line-soft);
|
||||
border-radius: 7px;
|
||||
font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7;
|
||||
overflow: hidden;
|
||||
}
|
||||
.log-line { display: grid; grid-template-columns: 14ch 8ch 1fr; column-gap: 14px; padding: 1px 16px; align-items: baseline; }
|
||||
.log-line:first-child { padding-top: 12px; }
|
||||
.log-line:last-child { padding-bottom: 12px; }
|
||||
.log-ts { color: var(--ink-fade); }
|
||||
.log-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-fade); }
|
||||
.log-stream-stdout { color: var(--ink-mid); }
|
||||
.log-stream-stderr { color: oklch(0.78 0.13 50); }
|
||||
.log-stream-event { color: var(--accent); }
|
||||
|
||||
/* ---------- progress bar ---------- */
|
||||
.progress-track {
|
||||
background: var(--bg); border: 1px solid var(--line-soft);
|
||||
height: 6px; border-radius: 9999px; overflow: hidden;
|
||||
}
|
||||
.progress-fill { height: 100%; background: var(--accent); border-radius: 9999px; transition: width 250ms ease; }
|
||||
.progress-fill.ok { background: var(--ok); }
|
||||
.progress-fill.bad { background: var(--bad); }
|
||||
|
||||
/* ---------- crumbs ---------- */
|
||||
.crumbs { font-size: 12px; color: var(--ink-mute); }
|
||||
.crumbs a { color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
|
||||
.crumbs .sep { color: var(--ink-fade); margin: 0 8px; }
|
||||
|
||||
/* ---------- install snippet ---------- */
|
||||
.snippet { border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; }
|
||||
.snippet-head {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
|
||||
font-size: 11px; color: var(--ink-fade);
|
||||
text-transform: uppercase; letter-spacing: 0.1em;
|
||||
}
|
||||
.snippet pre {
|
||||
margin: 0; padding: 14px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12px; color: var(--ink-mid); line-height: 1.7;
|
||||
white-space: pre-wrap; word-break: break-all;
|
||||
}
|
||||
.snippet pre .var { color: var(--accent); }
|
||||
|
||||
/* ---------- empty state ---------- */
|
||||
.empty-state {
|
||||
text-align: center; padding: 60px 40px;
|
||||
border: 1px dashed var(--line); border-radius: 8px;
|
||||
background:
|
||||
radial-gradient(ellipse at top, color-mix(in oklch, var(--accent), transparent 95%), transparent 60%),
|
||||
var(--panel);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{{define "base"}}<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{block "title" .}}restic-manager{{end}}</title>
|
||||
<link rel="stylesheet" href="/static/css/styles.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
|
||||
{{template "nav" .}}
|
||||
|
||||
<main>
|
||||
{{block "content" .}}{{end}}
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -0,0 +1,16 @@
|
||||
{{define "chromeless"}}<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{block "title" .}}restic-manager{{end}}</title>
|
||||
<link rel="stylesheet" href="/static/css/styles.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="min-h-screen flex flex-col">
|
||||
{{block "content" .}}{{end}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -0,0 +1,24 @@
|
||||
{{define "title"}}Dashboard · restic-manager{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<div class="max-w-[1280px] mx-auto px-8 pt-14 pb-24">
|
||||
|
||||
<!-- placeholder hero — real fleet summary lands with P1-24.
|
||||
This view exists today so the chrome + Tailwind + base layout
|
||||
can be verified in the browser end-to-end. -->
|
||||
<div class="empty-state">
|
||||
<h1 class="text-lg font-medium tracking-[-0.005em]">Dashboard</h1>
|
||||
<p class="text-pretty text-ink-mid mt-3 mx-auto max-w-[520px] text-[13px] leading-[1.65]">
|
||||
Base layout + Tailwind build wired through (P1-23 / P1-28). The fleet
|
||||
summary, host table and recent activity strip land with
|
||||
<span class="mono text-ink">P1-24</span>; until then this screen exists
|
||||
to prove the chrome renders.
|
||||
</p>
|
||||
<div class="mt-7 flex items-center justify-center gap-2">
|
||||
<a href="/hosts/new" class="btn btn-primary btn-lg">+ Add your first host</a>
|
||||
<a href="/" class="btn">Reload</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,46 @@
|
||||
{{define "title"}}Sign in · restic-manager{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 py-12">
|
||||
|
||||
<div class="w-[360px]">
|
||||
<div class="flex justify-center mb-10">
|
||||
<div class="mono text-base text-ink font-medium tracking-[0.01em]">restic-manager</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-lg font-medium tracking-[-0.005em] text-center mb-7">Sign in to continue</h2>
|
||||
|
||||
{{if .Error}}
|
||||
<div class="mb-4 px-3 py-2.5 rounded-[5px] text-xs"
|
||||
style="background: color-mix(in oklch, var(--bad), transparent 88%); border: 1px solid color-mix(in oklch, var(--bad), transparent 70%); color: oklch(0.85 0.10 25);">
|
||||
{{.Error}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<form method="post" action="/login">
|
||||
<div class="mb-3.5">
|
||||
<label class="field-label" for="login-username">Username</label>
|
||||
<input id="login-username" name="username" type="text" class="field mono" autocomplete="username" autofocus required value="{{.Username}}">
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<label class="field-label" for="login-password">Password</label>
|
||||
<input id="login-password" name="password" type="password" class="field" autocomplete="current-password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 pt-5 border-t border-line-soft text-center">
|
||||
<p class="text-pretty text-xs text-ink-mute leading-[1.65]">
|
||||
Forgot your password? An admin can reset it from
|
||||
<span class="mono text-ink-mid">Settings → Users</span>.
|
||||
There’s no recovery email — this is self-hosted infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-20 flex gap-3.5 items-center text-[11px] text-ink-fade">
|
||||
<span class="mono">restic-manager {{.Version}}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,41 @@
|
||||
{{define "nav"}}
|
||||
<header>
|
||||
<!-- top bar -->
|
||||
<div class="hairline">
|
||||
<div class="max-w-[1280px] mx-auto px-8 flex items-center justify-between py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="/" class="mono text-[13px] text-ink font-medium tracking-[0.02em] no-underline">restic-manager</a>
|
||||
<span class="mono text-[11px] text-ink-fade">{{.Version}}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-5">
|
||||
{{if .User}}
|
||||
<span class="mono text-xs text-ink-mute">{{.User.Username}}</span>
|
||||
<form method="post" action="/logout" class="inline">
|
||||
<button class="btn btn-ghost" type="submit">Sign out</button>
|
||||
</form>
|
||||
{{else}}
|
||||
<a href="/login" class="btn btn-ghost">Sign in</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- primary nav -->
|
||||
<div class="hairline">
|
||||
<div class="max-w-[1280px] mx-auto px-8 flex items-end justify-between">
|
||||
<nav class="flex items-end">
|
||||
<a href="/" class="nav-tab {{if eq .Active "dashboard"}}active{{end}}">Dashboard</a>
|
||||
<a href="/repos" class="nav-tab {{if eq .Active "repos"}}active{{end}}">Repos</a>
|
||||
<a href="/alerts" class="nav-tab {{if eq .Active "alerts"}}active{{end}}">Alerts{{if .OpenAlerts}} <span class="mono ml-1.5 text-[11px] text-bad">{{.OpenAlerts}}</span>{{end}}</a>
|
||||
<a href="/audit" class="nav-tab {{if eq .Active "audit"}}active{{end}}">Audit</a>
|
||||
<a href="/settings" class="nav-tab {{if eq .Active "settings"}}active{{end}}">Settings</a>
|
||||
</nav>
|
||||
{{if .User}}
|
||||
<div class="pb-3">
|
||||
<a href="/hosts/new" class="btn btn-primary">+ Add host</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user