cosmo/XIVLauncherRemoteOTP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implement instance editing capability and move user creation to a modal

Browse source
This commit is contained in:
CPTN Cosmo 2026-04-18 17:19:13 +02:00
parent b185c7a70b
commit 2e160cdd14
3 changed files with 123 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

77
static/app.js
View file

@ -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();