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();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue