implement instance editing capability and move user creation to a modal
This commit is contained in:
parent
b185c7a70b
commit
2e160cdd14
3 changed files with 123 additions and 35 deletions
|
|
@ -19,12 +19,25 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const helpModal = document.getElementById('help-modal');
|
||||
const addInstanceModal = document.getElementById('add-instance-modal');
|
||||
const showAddBtn = document.getElementById('show-add-btn');
|
||||
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');
|
||||
|
||||
let config = { firewall_host_ip: null };
|
||||
let currentUser = null;
|
||||
let editId = null;
|
||||
let instancesData = [];
|
||||
|
||||
const openModal = (modal) => modal.classList.add('active');
|
||||
const closeModal = (modal) => modal.classList.remove('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;
|
||||
};
|
||||
|
||||
document.querySelectorAll('.btn-close').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
|
|
@ -37,7 +50,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
|
||||
helpBtn.addEventListener('click', () => openModal(helpModal));
|
||||
showAddBtn.addEventListener('click', () => openModal(addInstanceModal));
|
||||
showAddBtn.addEventListener('click', () => {
|
||||
editId = null;
|
||||
modalTitle.textContent = 'Add Instance';
|
||||
secretInput.placeholder = 'Base32 Secret or otpauth:// URL';
|
||||
secretInput.required = true;
|
||||
openModal(addInstanceModal);
|
||||
});
|
||||
showAddUserBtn.addEventListener('click', () => openModal(addUserModal));
|
||||
|
||||
const showLogin = () => {
|
||||
loginOverlay.style.display = 'flex';
|
||||
|
|
@ -89,8 +109,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
try {
|
||||
const res = await fetch('/api/instances');
|
||||
if (res.status === 401) return showLogin();
|
||||
const data = await res.json();
|
||||
renderInstances(data);
|
||||
instancesData = await res.json();
|
||||
renderInstances(instancesData);
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch instances:', e);
|
||||
}
|
||||
|
|
@ -133,12 +153,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
<span>Last checked: ${timeAgo}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="delete-btn" onclick="deleteInstance(${inst.id})" title="Delete">
|
||||
<svg width="20" height="20" 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 class="instance-actions">
|
||||
<button class="btn btn-icon" onclick="editInstance(${inst.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="deleteInstance(${inst.id})" title="Delete">
|
||||
<svg width="20" height="20" 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('');
|
||||
|
|
@ -169,27 +194,44 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const port = parseInt(document.getElementById('port').value, 10);
|
||||
const secret = document.getElementById('secret').value;
|
||||
|
||||
const url = editId ? `/api/instances/${editId}` : '/api/instances';
|
||||
const method = editId ? 'PUT' : 'POST';
|
||||
const body = { name, ip, port };
|
||||
if (secret) body.secret = secret;
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/instances', {
|
||||
method: 'POST',
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, ip, port, secret })
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
if (res.ok) {
|
||||
addForm.reset();
|
||||
document.getElementById('port').value = "4646";
|
||||
closeModal(addInstanceModal);
|
||||
fetchInstances();
|
||||
} else if (res.status === 401) {
|
||||
showLogin();
|
||||
} else {
|
||||
alert('Failed to add instance');
|
||||
alert(`Failed to ${editId ? 'update' : 'add'} instance`);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error adding instance', e);
|
||||
console.error('Error saving instance', e);
|
||||
}
|
||||
});
|
||||
|
||||
window.editInstance = (id) => {
|
||||
const inst = instancesData.find(i => i.id === id);
|
||||
if (!inst) return;
|
||||
editId = id;
|
||||
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';
|
||||
modalTitle.textContent = 'Edit Instance';
|
||||
openModal(addInstanceModal);
|
||||
};
|
||||
|
||||
loginForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('login-username').value;
|
||||
|
|
@ -248,6 +290,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
if (res.ok) {
|
||||
createUserForm.reset();
|
||||
closeModal(addUserModal);
|
||||
fetchUsers();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
|
|
|
|||
|
|
@ -68,24 +68,13 @@
|
|||
|
||||
<div id="admin-section" class="tab-content">
|
||||
<div class="card user-management-card">
|
||||
<h2>User Management</h2>
|
||||
<form id="create-user-form" class="user-create-form">
|
||||
<div class="form-group">
|
||||
<label for="new-username">Username</label>
|
||||
<input type="text" id="new-username" placeholder="Enter username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">Password</label>
|
||||
<input type="password" id="new-password" placeholder="Enter password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" id="new-is-admin">
|
||||
<span class="checkbox-label">Grant Administrator Privileges</span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Create User</button>
|
||||
</form>
|
||||
<div class="instances-header">
|
||||
<h2>User Management</h2>
|
||||
<button class="btn btn-primary btn-sm" id="show-add-user-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 User
|
||||
</button>
|
||||
</div>
|
||||
<div id="users-list" class="users-list">
|
||||
<!-- Users injected via JS -->
|
||||
</div>
|
||||
|
|
@ -140,6 +129,32 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="add-user-modal" class="modal">
|
||||
<div class="modal-content card">
|
||||
<div class="modal-header">
|
||||
<h2>Add User</h2>
|
||||
<button class="btn-close">×</button>
|
||||
</div>
|
||||
<form id="create-user-form" class="user-create-form">
|
||||
<div class="form-group">
|
||||
<label for="new-username">Username</label>
|
||||
<input type="text" id="new-username" placeholder="Enter username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-password">Password</label>
|
||||
<input type="password" id="new-password" placeholder="Enter password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" id="new-is-admin">
|
||||
<span class="checkbox-label">Grant Administrator Privileges</span>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Create User</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="help-modal" class="modal">
|
||||
<div class="modal-content card">
|
||||
<div class="modal-header">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue