decouple OTP secrets from instances with a dedicated database table and CRUD API endpoints
This commit is contained in:
parent
c15f965a2b
commit
b8202abba5
5 changed files with 317 additions and 52 deletions
144
static/app.js
144
static/app.js
|
|
@ -24,21 +24,36 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const showAddUserBtn = document.getElementById('show-add-user-btn');
|
||||
const addUserModal = document.getElementById('add-user-modal');
|
||||
const modalTitle = document.querySelector('#add-instance-modal h2');
|
||||
const secretInput = document.getElementById('secret');
|
||||
const otpModalTitle = document.getElementById('otp-modal-title');
|
||||
const otpSaveBtn = document.getElementById('otp-save-btn');
|
||||
const otpSecretForm = document.getElementById('otp-secret-form');
|
||||
const showAddOtpBtn = document.getElementById('show-add-otp-btn');
|
||||
const addOtpModal = document.getElementById('add-otp-secret-modal');
|
||||
const otpSecretIdSelect = document.getElementById('otp-secret-id');
|
||||
const otpSecretsList = document.getElementById('otp-secrets-list');
|
||||
|
||||
let config = { firewall_host_ip: null };
|
||||
let currentUser = null;
|
||||
let editId = null;
|
||||
let editOtpId = null;
|
||||
let instancesData = [];
|
||||
let otpSecretsData = [];
|
||||
|
||||
const openModal = (modal) => modal.classList.add('active');
|
||||
const closeModal = (modal) => {
|
||||
modal.classList.remove('active');
|
||||
editId = null;
|
||||
addForm.reset();
|
||||
modalTitle.textContent = 'Add Instance';
|
||||
secretInput.placeholder = 'Base32 Secret or otpauth:// URL';
|
||||
secretInput.required = true;
|
||||
editOtpId = null;
|
||||
if (modal.id === 'add-instance-modal') {
|
||||
addForm.reset();
|
||||
modalTitle.textContent = 'Add Instance';
|
||||
} else if (modal.id === 'add-otp-secret-modal') {
|
||||
otpSecretForm.reset();
|
||||
otpModalTitle.textContent = 'Add OTP Secret';
|
||||
otpSaveBtn.textContent = 'Add Secret';
|
||||
document.getElementById('otp-secret').required = true;
|
||||
document.getElementById('otp-secret').placeholder = 'Base32 Secret or otpauth:// URL';
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelectorAll('.btn-close').forEach(btn => {
|
||||
|
|
@ -55,10 +70,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
showAddBtn.addEventListener('click', () => {
|
||||
editId = null;
|
||||
modalTitle.textContent = 'Add Instance';
|
||||
secretInput.placeholder = 'Base32 Secret or otpauth:// URL';
|
||||
secretInput.required = true;
|
||||
populateOTPSelect();
|
||||
openModal(addInstanceModal);
|
||||
});
|
||||
showAddOtpBtn.addEventListener('click', () => {
|
||||
editOtpId = null;
|
||||
otpModalTitle.textContent = 'Add OTP Secret';
|
||||
otpSaveBtn.textContent = 'Add Secret';
|
||||
document.getElementById('otp-secret').required = true;
|
||||
document.getElementById('otp-secret').placeholder = 'Base32 Secret or otpauth:// URL';
|
||||
openModal(addOtpModal);
|
||||
});
|
||||
showAddUserBtn.addEventListener('click', () => openModal(addUserModal));
|
||||
|
||||
const showLogin = () => {
|
||||
|
|
@ -83,6 +105,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
if (item.dataset.tab === 'admin') fetchUsers();
|
||||
if (item.dataset.tab === 'instances') fetchInstances();
|
||||
if (item.dataset.tab === 'otp-secrets') fetchOTPSecrets();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -119,6 +142,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
}
|
||||
};
|
||||
|
||||
const fetchOTPSecrets = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/otp-secrets');
|
||||
if (res.status === 401) return showLogin();
|
||||
otpSecretsData = await res.json();
|
||||
renderOTPSecrets(otpSecretsData);
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch OTP secrets:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
const res = await fetch('/api/users');
|
||||
|
|
@ -152,6 +186,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
<h3>${escapeHtml(inst.name)}</h3>
|
||||
<div class="instance-meta">
|
||||
<span>${escapeHtml(inst.ip)}:${inst.port}</span>
|
||||
<span>OTP: ${escapeHtml(inst.otp_secret_name || 'None')}</span>
|
||||
<span class="status-badge ${statusClass}">${escapeHtml(inst.last_status)}</span>
|
||||
<span>Last checked: ${timeAgo}</span>
|
||||
</div>
|
||||
|
|
@ -172,6 +207,29 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
}).join('');
|
||||
};
|
||||
|
||||
const renderOTPSecrets = (secrets) => {
|
||||
if (secrets.length === 0) {
|
||||
otpSecretsList.innerHTML = '<div class="empty-state">No OTP secrets configured yet.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
otpSecretsList.innerHTML = secrets.map(sec => `
|
||||
<div class="otp-secret-item">
|
||||
<div class="otp-secret-info">
|
||||
<h3>${escapeHtml(sec.name)}</h3>
|
||||
</div>
|
||||
<div class="otp-secret-actions">
|
||||
<button class="btn btn-icon" onclick="editOTPSecret(${sec.id})" title="Edit">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
|
||||
</button>
|
||||
<button class="delete-btn" onclick="deleteOTPSecret(${sec.id})" title="Delete">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2-2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
};
|
||||
|
||||
const renderUsers = (users) => {
|
||||
usersList.innerHTML = users.map(user => `
|
||||
<div class="user-item">
|
||||
|
|
@ -195,12 +253,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const name = document.getElementById('name').value;
|
||||
const ip = document.getElementById('ip').value;
|
||||
const port = parseInt(document.getElementById('port').value, 10);
|
||||
const secret = document.getElementById('secret').value;
|
||||
const otp_secret_id = parseInt(otpSecretIdSelect.value, 10);
|
||||
|
||||
const url = editId ? `/api/instances/${editId}` : '/api/instances';
|
||||
const method = editId ? 'PUT' : 'POST';
|
||||
const body = { name, ip, port };
|
||||
if (secret) body.secret = secret;
|
||||
const body = { name, ip, port, otp_secret_id };
|
||||
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
|
|
@ -228,13 +285,72 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
document.getElementById('name').value = inst.name;
|
||||
document.getElementById('ip').value = inst.ip;
|
||||
document.getElementById('port').value = inst.port;
|
||||
secretInput.value = '';
|
||||
secretInput.required = false;
|
||||
secretInput.placeholder = 'Leave blank to keep current secret';
|
||||
populateOTPSelect(inst.otp_secret_id);
|
||||
modalTitle.textContent = 'Edit Instance';
|
||||
openModal(addInstanceModal);
|
||||
};
|
||||
|
||||
const populateOTPSelect = (selectedId = null) => {
|
||||
otpSecretIdSelect.innerHTML = '<option value="" disabled selected>Select an OTP secret</option>' +
|
||||
otpSecretsData.map(sec => `<option value="${sec.id}" ${sec.id === selectedId ? 'selected' : ''}>${escapeHtml(sec.name)}</option>`).join('');
|
||||
};
|
||||
|
||||
otpSecretForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const name = document.getElementById('otp-name').value;
|
||||
const secret = document.getElementById('otp-secret').value;
|
||||
|
||||
const url = editOtpId ? `/api/otp-secrets/${editOtpId}` : '/api/otp-secrets';
|
||||
const method = editOtpId ? 'PUT' : 'POST';
|
||||
const body = { name };
|
||||
if (secret) body.secret = secret;
|
||||
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
if (res.ok) {
|
||||
closeModal(addOtpModal);
|
||||
fetchOTPSecrets();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.detail || `Failed to ${editOtpId ? 'update' : 'add'} OTP secret`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error saving OTP secret', e);
|
||||
}
|
||||
});
|
||||
|
||||
window.editOTPSecret = (id) => {
|
||||
const sec = otpSecretsData.find(s => s.id === id);
|
||||
if (!sec) return;
|
||||
editOtpId = id;
|
||||
document.getElementById('otp-name').value = sec.name;
|
||||
document.getElementById('otp-secret').value = '';
|
||||
document.getElementById('otp-secret').required = false;
|
||||
document.getElementById('otp-secret').placeholder = 'Leave blank to keep current secret';
|
||||
otpModalTitle.textContent = 'Edit OTP Secret';
|
||||
otpSaveBtn.textContent = 'Save Changes';
|
||||
openModal(addOtpModal);
|
||||
};
|
||||
|
||||
window.deleteOTPSecret = async (id) => {
|
||||
if (!confirm('Are you sure you want to delete this OTP secret?')) return;
|
||||
try {
|
||||
const res = await fetch(`/api/otp-secrets/${id}`, { method: 'DELETE' });
|
||||
if (res.status === 401) return showLogin();
|
||||
if (res.ok) fetchOTPSecrets();
|
||||
else {
|
||||
const data = await res.json();
|
||||
alert(data.detail || 'Failed to delete OTP secret');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error deleting OTP secret', e);
|
||||
}
|
||||
};
|
||||
|
||||
loginForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('login-username').value;
|
||||
|
|
@ -254,6 +370,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
document.getElementById('login-password').value = '';
|
||||
fetchConfig();
|
||||
fetchInstances();
|
||||
fetchOTPSecrets();
|
||||
} else {
|
||||
loginError.style.display = 'block';
|
||||
}
|
||||
|
|
@ -419,6 +536,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
hideLogin();
|
||||
fetchConfig();
|
||||
fetchInstances();
|
||||
fetchOTPSecrets();
|
||||
} else {
|
||||
showLogin();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
|
||||
<nav id="main-nav" class="main-nav" style="display: none;">
|
||||
<button class="nav-item active" data-tab="instances">Instances</button>
|
||||
<button class="nav-item" data-tab="otp-secrets">OTP Secrets</button>
|
||||
<button class="nav-item" id="nav-admin" data-tab="admin" style="display: none;">Admin</button>
|
||||
<button class="nav-item" data-tab="profile">Profile</button>
|
||||
</nav>
|
||||
|
|
@ -66,6 +67,21 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="otp-secrets-section" class="tab-content">
|
||||
<div class="card otp-secrets-card">
|
||||
<div class="instances-header">
|
||||
<h2>OTP Secrets</h2>
|
||||
<button class="btn btn-primary btn-sm" id="show-add-otp-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
||||
Add Secret
|
||||
</button>
|
||||
</div>
|
||||
<div id="otp-secrets-list" class="otp-secrets-list">
|
||||
<!-- OTP Secrets injected via JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="admin-section" class="tab-content">
|
||||
<div class="card user-management-card">
|
||||
<div class="instances-header">
|
||||
|
|
@ -132,14 +148,36 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="secret">OTP Secret</label>
|
||||
<input type="password" id="secret" placeholder="Base32 Secret or otpauth:// URL" required>
|
||||
<label for="otp-secret-id">OTP Secret</label>
|
||||
<select id="otp-secret-id" required>
|
||||
<option value="" disabled selected>Select an OTP secret</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Add Instance</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="add-otp-secret-modal" class="modal">
|
||||
<div class="modal-content card">
|
||||
<div class="modal-header">
|
||||
<h2 id="otp-modal-title">Add OTP Secret</h2>
|
||||
<button class="btn-close">×</button>
|
||||
</div>
|
||||
<form id="otp-secret-form">
|
||||
<div class="form-group">
|
||||
<label for="otp-name">Name</label>
|
||||
<input type="text" id="otp-name" placeholder="e.g. Main Account" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="otp-secret">Secret</label>
|
||||
<input type="password" id="otp-secret" placeholder="Base32 Secret or otpauth:// URL" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" id="otp-save-btn">Add Secret</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="add-user-modal" class="modal">
|
||||
<div class="modal-content card">
|
||||
<div class="modal-header">
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ label {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
input {
|
||||
input, select {
|
||||
width: 100%;
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
|
|
@ -174,7 +174,7 @@ input {
|
|||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
|
||||
|
|
@ -377,14 +377,14 @@ input:focus {
|
|||
color: var(--status-online);
|
||||
}
|
||||
|
||||
.users-list {
|
||||
.users-list, .otp-secrets-list {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-item {
|
||||
.user-item, .otp-secret-item {
|
||||
background-color: var(--bg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
|
|
@ -394,12 +394,12 @@ input:focus {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.user-info h3 {
|
||||
.user-info h3, .otp-secret-info h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
.user-actions, .otp-secret-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue