Unify nav: merge Admin+Notifications into Dashboard, fold API Tokens into Profile
- Replace the separate Profile/API Tokens nav items with a single link
showing the logged-in user's name, pointing at their own profile.
- Merge admin.ejs + notifications.ejs into a new dashboard.ejs page.
/admin and /notifications now 301-redirect to /dashboard.
- Fold the API Tokens page into profile.ejs as a self-service-only
section, gated on isOwnProfile so it never appears when an admin
views another user's profile via /users/:uid. /api-tokens 301s to /.
- Fix: the section must not carry class="row" — app-base.js runs a
page-wide $('div.row').fadeIn() on every page load that would reveal
it regardless of the isOwnProfile check, since it fires before this
page's own gating logic.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -44,13 +44,14 @@ router.get('/tos', function(req, res) {
|
||||
res.render('tos', {...values, tosHtml});
|
||||
});
|
||||
|
||||
router.get('/admin', function(req, res) {
|
||||
res.render('admin', {...values});
|
||||
// Admin dashboard (stats + recent/inactive users) and Notifications
|
||||
// (broadcast + history) merged into one page.
|
||||
router.get('/dashboard', function(req, res) {
|
||||
res.render('dashboard', {...values});
|
||||
});
|
||||
|
||||
router.get('/notifications', function(req, res) {
|
||||
res.render('notifications', {...values});
|
||||
});
|
||||
router.get('/admin', (req, res) => res.redirect(301, '/dashboard'));
|
||||
router.get('/notifications', (req, res) => res.redirect(301, '/dashboard'));
|
||||
|
||||
router.get('/invites', function(req, res) {
|
||||
res.render('invites', {...values});
|
||||
@@ -77,9 +78,8 @@ router.get('/oauth-clients', function(req, res, next) {
|
||||
res.render('oauth_clients', {...values, issuer, discoveryUrl: `${issuer}/.well-known/openid-configuration`});
|
||||
});
|
||||
|
||||
router.get('/api-tokens', function(req, res, next) {
|
||||
res.render('api_tokens', {...values});
|
||||
});
|
||||
// API Tokens is now a section on the Profile page (own profile only).
|
||||
router.get('/api-tokens', (req, res) => res.redirect(301, '/'));
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
<%- include('top') %>
|
||||
|
||||
<script type="text/javascript">
|
||||
app.auth.forceLogin('app_sso_admin');
|
||||
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
const stats = await app.api.get('user/stats');
|
||||
|
||||
// Stat cards
|
||||
document.getElementById('stat-total').textContent = stats.totalUsers;
|
||||
document.getElementById('stat-active').textContent = stats.activeUsers;
|
||||
document.getElementById('stat-inactive').textContent = stats.inactiveUsers;
|
||||
document.getElementById('stat-groups').textContent = stats.totalGroups;
|
||||
|
||||
// Recent signups
|
||||
stats.recentSignups.forEach(function(u) {
|
||||
u.createTimestamp = moment(u.createTimestamp, 'YYYYMMDDHHmmssZ').fromNow();
|
||||
});
|
||||
$.scope.recentSignups.push(...stats.recentSignups);
|
||||
|
||||
// Inactive users
|
||||
$.scope.inactiveUsers.push(...stats.inactiveList);
|
||||
|
||||
document.getElementById('dashboard').style.display = '';
|
||||
} catch(e) {
|
||||
if (e && (e.status === 401 || e.name === 'Insufficient Permission')) {
|
||||
location.replace('/');
|
||||
} else {
|
||||
console.error('Dashboard load error:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function activateUser(uid) {
|
||||
try {
|
||||
await app.api.put('user/' + uid + '/active', { active: true });
|
||||
$.scope.inactiveUsers.remove('uid', uid);
|
||||
document.getElementById('stat-inactive').textContent =
|
||||
parseInt(document.getElementById('stat-inactive').textContent) - 1;
|
||||
document.getElementById('stat-active').textContent =
|
||||
parseInt(document.getElementById('stat-active').textContent) + 1;
|
||||
} catch(e) {
|
||||
alert('Failed to activate user.');
|
||||
}
|
||||
}
|
||||
|
||||
async function exportUsers() {
|
||||
const resp = await fetch('/api/user/export', {
|
||||
headers: { 'auth-token': localStorage.getItem('APIToken') }
|
||||
});
|
||||
const blob = await resp.blob();
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = 'users.csv';
|
||||
a.click();
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
loadDashboard();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="dashboard" class="row" style="display:none">
|
||||
<div class="col-12">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 mt-2">
|
||||
<h4 class="mb-0"><i class="fa-solid fa-screwdriver-wrench"></i> Admin Dashboard</h4>
|
||||
<button class="btn btn-outline-secondary shadow" onclick="exportUsers()">
|
||||
<i class="fa-solid fa-file-csv"></i> Export Users CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Stat cards -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow text-center">
|
||||
<div class="card-body">
|
||||
<div class="display-6 fw-bold" id="stat-total">—</div>
|
||||
<div class="text-muted small"><i class="fa-solid fa-users"></i> Total Users</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow text-center border-success">
|
||||
<div class="card-body">
|
||||
<div class="display-6 fw-bold text-success" id="stat-active">—</div>
|
||||
<div class="text-muted small"><i class="fa-solid fa-circle-check"></i> Active</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow text-center border-danger">
|
||||
<div class="card-body">
|
||||
<div class="display-6 fw-bold text-danger" id="stat-inactive">—</div>
|
||||
<div class="text-muted small"><i class="fa-solid fa-lock"></i> Inactive</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow text-center border-info">
|
||||
<div class="card-body">
|
||||
<div class="display-6 fw-bold text-info" id="stat-groups">—</div>
|
||||
<div class="text-muted small"><i class="fa-solid fa-users-viewfinder"></i> Groups</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
|
||||
<!-- Recent signups -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-user-plus"></i> Recent Signups
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr><th>User</th><th>Email</th><th>Joined</th></tr>
|
||||
</thead>
|
||||
<tbody jq-repeat="recentSignups">
|
||||
<tr>
|
||||
<td><a href="/users/{{uid}}">{{uid}}</a><br><small class="text-muted">{{givenName}} {{sn}}</small></td>
|
||||
<td><small>{{mail}}</small></td>
|
||||
<td><small class="text-muted">{{createTimestamp}}</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inactive users -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-lock"></i> Inactive Users
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr><th>User</th><th>Email</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody jq-repeat="inactiveUsers" jq-index-key="uid">
|
||||
<tr>
|
||||
<td><a href="/users/{{uid}}">{{uid}}</a><br><small class="text-muted">{{givenName}} {{sn}}</small></td>
|
||||
<td><small>{{mail}}</small></td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-outline-success" onclick="activateUser('{{uid}}')">
|
||||
<i class="fa-solid fa-lock-open"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('impersonate_modal') %>
|
||||
<%- include('bottom') %>
|
||||
@@ -1,227 +0,0 @@
|
||||
<%- include('top') %>
|
||||
|
||||
<!-- Edit modal -->
|
||||
<div class="modal fade" id="editModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><i class="fa-solid fa-pen-to-square"></i> Edit API Token</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="card-header actionMessage mb-3" style="display:none"></div>
|
||||
<input type="hidden" id="edit-id">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" id="edit-name" class="form-control shadow">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<input type="text" id="edit-description" class="form-control shadow">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Expires in (days) <small class="text-muted">(0 = never)</small></label>
|
||||
<input type="number" id="edit-expires_in_days" class="form-control shadow" min="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveEdit(this)"><i class="fa-solid fa-floppy-disk"></i> Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Token modal (shown once on create/rotate) -->
|
||||
<div class="modal fade" id="secretModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><i class="fa-solid fa-key"></i> API Token</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="text-danger"><i class="fa-solid fa-triangle-exclamation"></i> Save this token now — it will <strong>not</strong> be shown again.</p>
|
||||
<div class="input-group">
|
||||
<input type="text" id="secretValue" class="form-control font-monospace" readonly>
|
||||
<button class="btn btn-outline-secondary" onclick="copySecret()" title="Copy">
|
||||
<i class="fa-solid fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-3 mb-0 text-muted small">Use it as a bearer token:<br><code>Authorization: Bearer <token></code></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Any logged-in user can manage their own API tokens (self-service).
|
||||
app.auth.forceLogin();
|
||||
|
||||
var secretModal = new bootstrap.Modal(document.getElementById('secretModal'));
|
||||
var editModal = new bootstrap.Modal(document.getElementById('editModal'));
|
||||
var tokensById = {};
|
||||
|
||||
function showSecret(secret){
|
||||
document.getElementById('secretValue').value = secret;
|
||||
secretModal.show();
|
||||
}
|
||||
function copySecret(){ copyField('secretValue'); }
|
||||
|
||||
function copyField(id, btn){
|
||||
var el = document.getElementById(id);
|
||||
if(!el) return;
|
||||
el.select(); el.setSelectionRange(0, 99999); document.execCommand('copy');
|
||||
if(btn){ var $i = $(btn).find('i'), prev = $i.attr('class');
|
||||
$i.attr('class', 'fa-solid fa-check'); setTimeout(function(){ $i.attr('class', prev); }, 1200); }
|
||||
}
|
||||
|
||||
function fmtTime(ms){
|
||||
// created_on/last_used_on come back from Redis as strings (model-redis
|
||||
// only coerces fields with an explicit `type`); moment(value, "x") parses
|
||||
// a numeric string-or-number as a Unix-ms timestamp, unlike new Date(str).
|
||||
if(!ms || Number(ms) === 0) return '—';
|
||||
var t = moment(ms, "x");
|
||||
if(!t.isValid()) return '—';
|
||||
return t.fromNow() + ' <span class="text-muted">(' + t.format('YYYY-MM-DD HH:mm') + ')</span>';
|
||||
}
|
||||
function fmtExpiry(token){
|
||||
// expires_at is type:number (a real number); isExpired is a class getter
|
||||
// that is NOT serialized to the client, so compute expiry here.
|
||||
var exp = Number(token.expires_at);
|
||||
if(!exp) return '<span class="badge bg-secondary">never</span>';
|
||||
if(Date.now() > exp) return '<span class="badge bg-danger">expired</span>';
|
||||
return '<span class="badge bg-warning text-dark">' + moment(exp, "x").fromNow() + '</span>';
|
||||
}
|
||||
|
||||
function processToken(token){
|
||||
tokensById[token.id] = token;
|
||||
token.id_short = token.id.slice(0, 12) + '…';
|
||||
token.expires_display = fmtExpiry(token);
|
||||
token.created_display = fmtTime(token.created_on);
|
||||
token.last_used_display = fmtTime(token.last_used_on);
|
||||
return token;
|
||||
}
|
||||
|
||||
async function tableAJAX(){
|
||||
let data = await app.apiToken.list();
|
||||
$.scope.apiTokenCard.empty();
|
||||
$.each(data.results, function(_, token){
|
||||
$.scope.apiTokenCard.push(processToken(token));
|
||||
});
|
||||
}
|
||||
|
||||
async function revokeToken(id, name, btn){
|
||||
var $card = $(btn).closest('.card');
|
||||
$card.addClass('table-warning');
|
||||
var confirmed = await app.util.actionConfirm('Revoke API token "' + name + '"? It stops working immediately.', $card, 'warning');
|
||||
$card.removeClass('table-warning');
|
||||
if(!confirmed) return;
|
||||
app.apiToken.remove({id: id}, function(error, data){
|
||||
if(error){ app.util.actionMessage('Error: ' + data.message, $card, 'danger'); return; }
|
||||
$.scope.apiTokenCard.remove('id', id);
|
||||
});
|
||||
}
|
||||
|
||||
async function rotateToken(id, name, btn){
|
||||
var $card = $(btn).closest('.card');
|
||||
var confirmed = await app.util.actionConfirm('Rotate API token "' + name + '"? The old token stops working immediately.', $card, 'warning');
|
||||
if(!confirmed) return;
|
||||
app.apiToken.rotate({id: id}, function(error, data){
|
||||
if(error){ app.util.actionMessage('Error: ' + data.message, $card, 'danger'); return; }
|
||||
showSecret(data.token);
|
||||
tableAJAX();
|
||||
});
|
||||
}
|
||||
|
||||
function editToken(id){
|
||||
var t = tokensById[id]; if(!t) return;
|
||||
$('#edit-id').val(id);
|
||||
$('#edit-name').val(t.name || '');
|
||||
$('#edit-description').val(t.description || '');
|
||||
$('#edit-expires_in_days').val('');
|
||||
editModal.show();
|
||||
}
|
||||
|
||||
function saveEdit(btn){
|
||||
var $msg = $('#editModal .actionMessage');
|
||||
var payload = {
|
||||
id: $('#edit-id').val(),
|
||||
name: $('#edit-name').val(),
|
||||
description: $('#edit-description').val(),
|
||||
expires_in_days: $('#edit-expires_in_days').val(),
|
||||
};
|
||||
app.apiToken.update(payload, function(error, data){
|
||||
if(error){ app.util.actionMessage((data && data.message) || 'Update failed.', $msg.parent(), 'danger'); return; }
|
||||
editModal.hide();
|
||||
tableAJAX();
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
tableAJAX();
|
||||
$('form[action="api-token/"]').attr('evalAJAX',
|
||||
'showSecret(data.token); tableAJAX(); $form.trigger("reset");'
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header"><i class="fa-solid fa-plus"></i> New API Token</div>
|
||||
<div class="card-header actionMessage" style="display:none"></div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted small">A personal access token lets scripts and services call the SSO management API as you, with your permissions. Treat it like a password.</p>
|
||||
<form action="api-token/" method="post" onsubmit="formAJAX(this)">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control shadow" name="name" placeholder="CI user sync" validate=":1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<input type="text" class="form-control shadow" name="description" placeholder="Used by the nightly sync job">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Expires in (days) <small class="text-muted">(0 = never)</small></label>
|
||||
<input type="number" class="form-control shadow" name="expires_in_days" value="0" min="0">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-outline-dark"><i class="fa-solid fa-plus"></i> Create</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-header actionMessage" style="display:none"></div>
|
||||
|
||||
<div jq-repeat="apiTokenCard" jq-index-key="id" id="apitoken-card-{{id}}" class="card shadow mb-3">
|
||||
<div class="card-header">
|
||||
<h5><i class="fa-solid fa-key"></i> {{ name }}</h5>
|
||||
<small class="text-muted font-monospace">{{ id_short }}</small>
|
||||
</div>
|
||||
<div class="card-header actionMessage" style="display:none"></div>
|
||||
<div class="card-body">
|
||||
{{ #description }}<p>{{ description }}</p>{{ /description }}
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-sm-3">Token ID</dt>
|
||||
<dd class="col-sm-9"><code>{{ id_short }}</code></dd>
|
||||
<dt class="col-sm-3">Created</dt>
|
||||
<dd class="col-sm-9">{{{ created_display }}}</dd>
|
||||
<dt class="col-sm-3">Last used</dt>
|
||||
<dd class="col-sm-9">{{{ last_used_display }}}</dd>
|
||||
<dt class="col-sm-3">Expires</dt>
|
||||
<dd class="col-sm-9">{{{ expires_display }}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="button" onclick="editToken('{{id}}')" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen-to-square"></i> Edit</button>
|
||||
<button type="button" onclick="rotateToken('{{id}}', '{{name}}', this)" class="btn btn-warning btn-sm"><i class="fa-solid fa-arrows-rotate"></i> Rotate</button>
|
||||
<button type="button" onclick="revokeToken('{{id}}', '{{name}}', this)" class="btn btn-danger btn-sm float-end"><i class="fa-solid fa-trash"></i> Revoke</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('bottom') %>
|
||||
@@ -0,0 +1,358 @@
|
||||
<%- include('top') %>
|
||||
|
||||
<script type="text/javascript">
|
||||
app.auth.forceLogin('app_sso_admin');
|
||||
|
||||
// ── Overview (stats, recent signups, inactive users) ────────────────────
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
const stats = await app.api.get('user/stats');
|
||||
|
||||
// Stat cards
|
||||
document.getElementById('stat-total').textContent = stats.totalUsers;
|
||||
document.getElementById('stat-active').textContent = stats.activeUsers;
|
||||
document.getElementById('stat-inactive').textContent = stats.inactiveUsers;
|
||||
document.getElementById('stat-groups').textContent = stats.totalGroups;
|
||||
|
||||
// Recent signups
|
||||
stats.recentSignups.forEach(function(u) {
|
||||
u.createTimestamp = moment(u.createTimestamp, 'YYYYMMDDHHmmssZ').fromNow();
|
||||
});
|
||||
$.scope.recentSignups.push(...stats.recentSignups);
|
||||
|
||||
// Inactive users
|
||||
$.scope.inactiveUsers.push(...stats.inactiveList);
|
||||
|
||||
document.getElementById('dashboard-overview').style.display = '';
|
||||
} catch(e) {
|
||||
if (e && (e.status === 401 || e.name === 'Insufficient Permission')) {
|
||||
location.replace('/');
|
||||
} else {
|
||||
console.error('Dashboard load error:', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function activateUser(uid) {
|
||||
try {
|
||||
await app.api.put('user/' + uid + '/active', { active: true });
|
||||
$.scope.inactiveUsers.remove('uid', uid);
|
||||
document.getElementById('stat-inactive').textContent =
|
||||
parseInt(document.getElementById('stat-inactive').textContent) - 1;
|
||||
document.getElementById('stat-active').textContent =
|
||||
parseInt(document.getElementById('stat-active').textContent) + 1;
|
||||
} catch(e) {
|
||||
alert('Failed to activate user.');
|
||||
}
|
||||
}
|
||||
|
||||
async function exportUsers() {
|
||||
const resp = await fetch('/api/user/export', {
|
||||
headers: { 'auth-token': localStorage.getItem('APIToken') }
|
||||
});
|
||||
const blob = await resp.blob();
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = 'users.csv';
|
||||
a.click();
|
||||
}
|
||||
|
||||
// ── Notifications (compose + history) ────────────────────────────────────
|
||||
async function loadHistory() {
|
||||
try {
|
||||
const data = await app.api.get('notification');
|
||||
const list = data.results || [];
|
||||
list.forEach(function(n) {
|
||||
n.created_on_fmt = moment(n.created_on).fromNow();
|
||||
n.filter_label = formatFilterLabel(n.filter_type, n.filter_value, n.active_only);
|
||||
});
|
||||
$.scope.notificationHistory.push(...list);
|
||||
} catch(e) {
|
||||
if (e && e.status === 401) location.replace('/');
|
||||
else console.error('Failed to load notification history:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function formatFilterLabel(type, value, active_only) {
|
||||
const suffix = active_only ? ' (active only)' : '';
|
||||
if (type === 'group') return 'Groups: ' + value + suffix;
|
||||
if (type === 'users') return 'Specific users';
|
||||
if (type === 'all_active') return 'All active users';
|
||||
if (type === 'all') return 'All users';
|
||||
return type;
|
||||
}
|
||||
|
||||
function toggleFilterInputs() {
|
||||
const type = document.querySelector('input[name="notif-filter"]:checked').value;
|
||||
document.getElementById('notif-group-row').style.display = type === 'group' ? '' : 'none';
|
||||
document.getElementById('notif-users-row').style.display = type === 'users' ? '' : 'none';
|
||||
document.getElementById('notif-active-row').style.display = (type === 'group' || type === 'all') ? '' : 'none';
|
||||
}
|
||||
|
||||
async function sendNotification() {
|
||||
const subject = document.getElementById('notif-subject').value.trim();
|
||||
const message = document.getElementById('notif-message').value.trim();
|
||||
const filterType = document.querySelector('input[name="notif-filter"]:checked').value;
|
||||
const groupValue = document.getElementById('notif-group').value.trim();
|
||||
const usersValue = document.getElementById('notif-users').value.trim();
|
||||
const activeOnly = document.getElementById('notif-active-only').checked;
|
||||
const msgEl = document.getElementById('notif-result');
|
||||
|
||||
if (!subject || !message) { alert('Subject and message are required.'); return; }
|
||||
|
||||
let filter_value = '';
|
||||
if (filterType === 'group') filter_value = groupValue;
|
||||
if (filterType === 'users') filter_value = JSON.stringify(usersValue.split(',').map(s => s.trim()).filter(Boolean));
|
||||
|
||||
msgEl.className = 'alert alert-info mt-2';
|
||||
msgEl.textContent = 'Sending…';
|
||||
msgEl.style.display = '';
|
||||
|
||||
try {
|
||||
const result = await app.api.post('notification', {
|
||||
subject,
|
||||
message,
|
||||
filter_type: filterType,
|
||||
filter_value,
|
||||
active_only: activeOnly,
|
||||
});
|
||||
msgEl.className = 'alert alert-success mt-2';
|
||||
msgEl.textContent = `Sent to ${result.results.sent_count} recipient(s). ${result.results.failed_count} failed.`;
|
||||
|
||||
const n = result.results;
|
||||
n.created_on_fmt = 'just now';
|
||||
n.filter_label = formatFilterLabel(n.filter_type, n.filter_value, n.active_only);
|
||||
$.scope.notificationHistory.unshift([n]);
|
||||
|
||||
// Reset form
|
||||
document.getElementById('notif-subject').value = '';
|
||||
document.getElementById('notif-message').value = '';
|
||||
} catch(e) {
|
||||
msgEl.className = 'alert alert-danger mt-2';
|
||||
msgEl.textContent = 'Failed: ' + ((e.responseJSON && e.responseJSON.message) || e.message || 'Unknown error');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
loadDashboard();
|
||||
loadHistory();
|
||||
toggleFilterInputs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="row mb-3 mt-2">
|
||||
<div class="col-12">
|
||||
<h4 class="mb-0"><i class="fa-solid fa-gauge-high"></i> Dashboard</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-overview" class="row" style="display:none">
|
||||
<div class="col-12">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="mb-0"><i class="fa-solid fa-users"></i> Overview</h5>
|
||||
<button class="btn btn-outline-secondary shadow" onclick="exportUsers()">
|
||||
<i class="fa-solid fa-file-csv"></i> Export Users CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Stat cards -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow text-center">
|
||||
<div class="card-body">
|
||||
<div class="display-6 fw-bold" id="stat-total">—</div>
|
||||
<div class="text-muted small"><i class="fa-solid fa-users"></i> Total Users</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow text-center border-success">
|
||||
<div class="card-body">
|
||||
<div class="display-6 fw-bold text-success" id="stat-active">—</div>
|
||||
<div class="text-muted small"><i class="fa-solid fa-circle-check"></i> Active</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow text-center border-danger">
|
||||
<div class="card-body">
|
||||
<div class="display-6 fw-bold text-danger" id="stat-inactive">—</div>
|
||||
<div class="text-muted small"><i class="fa-solid fa-lock"></i> Inactive</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow text-center border-info">
|
||||
<div class="card-body">
|
||||
<div class="display-6 fw-bold text-info" id="stat-groups">—</div>
|
||||
<div class="text-muted small"><i class="fa-solid fa-users-viewfinder"></i> Groups</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
|
||||
<!-- Recent signups -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-user-plus"></i> Recent Signups
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr><th>User</th><th>Email</th><th>Joined</th></tr>
|
||||
</thead>
|
||||
<tbody jq-repeat="recentSignups">
|
||||
<tr>
|
||||
<td><a href="/users/{{uid}}">{{uid}}</a><br><small class="text-muted">{{givenName}} {{sn}}</small></td>
|
||||
<td><small>{{mail}}</small></td>
|
||||
<td><small class="text-muted">{{createTimestamp}}</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inactive users -->
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-lock"></i> Inactive Users
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr><th>User</th><th>Email</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody jq-repeat="inactiveUsers" jq-index-key="uid">
|
||||
<tr>
|
||||
<td><a href="/users/{{uid}}">{{uid}}</a><br><small class="text-muted">{{givenName}} {{sn}}</small></td>
|
||||
<td><small>{{mail}}</small></td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-outline-success" onclick="activateUser('{{uid}}')">
|
||||
<i class="fa-solid fa-lock-open"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<h5 class="mb-3"><i class="fa-solid fa-paper-plane"></i> Notifications</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
|
||||
<!-- Compose -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-pencil"></i> Compose
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Subject</label>
|
||||
<input type="text" class="form-control shadow" id="notif-subject" placeholder="Maintenance window tonight" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Message <small class="text-muted">(HTML allowed)</small></label>
|
||||
<textarea class="form-control shadow" id="notif-message" rows="6" placeholder="<p>Hello, we will be performing maintenance...</p>"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Send to</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="notif-filter" id="f-all-active" value="all_active" checked onchange="toggleFilterInputs()">
|
||||
<label class="form-check-label" for="f-all-active">All active users</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="notif-filter" id="f-all" value="all" onchange="toggleFilterInputs()">
|
||||
<label class="form-check-label" for="f-all">All users (including inactive)</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="notif-filter" id="f-group" value="group" onchange="toggleFilterInputs()">
|
||||
<label class="form-check-label" for="f-group">Group members</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="notif-filter" id="f-users" value="users" onchange="toggleFilterInputs()">
|
||||
<label class="form-check-label" for="f-users">Specific users</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notif-group-row" class="mb-3" style="display:none">
|
||||
<label class="form-label">Groups <small class="text-muted">(comma-separated)</small></label>
|
||||
<input type="text" class="form-control shadow" id="notif-group" placeholder="host_hec-bot_admin, app_sso_admin" />
|
||||
</div>
|
||||
<div id="notif-users-row" class="mb-3" style="display:none">
|
||||
<label class="form-label">UIDs <small class="text-muted">(comma-separated)</small></label>
|
||||
<input type="text" class="form-control shadow" id="notif-users" placeholder="wmantly, jsmith" />
|
||||
</div>
|
||||
<div id="notif-active-row" class="mb-3" style="display:none">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="notif-active-only" checked>
|
||||
<label class="form-check-label" for="notif-active-only">Active members only</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary shadow" onclick="sendNotification()">
|
||||
<i class="fa-solid fa-paper-plane"></i> Send
|
||||
</button>
|
||||
<div id="notif-result" style="display:none" class="mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-clock-rotate-left"></i> History
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sent</th>
|
||||
<th>Subject</th>
|
||||
<th>Filter</th>
|
||||
<th class="text-center">✓</th>
|
||||
<th class="text-center">✗</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody jq-repeat="notificationHistory" jq-index-key="notification_id">
|
||||
<tr>
|
||||
<td><small class="text-muted">{{created_on_fmt}}</small></td>
|
||||
<td><small>{{subject}}</small></td>
|
||||
<td><small class="text-muted">{{filter_label}}</small></td>
|
||||
<td class="text-center text-success"><small>{{sent_count}}</small></td>
|
||||
<td class="text-center text-danger"><small>{{failed_count}}</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<%- include('impersonate_modal') %>
|
||||
<%- include('bottom') %>
|
||||
@@ -1,192 +0,0 @@
|
||||
<%- include('top') %>
|
||||
|
||||
<script type="text/javascript">
|
||||
app.auth.forceLogin('app_sso_admin');
|
||||
|
||||
async function loadHistory() {
|
||||
try {
|
||||
const data = await app.api.get('notification');
|
||||
const list = data.results || [];
|
||||
list.forEach(function(n) {
|
||||
n.created_on_fmt = moment(n.created_on).fromNow();
|
||||
n.filter_label = formatFilterLabel(n.filter_type, n.filter_value, n.active_only);
|
||||
});
|
||||
$.scope.notificationHistory.push(...list);
|
||||
} catch(e) {
|
||||
if (e && e.status === 401) location.replace('/');
|
||||
else console.error('Failed to load notification history:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function formatFilterLabel(type, value, active_only) {
|
||||
const suffix = active_only ? ' (active only)' : '';
|
||||
if (type === 'group') return 'Groups: ' + value + suffix;
|
||||
if (type === 'users') return 'Specific users';
|
||||
if (type === 'all_active') return 'All active users';
|
||||
if (type === 'all') return 'All users';
|
||||
return type;
|
||||
}
|
||||
|
||||
function toggleFilterInputs() {
|
||||
const type = document.querySelector('input[name="notif-filter"]:checked').value;
|
||||
document.getElementById('notif-group-row').style.display = type === 'group' ? '' : 'none';
|
||||
document.getElementById('notif-users-row').style.display = type === 'users' ? '' : 'none';
|
||||
document.getElementById('notif-active-row').style.display = (type === 'group' || type === 'all') ? '' : 'none';
|
||||
}
|
||||
|
||||
async function sendNotification() {
|
||||
const subject = document.getElementById('notif-subject').value.trim();
|
||||
const message = document.getElementById('notif-message').value.trim();
|
||||
const filterType = document.querySelector('input[name="notif-filter"]:checked').value;
|
||||
const groupValue = document.getElementById('notif-group').value.trim();
|
||||
const usersValue = document.getElementById('notif-users').value.trim();
|
||||
const activeOnly = document.getElementById('notif-active-only').checked;
|
||||
const msgEl = document.getElementById('notif-result');
|
||||
|
||||
if (!subject || !message) { alert('Subject and message are required.'); return; }
|
||||
|
||||
let filter_value = '';
|
||||
if (filterType === 'group') filter_value = groupValue;
|
||||
if (filterType === 'users') filter_value = JSON.stringify(usersValue.split(',').map(s => s.trim()).filter(Boolean));
|
||||
|
||||
msgEl.className = 'alert alert-info mt-2';
|
||||
msgEl.textContent = 'Sending…';
|
||||
msgEl.style.display = '';
|
||||
|
||||
try {
|
||||
const result = await app.api.post('notification', {
|
||||
subject,
|
||||
message,
|
||||
filter_type: filterType,
|
||||
filter_value,
|
||||
active_only: activeOnly,
|
||||
});
|
||||
msgEl.className = 'alert alert-success mt-2';
|
||||
msgEl.textContent = `Sent to ${result.results.sent_count} recipient(s). ${result.results.failed_count} failed.`;
|
||||
|
||||
const n = result.results;
|
||||
n.created_on_fmt = 'just now';
|
||||
n.filter_label = formatFilterLabel(n.filter_type, n.filter_value, n.active_only);
|
||||
$.scope.notificationHistory.unshift([n]);
|
||||
|
||||
// Reset form
|
||||
document.getElementById('notif-subject').value = '';
|
||||
document.getElementById('notif-message').value = '';
|
||||
} catch(e) {
|
||||
msgEl.className = 'alert alert-danger mt-2';
|
||||
msgEl.textContent = 'Failed: ' + ((e.responseJSON && e.responseJSON.message) || e.message || 'Unknown error');
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
loadHistory();
|
||||
toggleFilterInputs();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
|
||||
<div class="d-flex align-items-center mb-3 mt-2">
|
||||
<h4 class="mb-0"><i class="fa-solid fa-paper-plane"></i> Notifications</h4>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
|
||||
<!-- Compose -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-pencil"></i> Compose
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Subject</label>
|
||||
<input type="text" class="form-control shadow" id="notif-subject" placeholder="Maintenance window tonight" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Message <small class="text-muted">(HTML allowed)</small></label>
|
||||
<textarea class="form-control shadow" id="notif-message" rows="6" placeholder="<p>Hello, we will be performing maintenance...</p>"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Send to</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="notif-filter" id="f-all-active" value="all_active" checked onchange="toggleFilterInputs()">
|
||||
<label class="form-check-label" for="f-all-active">All active users</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="notif-filter" id="f-all" value="all" onchange="toggleFilterInputs()">
|
||||
<label class="form-check-label" for="f-all">All users (including inactive)</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="notif-filter" id="f-group" value="group" onchange="toggleFilterInputs()">
|
||||
<label class="form-check-label" for="f-group">Group members</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="notif-filter" id="f-users" value="users" onchange="toggleFilterInputs()">
|
||||
<label class="form-check-label" for="f-users">Specific users</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notif-group-row" class="mb-3" style="display:none">
|
||||
<label class="form-label">Groups <small class="text-muted">(comma-separated)</small></label>
|
||||
<input type="text" class="form-control shadow" id="notif-group" placeholder="host_hec-bot_admin, app_sso_admin" />
|
||||
</div>
|
||||
<div id="notif-users-row" class="mb-3" style="display:none">
|
||||
<label class="form-label">UIDs <small class="text-muted">(comma-separated)</small></label>
|
||||
<input type="text" class="form-control shadow" id="notif-users" placeholder="wmantly, jsmith" />
|
||||
</div>
|
||||
<div id="notif-active-row" class="mb-3" style="display:none">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="notif-active-only" checked>
|
||||
<label class="form-check-label" for="notif-active-only">Active members only</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary shadow" onclick="sendNotification()">
|
||||
<i class="fa-solid fa-paper-plane"></i> Send
|
||||
</button>
|
||||
<div id="notif-result" style="display:none" class="mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header shadow">
|
||||
<i class="fa-solid fa-clock-rotate-left"></i> History
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sent</th>
|
||||
<th>Subject</th>
|
||||
<th>Filter</th>
|
||||
<th class="text-center">✓</th>
|
||||
<th class="text-center">✗</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody jq-repeat="notificationHistory" jq-index-key="notification_id">
|
||||
<tr>
|
||||
<td><small class="text-muted">{{created_on_fmt}}</small></td>
|
||||
<td><small>{{subject}}</small></td>
|
||||
<td><small class="text-muted">{{filter_label}}</small></td>
|
||||
<td class="text-center text-success"><small>{{sent_count}}</small></td>
|
||||
<td class="text-center text-danger"><small>{{failed_count}}</small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('impersonate_modal') %>
|
||||
<%- include('bottom') %>
|
||||
@@ -3,6 +3,7 @@
|
||||
<script type="text/javascript">
|
||||
app.auth.forceLogin();
|
||||
var currentUser;
|
||||
var isOwnProfile = !location.pathname.includes('/users/');
|
||||
|
||||
function renderProfile(user){
|
||||
// data.photo = unescape(encodeURIComponent(data.jpegPhoto));
|
||||
@@ -76,6 +77,16 @@
|
||||
|
||||
renderProfile(currentUser);
|
||||
renderUserGroups(currentUser);
|
||||
|
||||
// API Tokens are self-service only — never shown when an admin is
|
||||
// viewing someone else's profile via /users/:uid.
|
||||
if(isOwnProfile){
|
||||
$('#own-api-tokens-section').show();
|
||||
tableAJAX();
|
||||
$('form[action="api-token/"]').attr('evalAJAX',
|
||||
'showSecret(data.token); tableAJAX(); $form.trigger("reset");'
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -306,5 +317,232 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Token modal (shown once on create/rotate) -->
|
||||
<div class="modal fade" id="secretModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><i class="fa-solid fa-key"></i> API Token</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="text-danger"><i class="fa-solid fa-triangle-exclamation"></i> Save this token now — it will <strong>not</strong> be shown again.</p>
|
||||
<div class="input-group">
|
||||
<input type="text" id="secretValue" class="form-control font-monospace" readonly>
|
||||
<button class="btn btn-outline-secondary" onclick="copySecret()" title="Copy">
|
||||
<i class="fa-solid fa-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-3 mb-0 text-muted small">Use it as a bearer token:<br><code>Authorization: Bearer <token></code></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit modal -->
|
||||
<div class="modal fade" id="editModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><i class="fa-solid fa-pen-to-square"></i> Edit API Token</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="card-header actionMessage mb-3" style="display:none"></div>
|
||||
<input type="hidden" id="edit-id">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" id="edit-name" class="form-control shadow">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<input type="text" id="edit-description" class="form-control shadow">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Expires in (days) <small class="text-muted">(0 = never)</small></label>
|
||||
<input type="number" id="edit-expires_in_days" class="form-control shadow" min="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveEdit(this)"><i class="fa-solid fa-floppy-disk"></i> Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Any logged-in user can manage their own API tokens (self-service).
|
||||
// Section is only revealed (see $(document).ready above) when isOwnProfile.
|
||||
|
||||
var secretModal = new bootstrap.Modal(document.getElementById('secretModal'));
|
||||
var editModal = new bootstrap.Modal(document.getElementById('editModal'));
|
||||
var tokensById = {};
|
||||
|
||||
function showSecret(secret){
|
||||
document.getElementById('secretValue').value = secret;
|
||||
secretModal.show();
|
||||
}
|
||||
function copySecret(){ copyField('secretValue'); }
|
||||
|
||||
function copyField(id, btn){
|
||||
var el = document.getElementById(id);
|
||||
if(!el) return;
|
||||
el.select(); el.setSelectionRange(0, 99999); document.execCommand('copy');
|
||||
if(btn){ var $i = $(btn).find('i'), prev = $i.attr('class');
|
||||
$i.attr('class', 'fa-solid fa-check'); setTimeout(function(){ $i.attr('class', prev); }, 1200); }
|
||||
}
|
||||
|
||||
function fmtTime(ms){
|
||||
// created_on/last_used_on come back from Redis as strings (model-redis
|
||||
// only coerces fields with an explicit `type`); moment(value, "x") parses
|
||||
// a numeric string-or-number as a Unix-ms timestamp, unlike new Date(str).
|
||||
if(!ms || Number(ms) === 0) return '—';
|
||||
var t = moment(ms, "x");
|
||||
if(!t.isValid()) return '—';
|
||||
return t.fromNow() + ' <span class="text-muted">(' + t.format('YYYY-MM-DD HH:mm') + ')</span>';
|
||||
}
|
||||
function fmtExpiry(token){
|
||||
// expires_at is type:number (a real number); isExpired is a class getter
|
||||
// that is NOT serialized to the client, so compute expiry here.
|
||||
var exp = Number(token.expires_at);
|
||||
if(!exp) return '<span class="badge bg-secondary">never</span>';
|
||||
if(Date.now() > exp) return '<span class="badge bg-danger">expired</span>';
|
||||
return '<span class="badge bg-warning text-dark">' + moment(exp, "x").fromNow() + '</span>';
|
||||
}
|
||||
|
||||
function processToken(token){
|
||||
tokensById[token.id] = token;
|
||||
token.id_short = token.id.slice(0, 12) + '…';
|
||||
token.expires_display = fmtExpiry(token);
|
||||
token.created_display = fmtTime(token.created_on);
|
||||
token.last_used_display = fmtTime(token.last_used_on);
|
||||
return token;
|
||||
}
|
||||
|
||||
async function tableAJAX(){
|
||||
let data = await app.apiToken.list();
|
||||
$.scope.apiTokenCard.empty();
|
||||
$.each(data.results, function(_, token){
|
||||
$.scope.apiTokenCard.push(processToken(token));
|
||||
});
|
||||
}
|
||||
|
||||
async function revokeToken(id, name, btn){
|
||||
var $card = $(btn).closest('.card');
|
||||
$card.addClass('table-warning');
|
||||
var confirmed = await app.util.actionConfirm('Revoke API token "' + name + '"? It stops working immediately.', $card, 'warning');
|
||||
$card.removeClass('table-warning');
|
||||
if(!confirmed) return;
|
||||
app.apiToken.remove({id: id}, function(error, data){
|
||||
if(error){ app.util.actionMessage('Error: ' + data.message, $card, 'danger'); return; }
|
||||
$.scope.apiTokenCard.remove('id', id);
|
||||
});
|
||||
}
|
||||
|
||||
async function rotateToken(id, name, btn){
|
||||
var $card = $(btn).closest('.card');
|
||||
var confirmed = await app.util.actionConfirm('Rotate API token "' + name + '"? The old token stops working immediately.', $card, 'warning');
|
||||
if(!confirmed) return;
|
||||
app.apiToken.rotate({id: id}, function(error, data){
|
||||
if(error){ app.util.actionMessage('Error: ' + data.message, $card, 'danger'); return; }
|
||||
showSecret(data.token);
|
||||
tableAJAX();
|
||||
});
|
||||
}
|
||||
|
||||
function editToken(id){
|
||||
var t = tokensById[id]; if(!t) return;
|
||||
$('#edit-id').val(id);
|
||||
$('#edit-name').val(t.name || '');
|
||||
$('#edit-description').val(t.description || '');
|
||||
$('#edit-expires_in_days').val('');
|
||||
editModal.show();
|
||||
}
|
||||
|
||||
function saveEdit(btn){
|
||||
var $msg = $('#editModal .actionMessage');
|
||||
var payload = {
|
||||
id: $('#edit-id').val(),
|
||||
name: $('#edit-name').val(),
|
||||
description: $('#edit-description').val(),
|
||||
expires_in_days: $('#edit-expires_in_days').val(),
|
||||
};
|
||||
app.apiToken.update(payload, function(error, data){
|
||||
if(error){ app.util.actionMessage((data && data.message) || 'Update failed.', $msg.parent(), 'danger'); return; }
|
||||
editModal.hide();
|
||||
tableAJAX();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Not class="row": app-base.js's `$('div.row').fadeIn('slow')` page-reveal
|
||||
runs before this page's own ready handler and would unhide any div.row
|
||||
unconditionally, defeating the isOwnProfile check below. -->
|
||||
<div id="own-api-tokens-section" style="display:none">
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<h5 class="mb-3"><i class="fa-solid fa-code"></i> API Tokens</h5>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header"><i class="fa-solid fa-plus"></i> New API Token</div>
|
||||
<div class="card-header actionMessage" style="display:none"></div>
|
||||
<div class="card-body">
|
||||
<p class="text-muted small">A personal access token lets scripts and services call the SSO management API as you, with your permissions. Treat it like a password.</p>
|
||||
<form action="api-token/" method="post" onsubmit="formAJAX(this)">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control shadow" name="name" placeholder="CI user sync" validate=":1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Description</label>
|
||||
<input type="text" class="form-control shadow" name="description" placeholder="Used by the nightly sync job">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Expires in (days) <small class="text-muted">(0 = never)</small></label>
|
||||
<input type="number" class="form-control shadow" name="expires_in_days" value="0" min="0">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-outline-dark"><i class="fa-solid fa-plus"></i> Create</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-header actionMessage" style="display:none"></div>
|
||||
|
||||
<div jq-repeat="apiTokenCard" jq-index-key="id" id="apitoken-card-{{id}}" class="card shadow mb-3">
|
||||
<div class="card-header">
|
||||
<h5><i class="fa-solid fa-key"></i> {{ name }}</h5>
|
||||
<small class="text-muted font-monospace">{{ id_short }}</small>
|
||||
</div>
|
||||
<div class="card-header actionMessage" style="display:none"></div>
|
||||
<div class="card-body">
|
||||
{{ #description }}<p>{{ description }}</p>{{ /description }}
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-sm-3">Token ID</dt>
|
||||
<dd class="col-sm-9"><code>{{ id_short }}</code></dd>
|
||||
<dt class="col-sm-3">Created</dt>
|
||||
<dd class="col-sm-9">{{{ created_display }}}</dd>
|
||||
<dt class="col-sm-3">Last used</dt>
|
||||
<dd class="col-sm-9">{{{ last_used_display }}}</dd>
|
||||
<dt class="col-sm-3">Expires</dt>
|
||||
<dd class="col-sm-9">{{{ expires_display }}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button type="button" onclick="editToken('{{id}}')" class="btn btn-primary btn-sm"><i class="fa-solid fa-pen-to-square"></i> Edit</button>
|
||||
<button type="button" onclick="rotateToken('{{id}}', '{{name}}', this)" class="btn btn-warning btn-sm"><i class="fa-solid fa-arrows-rotate"></i> Rotate</button>
|
||||
<button type="button" onclick="revokeToken('{{id}}', '{{name}}', this)" class="btn btn-danger btn-sm float-end"><i class="fa-solid fa-trash"></i> Revoke</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('impersonate_modal') %>
|
||||
<%- include('bottom') %>
|
||||
|
||||
+18
-25
@@ -40,18 +40,6 @@
|
||||
</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 active" href="/">
|
||||
<i class="fa-regular fa-id-card"></i>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/api-tokens">
|
||||
<i class="fa-solid fa-code"></i>
|
||||
API Tokens
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item group-required group-required-app_sso_admin">
|
||||
<a class="nav-link" href="/users"><i class="fa-solid fa-users"></i>
|
||||
Users
|
||||
@@ -75,19 +63,16 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item group-required group-required-app_sso_admin">
|
||||
<a class="nav-link" href="/notifications">
|
||||
<i class="fa-solid fa-paper-plane"></i>
|
||||
Notifications
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item group-required group-required-app_sso_admin">
|
||||
<a class="nav-link" href="/admin">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||
Admin
|
||||
<a class="nav-link" href="/dashboard">
|
||||
<i class="fa-solid fa-gauge-high"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="form-inline mt-2 mt-md-0">
|
||||
<a id="cl-username" class="navbar-text text-light me-3" href="/" style="display: none;">
|
||||
<i class="fa-solid fa-user me-1"></i><span id="cl-username-text"></span>
|
||||
</a>
|
||||
<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-out"></i>
|
||||
Login
|
||||
@@ -112,10 +97,18 @@
|
||||
}
|
||||
})
|
||||
|
||||
// Set the correct login/logout button
|
||||
|
||||
if(await app.auth.isLoggedIn()) $('#cl-logout-button').show();
|
||||
else $('#cl-login-button').show();
|
||||
// Set the correct login/logout button, and reveal the current user's
|
||||
// name (linking to their profile) once we know who they are.
|
||||
var me = await app.auth.isLoggedIn();
|
||||
if(me){
|
||||
$('#cl-logout-button').show();
|
||||
if(me.uid){
|
||||
$('#cl-username-text').text(me.uid);
|
||||
$('#cl-username').css('display', '');
|
||||
}
|
||||
}else{
|
||||
$('#cl-login-button').show();
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user