feat(release): v1.14.0 discovery and conf pages

This commit is contained in:
2026-08-01 01:21:27 -04:00
parent ecc9b62842
commit 011d4b2975
42 changed files with 3091 additions and 96 deletions
+71
View File
@@ -0,0 +1,71 @@
<%- include('top') %>
<script type="text/javascript">
app.auth.forceLogin(['admin', 'app_sso_admin']);
$(document).ready(function() {
loadConf();
});
async function loadConf() {
try {
const data = await app.api.get('conf');
$('#conf-json').val(JSON.stringify(data, null, 4));
} catch (error) {
app.messages.toast('Failed to load configuration: ' + (error.message || 'Unknown error'), 'danger');
}
}
async function saveConf() {
const btn = $('#btn-save');
btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
try {
const text = $('#conf-json').val();
const payload = JSON.parse(text);
await app.api.post('conf', payload);
app.messages.toast('Configuration saved successfully! It will take effect immediately.', 'success');
} catch (error) {
let msg = error.message;
if (error instanceof SyntaxError) {
msg = 'Invalid JSON format. Please check your syntax.';
}
app.messages.toast('Failed to save configuration: ' + msg, 'danger');
} finally {
btn.prop('disabled', false).html('<i class="fas fa-save"></i> Save Configuration');
}
}
</script>
<div class="container py-4">
<div class="row mb-4">
<div class="col">
<h2><i class="fas fa-cogs"></i> System Configuration</h2>
<p class="text-muted">
Manage runtime configuration such as SMTP settings, discovery plugins, and OAuth parameters.
These secrets are stored securely in OpenBao Vault.
</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow-sm border-0">
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
<h5 class="mb-0">Configuration (JSON)</h5>
</div>
<div class="card-body">
<div class="alert alert-info">
<i class="fas fa-info-circle"></i> Be careful when editing this JSON! Malformed JSON will not save.
</div>
<textarea id="conf-json" class="form-control text-monospace" rows="25" style="font-family: monospace; font-size: 14px; background-color: #f8f9fa;" spellcheck="false"></textarea>
</div>
<div class="card-footer bg-white border-top-0 pb-4 text-end">
<button class="btn btn-secondary me-2" onclick="loadConf()"><i class="fas fa-undo"></i> Reset</button>
<button id="btn-save" class="btn btn-primary" onclick="saveConf()"><i class="fas fa-save"></i> Save Configuration</button>
</div>
</div>
</div>
</div>
</div>
<%- include('bottom') %>
+266 -2
View File
@@ -3,7 +3,26 @@
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="card shadow">
<ul class="nav nav-tabs mb-3 card-header-tabs" id="directoryTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="directory-tab" data-bs-toggle="tab" data-bs-target="#directory-tab-pane" type="button" role="tab" aria-controls="directory-tab-pane" aria-selected="true">
<i class="fa-solid fa-server"></i> Directory
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="discovery-tab" data-bs-toggle="tab" data-bs-target="#discovery-tab-pane" type="button" role="tab" aria-controls="discovery-tab-pane" aria-selected="false">
<i class="fa-solid fa-network-wired"></i> Discovery
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="plugins-tab" data-bs-toggle="tab" data-bs-target="#plugins-tab-pane" type="button" role="tab" aria-controls="plugins-tab-pane" aria-selected="false">
<i class="fa-solid fa-plug"></i> Plugins & Scheduler
</button>
</li>
</ul>
<div class="tab-content" id="directoryTabsContent">
<div class="tab-pane fade show active" id="directory-tab-pane" role="tabpanel" aria-labelledby="directory-tab">
<div class="card shadow border-top-0">
<div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
<div>
<i class="fa-solid fa-server"></i> Directory Management
@@ -74,6 +93,147 @@
</table>
</div>
</div>
</div>
<!-- Discovery Tab Pane -->
<div class="tab-pane fade" id="discovery-tab-pane" role="tabpanel" aria-labelledby="discovery-tab">
<div class="card shadow border-top-0">
<div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
<div>
<i class="fa-solid fa-network-wired"></i> Network Discovery Dashboard
</div>
<div class="d-flex flex-wrap gap-2 align-items-center">
<input type="text" id="discovery-search-filter" class="form-control form-control-sm shadow-sm" placeholder="Search resources..." onkeyup="renderDiscoveryTable()" style="width: 250px;">
</div>
</div>
<div class="card-header actionMessage" style="display:none"></div>
<div class="p-3 pb-0 text-muted small border-bottom">
<i class="fa-solid fa-circle-info"></i> Auto-discovered network resources. Promote unmanaged devices to track them in the Directory.
<a href="/docs/discovery" class="text-reset float-end" title="Help"><i class="fa-solid fa-circle-question"></i></a>
</div>
<div class="table-responsive">
<table class="card-body table table-hover mb-0 align-middle">
<thead class="table-light">
<tr>
<th class="ps-3">Name / Source</th>
<th>Type</th>
<th>IP Address</th>
<th>Status</th>
<th class="text-end pe-3">Actions</th>
</tr>
</thead>
<tbody id="discovery-list" jq-repeat="discoveryResources">
<tr id="discovery-row-{{slug}}">
<td class="ps-3">
<div class="fw-bold">{{name}}</div>
<div class="text-muted small">
<i class="fa-solid fa-plug pe-1"></i> {{#metadata.source}}{{metadata.source}}{{/metadata.source}}{{^metadata.source}}Manual{{/metadata.source}}
</div>
</td>
<td>
<span class="badge bg-secondary me-1">{{kind}}</span>
{{#metadata.discovery_sources}}
<span class="badge bg-info text-dark me-1" style="font-size: 0.7em;">{{.}}</span>
{{/metadata.discovery_sources}}
{{#metadata.subType}}
<span class="badge bg-light text-dark border">{{metadata.subType}}</span>
{{/metadata.subType}}
</td>
<td>
{{#metadata.ip}}<div class="font-monospace small"><i class="fa-solid fa-network-wired pe-1"></i>{{metadata.ip}}</div>{{/metadata.ip}}
{{^metadata.ip}}<span class="text-muted small fst-italic">Unknown IP</span>{{/metadata.ip}}
{{#metadata.interfaces.length}}
<div class="mt-1 small text-muted">
{{#metadata.interfaces}}
<div><i class="fa-solid fa-microchip pe-1"></i> {{mac}} {{#ip}}<span class="text-black-50">({{ip}})</span>{{/ip}}</div>
{{/metadata.interfaces}}
</div>
{{/metadata.interfaces.length}}
</td>
<td>
{{#metadata.managed}}
<span class="badge bg-success rounded-pill px-2"><i class="fa-solid fa-check"></i> Managed</span>
{{/metadata.managed}}
{{^metadata.managed}}
<span class="badge bg-warning text-dark rounded-pill px-2"><i class="fa-solid fa-ghost"></i> Unmanaged</span>
{{/metadata.managed}}
</td>
<td class="text-end pe-3">
{{^metadata.managed}}
<button class="btn btn-sm btn-outline-primary" onclick="promoteResource('{{slug}}')" title="Promote to Managed">
<i class="fa-solid fa-arrow-up-right-dots"></i> Promote
</button>
{{/metadata.managed}}
{{#metadata.managed}}
<button class="btn btn-sm btn-outline-secondary" disabled title="Already Managed">
Promoted
</button>
{{/metadata.managed}}
</td>
</tr>
</tbody>
<tbody id="discovery-empty-state" style="display: none;">
<tr>
<td colspan="5" class="text-center py-5 text-muted">
<i class="fa-solid fa-magnifying-glass fs-2 mb-3 text-black-50"></i>
<h5>No resources found</h5>
<p>Check your filters or ensure the discovery agents are running.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Plugins Tab Pane -->
<div class="tab-pane fade" id="plugins-tab-pane" role="tabpanel" aria-labelledby="plugins-tab">
<div class="card shadow border-top-0">
<div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
<div>
<i class="fa-solid fa-plug"></i> Plugins & Scheduler
</div>
</div>
<div class="p-3 pb-0 text-muted small border-bottom">
<i class="fa-solid fa-circle-info"></i> Manage background tasks and schedules. <a href="/docs/plugins">Learn how to make and use custom plugins</a>.
</div>
<div class="table-responsive">
<table class="card-body table table-hover mb-0 align-middle">
<thead class="table-light">
<tr>
<th class="ps-3">Plugin Name</th>
<th>Cron Schedule</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="plugins-list" jq-repeat="plugins">
<tr>
<td class="ps-3 fw-bold">{{name}}</td>
<td><input type="text" class="form-control form-control-sm font-monospace" id="cron-{{name}}" value="{{cron}}" style="max-width: 150px;"></td>
<td>
{{#enabled}}<span class="badge bg-success">Enabled</span>{{/enabled}}
{{^enabled}}<span class="badge bg-secondary">Disabled</span>{{/enabled}}
</td>
<td>
<button class="btn btn-sm btn-outline-primary" onclick="updatePlugin('{{name}}')" title="Save Schedule">Save</button>
{{#enabled}}<button class="btn btn-sm btn-outline-danger" onclick="togglePlugin('{{name}}', false)">Disable</button>{{/enabled}}
{{^enabled}}<button class="btn btn-sm btn-outline-success" onclick="togglePlugin('{{name}}', true)">Enable</button>{{/enabled}}
</td>
</tr>
</tbody>
<tbody id="plugins-empty-state" style="display: none;">
<tr>
<td colspan="4" class="text-center py-4 text-muted">
No plugins configured.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -124,7 +284,7 @@
</div>
<div class="col-6">
<label class="form-label">Host / URI Address</label>
<input type="text" id="res-address" class="form-control shadow-sm font-monospace" placeholder="https://...">
<input type="text" id="res-address" class="form-control shadow-sm font-monospace" placeholder="https://... or comma-separated IPs">
</div>
</div>
@@ -1104,6 +1264,110 @@
app.messages.action('Failed to delete', $target, 'danger');
}
}
// --- DISCOVERY SCRIPTS ---
let allDiscoveryResources = [];
function loadDiscoveryResources() {
app.api.get('discovery/resources', function(err, res) {
if(err) {
$('.actionMessage').html('<div class="alert alert-danger">' + (err.message || 'Error loading resources') + '</div>').show();
return;
}
allDiscoveryResources = res.results || [];
renderDiscoveryTable();
});
}
function renderDiscoveryTable() {
const search = $('#discovery-search-filter').val().toLowerCase();
const filtered = allDiscoveryResources.filter(r => {
if(search && !r.name.toLowerCase().includes(search) && !r.slug.toLowerCase().includes(search)) return false;
const isManaged = !!(r.metadata && r.metadata.managed);
if(isManaged) return false;
return true;
});
$.scope.discoveryResources.empty();
for(const r of filtered) {
$.scope.discoveryResources.push(r);
}
if(filtered.length === 0) {
$('#discovery-list').hide();
$('#discovery-empty-state').show();
} else {
$('#discovery-list').show();
$('#discovery-empty-state').hide();
}
}
function promoteResource(slug) {
if(!confirm("Are you sure you want to promote this resource? This will generate SSO LDAP groups for it.")) return;
app.api.post('discovery/promote/' + slug, {}, function(err, res) {
if(err) {
alert("Error promoting resource: " + (err.message || err));
return;
}
const resource = allDiscoveryResources.find(r => r.slug === slug);
if(resource) {
resource.metadata = resource.metadata || {};
resource.metadata.managed = true;
}
$('.actionMessage').html('<div class="alert alert-success alert-dismissible"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>Successfully promoted! Created groups: ' + res.groups.join(', ') + '</div>').show();
renderDiscoveryTable();
loadResources(); // Also update directory tab
});
}
// --- PLUGINS SCRIPTS ---
function loadPlugins() {
app.api.get('plugins', function(err, res) {
if(err) {
alert("Error loading plugins: " + (err.message || err));
return;
}
const plugins = res.results || {};
const pluginNames = Object.keys(plugins);
$.scope.plugins.empty();
if(pluginNames.length === 0) {
$('#plugins-list').hide();
$('#plugins-empty-state').show();
} else {
pluginNames.forEach(name => {
const config = plugins[name];
$.scope.plugins.push({
name: name,
cron: config.cron || '',
enabled: config.enabled
});
});
$('#plugins-list').show();
$('#plugins-empty-state').hide();
}
});
}
function updatePlugin(name) {
const cron = $('#cron-' + name).val();
app.api.put('plugins/' + name, {cron: cron}, function(err, res) {
if(err) { alert("Failed to save: " + err.message); return; }
alert("Saved schedule successfully.");
});
}
function togglePlugin(name, enable) {
app.api.put('plugins/' + name, {enabled: enable}, function(err, res) {
if(err) { alert("Failed to toggle: " + err.message); return; }
loadPlugins();
});
}
$(document).ready(function(){
loadDiscoveryResources();
loadPlugins();
});
</script>
<%- include('bottom') %>
+185
View File
@@ -0,0 +1,185 @@
<%- include('top') %>
<div class="container mt-4">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<a class="nav-link" href="/directory"><i class="fa-solid fa-server"></i> Directory</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/discovery"><i class="fa-solid fa-network-wired"></i> Discovery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/plugins"><i class="fa-solid fa-plug"></i> Plugins</a>
</li>
</ul>
<div class="card shadow border-top-0">
<div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
<div>
<i class="fa-solid fa-network-wired"></i> Network Discovery Dashboard
</div>
<div class="d-flex flex-wrap gap-2 align-items-center">
<input type="text" id="search-filter" class="form-control form-control-sm shadow-sm" placeholder="Search resources..." onkeyup="renderTable()" style="width: 250px;">
<select id="filter-managed" class="form-select form-select-sm shadow-sm" onchange="renderTable()" style="width: 150px;">
<option value="all">All Resources</option>
<option value="unmanaged" selected>Unmanaged Only</option>
<option value="managed">Managed Only</option>
</select>
</div>
</div>
<div class="card-header actionMessage" style="display:none"></div>
<div class="p-3 pb-0 text-muted small border-bottom">
<i class="fa-solid fa-circle-info"></i> View discovered network resources and promote them to managed SSO groups.
<a href="/docs/discovery" class="text-reset float-end" title="Help"><i class="fa-solid fa-circle-question"></i></a>
</div>
<div class="table-responsive">
<table class="card-body table table-hover mb-0 align-middle">
<thead class="table-light">
<tr>
<th class="ps-3">Name / Source</th>
<th>Type</th>
<th>IP Address</th>
<th>Status</th>
<th class="text-end pe-3">Actions</th>
</tr>
</thead>
<tbody id="discovery-list" jq-repeat="resources">
<tr id="resource-row-{{slug}}">
<td class="ps-3">
<div class="fw-bold">{{name}}</div>
<div class="text-muted small">
<i class="fa-solid fa-plug pe-1"></i> {{#metadata.source}}{{metadata.source}}{{/metadata.source}}{{^metadata.source}}Manual{{/metadata.source}}
</div>
</td>
<td>
<span class="badge bg-secondary">{{kind}}</span>
{{#metadata.subType}}
<span class="badge bg-light text-dark border">{{metadata.subType}}</span>
{{/metadata.subType}}
</td>
<td>
{{#metadata.ip}}<div class="font-monospace small"><i class="fa-solid fa-network-wired pe-1"></i>{{metadata.ip}}</div>{{/metadata.ip}}
{{^metadata.ip}}<span class="text-muted small fst-italic">Unknown IP</span>{{/metadata.ip}}
{{#metadata.interfaces.length}}
<div class="mt-1 small text-muted">
{{#metadata.interfaces}}
<div><i class="fa-solid fa-microchip pe-1"></i> {{mac}} {{#ip}}<span class="text-black-50">({{ip}})</span>{{/ip}}</div>
{{/metadata.interfaces}}
</div>
{{/metadata.interfaces.length}}
</td>
<td>
{{#metadata.managed}}
<span class="badge bg-success rounded-pill px-2"><i class="fa-solid fa-check"></i> Managed</span>
{{/metadata.managed}}
{{^metadata.managed}}
<span class="badge bg-warning text-dark rounded-pill px-2"><i class="fa-solid fa-ghost"></i> Unmanaged</span>
{{/metadata.managed}}
</td>
<td class="text-end pe-3">
{{^metadata.managed}}
<button class="btn btn-sm btn-outline-primary" onclick="promoteResource('{{slug}}')" title="Promote to Managed">
<i class="fa-solid fa-arrow-up-right-dots"></i> Promote
</button>
{{/metadata.managed}}
{{#metadata.managed}}
<button class="btn btn-sm btn-outline-secondary" disabled title="Already Managed">
Promoted
</button>
{{/metadata.managed}}
</td>
</tr>
</tbody>
<tbody id="empty-state" style="display: none;">
<tr>
<td colspan="5" class="text-center py-5 text-muted">
<i class="fa-solid fa-magnifying-glass fs-2 mb-3 text-black-50"></i>
<h5>No resources found</h5>
<p>Check your filters or ensure the discovery agents are running.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
app.auth.forceLogin(['app_sso_admin', 'admin']);
let allResources = [];
function loadResources() {
app.api.get('discovery/resources', function(err, res) {
if(err) {
$('.actionMessage').html('<div class="alert alert-danger">' + (err.message || 'Error loading resources') + '</div>').show();
return;
}
allResources = res.results || [];
renderTable();
});
}
function renderTable() {
const search = $('#search-filter').val().toLowerCase();
const managedFilter = $('#filter-managed').val();
const filtered = allResources.filter(r => {
// Name search
if(search && !r.name.toLowerCase().includes(search) && !r.slug.toLowerCase().includes(search)) return false;
// Managed filter
const isManaged = !!(r.metadata && r.metadata.managed);
if(managedFilter === 'managed' && !isManaged) return false;
if(managedFilter === 'unmanaged' && isManaged) return false;
return true;
});
$.scope.resources.empty();
for(const r of filtered) {
$.scope.resources.push(r);
}
if(filtered.length === 0) {
$('#discovery-list').hide();
$('#empty-state').show();
} else {
$('#discovery-list').show();
$('#empty-state').hide();
}
}
function promoteResource(slug) {
if(!confirm("Are you sure you want to promote this resource? This will generate SSO LDAP groups for it.")) return;
app.api.post('discovery/promote/' + slug, {}, function(err, res) {
if(err) {
alert("Error promoting resource: " + (err.message || err));
return;
}
// Update local state to managed
const resource = allResources.find(r => r.slug === slug);
if(resource) {
resource.metadata = resource.metadata || {};
resource.metadata.managed = true;
}
// Add success message
$('.actionMessage').html('<div class="alert alert-success alert-dismissible"><button type="button" class="btn-close" data-bs-dismiss="alert"></button>Successfully promoted! Created groups: ' + res.groups.join(', ') + '</div>').show();
renderTable();
});
}
$(document).ready(function() {
loadResources();
});
</script>
<%- include('bottom') %>
+25
View File
@@ -0,0 +1,25 @@
<%- include('top') %>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<div class="mb-4">
<i class="fa-solid fa-triangle-exclamation text-warning" style="font-size: 4rem;"></i>
</div>
<h1 class="display-4 fw-bold text-dark"><%= error.status || 500 %></h1>
<h3 class="mb-3 text-secondary"><%= error.message || 'Something went wrong' %></h3>
<p class="text-muted mb-4">
<% if (error.status === 404) { %>
The page you are looking for doesn't exist or has been moved.
<% } else { %>
An unexpected error occurred. Please try again later.
<% } %>
</p>
<a href="/" class="btn btn-primary shadow-sm px-4 py-2">
<i class="fa-solid fa-house me-2"></i>Return to Home
</a>
</div>
</div>
</div>
<%- include('bottom') %>
+1 -1
View File
@@ -298,7 +298,7 @@
var mineIds = {};
state.mine.forEach(function(r){ mineIds[r.id] = true; });
state.others = (allRes.results || []).filter(function(r){
return !mineIds[r.id] && r.kind !== 'site' && r.kind !== 'oauth';
return !mineIds[r.id] && r.kind !== 'site' && r.kind !== 'oauth' && (r.metadata && r.metadata.managed);
});
// Requests are best-effort: a failure here must not blank the catalog.
+102
View File
@@ -0,0 +1,102 @@
<%- include('top') %>
<div class="container mt-4">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<a class="nav-link" href="/directory"><i class="fa-solid fa-server"></i> Directory</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/discovery"><i class="fa-solid fa-network-wired"></i> Discovery</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/plugins"><i class="fa-solid fa-plug"></i> Plugins</a>
</li>
</ul>
<div class="card shadow border-top-0">
<div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
<div>
<i class="fa-solid fa-plug"></i> Plugins & Scheduler
</div>
</div>
<div class="p-3 pb-0 text-muted small border-bottom">
<i class="fa-solid fa-circle-info"></i> View configured background plugins and scheduler status. Note: Plugins are configured statically in <code>sso-secrets.js</code>.
</div>
<div class="table-responsive">
<table class="card-body table table-hover mb-0 align-middle">
<thead class="table-light">
<tr>
<th class="ps-3">Plugin Name</th>
<th>Cron Schedule</th>
<th>Status</th>
<th>Details</th>
</tr>
</thead>
<tbody id="plugins-list" jq-repeat="plugins">
<tr>
<td class="ps-3 fw-bold">{{name}}</td>
<td><code class="text-dark">{{cron}}</code></td>
<td>
{{#enabled}}<span class="badge bg-success">Enabled</span>{{/enabled}}
{{^enabled}}<span class="badge bg-secondary">Disabled</span>{{/enabled}}
</td>
<td class="small text-muted font-monospace">
{{details}}
</td>
</tr>
</tbody>
<tbody id="empty-state" style="display: none;">
<tr>
<td colspan="4" class="text-center py-4 text-muted">
No plugins configured in sso-secrets.js
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
app.auth.forceLogin(['app_sso_admin', 'app_sso_directory_admin', 'admin']);
$(document).ready(function() {
app.api.get('plugins', function(err, res) {
if(err) {
alert("Error loading plugins: " + (err.message || err));
return;
}
const plugins = res.results || {};
const pluginNames = Object.keys(plugins);
$.scope.plugins.empty();
if(pluginNames.length === 0) {
$('#plugins-list').hide();
$('#empty-state').show();
} else {
pluginNames.forEach(name => {
const config = plugins[name];
const details = Object.entries(config)
.filter(([k, v]) => k !== 'enabled' && k !== 'cron')
.map(([k, v]) => `${k}: ${v}`)
.join(', ');
$.scope.plugins.push({
name: name,
cron: config.cron || 'N/A',
enabled: config.enabled,
details: details
});
});
$('#plugins-list').show();
$('#empty-state').hide();
}
});
});
</script>
<%- include('bottom') %>
+233
View File
@@ -0,0 +1,233 @@
<%- include('top') %>
<div class="container-fluid py-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2><i class="fas fa-lock"></i> Vault Secrets</h2>
<button class="btn btn-primary" onclick="showCreateModal()">
<i class="fas fa-plus"></i> New Secret
</button>
</div>
<div class="row">
<div class="col-md-4">
<div class="card shadow-sm">
<div class="card-header bg-light">
<h5 class="card-title mb-0">Secrets List</h5>
</div>
<div class="list-group list-group-flush" id="secrets-list">
<div class="list-group-item text-center text-muted">Loading...</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card shadow-sm" id="secret-details-card" style="display: none;">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0" id="secret-title">Secret Details</h5>
<div>
<button class="btn btn-sm btn-outline-primary me-2" onclick="editCurrentSecret()">
<i class="fas fa-edit"></i> Edit
</button>
<button class="btn btn-sm btn-outline-danger" onclick="deleteCurrentSecret()">
<i class="fas fa-trash"></i> Delete
</button>
</div>
</div>
<div class="card-body">
<pre id="secret-content" class="bg-dark text-light p-3 rounded" style="min-height: 200px;"></pre>
</div>
</div>
<div id="no-secret-selected" class="text-center text-muted mt-5">
<i class="fas fa-key fa-4x mb-3 text-secondary"></i>
<h4>Select a secret to view its details</h4>
</div>
</div>
</div>
</div>
<!-- Create/Edit Secret Modal -->
<div class="modal fade" id="secretModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="secretModalTitle">Create Secret</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Secret Path (Name)</label>
<input type="text" class="form-control" id="secret-path-input" placeholder="e.g. database-creds">
</div>
<div class="mb-3">
<label class="form-label">Secret Data (JSON)</label>
<textarea class="form-control" id="secret-data-input" rows="8" style="font-family: monospace;">{
"username": "",
"password": ""
}</textarea>
</div>
<div class="alert alert-danger d-none" id="secret-error"></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="saveSecret()">Save Secret</button>
</div>
</div>
</div>
</div>
<script>
app.auth.forceLogin();
const VAULT_TOKEN = 'root'; // Dev mode root token
let currentSecretPath = null;
const secretModal = new bootstrap.Modal(document.getElementById('secretModal'));
function apiCall(method, path, body = null) {
const opts = {
method,
headers: {
'X-Vault-Token': VAULT_TOKEN,
'Content-Type': 'application/json',
'auth-token': app.auth.getToken()
}
};
if (body) opts.body = JSON.stringify(body);
return fetch('/api/vault/' + path, opts).then(async res => {
if (res.status === 404) return null;
if (!res.ok) {
const text = await res.text();
throw new Error(`Vault API error: ${res.status} ${text}`);
}
if (res.status === 204) return null;
return res.json();
});
}
async function loadSecrets() {
try {
// In dev mode, v2 kv engine is mounted at secret/
const res = await apiCall('GET', 'secret/metadata/?list=true');
const listEl = document.getElementById('secrets-list');
listEl.innerHTML = '';
if (!res || !res.data || !res.data.keys || res.data.keys.length === 0) {
listEl.innerHTML = '<div class="list-group-item text-center text-muted">No secrets found</div>';
return;
}
res.data.keys.forEach(key => {
const item = document.createElement('a');
item.href = '#';
item.className = 'list-group-item list-group-item-action d-flex align-items-center';
item.innerHTML = `<i class="fas fa-file-alt text-secondary me-3"></i> <span>${key}</span>`;
item.onclick = (e) => {
e.preventDefault();
// Update active state
document.querySelectorAll('#secrets-list .active').forEach(el => el.classList.remove('active'));
item.classList.add('active');
loadSecretDetails(key);
};
listEl.appendChild(item);
});
} catch (err) {
console.error(err);
document.getElementById('secrets-list').innerHTML =
`<div class="list-group-item text-danger"><i class="fas fa-exclamation-triangle"></i> Error loading secrets: ${err.message}</div>`;
}
}
async function loadSecretDetails(key) {
try {
currentSecretPath = key;
document.getElementById('no-secret-selected').style.display = 'none';
document.getElementById('secret-details-card').style.display = 'block';
document.getElementById('secret-title').textContent = key;
document.getElementById('secret-content').textContent = 'Loading...';
const res = await apiCall('GET', `secret/data/${key}`);
if (!res || !res.data || !res.data.data) {
document.getElementById('secret-content').textContent = 'No data found.';
} else {
document.getElementById('secret-content').textContent = JSON.stringify(res.data.data, null, 2);
}
} catch (err) {
console.error(err);
document.getElementById('secret-content').textContent = `Error: ${err.message}`;
}
}
function showCreateModal() {
currentSecretPath = null;
document.getElementById('secretModalTitle').textContent = 'Create Secret';
document.getElementById('secret-path-input').value = '';
document.getElementById('secret-path-input').disabled = false;
document.getElementById('secret-data-input').value = '{\n "key": "value"\n}';
document.getElementById('secret-error').classList.add('d-none');
secretModal.show();
}
function editCurrentSecret() {
if (!currentSecretPath) return;
document.getElementById('secretModalTitle').textContent = 'Edit Secret';
document.getElementById('secret-path-input').value = currentSecretPath;
document.getElementById('secret-path-input').disabled = true;
document.getElementById('secret-data-input').value = document.getElementById('secret-content').textContent;
document.getElementById('secret-error').classList.add('d-none');
secretModal.show();
}
async function saveSecret() {
const errorEl = document.getElementById('secret-error');
errorEl.classList.add('d-none');
const path = document.getElementById('secret-path-input').value.trim();
if (!path) {
errorEl.textContent = 'Secret path is required';
errorEl.classList.remove('d-none');
return;
}
let data;
try {
data = JSON.parse(document.getElementById('secret-data-input').value);
} catch (err) {
errorEl.textContent = 'Invalid JSON: ' + err.message;
errorEl.classList.remove('d-none');
return;
}
try {
await apiCall('POST', `secret/data/${path}`, { data });
secretModal.hide();
await loadSecrets();
if (currentSecretPath === path || !currentSecretPath) {
await loadSecretDetails(path);
}
} catch (err) {
errorEl.textContent = err.message;
errorEl.classList.remove('d-none');
}
}
async function deleteCurrentSecret() {
if (!currentSecretPath) return;
if (!confirm(`Are you sure you want to delete the secret '${currentSecretPath}'?`)) return;
try {
await apiCall('DELETE', `secret/metadata/${currentSecretPath}`);
currentSecretPath = null;
document.getElementById('no-secret-selected').style.display = 'block';
document.getElementById('secret-details-card').style.display = 'none';
await loadSecrets();
} catch (err) {
alert('Error deleting secret: ' + err.message);
}
}
// Init
loadSecrets();
</script>
<%- include('bottom') %>