From 954bee13dec228fe195a1c3c763f55f980e8600c Mon Sep 17 00:00:00 2001
From: root <root@vela.local>
Date: Sat, 20 Jun 2026 18:06:06 +0000
Subject: [PATCH] add change password UI to admin panel

---
 admin.html | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/admin.html b/admin.html
index 2791353..7919df7 100644
--- a/admin.html
+++ b/admin.html
@@ -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>