feat: rebuild web UI on the shared theta42 app stack; OIDC + local admin auth
The web management UI was a bespoke minimal theme with LDAP-bind login.
Rebuild it to match the SSO Manager and Proxy — same stack, same look/feel,
same auth model. The SSH bridge, audit, metrics, and access logic are
unchanged; this is purely the web layer.
Frontend (mirrors proxy/sso):
- Express + EJS with the shared top.ejs/bottom.ejs shell, Bootstrap 5,
jQuery, jq-repeat, FontAwesome, Socket.IO, and the shared app-base.js /
val.js client framework (copied verbatim). Vendor libs served from
node_modules via /static-modules; app assets via /static.
- Dashboard / Sessions / Audit pages render in the common look/feel,
loading data through the authenticated /api/* endpoints.
Auth (mirrors proxy):
- OIDC against the SSO (utils/oidc.js + routes/auth.js + models/oidc_state)
plus a local anti-lockout admin (models/user_redis.js, bootstrapped from
auth.adminUsers[0] / auth.localAdminPass). AuthToken sessions carry the
group snapshot; middleware gates the data API on adminGroups or the local
admin. New config: oidc{} + auth.adminUsers/localAdminPass.
- /api/user/me drives the client login state; "Log in with SSO" hidden when
oidc.enabled is false.
Verified end to end: local admin login -> token -> /api/user/me isAdmin,
metrics/sessions/audit 200 with token / 401 without / 401 bad password;
static + page shells serve; 26 tests green.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+58
-35
@@ -1,39 +1,62 @@
|
||||
<%- include('top') %>
|
||||
<h1>Audit log</h1>
|
||||
<form class="filters" method="get">
|
||||
<input name="uid" placeholder="user" value="<%= query.uid || '' %>">
|
||||
<input name="target" placeholder="target" value="<%= query.target || '' %>">
|
||||
<select name="status">
|
||||
<option value="">any</option>
|
||||
<option value="success" <%= query.status === 'success' ? 'selected' : '' %>>success</option>
|
||||
<option value="fail" <%= query.status === 'fail' ? 'selected' : '' %>>fail</option>
|
||||
</select>
|
||||
<button>Filter</button>
|
||||
</form>
|
||||
<script type="text/javascript">app.auth.forceLogin();</script>
|
||||
|
||||
<table>
|
||||
<thead><tr><th>Time</th><th>User</th><th>Method</th><th>Mode</th><th>Target</th><th>Chan</th><th>Client</th><th>Result</th><th>Bytes</th></tr></thead>
|
||||
<tbody>
|
||||
<% data.results.forEach(e => { %>
|
||||
<tr class="<%= e.success ? '' : 'bad' %>">
|
||||
<td><%= new Date(e.ts).toLocaleString() %></td>
|
||||
<td><%= e.uid %></td>
|
||||
<td><%= e.authMethod %></td>
|
||||
<td><%= e.mode %></td>
|
||||
<td><%= e.targetSlug || e.targetAddr || '—' %></td>
|
||||
<td><%= e.channel || '—' %></td>
|
||||
<td><%= e.clientIp %></td>
|
||||
<td><%= e.success ? '✓' : '✗ ' + e.failReason %></td>
|
||||
<td class="r"><%= (e.bytesIn + e.bytesOut) || 0 %></td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="pager">
|
||||
<% const p = data.page; %>
|
||||
<% if (p > 0) { %><a href="?page=<%= p-1 %>&uid=<%= query.uid||'' %>&target=<%= query.target||'' %>&status=<%= query.status||'' %>">← prev</a><% } %>
|
||||
<span><%= data.total %> events</span>
|
||||
<% if ((p+1) * data.pageSize < data.total) { %><a href="?page=<%= p+1 %>&uid=<%= query.uid||'' %>&target=<%= query.target||'' %>&status=<%= query.status||'' %>">next →</a><% } %>
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header"><i class="fa-solid fa-clipboard-list me-1"></i> Audit log</div>
|
||||
<div class="card-body pb-0">
|
||||
<form class="row g-2 mb-2" onsubmit="applyFilters(); return false;">
|
||||
<div class="col-auto"><input class="form-control form-control-sm" id="f-uid" placeholder="user"></div>
|
||||
<div class="col-auto"><input class="form-control form-control-sm" id="f-target" placeholder="target"></div>
|
||||
<div class="col-auto">
|
||||
<select class="form-select form-select-sm" id="f-status">
|
||||
<option value="">any result</option>
|
||||
<option value="success">success</option>
|
||||
<option value="fail">fail</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto"><button class="btn btn-sm btn-primary">Filter</button></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-sm mb-0">
|
||||
<thead><tr><th>Time</th><th>User</th><th>Method</th><th>Mode</th><th>Target</th><th>Chan</th><th>Client</th><th>Result</th><th class="text-end">Bytes</th></tr></thead>
|
||||
<tbody id="audit-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-between align-items-center">
|
||||
<button class="btn btn-sm btn-outline-secondary" id="prev" onclick="changePage(-1)">← prev</button>
|
||||
<span class="text-muted small" id="page-info"></span>
|
||||
<button class="btn btn-sm btn-outline-secondary" id="next" onclick="changePage(1)">next →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var page = 0;
|
||||
function filters(){ return {page: page, uid: $('#f-uid').val(), target: $('#f-target').val(), status: $('#f-status').val()}; }
|
||||
function applyFilters(){ page = 0; load(); }
|
||||
function changePage(d){ page = Math.max(0, page + d); load(); }
|
||||
function load(){
|
||||
app.jump.audit(filters(), function(error, data){
|
||||
var $b = $('#audit-body').empty();
|
||||
if(error || !data || !data.results.length){ $b.append('<tr><td colspan="9" class="text-muted">No events.</td></tr>'); }
|
||||
else data.results.forEach(function(e){
|
||||
$b.append('<tr class="' + (e.success ? '' : 'table-danger') + '">' +
|
||||
'<td>' + app.jump.fmtTime(e.ts) + '</td>' +
|
||||
'<td>' + app.jump.esc(e.uid) + '</td>' +
|
||||
'<td>' + app.jump.esc(e.authMethod) + '</td>' +
|
||||
'<td>' + app.jump.esc(e.mode) + '</td>' +
|
||||
'<td>' + app.jump.esc(e.targetSlug || e.targetAddr || '—') + '</td>' +
|
||||
'<td>' + app.jump.esc(e.channel || '—') + '</td>' +
|
||||
'<td>' + app.jump.esc(e.clientIp) + '</td>' +
|
||||
'<td>' + app.jump.result(e) + '</td>' +
|
||||
'<td class="text-end">' + ((e.bytesIn + e.bytesOut) || 0) + '</td></tr>');
|
||||
});
|
||||
var total = data ? data.total : 0, size = data ? data.pageSize : 50;
|
||||
$('#page-info').text(total + ' events · page ' + (page + 1));
|
||||
$('#prev').prop('disabled', page === 0);
|
||||
$('#next').prop('disabled', (page + 1) * size >= total);
|
||||
});
|
||||
}
|
||||
$(document).ready(load);
|
||||
</script>
|
||||
<%- include('bottom') %>
|
||||
|
||||
+23
-5
@@ -1,6 +1,24 @@
|
||||
</main>
|
||||
<footer class="foot">
|
||||
<% if (typeof buildInfo !== 'undefined') { %><span>v<%= buildInfo.version %> · <%= buildInfo.commit %></span><% } %>
|
||||
</footer>
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<footer class="py-2 bg-dark text-light mt-4">
|
||||
<div class="container-fluid d-flex flex-wrap justify-content-between align-items-center small gap-2">
|
||||
<span class="d-flex align-items-center gap-2">
|
||||
<a href="https://theta42.com" target="_blank">
|
||||
<img width="64" src="/static/img/theta42.svg"/>
|
||||
</a>
|
||||
© <%- (new Date()).getFullYear() %> theta42 ·
|
||||
<a href="https://github.com/theta42/jump-host/blob/master/LICENSE" target="_blank" class="text-light">MIT License</a>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-3">
|
||||
<a href="https://theta42.github.io/jump-host/" target="_blank" class="text-light text-decoration-none">
|
||||
<i class="fa-solid fa-book"></i> Docs
|
||||
</a>
|
||||
<a href="https://github.com/theta42/jump-host" target="_blank" class="text-light text-decoration-none">
|
||||
<i class="fa-brands fa-github"></i> GitHub
|
||||
</a>
|
||||
</span>
|
||||
<span>v<%- version %> (<%- commit %>)</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+58
-45
@@ -1,51 +1,64 @@
|
||||
<%- include('top') %>
|
||||
<h1>Dashboard</h1>
|
||||
<div class="tiles">
|
||||
<div class="tile"><span class="n"><%= metrics.active %></span><span class="l">active sessions</span></div>
|
||||
<div class="tile"><span class="n"><%= metrics.total %></span><span class="l">total connections</span></div>
|
||||
<div class="tile"><span class="n"><%= metrics.fail %></span><span class="l">failed</span></div>
|
||||
<script type="text/javascript">app.auth.forceLogin();</script>
|
||||
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow-sm text-center"><div class="card-body">
|
||||
<div class="display-6" id="stat-active">–</div>
|
||||
<div class="text-muted small text-uppercase">Active sessions</div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow-sm text-center"><div class="card-body">
|
||||
<div class="display-6" id="stat-total">–</div>
|
||||
<div class="text-muted small text-uppercase">Total connections</div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow-sm text-center"><div class="card-body">
|
||||
<div class="display-6 text-danger" id="stat-fail">–</div>
|
||||
<div class="text-muted small text-uppercase">Failed</div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow-sm text-center"><div class="card-body">
|
||||
<div class="display-6" id="stat-users">–</div>
|
||||
<div class="text-muted small text-uppercase">Users seen</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cols">
|
||||
<section>
|
||||
<h2>Active sessions</h2>
|
||||
<% if (!active.length) { %><p class="muted">None right now.</p><% } else { %>
|
||||
<table>
|
||||
<thead><tr><th>User</th><th>Target</th><th>Since</th></tr></thead>
|
||||
<tbody>
|
||||
<% active.forEach(s => { %>
|
||||
<tr><td><%= s.uid %></td><td><%= s.slug || s.target %></td><td><%= new Date(s.startedAt).toLocaleTimeString() %></td></tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
<% } %>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Top hosts</h2>
|
||||
<% if (!metrics.topHosts.length) { %><p class="muted">No data.</p><% } else { %>
|
||||
<table><tbody>
|
||||
<% metrics.topHosts.forEach(h => { %><tr><td><%= h.name %></td><td class="r"><%= h.count %></td></tr><% }) %>
|
||||
</tbody></table>
|
||||
<% } %>
|
||||
</section>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm"><div class="card-header"><i class="fa-solid fa-server me-1"></i> Top hosts</div>
|
||||
<table class="table table-sm mb-0"><tbody id="top-hosts"></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm"><div class="card-header"><i class="fa-solid fa-user me-1"></i> Top users</div>
|
||||
<table class="table table-sm mb-0"><tbody id="top-users"></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>Recent connections <a class="more" href="/audit">view all →</a></h2>
|
||||
<table>
|
||||
<thead><tr><th>Time</th><th>User</th><th>Target</th><th>Method</th><th>Result</th></tr></thead>
|
||||
<tbody>
|
||||
<% recent.forEach(e => { %>
|
||||
<tr>
|
||||
<td><%= new Date(e.ts).toLocaleString() %></td>
|
||||
<td><%= e.uid %></td>
|
||||
<td><%= e.targetSlug || e.targetAddr || '—' %></td>
|
||||
<td><%= e.authMethod %> / <%= e.mode %></td>
|
||||
<td><%= e.success ? '✓' : '✗ ' + e.failReason %></td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<script type="text/javascript">
|
||||
function rows(sel, list){
|
||||
var $b = $(sel).empty();
|
||||
if(!list || !list.length){ $b.append('<tr><td class="text-muted">No data.</td></tr>'); return; }
|
||||
list.forEach(function(x){
|
||||
$b.append('<tr><td>' + app.jump.esc(x.name) + '</td><td class="text-end">' + x.count + '</td></tr>');
|
||||
});
|
||||
}
|
||||
$(document).ready(function(){
|
||||
app.jump.metrics(function(error, data){
|
||||
if(error || !data) return;
|
||||
$('#stat-active').text(data.active);
|
||||
$('#stat-total').text(data.total);
|
||||
$('#stat-fail').text(data.fail);
|
||||
$('#stat-users').text((data.topUsers || []).length);
|
||||
rows('#top-hosts', data.topHosts);
|
||||
rows('#top-users', data.topUsers);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<%- include('bottom') %>
|
||||
|
||||
Regular → Executable
+97
-19
@@ -1,19 +1,97 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><%= name %> — Jump Host login</title>
|
||||
<link rel="stylesheet" href="/public/css/app.css">
|
||||
</head>
|
||||
<body class="center">
|
||||
<form method="post" action="/login" class="card login">
|
||||
<h1><%= name %> <small>jump host</small></h1>
|
||||
<% if (error) { %><p class="err"><%= error %></p><% } %>
|
||||
<label>Username <input name="uid" autofocus autocomplete="username"></label>
|
||||
<label>Password <input name="password" type="password" autocomplete="current-password"></label>
|
||||
<button type="submit">Sign in</button>
|
||||
<p class="hint">Admin group required. Uses your directory (LDAP) credentials.</p>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
<%- include('top') %>
|
||||
<script type="text/javascript">
|
||||
|
||||
// If we arrived from the OIDC callback with a token in the URL fragment,
|
||||
// store it and forward on before doing anything else.
|
||||
if(!app.auth.consumeTokenFragment()){
|
||||
app.auth.isLoggedIn(function(error, isLoggedIn){
|
||||
if(isLoggedIn){
|
||||
app.auth.logInRedirect();
|
||||
}else{
|
||||
// Reveal the login card once we know the user is not logged in.
|
||||
document.getElementById('login-card-row').style.display = '';
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div id="login-card-row" class="row" style="display: none;">
|
||||
<div class="col-md-4">
|
||||
<div class="shadow-lg card">
|
||||
|
||||
<div class="card-header text-center">
|
||||
<span class="card-icon float-start">
|
||||
<i class="fa-solid fa-lock"></i>
|
||||
</span>
|
||||
<span class="card-title">
|
||||
User Login
|
||||
</span>
|
||||
<span class="float-end">
|
||||
<i class="fa-solid fa-circle-minus"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="card-header shadow actionMessage" style="display:none"></div>
|
||||
<div class="card-body">
|
||||
<form action="auth/login" onsubmit="formAJAX(this)" evalAJAX="
|
||||
app.auth.setToken(data.token);
|
||||
app.auth.logInRedirect();
|
||||
">
|
||||
<input type="hidden" name="redirect" value="<%= redirect %>">
|
||||
|
||||
<div class="mb-3">
|
||||
<label></label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="addon-wrapping"><i class="fa-solid fa-user-tie"></i></span>
|
||||
<input type="text" name="username" class="form-control" placeholder="jsmith" aria-label="Username" aria-describedby="addon-wrapping">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="addon-wrapping"><i class="fa-solid fa-key"></i></span>
|
||||
<input type="password" name="password" class="form-control" placeholder="huunteR!23" aria-label="Username" aria-describedby="addon-wrapping">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="group">
|
||||
<label class="control-label">User name</label>
|
||||
<div class="input-group mb-3 shadow">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" ><i class="fa-solid fa-user-tie"></i></span>
|
||||
</div>
|
||||
<input type="text" name="username" class="input-control" placeholder="jsmith" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<label class="control-label">Password</label>
|
||||
<div class="input-group mb-3 shadow">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" ><i class="fa-solid fa-key"></i></span>
|
||||
</div>
|
||||
<input type="password" name="password" class="input-control" placeholder="hunter123!"/>
|
||||
</div>
|
||||
</div> -->
|
||||
<hr />
|
||||
<button type="submit" class="btn btn-outline-dark"><i class="fa-solid fa-right-to-bracket"></i> Log in</button>
|
||||
</form>
|
||||
|
||||
<% if (typeof oidcEnabled === 'undefined' || oidcEnabled) { %>
|
||||
<hr />
|
||||
<div class="d-grid">
|
||||
<a href="/api/auth/oidc/start" class="btn btn-outline-primary">
|
||||
<i class="fa-solid fa-id-badge"></i> Log in with SSO
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('bottom') %>
|
||||
|
||||
+28
-11
@@ -1,13 +1,30 @@
|
||||
<%- include('top') %>
|
||||
<h1>Active sessions</h1>
|
||||
<% if (!active.length) { %><p class="muted">No active sessions.</p><% } else { %>
|
||||
<table>
|
||||
<thead><tr><th>User</th><th>Target host</th><th>Address</th><th>Started</th></tr></thead>
|
||||
<tbody>
|
||||
<% active.forEach(s => { %>
|
||||
<tr><td><%= s.uid %></td><td><%= s.slug || '—' %></td><td><%= s.target %></td><td><%= new Date(s.startedAt).toLocaleString() %></td></tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
<% } %>
|
||||
<script type="text/javascript">app.auth.forceLogin();</script>
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span><i class="fa-solid fa-plug-circle-bolt me-1"></i> Active sessions</span>
|
||||
<button class="btn btn-sm btn-outline-secondary" onclick="loadSessions()"><i class="fa-solid fa-rotate"></i></button>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped mb-0">
|
||||
<thead><tr><th>User</th><th>Target host</th><th>Address</th><th>Started</th></tr></thead>
|
||||
<tbody id="sessions-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function loadSessions(){
|
||||
app.jump.sessions(function(error, data){
|
||||
var $b = $('#sessions-body').empty();
|
||||
if(error || !data || !data.results.length){ $b.append('<tr><td colspan="4" class="text-muted">No active sessions.</td></tr>'); return; }
|
||||
data.results.forEach(function(s){
|
||||
$b.append('<tr><td>' + app.jump.esc(s.uid) + '</td><td>' + app.jump.esc(s.slug || '—') +
|
||||
'</td><td>' + app.jump.esc(s.target) + '</td><td>' + app.jump.fmtTime(s.startedAt) + '</td></tr>');
|
||||
});
|
||||
});
|
||||
}
|
||||
$(document).ready(loadSessions);
|
||||
</script>
|
||||
<%- include('bottom') %>
|
||||
|
||||
+76
-19
@@ -1,21 +1,78 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title><%= name %> — Jump Host</title>
|
||||
<link rel="stylesheet" href="/public/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<span class="brand"><%= name %> <small>jump host</small></span>
|
||||
<% if (typeof user !== 'undefined' && user) { %>
|
||||
<span class="spacer"></span>
|
||||
<a href="/">Dashboard</a>
|
||||
<a href="/sessions">Sessions</a>
|
||||
<a href="/audit">Audit</a>
|
||||
<span class="who"><%= user.uid %></span>
|
||||
<form method="post" action="/logout" class="inline"><button class="link">logout</button></form>
|
||||
<% } %>
|
||||
</nav>
|
||||
<main class="wrap">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title><%- name %> <%- title %></title>
|
||||
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
|
||||
<link rel="stylesheet" href="/static-modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/static-modules/@fortawesome/fontawesome-free/css/all.min.css">
|
||||
<link rel='stylesheet' href='/static/css/styles.css' />
|
||||
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
|
||||
<script type="text/javascript" src='/static-modules/jquery/dist/jquery.js'></script>
|
||||
<script type="text/javascript" src="/static-modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script type="text/javascript" src="/static-modules/@fortawesome/fontawesome-free/js/all.min.js"></script>
|
||||
<script type="text/javascript" src='/static-modules/mustache/mustache.min.js'></script>
|
||||
<script type="text/javascript" src='/static-modules/jq-repeat/dist/js/jq-repeat.js'></script>
|
||||
<script type="text/javascript" src='/static/lib/js/val.js'></script>
|
||||
<script type="text/javascript" src="/static-modules/moment/moment.js"></script>
|
||||
<script type="text/javascript" src="/static/lib/js/app-base.js"></script>
|
||||
<script type="text/javascript" src="/static/js/app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="/"><img src="<%- logo %>" height="28" class="me-2" alt=""><%- name %> <%- titleIcon %></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav top-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/dashboard"><i class="fa-solid fa-gauge-high"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/sessions"><i class="fa-solid fa-plug-circle-bolt"></i> Sessions</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/audit"><i class="fa-solid fa-clipboard-list"></i> Audit</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="form-inline mt-2 mt-md-0">
|
||||
<span id="cl-username" class="navbar-text text-light me-3" style="display: none;">
|
||||
<i class="fa-solid fa-user me-1"></i><span id="cl-username-text"></span>
|
||||
</span>
|
||||
<a id="cl-login-button" class="btn btn-outline-danger my-2 my-sm-0" href="/login" style="display: none;">
|
||||
<i class="fas fa-sign-in"></i> Login
|
||||
</a>
|
||||
<button id="cl-logout-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.logOut(function(){ window.location.href='/login'; })" style="display: none;">
|
||||
<i class="fas fa-sign-out"></i> Log Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.top-nav a').each(function(){
|
||||
var $this = $(this);
|
||||
$this.removeClass('active');
|
||||
if($this.attr('href').toLowerCase() === window.location.pathname.toLowerCase()){
|
||||
$this.addClass('active');
|
||||
}
|
||||
});
|
||||
app.auth.isLoggedIn(function(error, data){
|
||||
if(data){
|
||||
$('#cl-logout-button').show();
|
||||
if(data.username){
|
||||
$('#cl-username-text').text(data.username);
|
||||
$('#cl-username').css('display', '');
|
||||
}
|
||||
}else{
|
||||
$('#cl-login-button').show();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="spa-shell" class="container-fluid" style="margin-top: 4.5rem;">
|
||||
|
||||
Reference in New Issue
Block a user