Implement dashboard and audit log templates, add paginated audit log support
- Added `web/templates/{dashboard,audit,base,accounts,account_detail}.html` for a consistent UI.
- Implemented new audit log endpoint (`GET /v1/audit`) with filtering and pagination via `ListAuditEventsPaged`.
- Extended `AuditQueryParams`, added `AuditEventView` for joined actor/target usernames.
- Updated configuration (`goimports` preference), linting rules, and E2E tests.
- No logic changes to existing APIs.
This commit is contained in:
37
web/templates/account_detail.html
Normal file
37
web/templates/account_detail.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{{define "account_detail"}}{{template "base" .}}{{end}}
|
||||
{{define "title"}}{{.Account.Username}} — MCIAS{{end}}
|
||||
{{define "content"}}
|
||||
<div class="page-header d-flex align-center justify-between">
|
||||
<div>
|
||||
<h1>{{.Account.Username}}</h1>
|
||||
<p class="text-muted text-small">{{.Account.UUID}}</p>
|
||||
</div>
|
||||
<a class="btn btn-secondary" href="/accounts">← Accounts</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2 style="font-size:1rem;font-weight:600;margin-bottom:1rem">Account Info</h2>
|
||||
<dl style="display:grid;grid-template-columns:140px 1fr;gap:.5rem .75rem;font-size:.9rem">
|
||||
<dt class="text-muted">Type</dt><dd>{{.Account.AccountType}}</dd>
|
||||
<dt class="text-muted">Status</dt>
|
||||
<dd id="status-cell">{{template "account_status" .}}</dd>
|
||||
<dt class="text-muted">TOTP</dt><dd>{{if .Account.TOTPRequired}}Enabled{{else}}Disabled{{end}}</dd>
|
||||
<dt class="text-muted">Created</dt><dd class="text-small">{{formatTime .Account.CreatedAt}}</dd>
|
||||
<dt class="text-muted">Updated</dt><dd class="text-small">{{formatTime .Account.UpdatedAt}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2 style="font-size:1rem;font-weight:600;margin-bottom:1rem">Roles</h2>
|
||||
<div id="roles-editor">{{template "roles_editor" .}}</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="d-flex align-center justify-between" style="margin-bottom:1rem">
|
||||
<h2 style="font-size:1rem;font-weight:600">Tokens</h2>
|
||||
{{if eq (string .Account.AccountType) "system"}}
|
||||
<button class="btn btn-sm btn-secondary"
|
||||
hx-post="/accounts/{{.Account.UUID}}/token"
|
||||
hx-target="#token-list" hx-swap="outerHTML">Issue Token</button>
|
||||
{{end}}
|
||||
</div>
|
||||
{{template "token_list" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
55
web/templates/accounts.html
Normal file
55
web/templates/accounts.html
Normal file
@@ -0,0 +1,55 @@
|
||||
{{define "accounts"}}{{template "base" .}}{{end}}
|
||||
{{define "title"}}Accounts — MCIAS{{end}}
|
||||
{{define "content"}}
|
||||
<div class="page-header d-flex align-center justify-between">
|
||||
<div>
|
||||
<h1>Accounts</h1>
|
||||
<p class="text-muted text-small">Manage user and service accounts</p>
|
||||
</div>
|
||||
<button class="btn btn-primary"
|
||||
onclick="var f=document.getElementById('create-form');f.style.display=f.style.display==='none'?'block':'none'">
|
||||
+ New Account
|
||||
</button>
|
||||
</div>
|
||||
<div id="create-form" class="card mt-2" style="display:none">
|
||||
<h2 style="font-size:1rem;font-weight:600;margin-bottom:1rem">Create Account</h2>
|
||||
<form hx-post="/accounts" hx-target="#accounts-tbody" hx-swap="afterbegin">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRFToken}}">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem">
|
||||
<div class="form-group">
|
||||
<label for="new-username">Username</label>
|
||||
<input class="form-control" type="text" id="new-username" name="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">Password</label>
|
||||
<input class="form-control" type="password" id="new-password" name="password">
|
||||
<span class="form-hint">Required for human accounts</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-type">Type</label>
|
||||
<select class="form-control" id="new-type" name="account_type">
|
||||
<option value="human">Human</option>
|
||||
<option value="system">System</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit">Create</button>
|
||||
<button class="btn btn-secondary" type="button"
|
||||
onclick="document.getElementById('create-form').style.display='none'">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="table-wrapper mt-2">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th><th>Type</th><th>Status</th><th>TOTP</th><th>Created</th><th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="accounts-tbody">
|
||||
{{range .Accounts}}{{template "account_row" .}}{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{end}}
|
||||
43
web/templates/audit.html
Normal file
43
web/templates/audit.html
Normal file
@@ -0,0 +1,43 @@
|
||||
{{define "audit"}}{{template "base" .}}{{end}}
|
||||
{{define "title"}}Audit Log — MCIAS{{end}}
|
||||
{{define "content"}}
|
||||
<div class="page-header d-flex align-center justify-between">
|
||||
<div>
|
||||
<h1>Audit Log</h1>
|
||||
<p class="text-muted text-small">{{.Total}} total events</p>
|
||||
</div>
|
||||
<form class="d-flex gap-1 align-center" style="font-size:.9rem">
|
||||
<select class="form-control" name="event_type" style="width:auto"
|
||||
hx-get="/audit/rows" hx-target="#audit-tbody" hx-swap="innerHTML"
|
||||
hx-trigger="change">
|
||||
<option value="">All events</option>
|
||||
{{range .EventTypes}}<option value="{{.}}"{{if eq $.FilterType .}} selected{{end}}>{{.}}</option>{{end}}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Time</th><th>Event</th><th>Actor</th><th>Target</th><th>IP</th><th>Details</th></tr>
|
||||
</thead>
|
||||
<tbody id="audit-tbody">
|
||||
{{template "audit_rows" .}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{if gt .TotalPages 1}}
|
||||
<div class="d-flex gap-1 align-center mt-2" style="font-size:.9rem;color:#64748b">
|
||||
<span>Page {{.Page}} of {{.TotalPages}}</span>
|
||||
{{if gt .Page 1}}
|
||||
<button class="btn btn-sm btn-secondary"
|
||||
hx-get="/audit/rows?page={{sub .Page 1}}&event_type={{.FilterType}}"
|
||||
hx-target="#audit-tbody" hx-swap="innerHTML">← Prev</button>
|
||||
{{end}}
|
||||
{{if lt .Page .TotalPages}}
|
||||
<button class="btn btn-sm btn-secondary"
|
||||
hx-get="/audit/rows?page={{add .Page 1}}&event_type={{.FilterType}}"
|
||||
hx-target="#audit-tbody" hx-swap="innerHTML">Next →</button>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
31
web/templates/base.html
Normal file
31
web/templates/base.html
Normal file
@@ -0,0 +1,31 @@
|
||||
{{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" .}}MCIAS{{end}}</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<span class="nav-brand">MCIAS</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="/dashboard">Dashboard</a></li>
|
||||
<li><a href="/accounts">Accounts</a></li>
|
||||
<li><a href="/audit">Audit</a></li>
|
||||
<li><form method="POST" action="/logout" style="margin:0"><button class="btn btn-sm btn-secondary" type="submit">Logout</button></form></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="container">
|
||||
{{if .Error}}<div class="alert alert-error" role="alert">{{.Error}}</div>{{end}}
|
||||
{{if .Flash}}<div class="alert alert-success" role="status">{{.Flash}}</div>{{end}}
|
||||
{{block "content" .}}{{end}}
|
||||
</div>
|
||||
</main>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
36
web/templates/dashboard.html
Normal file
36
web/templates/dashboard.html
Normal file
@@ -0,0 +1,36 @@
|
||||
{{define "dashboard"}}{{template "base" .}}{{end}}
|
||||
{{define "title"}}Dashboard — MCIAS{{end}}
|
||||
{{define "content"}}
|
||||
<div class="page-header">
|
||||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem">
|
||||
<div class="card" style="text-align:center">
|
||||
<div style="font-size:2rem;font-weight:700;color:#2563eb">{{.TotalAccounts}}</div>
|
||||
<div class="text-muted text-small">Total Accounts</div>
|
||||
</div>
|
||||
<div class="card" style="text-align:center">
|
||||
<div style="font-size:2rem;font-weight:700;color:#16a34a">{{.ActiveAccounts}}</div>
|
||||
<div class="text-muted text-small">Active Accounts</div>
|
||||
</div>
|
||||
</div>
|
||||
{{if .RecentEvents}}
|
||||
<div class="card">
|
||||
<h2 style="font-size:1rem;font-weight:600;margin-bottom:1rem">Recent Audit Events</h2>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead><tr><th>Time</th><th>Event</th><th>Actor</th></tr></thead>
|
||||
<tbody>
|
||||
{{range .RecentEvents}}
|
||||
<tr>
|
||||
<td class="text-small text-muted">{{formatTime .EventTime}}</td>
|
||||
<td><code style="font-size:.8rem">{{.EventType}}</code></td>
|
||||
<td class="text-small text-muted">{{.ActorUsername}}</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
37
web/templates/login.html
Normal file
37
web/templates/login.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{{define "login"}}<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Sign In — MCIAS</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-wrapper">
|
||||
<div class="login-box">
|
||||
<div class="brand-heading">MCIAS</div>
|
||||
<div class="card">
|
||||
{{if .Error}}<div class="alert alert-error" role="alert">{{.Error}}</div>{{end}}
|
||||
<form id="login-form" method="POST" action="/login"
|
||||
hx-post="/login" hx-target="#login-form" hx-swap="outerHTML">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input class="form-control" type="text" id="username" name="username"
|
||||
autocomplete="username" required autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input class="form-control" type="password" id="password" name="password"
|
||||
autocomplete="current-password" required>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" type="submit" style="width:100%">Sign in</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user