initital commit
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
{{define "login.html"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>LicenseVault — Sign In</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;500&display=swap');
|
||||
:root { --bg:#0a0a0f; --surface:#111118; --border:#1e1e2e; --accent:#00ff9d; --danger:#ff3b5c; --text:#e2e2f0; --muted:#555570; }
|
||||
* { box-sizing:border-box; margin:0; padding:0; }
|
||||
body { background:var(--bg); color:var(--text); font-family:'IBM Plex Sans',sans-serif; display:flex; align-items:center; justify-content:center; min-height:100vh; }
|
||||
.login-wrap { width:380px; }
|
||||
.login-logo { font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; color:var(--accent); text-align:center; margin-bottom:32px; letter-spacing:0.05em; }
|
||||
.login-logo span { color:var(--muted); }
|
||||
.card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:32px; }
|
||||
.card-title { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-bottom:24px; }
|
||||
.form-group { margin-bottom:16px; }
|
||||
label { display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:6px; }
|
||||
input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:10px 12px; color:var(--text); font-size:13px; font-family:'IBM Plex Sans',sans-serif; outline:none; transition:border-color 0.15s; }
|
||||
input:focus { border-color:var(--accent); }
|
||||
.btn { width:100%; padding:11px; background:var(--accent); color:#000; border:none; border-radius:3px; font-size:13px; font-weight:500; cursor:pointer; margin-top:8px; font-family:'IBM Plex Sans',sans-serif; transition:background 0.15s; }
|
||||
.btn:hover { background:#00e68a; }
|
||||
.alert { padding:10px 14px; border-radius:3px; margin-bottom:16px; font-size:12px; background:rgba(255,59,92,0.1); border:1px solid rgba(255,59,92,0.3); color:var(--danger); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-wrap">
|
||||
<div class="login-logo">License<span>Vault</span></div>
|
||||
<div class="card">
|
||||
<div class="card-title">Administrator Sign In</div>
|
||||
{{if .Error}}<div class="alert">{{.Error}}</div>{{end}}
|
||||
<form method="POST" action="/login">
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" name="email" autofocus required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn">Sign In</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
||||
{{define "setup.html"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>LicenseVault — Setup</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;500&display=swap');
|
||||
:root { --bg:#0a0a0f; --surface:#111118; --border:#1e1e2e; --accent:#00ff9d; --danger:#ff3b5c; --text:#e2e2f0; --muted:#555570; }
|
||||
* { box-sizing:border-box; margin:0; padding:0; }
|
||||
body { background:var(--bg); color:var(--text); font-family:'IBM Plex Sans',sans-serif; display:flex; align-items:center; justify-content:center; min-height:100vh; }
|
||||
.wrap { width:400px; }
|
||||
.logo { font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:600; color:var(--accent); text-align:center; margin-bottom:8px; }
|
||||
.logo span { color:var(--muted); }
|
||||
.sub { text-align:center; color:var(--muted); font-size:12px; margin-bottom:32px; }
|
||||
.card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:32px; }
|
||||
.card-title { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-bottom:24px; }
|
||||
.form-group { margin-bottom:16px; }
|
||||
label { display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:6px; }
|
||||
input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:10px 12px; color:var(--text); font-size:13px; outline:none; transition:border-color 0.15s; font-family:'IBM Plex Sans',sans-serif; }
|
||||
input:focus { border-color:var(--accent); }
|
||||
.btn { width:100%; padding:11px; background:var(--accent); color:#000; border:none; border-radius:3px; font-size:13px; font-weight:500; cursor:pointer; margin-top:8px; font-family:'IBM Plex Sans',sans-serif; }
|
||||
.alert { padding:10px 14px; border-radius:3px; margin-bottom:16px; font-size:12px; background:rgba(255,59,92,0.1); border:1px solid rgba(255,59,92,0.3); color:var(--danger); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="logo">License<span>Vault</span></div>
|
||||
<div class="sub">First-time setup — create your admin account</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Create Admin Account</div>
|
||||
{{if .Error}}<div class="alert">{{.Error}}</div>{{end}}
|
||||
<form method="POST" action="/setup">
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" name="email" autofocus required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password <span style="color:var(--muted)">(min 8 chars)</span></label>
|
||||
<input type="password" name="password" minlength="8" required>
|
||||
</div>
|
||||
<button type="submit" class="btn">Create Account & Continue</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -0,0 +1,332 @@
|
||||
{{define "base"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LicenseVault{{block "title" .}}{{end}}</title>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #0a0a0f;
|
||||
--surface: #111118;
|
||||
--border: #1e1e2e;
|
||||
--accent: #00ff9d;
|
||||
--accent2: #0066ff;
|
||||
--danger: #ff3b5c;
|
||||
--warn: #ffaa00;
|
||||
--text: #e2e2f0;
|
||||
--muted: #555570;
|
||||
--mono: 'IBM Plex Mono', monospace;
|
||||
--sans: 'IBM Plex Sans', sans-serif;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.layout { display: flex; min-height: 100vh; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 24px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sidebar-logo span { color: var(--muted); }
|
||||
.sidebar-nav { padding: 16px 0; flex: 1; }
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 20px;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
.nav-item:hover, .nav-item.active {
|
||||
color: var(--text);
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.topbar {
|
||||
height: 56px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--surface);
|
||||
}
|
||||
.topbar-title {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.content { padding: 28px; flex: 1; overflow-y: auto; }
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-title {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Stats row */
|
||||
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
|
||||
.stat {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.stat-value {
|
||||
font-family: var(--mono);
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
line-height: 1;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
|
||||
/* Table */
|
||||
.table-wrap { overflow-x: auto; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th {
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
text-align: left;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
td {
|
||||
padding: 12px 12px;
|
||||
border-bottom: 1px solid rgba(30,30,46,0.6);
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
tr:hover td { background: rgba(255,255,255,0.015); }
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 2px;
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.badge-active { background: rgba(0,255,157,0.1); color: var(--accent); border: 1px solid rgba(0,255,157,0.2); }
|
||||
.badge-revoked { background: rgba(255,59,92,0.1); color: var(--danger); border: 1px solid rgba(255,59,92,0.2); }
|
||||
.badge-expiry { background: rgba(0,102,255,0.1); color: #4d99ff; border: 1px solid rgba(0,102,255,0.2); }
|
||||
.badge-usage { background: rgba(255,170,0,0.1); color: var(--warn); border: 1px solid rgba(255,170,0,0.2); }
|
||||
|
||||
/* Key display */
|
||||
.license-key {
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.15s;
|
||||
text-decoration: none;
|
||||
font-family: var(--sans);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
.btn-primary:hover { background: #00e68a; }
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
|
||||
.btn-danger {
|
||||
background: transparent;
|
||||
color: var(--danger);
|
||||
border: 1px solid rgba(255,59,92,0.3);
|
||||
}
|
||||
.btn-danger:hover { background: rgba(255,59,92,0.1); }
|
||||
.btn-sm { padding: 4px 10px; font-size: 11px; }
|
||||
|
||||
/* Forms */
|
||||
.form-group { margin-bottom: 18px; }
|
||||
label {
|
||||
display: block;
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
input, select {
|
||||
width: 100%;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
padding: 9px 12px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-family: var(--sans);
|
||||
transition: border-color 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
input:focus, select:focus { border-color: var(--accent); }
|
||||
select option { background: var(--bg); }
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.form-actions { display: flex; gap: 10px; margin-top: 24px; }
|
||||
|
||||
/* Alert */
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.alert-error { background: rgba(255,59,92,0.1); border: 1px solid rgba(255,59,92,0.3); color: var(--danger); }
|
||||
|
||||
/* Type toggle */
|
||||
.type-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
|
||||
.type-btn {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.type-btn.selected {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: rgba(0,255,157,0.05);
|
||||
}
|
||||
|
||||
/* Logout */
|
||||
.logout-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-family: var(--sans);
|
||||
padding: 6px 10px;
|
||||
border-radius: 3px;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.logout-btn:hover { color: var(--danger); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">License<span>Vault</span></div>
|
||||
<nav class="sidebar-nav">
|
||||
<a href="/" class="nav-item {{if eq .Page "dashboard"}}active{{end}}">
|
||||
▦ Dashboard
|
||||
</a>
|
||||
<a href="/licenses/new" class="nav-item {{if eq .Page "new"}}active{{end}}">
|
||||
+ New License
|
||||
</a>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<form action="/logout" method="POST">
|
||||
<button type="submit" class="logout-btn">⏻ Sign out</button>
|
||||
</form>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main">
|
||||
<div class="topbar">
|
||||
<span class="topbar-title">
|
||||
{{if eq .Page "dashboard"}} {{template "dashboard-title" .}} {{end}}
|
||||
{{if eq .Page "new"}} {{template "new-license-title" .}} {{end}}
|
||||
</span>
|
||||
<a href="/licenses/new" class="btn btn-primary btn-sm">+ Issue License</a>
|
||||
</div>
|
||||
<div class="content">
|
||||
{{if eq .Page "dashboard"}} {{template "dashboard-content" .}} {{end}}
|
||||
{{if eq .Page "new"}} {{template "new-license-content" .}} {{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -0,0 +1,223 @@
|
||||
{{define "dashboard.html"}}
|
||||
{{template "base" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "dashboard-title"}}License Management{{end}}
|
||||
|
||||
{{define "dashboard-content"}}
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value">{{.Total}}</div>
|
||||
<div class="stat-label">Total Licenses</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value" style="color:#4d99ff">{{.ActiveCount}}</div>
|
||||
<div class="stat-label">Active</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value" style="color:var(--danger)">{{.RevokedCount}}</div>
|
||||
<div class="stat-label">Revoked</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">All Licenses</span>
|
||||
<span id="results-count" style="font-size:11px;color:var(--muted);font-family:var(--mono)"></span>
|
||||
</div>
|
||||
|
||||
<!-- Filter bar -->
|
||||
<div class="filter-bar">
|
||||
<div class="filter-search">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" id="search" placeholder="Search key, customer, product…" oninput="applyFilters()">
|
||||
</div>
|
||||
<div class="filter-chips">
|
||||
<button class="chip chip-active selected" data-filter="status" data-value="" onclick="setChip(this,'status')">All</button>
|
||||
<button class="chip" data-filter="status" data-value="active" onclick="setChip(this,'status')">Active</button>
|
||||
<button class="chip" data-filter="status" data-value="revoked" onclick="setChip(this,'status')">Revoked</button>
|
||||
</div>
|
||||
<div class="filter-chips">
|
||||
<button class="chip chip-active selected" data-filter="type" data-value="" onclick="setChip(this,'type')">All Types</button>
|
||||
<button class="chip" data-filter="type" data-value="expiry" onclick="setChip(this,'type')">Expiry</button>
|
||||
<button class="chip" data-filter="type" data-value="usage" onclick="setChip(this,'type')">Usage</button>
|
||||
</div>
|
||||
<button class="btn btn-ghost btn-sm" onclick="clearFilters()" id="clear-btn" style="display:none">✕ Clear</button>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table id="license-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sortable" data-col="0" onclick="sortTable(0)">Key <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="1" onclick="sortTable(1)">Customer <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="2" onclick="sortTable(2)">Product <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="3" onclick="sortTable(3)">Type <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="4" onclick="sortTable(4)">Status <span class="sort-icon">↕</span></th>
|
||||
<th class="sortable" data-col="5" onclick="sortTable(5)">Expires / Uses <span class="sort-icon">↕</span></th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="license-tbody">
|
||||
{{range .Licenses}}
|
||||
{{template "license_row.html" .}}
|
||||
{{else}}
|
||||
<tr id="empty-row"><td colspan="7" style="color:var(--muted);text-align:center;padding:32px">No licenses yet — issue your first one.</td></tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="no-results" style="display:none;text-align:center;padding:40px;color:var(--muted);font-size:13px">
|
||||
No licenses match your filters.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.filter-search {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
.filter-search input {
|
||||
padding-left: 32px;
|
||||
width: 100%;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
padding: 8px 12px 8px 32px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.filter-search input:focus { border-color: var(--accent); }
|
||||
.filter-chips { display: flex; gap: 6px; }
|
||||
.chip {
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.chip:hover { color: var(--text); border-color: var(--muted); }
|
||||
.chip.selected { border-color: var(--accent); color: var(--accent); background: rgba(0,255,157,0.07); }
|
||||
|
||||
th.sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
th.sortable:hover { color: var(--text); }
|
||||
th.sort-asc .sort-icon::after { content: ' ↑'; }
|
||||
th.sort-desc .sort-icon::after { content: ' ↓'; }
|
||||
.sort-icon { color: var(--muted); font-size: 10px; }
|
||||
th.sort-asc .sort-icon,
|
||||
th.sort-desc .sort-icon { color: var(--accent); }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// --- State ---
|
||||
let sortCol = -1;
|
||||
let sortDir = 1; // 1 = asc, -1 = desc
|
||||
let filters = { status: '', type: '' };
|
||||
|
||||
// --- Sort ---
|
||||
function sortTable(col) {
|
||||
if (sortCol === col) {
|
||||
sortDir *= -1;
|
||||
} else {
|
||||
sortCol = col;
|
||||
sortDir = 1;
|
||||
}
|
||||
|
||||
// Update header icons
|
||||
document.querySelectorAll('th.sortable').forEach(th => {
|
||||
th.classList.remove('sort-asc', 'sort-desc');
|
||||
});
|
||||
const th = document.querySelector(`th[data-col="${col}"]`);
|
||||
th.classList.add(sortDir === 1 ? 'sort-asc' : 'sort-desc');
|
||||
|
||||
const tbody = document.getElementById('license-tbody');
|
||||
const rows = Array.from(tbody.querySelectorAll('tr[data-key]'));
|
||||
|
||||
rows.sort((a, b) => {
|
||||
const aVal = a.children[col]?.dataset?.sort || a.children[col]?.innerText.trim() || '';
|
||||
const bVal = b.children[col]?.dataset?.sort || b.children[col]?.innerText.trim() || '';
|
||||
return aVal.localeCompare(bVal, undefined, { numeric: true }) * sortDir;
|
||||
});
|
||||
|
||||
rows.forEach(r => tbody.appendChild(r));
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
// --- Filter ---
|
||||
function setChip(el, filterKey) {
|
||||
document.querySelectorAll(`.chip[data-filter="${filterKey}"]`).forEach(c => c.classList.remove('selected'));
|
||||
el.classList.add('selected');
|
||||
filters[filterKey] = el.dataset.value;
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const search = document.getElementById('search').value.toLowerCase().trim();
|
||||
const tbody = document.getElementById('license-tbody');
|
||||
const rows = Array.from(tbody.querySelectorAll('tr[data-key]'));
|
||||
let visible = 0;
|
||||
|
||||
rows.forEach(row => {
|
||||
const text = row.dataset.search || '';
|
||||
const status = row.dataset.status || '';
|
||||
const type = row.dataset.type || '';
|
||||
|
||||
const matchSearch = !search || text.includes(search); // text is pre-lowercased by server
|
||||
const matchStatus = !filters.status || status === filters.status;
|
||||
const matchType = !filters.type || type === filters.type;
|
||||
|
||||
const show = matchSearch && matchStatus && matchType;
|
||||
row.style.display = show ? '' : 'none';
|
||||
if (show) visible++;
|
||||
});
|
||||
|
||||
// Update results count
|
||||
const total = rows.length;
|
||||
const countEl = document.getElementById('results-count');
|
||||
countEl.textContent = visible === total
|
||||
? `${total} license${total !== 1 ? 's' : ''}`
|
||||
: `${visible} of ${total} licenses`;
|
||||
|
||||
// Show/hide empty state
|
||||
document.getElementById('no-results').style.display = visible === 0 && total > 0 ? '' : 'none';
|
||||
|
||||
// Show clear button if any filter active
|
||||
const anyFilter = search || filters.status || filters.type;
|
||||
document.getElementById('clear-btn').style.display = anyFilter ? '' : 'none';
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
document.getElementById('search').value = '';
|
||||
filters = { status: '', type: '' };
|
||||
document.querySelectorAll('.chip').forEach(c => {
|
||||
c.classList.toggle('selected', c.dataset.value === '');
|
||||
});
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
// Init count on load
|
||||
document.addEventListener('DOMContentLoaded', applyFilters);
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -0,0 +1,56 @@
|
||||
{{define "license_row.html"}}
|
||||
<tr data-key="{{.ID}}"
|
||||
data-search="{{.SearchText}}"
|
||||
data-status="{{if .Active}}active{{else}}revoked{{end}}"
|
||||
data-type="{{.Type}}">
|
||||
<td data-sort="{{.Key}}">
|
||||
<span class="license-key">{{.Key}}</span>
|
||||
</td>
|
||||
<td data-sort="{{.CustomerName}}">
|
||||
<div style="font-weight:500">{{.CustomerName}}</div>
|
||||
<div style="color:var(--muted);font-size:11px">{{.CustomerEmail}}</div>
|
||||
</td>
|
||||
<td data-sort="{{.ProductName}}" style="color:var(--muted)">{{.ProductName}}</td>
|
||||
<td data-sort="{{.Type}}">
|
||||
{{if eq .Type "expiry"}}
|
||||
<span class="badge badge-expiry">Expiry</span>
|
||||
{{else}}
|
||||
<span class="badge badge-usage">Usage</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td data-sort="{{if .Active}}active{{else}}revoked{{end}}">
|
||||
{{if .Active}}
|
||||
<span class="badge badge-active">Active</span>
|
||||
{{else}}
|
||||
<span class="badge badge-revoked">Revoked</span>
|
||||
{{end}}
|
||||
</td>
|
||||
<td data-sort="{{if eq .Type "expiry"}}{{if .ExpiresAt}}{{.ExpiresAt.Format "2006-01-02"}}{{else}}9999{{end}}{{else}}{{.UsedCount}}{{end}}"
|
||||
style="font-family:var(--mono);font-size:12px;color:var(--muted)">
|
||||
{{if eq .Type "expiry"}}
|
||||
{{if .ExpiresAt}}{{.ExpiresAt.Format "2006-01-02"}}{{else}}—{{end}}
|
||||
{{else}}
|
||||
{{.UsedCount}}{{if .MaxUses}} / {{.MaxUses}}{{end}} uses
|
||||
{{end}}
|
||||
</td>
|
||||
<td>
|
||||
{{if .Active}}
|
||||
<button class="btn btn-danger btn-sm"
|
||||
hx-delete="/licenses/{{.ID}}/revoke"
|
||||
hx-confirm="Revoke this license?"
|
||||
hx-target="closest tr"
|
||||
hx-swap="outerHTML">
|
||||
Revoke
|
||||
</button>
|
||||
{{else}}
|
||||
<button class="btn btn-ghost btn-sm"
|
||||
hx-post="/licenses/{{.ID}}/reinstate"
|
||||
hx-confirm="Reinstate this license?"
|
||||
hx-target="closest tr"
|
||||
hx-swap="outerHTML">
|
||||
Reinstate
|
||||
</button>
|
||||
{{end}}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
@@ -0,0 +1,90 @@
|
||||
{{define "new_license.html"}}
|
||||
{{template "base" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "new-license-title"}}Issue New License{{end}}
|
||||
|
||||
{{define "new-license-content"}}
|
||||
<div style="max-width:600px">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">New License</span>
|
||||
</div>
|
||||
|
||||
{{if .Error}}
|
||||
<div class="alert alert-error">{{.Error}}</div>
|
||||
{{end}}
|
||||
|
||||
<form method="POST" action="/licenses">
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Customer Name</label>
|
||||
<input type="text" name="customer_name" placeholder="Acme Corp" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Customer Email</label>
|
||||
<input type="email" name="customer_email" placeholder="admin@acme.com" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Product Name</label>
|
||||
<input type="text" name="product_name" placeholder="My App Pro" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>License Key</label>
|
||||
<input type="text" name="key" value="{{.GeneratedKey}}" required
|
||||
style="font-family:var(--mono);letter-spacing:0.05em;color:var(--accent)">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>License Type</label>
|
||||
<div class="type-toggle">
|
||||
<button type="button" class="type-btn selected" id="btn-expiry"
|
||||
onclick="setType('expiry')">⏱ Expiry Date</button>
|
||||
<button type="button" class="type-btn" id="btn-usage"
|
||||
onclick="setType('usage')">🔢 Usage Count</button>
|
||||
</div>
|
||||
<input type="hidden" name="type" id="type-input" value="expiry">
|
||||
</div>
|
||||
|
||||
<div id="expiry-fields">
|
||||
<div class="form-group">
|
||||
<label>Expires On</label>
|
||||
<input type="date" name="expires_at">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="usage-fields" style="display:none">
|
||||
<div class="form-group">
|
||||
<label>Max Activations</label>
|
||||
<input type="number" name="max_uses" placeholder="5" min="1" value="5">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Bind to Machine ID <span style="color:var(--muted)">(optional)</span></label>
|
||||
<input type="text" name="machine_id" placeholder="Hardware fingerprint hash — leave blank for floating license"
|
||||
style="font-family:var(--mono);font-size:11px">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Issue License</button>
|
||||
<a href="/" class="btn btn-ghost">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function setType(type) {
|
||||
document.getElementById('type-input').value = type;
|
||||
document.getElementById('expiry-fields').style.display = type === 'expiry' ? '' : 'none';
|
||||
document.getElementById('usage-fields').style.display = type === 'usage' ? '' : 'none';
|
||||
document.getElementById('btn-expiry').classList.toggle('selected', type === 'expiry');
|
||||
document.getElementById('btn-usage').classList.toggle('selected', type === 'usage');
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user