Unify the front-end UI shell across the theta42 apps
views/top.ejs, views/bottom.ejs and public/lib/js/app-base.js are now byte-identical across sso-manager-node, proxy and jump-host. Everything per-app moved into utils/ui.js, exposed to every render as `ui` via app.locals (nav items + their group gates, footer repo/docs/ToS links, favicon, profile/logout targets, update-banner on/off + label). Client framework changes: - One gating model everywhere: app-base.js reveals .group-required-<cn> for each of the current user user/me groups. sso-manager-node sends LDAP DNs in memberOf, the OIDC clients send CNs in groups; both normalise to CNs, and the clients isAdmin flag becomes a synthetic `admin` group, so proxy nav-admin items are now group-required-admin. - user/me is fetched once per page load and cached (app.auth.loadUser); nav, forceLogin and group-required elements all read that one promise. - isLoggedIn is dual-mode (Promise + node-style callback), so the async and callback call styles both work from one shared top.ejs. - forceLogin no longer uses $.holdReady (removed in jQuery 4): it redirects to /login?redirect=<path>, and still enforces required groups. - logOut only clears the session; the caller decides where to go next. - post/put/delete are dual-mode Promise/callback, which also removes the undefined `callback2` reference that threw on a non-function callback. Dependencies: jquery ^4.0.0 and ejs ^3.1.10 in all three apps. jump-host specifics: - .group-required base rule added to styles.css (no gated nav items yet). - #spa-shell drops its inline margin-top; styles.css already sets it, and the shared shell adjusts it when a banner is shown. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+27
-21
@@ -1,24 +1,30 @@
|
||||
</div>
|
||||
</div><!-- end spa-shell -->
|
||||
|
||||
<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>
|
||||
© <%- buildYear %> 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<%- buildVersion %> (<%- buildHash %>)</span>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Shared UI shell — byte-identical across sso-manager-node, proxy and
|
||||
jump-host. Everything per-app comes from `ui` (utils/ui.js, exposed via
|
||||
app.locals in app.js). Edit all three copies together. -->
|
||||
<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>
|
||||
© <%- buildYear %> theta42 ·
|
||||
<a href="<%- ui.licenseUrl %>" target="_blank" class="text-light">MIT License</a>
|
||||
</span>
|
||||
<span class="d-flex align-items-center gap-3">
|
||||
<a href="<%- ui.docsUrl %>"<%- ui.docsExternal ? ' target="_blank"' : '' %> class="text-light text-decoration-none">
|
||||
<i class="fa-solid fa-book"></i> Docs
|
||||
</a>
|
||||
<a href="<%- ui.repoUrl %>" target="_blank" class="text-light text-decoration-none">
|
||||
<i class="fa-brands fa-github"></i> GitHub
|
||||
</a>
|
||||
<% if(ui.tosUrl){ %>
|
||||
<a href="<%- ui.tosUrl %>" class="text-light text-decoration-none">Terms of Service</a>
|
||||
<% } %>
|
||||
</span>
|
||||
<span>v<%- buildVersion %> (<%- buildHash %>)</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+94
-23
@@ -4,10 +4,17 @@
|
||||
<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">
|
||||
<!-- Shared UI shell — byte-identical across sso-manager-node, proxy and
|
||||
jump-host. Everything per-app comes from `ui` (utils/ui.js, exposed
|
||||
via app.locals in app.js). Edit all three copies together. -->
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="<%- ui.faviconUrl %>">
|
||||
<!-- CSS are placed here -->
|
||||
<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' />
|
||||
<!-- Scripts are placed here -->
|
||||
<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>
|
||||
@@ -28,51 +35,115 @@
|
||||
</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>
|
||||
<%# Items gated on a group start hidden (.group-required) and are
|
||||
revealed by app-base.js for the groups the user is in. %>
|
||||
<% for(const item of ui.nav){ %>
|
||||
<li class="nav-item<%- item.groups.length ? ' group-required' : '' %><%- item.groups.map(group => ' group-required-' + group).join('') %>">
|
||||
<a class="nav-link" href="<%- item.href %>"><i class="<%- item.icon %>"></i>
|
||||
<%- item.label %>
|
||||
</a>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
<div class="form-inline mt-2 mt-md-0">
|
||||
<% if(ui.profileUrl){ %>
|
||||
<a id="cl-username" class="navbar-text text-light me-3" href="<%- ui.profileUrl %>" style="display: none;">
|
||||
<i class="fa-solid fa-user me-1"></i><span id="cl-username-text"></span>
|
||||
</a>
|
||||
<% } else { %>
|
||||
<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 id="cl-login-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.forceLogin()" 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 id="cl-logout-button" class="btn btn-outline-danger my-2 my-sm-0" onclick="app.auth.logOut(function(){ window.location.href = '<%- ui.logoutRedirect %>'; })" style="display: none;">
|
||||
<i class="fas fa-sign-out"></i>
|
||||
Log Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<% if(ui.updateCheck){ %>
|
||||
<!-- Admin-only "a newer release is available" notice (services/update_check.js).
|
||||
Dismissal is per-browser-session only (sessionStorage), not persisted server-side.
|
||||
Fixed-positioned below the fixed navbar (a plain in-flow div here would render
|
||||
UNDER the nav, since fixed elements are taken out of document flow) -- shown/hidden
|
||||
dynamically, so #spa-shell's margin-top is adjusted in JS to make room for it. -->
|
||||
<div id="update-banner" class="alert alert-info alert-dismissible mb-0 rounded-0 text-center" style="display:none; position:fixed; left:0; right:0; z-index:1029;">
|
||||
<span id="update-banner-text"></span>
|
||||
<button type="button" class="btn-close" onclick="dismissUpdateBanner()"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function showUpdateBanner(){
|
||||
let $nav = $('nav.fixed-top');
|
||||
let $banner = $('#update-banner');
|
||||
$banner.css('top', $nav.outerHeight() + 'px').show();
|
||||
$('#spa-shell').css('margin-top', ($nav.outerHeight() + $banner.outerHeight()) + 'px');
|
||||
}
|
||||
|
||||
function dismissUpdateBanner(){
|
||||
$('#update-banner').hide();
|
||||
$('#spa-shell').css('margin-top', '');
|
||||
sessionStorage.setItem('update-banner-dismissed', '1');
|
||||
}
|
||||
|
||||
function checkForUpdate(){
|
||||
if(sessionStorage.getItem('update-banner-dismissed')) return;
|
||||
app.api.get('update-check', function(error, info){
|
||||
if(error || !info || !info.updateAvailable) return;
|
||||
$('#update-banner-text').html(
|
||||
'A newer version of <%- ui.updateLabel %> is available: <b>v' + info.latestVersion + '</b> ' +
|
||||
'(running v' + info.currentVersion + ') — ' +
|
||||
'<a href="' + info.releaseUrl + '" target="_blank" class="alert-link">see what changed</a>.'
|
||||
);
|
||||
showUpdateBanner();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<% } %>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('.top-nav a').each(function(){
|
||||
var $this = $(this);
|
||||
|
||||
// Set the correct link to active in the top nav bar
|
||||
$('.top-nav a').each(function(index){
|
||||
let $this = $(this);
|
||||
$this.removeClass('active');
|
||||
if($this.attr('href').toLowerCase() === window.location.pathname.toLowerCase()){
|
||||
$this.addClass('active');
|
||||
if($this.attr('href').toLocaleLowerCase() === window.location.pathname.toLocaleLowerCase()){
|
||||
$this.addClass('active')
|
||||
}
|
||||
});
|
||||
app.auth.isLoggedIn(function(error, data){
|
||||
if(data){
|
||||
})
|
||||
|
||||
// Set the correct login/logout button, and reveal the current user's
|
||||
// name once we know who they are. Group-gated nav items are revealed
|
||||
// by app-base.js off the same cached user/me.
|
||||
app.auth.isLoggedIn(function(error, me){
|
||||
if(me){
|
||||
$('#cl-logout-button').show();
|
||||
if(data.username){
|
||||
$('#cl-username-text').text(data.username);
|
||||
let username = me.uid || me.username;
|
||||
if(username){
|
||||
$('#cl-username-text').text(username);
|
||||
$('#cl-username').css('display', '');
|
||||
}
|
||||
|
||||
<% if(ui.updateCheck){ %>
|
||||
if(me.isAdmin) checkForUpdate();
|
||||
<% } %>
|
||||
}else{
|
||||
$('#cl-login-button').show();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="spa-shell" class="container-fluid" style="margin-top: 4.5rem;">
|
||||
|
||||
<!-- Container -->
|
||||
<div id="spa-shell" class="container-fluid">
|
||||
<div class="actionMessage" style="display:none;"></div>
|
||||
|
||||
Reference in New Issue
Block a user