From 4a9266e249ef3e774845efb0fa96dc8e55653e6e Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Thu, 6 Aug 2026 15:32:10 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20auth=20management=20card=20in=20Setting?=
 =?UTF-8?q?s=20=E2=80=94=20edit=20master/viewer,=20enable/disable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/app.js | 58 +++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 47 insertions(+), 11 deletions(-)

diff --git a/public/app.js b/public/app.js
index 6b58374..87305ad 100644
--- a/public/app.js
+++ b/public/app.js
@@ -11,6 +11,7 @@ let config = null;
 document.addEventListener('DOMContentLoaded', async () => {
     setupTabs();
     await loadStatus();
+    await loadConfig();
     await loadCameras();
     renderLiveGrid();
     renderPlaybackCameras();
@@ -65,6 +66,14 @@ async function loadStatus() {
     }
 }
 
+async function loadConfig() {
+    try {
+        const r = await fetch(API + '/config');
+        const j = await r.json();
+        if (j.success) config = j.data;
+    } catch(e) { config = {}; }
+}
+
 // ── Cameras ──
 async function loadCameras() {
     try {
@@ -259,7 +268,27 @@ async function renderCameraCards() {
             </div>`;
         return;
     }
-    container.innerHTML = cameras.map(c => `
+    container.innerHTML = `
+        <div class="camera-card" id="auth-card" style="grid-column:1/-1">
+            <h3>🔐 Authentication</h3>
+            <div style="display:flex;gap:16px;flex-wrap:wrap;margin-top:8px">
+                <div style="flex:1;min-width:200px">
+                    <h4 style="font-size:13px;color:var(--accent);margin-bottom:6px">Master (full access)</h4>
+                    <label>Username <input type="text" value="${escAttr(config?.auth?.master?.username || '')}" data-auth="master-user"></label>
+                    <label>Password <input type="password" placeholder="new password" data-auth="master-pass"></label>
+                </div>
+                <div style="flex:1;min-width:200px">
+                    <h4 style="font-size:13px;color:var(--accent);margin-bottom:6px">Viewer (live wall only, port 8090)</h4>
+                    <label>Username <input type="text" value="${escAttr(config?.auth?.viewer?.username || '')}" data-auth="viewer-user"></label>
+                    <label>Password <input type="password" placeholder="new password" data-auth="viewer-pass"></label>
+                    <div class="row"><label>Enable viewer <input type="checkbox" ${config?.auth?.viewer?.enabled ? 'checked' : ''} data-auth="viewer-enabled" style="width:auto"></label></div>
+                </div>
+            </div>
+            <div class="row" style="margin-top:8px">
+                <label>Require login on port 8080 <input type="checkbox" ${config?.auth?.enabled ? 'checked' : ''} data-auth="auth-enabled" style="width:auto"></label>
+            </div>
+        </div>
+    ` + cameras.map(c => `
         <div class="camera-card" data-id="${c.id}">
             <h3>📷 ${c.name || 'Unnamed'} <span style="font-size:11px;color:var(--text-muted)">${c.ip}</span>
                 <a href="http://${c.ip}" target="_blank" style="font-size:11px;color:var(--accent);margin-left:8px;text-decoration:none" title="Open camera web interface">⚙️ Config</a>
@@ -354,9 +383,23 @@ document.getElementById('btn-save').addEventListener('click', async () => {
     });
 
     try {
-        // Include auth settings if present (first-run wizard).
-        const adminUser = document.getElementById('wiz-admin-user')?.value;
-        const adminPass = document.getElementById('wiz-admin-pass')?.value;
+        // Include auth settings from the management card.
+        const authEnabled = document.querySelector('[data-auth="auth-enabled"]')?.checked || false;
+        const masterUser = document.querySelector('[data-auth="master-user"]')?.value || '';
+        const masterPass = document.querySelector('[data-auth="master-pass"]')?.value || '';
+        const viewerUser = document.querySelector('[data-auth="viewer-user"]')?.value || '';
+        const viewerPass = document.querySelector('[data-auth="viewer-pass"]')?.value || '';
+        const viewerEnabled = document.querySelector('[data-auth="viewer-enabled"]')?.checked || false;
+        
+        cfg.auth = cfg.auth || {};
+        cfg.auth.enabled = authEnabled;
+        cfg.auth.master = cfg.auth.master || {};
+        cfg.auth.master.username = masterUser;
+        cfg.auth.viewer = cfg.auth.viewer || {};
+        cfg.auth.viewer.username = viewerUser;
+        cfg.auth.viewer.enabled = viewerEnabled || false;
+        if (masterPass) { cfg.auth.master.password = masterPass; cfg.auth.master.enabled = true; }
+        if (viewerPass) { cfg.auth.viewer.password = viewerPass; }
         
         // Fetch current config, then post updated version.
         const cr = await fetch(API + '/config');
@@ -364,13 +407,6 @@ document.getElementById('btn-save').addEventListener('click', async () => {
         const cfg = cj.data || {};
         cfg.cameras = updatedCameras;
         
-        // Set auth if admin credentials were provided.
-        if (adminUser && adminPass) {
-            cfg.auth = cfg.auth || {};
-            cfg.auth.enabled = true;
-            cfg.auth.master = { username: adminUser, password: adminPass, enabled: true };
-        }
-
         const r = await fetch(API + '/config', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },