oimwiodev/vela-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add change password UI to admin panel

Browse Source
This commit is contained in:
root
2026-06-20 18:06:06 +00:00
parent 17d660a49d
commit 954bee13de
1 changed files with 79 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin.html
+79
View File
@@ -126,6 +126,7 @@
<h1>VELA <span>Admin</span></h1>
<div style="display:flex;gap:.5rem;align-items:center">
<button class="theme-btn" id="themeToggle" onclick="toggleTheme()" title="Toggle theme"></button>
<button class="logout" style="color:var(--text-dim);font-size:.78rem;padding:.35rem .7rem;border:1px solid var(--border);border-radius:6px;background:transparent;cursor:pointer;font-family:inherit" onclick="openSettings()">⚙️</button>
<button class="logout" onclick="logout()">Logout</button>
</div>
</div>
@@ -182,6 +183,25 @@
</div>
</div>
<!-- ⚙️ Settings Modal -->
<div class="modal" id="settingsModal">
<div class="modal-inner" style="max-width:400px">
<div class="modal-handle"></div>
<h2>⚙️ Settings</h2>
<div style="margin-top:1rem">
<label style="font-size:.85rem;color:var(--text-dim);display:block;margin-bottom:.3rem">Current Password</label>
<input type="password" id="settingsCurPw" style="width:100%;padding:.7rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:.9rem;outline:none;margin-bottom:.8rem" placeholder="Current password" autocomplete="current-password">
<label style="font-size:.85rem;color:var(--text-dim);display:block;margin-bottom:.3rem">New Password</label>
<input type="password" id="settingsNewPw" style="width:100%;padding:.7rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-family:inherit;font-size:.9rem;outline:none;margin-bottom:.3rem" placeholder="New password" autocomplete="new-password">
<div id="settingsMsg" style="font-size:.82rem;margin-top:.5rem;display:none"></div>
</div>
<div class="btn-row" style="margin-top:1rem">
<button class="btn btn-primary" onclick="changePassword()">Change Password</button>
<button class="btn btn-ghost" onclick="closeSettings()">Cancel</button>
</div>
</div>
</div>
<script>
const API = 'http://192.168.1.126:8581';
let token = localStorage.getItem('vela_admin_token') || '';
@@ -409,6 +429,65 @@ window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(renderOrders, 150);
});
// ── Settings (change password) ──
function openSettings() {
document.getElementById('settingsCurPw').value = '';
document.getElementById('settingsNewPw').value = '';
const msg = document.getElementById('settingsMsg');
msg.style.display = 'none';
document.getElementById('settingsModal').classList.add('open');
document.body.style.overflow = 'hidden';
setTimeout(() => document.getElementById('settingsCurPw').focus(), 200);
}
function closeSettings() {
document.getElementById('settingsModal').classList.remove('open');
document.body.style.overflow = '';
}
// Close settings modal on backdrop tap
document.getElementById('settingsModal').addEventListener('click', function(e) {
if (e.target === this) closeSettings();
});
async function changePassword() {
const curPw = document.getElementById('settingsCurPw').value.trim();
const newPw = document.getElementById('settingsNewPw').value.trim();
const msg = document.getElementById('settingsMsg');
if (!curPw || !newPw) {
msg.textContent = 'Please fill in both fields.';
msg.style.color = 'var(--red)'; msg.style.display = 'block';
return;
}
if (newPw.length < 4) {
msg.textContent = 'New password must be at least 4 characters.';
msg.style.color = 'var(--red)'; msg.style.display = 'block';
return;
}
// Verify current password first by trying to login
const loginR = await fetch(API + '/admin/login', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({password:curPw})});
if (!loginR.ok) {
msg.textContent = 'Current password is incorrect.';
msg.style.color = 'var(--red)'; msg.style.display = 'block';
return;
}
// Update password via settings endpoint
const r = await fetch(API + '/admin/settings', {method:'POST',headers:{'Authorization':'Bearer '+token,'Content-Type':'application/json'},body:JSON.stringify({key:'admin_password',value:newPw})});
if (r.ok) {
msg.textContent = '✅ Password changed successfully!';
msg.style.color = 'var(--green)'; msg.style.display = 'block';
document.getElementById('settingsNewPw').value = '';
document.getElementById('settingsCurPw').value = '';
} else {
msg.textContent = 'Failed to change password.';
msg.style.color = 'var(--red)'; msg.style.display = 'block';
}
}
</script>
</body>
</html>