lobsterboard 0.2.2 → 0.2.3

package/app.html

@@ -65,6 +65,7 @@
       <input type="number" id="custom-height" placeholder="Height" style="display:none; width:80px;">
     </div>
     <div class="header-right">
+      <button class="btn btn-secondary" id="btn-security">🔒 Security</button>
       <button class="btn btn-secondary" id="btn-templates">📋 Templates</button>
       <button class="btn btn-secondary" id="btn-export-template">📦 Export Template</button>
       <button class="btn btn-secondary" id="btn-clear">Clear All</button>
@@ -775,6 +776,62 @@
     </div>
   </div>
 
+  <!-- PIN Modal -->
+  <div id="pin-modal" class="pin-modal-overlay" style="display:none;">
+    <div class="pin-modal">
+      <h3 id="pin-modal-title">🔒 Enter PIN</h3>
+      <div id="pin-current-group" class="pin-group" style="display:none;">
+        <label>Current PIN</label>
+        <input type="password" id="pin-input-current" maxlength="6" placeholder="••••" inputmode="numeric" pattern="[0-9]*" class="pin-input">
+      </div>
+      <div class="pin-group">
+        <label>PIN (4-6 digits)</label>
+        <input type="password" id="pin-input" maxlength="6" placeholder="••••" inputmode="numeric" pattern="[0-9]*" class="pin-input">
+      </div>
+      <div id="pin-confirm-group" class="pin-group" style="display:none;">
+        <label>Confirm PIN</label>
+        <input type="password" id="pin-input-confirm" maxlength="6" placeholder="••••" inputmode="numeric" pattern="[0-9]*" class="pin-input">
+      </div>
+      <div id="pin-error" class="pin-error"></div>
+      <div class="pin-actions">
+        <button class="btn btn-primary" id="pin-submit">Submit</button>
+        <button class="btn btn-secondary" id="pin-cancel">Cancel</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Security Settings Modal -->
+  <div id="security-modal" class="pin-modal-overlay" style="display:none;">
+    <div class="pin-modal" style="max-width:400px;">
+      <h3>🔒 Security Settings</h3>
+      <div class="security-option">
+        <div class="security-option-header">
+          <strong>Edit PIN</strong>
+          <span id="pin-status" class="security-badge">Not Set</span>
+        </div>
+        <p style="color:#8b949e;font-size:12px;margin:4px 0 8px;">Require a PIN to enter edit mode</p>
+        <div class="security-buttons">
+          <button class="btn btn-secondary btn-sm" id="sec-set-pin">Set PIN</button>
+          <button class="btn btn-secondary btn-sm" id="sec-change-pin" style="display:none;">Change PIN</button>
+          <button class="btn btn-danger btn-sm" id="sec-remove-pin" style="display:none;">Remove PIN</button>
+        </div>
+      </div>
+      <div class="security-option" style="margin-top:16px;">
+        <div class="security-option-header">
+          <strong>Public Mode</strong>
+          <label class="toggle-switch">
+            <input type="checkbox" id="public-mode-toggle">
+            <span class="toggle-slider"></span>
+          </label>
+        </div>
+        <p style="color:#8b949e;font-size:12px;margin:4px 0 0;">Hide edit button and block config APIs. Ideal for publicly-exposed dashboards.</p>
+      </div>
+      <div style="margin-top:20px;text-align:right;">
+        <button class="btn btn-secondary" id="sec-close">Close</button>
+      </div>
+    </div>
+  </div>
+
   <script src="js/templates.js"></script>
 </body>
 </html>

package/css/builder.css

@@ -1298,3 +1298,66 @@ body[data-mode="edit"] .edit-layout-btn {
 .tpl-export-success { background: #0d2818; border: 1px solid #238636; color: #3fb950; }
 .tpl-export-error { background: #2d1215; border: 1px solid #da3633; color: #f85149; }
 .tpl-export-result code { background: #30363d; padding: 2px 6px; border-radius: 4px; }
+
+/* ─────────────────────────────────────────────
+   PIN Modal & Security Settings
+   ───────────────────────────────────────────── */
+.pin-modal-overlay {
+  position: fixed; inset: 0; z-index: 9999;
+  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
+  display: flex; align-items: center; justify-content: center;
+}
+.pin-modal {
+  background: #161b22; border: 1px solid #30363d; border-radius: 12px;
+  padding: 24px; min-width: 320px; max-width: 360px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
+}
+.pin-modal h3 { margin: 0 0 16px; color: #e6edf3; font-size: 18px; }
+.pin-group { margin-bottom: 12px; }
+.pin-group label { display: block; color: #8b949e; font-size: 12px; margin-bottom: 4px; }
+.pin-input {
+  width: 100%; padding: 10px 12px; background: #0d1117; border: 1px solid #30363d;
+  border-radius: 6px; color: #e6edf3; font-size: 20px; letter-spacing: 8px;
+  text-align: center; box-sizing: border-box;
+}
+.pin-input:focus { border-color: #58a6ff; outline: none; }
+.pin-error { color: #f85149; font-size: 12px; min-height: 18px; margin: 8px 0; }
+.pin-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
+.security-option {
+  padding: 12px; background: #0d1117; border-radius: 8px; border: 1px solid #21262d;
+}
+.security-option-header {
+  display: flex; justify-content: space-between; align-items: center;
+}
+.security-badge {
+  font-size: 11px; padding: 2px 8px; border-radius: 10px;
+  background: #21262d; color: #8b949e;
+}
+.security-badge.active { background: #0d2818; color: #3fb950; }
+.security-buttons { display: flex; gap: 6px; }
+
+/* Toggle switch */
+.toggle-switch { position: relative; display: inline-block; width: 42px; height: 22px; }
+.toggle-switch input { opacity: 0; width: 0; height: 0; }
+.toggle-slider {
+  position: absolute; cursor: pointer; inset: 0;
+  background: #21262d; border-radius: 22px; transition: 0.3s;
+}
+.toggle-slider:before {
+  content: ""; position: absolute; height: 16px; width: 16px;
+  left: 3px; bottom: 3px; background: #8b949e;
+  border-radius: 50%; transition: 0.3s;
+}
+.toggle-switch input:checked + .toggle-slider { background: #238636; }
+.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); background: #fff; }
+
+/* Masked secret field in properties */
+.secret-field-wrapper {
+  display: flex; align-items: center; gap: 6px;
+}
+.secret-field-wrapper input { flex: 1; }
+.secret-replace-btn {
+  padding: 4px 8px; background: #21262d; border: 1px solid #30363d;
+  border-radius: 4px; color: #8b949e; cursor: pointer; font-size: 11px; white-space: nowrap;
+}
+.secret-replace-btn:hover { background: #30363d; color: #e6edf3; }

package/dist/lobsterboard.css

@@ -1,4 +1,4 @@
-/* LobsterBoard v0.2.2 - Dashboard Styles */
+/* LobsterBoard v0.2.3 - Dashboard Styles */
 /* LobsterBoard Dashboard - Generated Styles */
 
 :root {

package/dist/lobsterboard.esm.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.2.2
+ * LobsterBoard v0.2.3
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.2.2
+ * LobsterBoard v0.2.3
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.umd.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.2.2
+ * LobsterBoard v0.2.3
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/dist/lobsterboard.umd.min.js

@@ -1,5 +1,5 @@
 /*!
- * LobsterBoard v0.2.2
+ * LobsterBoard v0.2.3
  * Dashboard builder with customizable widgets
  * https://github.com/curbob/LobsterBoard
  * @license MIT

package/js/builder.js

@@ -27,7 +27,10 @@ const state = {
   draggedWidget: null,
   idCounter: 0,
   fontScale: 1,
-  editMode: false // New: Track edit mode state
+  editMode: false, // New: Track edit mode state
+  pinVerified: false, // Track if PIN has been verified this session
+  hasPin: false, // Whether a PIN is configured
+  publicMode: false // Whether public mode is enabled
 };
 
 // ─────────────────────────────────────────────
@@ -53,6 +56,218 @@ function getScrollableCanvasHeight() {
 // EDIT MODE
 // ─────────────────────────────────────────────
 
+// ─────────────────────────────────────────────
+// PIN & PUBLIC MODE
+// ─────────────────────────────────────────────
+
+function addPublicUnlockButton() {
+  let unlock = document.getElementById('public-unlock');
+  if (unlock) return; // already exists
+  unlock = document.createElement('button');
+  unlock.id = 'public-unlock';
+  unlock.textContent = '🔒';
+  unlock.title = 'Admin';
+  unlock.style.cssText = 'position:fixed;bottom:8px;right:8px;z-index:9999;background:transparent;border:none;color:#6e7681;font-size:12px;cursor:pointer;opacity:0.3;transition:opacity .2s;padding:4px;';
+  unlock.addEventListener('mouseenter', () => unlock.style.opacity = '0.8');
+  unlock.addEventListener('mouseleave', () => unlock.style.opacity = '0.3');
+  unlock.addEventListener('click', () => {
+    if (state.hasPin) {
+      showPinModal('verify');
+    } else {
+      openSecurityModal();
+    }
+  });
+  document.body.appendChild(unlock);
+}
+
+async function checkAuthStatus() {
+  try {
+    const res = await fetch('/api/auth/status');
+    const data = await res.json();
+    state.hasPin = data.hasPin;
+    state.publicMode = data.publicMode;
+    if (state.publicMode) {
+      const editBtn = document.getElementById('btn-edit-layout');
+      if (editBtn) editBtn.style.display = 'none';
+      addPublicUnlockButton();
+    }
+  } catch (e) { console.error('Auth status check failed:', e); }
+}
+
+function showPinModal(mode) {
+  // mode: 'verify', 'set', 'change', 'remove'
+  const modal = document.getElementById('pin-modal');
+  const title = document.getElementById('pin-modal-title');
+  const input = document.getElementById('pin-input');
+  const input2 = document.getElementById('pin-input-confirm');
+  const currentInput = document.getElementById('pin-input-current');
+  const error = document.getElementById('pin-error');
+  const confirmGroup = document.getElementById('pin-confirm-group');
+  const currentGroup = document.getElementById('pin-current-group');
+
+  error.textContent = '';
+  input.value = '';
+  input2.value = '';
+  currentInput.value = '';
+
+  if (mode === 'verify') {
+    title.textContent = '🔒 Enter PIN to Edit';
+    confirmGroup.style.display = 'none';
+    currentGroup.style.display = 'none';
+  } else if (mode === 'set') {
+    title.textContent = '🔐 Set Edit PIN';
+    confirmGroup.style.display = 'block';
+    currentGroup.style.display = 'none';
+  } else if (mode === 'change') {
+    title.textContent = '🔄 Change PIN';
+    confirmGroup.style.display = 'block';
+    currentGroup.style.display = 'block';
+  } else if (mode === 'remove') {
+    title.textContent = '🗑️ Remove PIN';
+    confirmGroup.style.display = 'none';
+    currentGroup.style.display = 'block';
+    input.parentElement.style.display = 'none';
+  }
+
+  modal.style.display = 'flex';
+  modal.dataset.mode = mode;
+  setTimeout(() => (mode === 'change' || mode === 'remove' ? currentInput : input).focus(), 100);
+}
+
+function closePinModal() {
+  const modal = document.getElementById('pin-modal');
+  modal.style.display = 'none';
+  // Restore visibility of new PIN input
+  document.getElementById('pin-input').parentElement.style.display = '';
+  // Clear any pending public mode callback
+  if (state._publicModeCallback) {
+    state._publicModeCallback = null;
+    const toggle = document.getElementById('public-mode-toggle');
+    if (toggle) toggle.checked = state.publicMode;
+  }
+}
+
+async function submitPin() {
+  const modal = document.getElementById('pin-modal');
+  const mode = modal.dataset.mode;
+  const pin = document.getElementById('pin-input').value;
+  const pin2 = document.getElementById('pin-input-confirm').value;
+  const currentPin = document.getElementById('pin-input-current').value;
+  const error = document.getElementById('pin-error');
+  error.textContent = '';
+
+  if (mode === 'verify') {
+    const res = await fetch('/api/auth/verify-pin', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pin })
+    });
+    const data = await res.json();
+    if (data.valid) {
+      state.pinVerified = true;
+      // If there's a pending public mode toggle, handle that instead of entering edit mode
+      if (state._publicModeCallback) {
+        const callback = state._publicModeCallback;
+        state._publicModeCallback = null; // clear before closePinModal tries to
+        closePinModal();
+        await callback(pin);
+        return;
+      }
+      // If in public mode (unlock button clicked), disable it and restore edit UI
+      if (state.publicMode) {
+        state.publicMode = false;
+        await fetch('/api/mode', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ publicMode: false, pin })
+        });
+        const editBtn = document.getElementById('btn-edit-layout');
+        if (editBtn) editBtn.style.display = '';
+        const unlock = document.getElementById('public-unlock');
+        if (unlock) unlock.remove();
+        const pubToggle = document.getElementById('public-mode-toggle');
+        if (pubToggle) pubToggle.checked = false;
+      }
+      closePinModal();
+      setEditMode(true);
+    } else {
+      error.textContent = 'Incorrect PIN';
+    }
+  } else if (mode === 'set') {
+    if (pin !== pin2) { error.textContent = 'PINs do not match'; return; }
+    if (pin.length < 4 || pin.length > 6 || !/^\d+$/.test(pin)) { error.textContent = 'PIN must be 4-6 digits'; return; }
+    const res = await fetch('/api/auth/set-pin', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pin })
+    });
+    const data = await res.json();
+    if (data.status === 'ok') {
+      state.hasPin = true;
+      state.pinVerified = true;
+      closePinModal();
+      setEditMode(true);
+    } else { error.textContent = data.error || 'Failed to set PIN'; }
+  } else if (mode === 'change') {
+    if (pin !== pin2) { error.textContent = 'New PINs do not match'; return; }
+    if (pin.length < 4 || pin.length > 6 || !/^\d+$/.test(pin)) { error.textContent = 'PIN must be 4-6 digits'; return; }
+    const res = await fetch('/api/auth/set-pin', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pin, currentPin })
+    });
+    const data = await res.json();
+    if (data.status === 'ok') {
+      closePinModal();
+      alert('PIN changed successfully');
+    } else { error.textContent = data.error || 'Failed to change PIN'; }
+  } else if (mode === 'remove') {
+    const res = await fetch('/api/auth/remove-pin', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pin: currentPin })
+    });
+    const data = await res.json();
+    if (data.status === 'ok') {
+      state.hasPin = false;
+      closePinModal();
+      alert('PIN removed');
+    } else { error.textContent = data.error || 'Failed to remove PIN'; }
+  }
+}
+
+async function requestEditMode() {
+  if (state.publicMode) { alert('Dashboard is in public mode. Editing is disabled.'); return; }
+  if (state.hasPin && !state.pinVerified) {
+    showPinModal('verify');
+  } else if (!state.hasPin) {
+    // No PIN set — offer to set one, or go straight to edit
+    setEditMode(true);
+  } else {
+    setEditMode(true);
+  }
+}
+
+function openSecurityModal() {
+  const modal = document.getElementById('security-modal');
+  const pinStatus = document.getElementById('pin-status');
+  const setBtn = document.getElementById('sec-set-pin');
+  const changeBtn = document.getElementById('sec-change-pin');
+  const removeBtn = document.getElementById('sec-remove-pin');
+  const publicToggle = document.getElementById('public-mode-toggle');
+
+  if (state.hasPin) {
+    pinStatus.textContent = 'Active';
+    pinStatus.className = 'security-badge active';
+    setBtn.style.display = 'none';
+    changeBtn.style.display = '';
+    removeBtn.style.display = '';
+  } else {
+    pinStatus.textContent = 'Not Set';
+    pinStatus.className = 'security-badge';
+    setBtn.style.display = '';
+    changeBtn.style.display = 'none';
+    removeBtn.style.display = 'none';
+  }
+  publicToggle.checked = state.publicMode;
+  modal.style.display = 'flex';
+}
+
 function setEditMode(enable) {
   state.editMode = enable;
   document.body.dataset.mode = enable ? 'edit' : 'view';
@@ -79,7 +294,7 @@ function setEditMode(enable) {
     document.querySelector('.canvas-grid').style.display = 'block'; // Show grid
     document.querySelector('.drop-hint').style.display = 'flex'; // Show drop hint
   } else {
-    editLayoutBtn.style.display = 'block';
+    editLayoutBtn.style.display = state.publicMode ? 'none' : 'block';
     saveBtn.textContent = '📦 Export ZIP';
     saveBtn.removeEventListener('click', saveConfig);
     saveBtn.addEventListener('click', exportDashboard);
@@ -326,11 +541,89 @@ document.addEventListener('DOMContentLoaded', () => {
   // setEditMode(false) is called inside loadConfig()
 
   // Initialize Edit Layout button
-  document.getElementById('btn-edit-layout').addEventListener('click', () => setEditMode(true));
+  document.getElementById('btn-edit-layout').addEventListener('click', requestEditMode);
   document.getElementById('btn-done-editing').addEventListener('click', () => {
     saveConfig();
     setEditMode(false);
   });
+
+  // PIN modal buttons
+  document.getElementById('pin-submit').addEventListener('click', submitPin);
+  document.getElementById('pin-cancel').addEventListener('click', closePinModal);
+  document.getElementById('pin-input').addEventListener('keydown', (e) => { if (e.key === 'Enter') submitPin(); });
+  document.getElementById('pin-input-confirm').addEventListener('keydown', (e) => { if (e.key === 'Enter') submitPin(); });
+  document.getElementById('pin-input-current').addEventListener('keydown', (e) => { if (e.key === 'Enter') submitPin(); });
+
+  // Check auth status on load
+  checkAuthStatus();
+
+  // Security modal
+  document.getElementById('btn-security').addEventListener('click', openSecurityModal);
+  document.getElementById('sec-close').addEventListener('click', () => {
+    document.getElementById('security-modal').style.display = 'none';
+  });
+  document.getElementById('sec-set-pin').addEventListener('click', () => {
+    document.getElementById('security-modal').style.display = 'none';
+    showPinModal('set');
+  });
+  document.getElementById('sec-change-pin').addEventListener('click', () => {
+    document.getElementById('security-modal').style.display = 'none';
+    showPinModal('change');
+  });
+  document.getElementById('sec-remove-pin').addEventListener('click', () => {
+    document.getElementById('security-modal').style.display = 'none';
+    showPinModal('remove');
+  });
+  document.getElementById('public-mode-toggle').addEventListener('change', async (e) => {
+    const enable = e.target.checked;
+    if (enable && !confirm('Enable Public Mode? This will hide the Edit button and block config APIs.')) {
+      e.target.checked = false; return;
+    }
+    if (state.hasPin) {
+      // Use PIN modal instead of prompt() so input is masked
+      state._pendingPublicMode = enable;
+      document.getElementById('security-modal').style.display = 'none';
+      showPinModal('verify');
+      // Override the verify handler temporarily
+      state._publicModeCallback = async (pin) => {
+        const res = await fetch('/api/mode', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ publicMode: enable, pin })
+        });
+        const data = await res.json();
+        if (data.status === 'ok') {
+          state.publicMode = data.publicMode;
+          state._publicModeCallback = null;
+          // Reload page for clean state
+          location.reload();
+          return;
+        } else {
+          e.target.checked = !enable;
+          alert(data.error || 'Failed to change mode');
+        }
+        state._publicModeCallback = null;
+      };
+    } else {
+      const res = await fetch('/api/mode', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ publicMode: enable })
+      });
+      const data = await res.json();
+      if (data.status === 'ok') {
+        state.publicMode = data.publicMode;
+        if (data.publicMode) {
+          setEditMode(false);
+          document.getElementById('btn-edit-layout').style.display = 'none';
+          document.getElementById('security-modal').style.display = 'none';
+        } else {
+          document.getElementById('btn-edit-layout').style.display = '';
+        }
+      } else {
+        e.target.checked = !enable;
+        alert(data.error || 'Failed to change mode');
+      }
+    }
+  });
 });
 
 function initCanvas() {
@@ -420,10 +713,23 @@ function updateCanvasInfo() {
 function initDragDrop() {
   const canvas = document.getElementById('canvas');
 
-  // Widget library items
+  // Widget library items — add privacy badges
   document.querySelectorAll('.widget-item').forEach(item => {
     item.addEventListener('dragstart', onDragStart);
     item.addEventListener('dragend', onDragEnd);
+    const widgetType = item.dataset.widget;
+    const widgetDef = WIDGETS[widgetType];
+    if (widgetDef && widgetDef.privacyWarning) {
+      const nameEl = item.querySelector('.widget-name');
+      if (nameEl && !nameEl.querySelector('.privacy-badge')) {
+        const badge = document.createElement('span');
+        badge.className = 'privacy-badge';
+        badge.textContent = ' ⚠️';
+        badge.title = 'May expose sensitive data when dashboard is public';
+        badge.style.cssText = 'font-size:10px;cursor:help;';
+        nameEl.appendChild(badge);
+      }
+    }
   });
 
   // Canvas drop zone
@@ -1088,6 +1394,22 @@ function showProperties(widget) {
   } else {
     document.getElementById('prop-description-group').style.display = 'none';
   }
+
+  // Show privacy warning for sensitive widgets
+  let privWarn = document.getElementById('prop-privacy-warning');
+  if (!privWarn) {
+    privWarn = document.createElement('div');
+    privWarn.id = 'prop-privacy-warning';
+    privWarn.style.cssText = 'background:#2d1b00;border:1px solid #d29922;border-radius:6px;padding:8px 10px;margin:8px 0;font-size:11px;color:#d29922;display:none;line-height:1.4;';
+    const descGroup = document.getElementById('prop-description-group');
+    descGroup.parentNode.insertBefore(privWarn, descGroup.nextSibling);
+  }
+  if (template.privacyWarning) {
+    privWarn.innerHTML = '⚠️ <strong>Privacy Warning:</strong> This widget may display sensitive data (API keys, credentials, personal info) to anyone viewing your dashboard. Public Mode and PIN protection only prevent editing — they do <strong>not</strong> hide widget content.';
+    privWarn.style.display = 'block';
+  } else {
+    privWarn.style.display = 'none';
+  }
 }
 
 // Properties already handled by hardcoded UI groups
@@ -1579,7 +1901,7 @@ function initControls() {
   });
 
   // Edit layout button
-  document.getElementById('btn-edit-layout').addEventListener('click', () => setEditMode(true));
+  document.getElementById('btn-edit-layout').addEventListener('click', requestEditMode);
 
   // Zoom controls - handled via inline onclick in HTML
 
@@ -1590,7 +1912,7 @@ function initControls() {
 
     if (e.ctrlKey && e.key === 'e') { // Ctrl+E to toggle edit mode
       e.preventDefault();
-      setEditMode(!state.editMode);
+      if (state.editMode) setEditMode(false); else requestEditMode();
     } else if (e.key === '=' || e.key === '+') {
       e.preventDefault();
       zoomIn();

package/js/widgets.js

@@ -579,6 +579,7 @@ const WIDGETS = {
   // ─────────────────────────────────────────────
 
   'activity-list': {
+    privacyWarning: true,
     name: 'Activity List',
     icon: '📋',
     category: 'large',
@@ -649,6 +650,7 @@ const WIDGETS = {
   },
 
   'cron-jobs': {
+    privacyWarning: true,
     name: 'Cron Jobs',
     icon: '⏰',
     category: 'large',
@@ -723,6 +725,7 @@ const WIDGETS = {
   },
 
   'system-log': {
+    privacyWarning: true,
     name: 'System Log',
     icon: '🔧',
     category: 'large',
@@ -810,6 +813,7 @@ const WIDGETS = {
   },
 
   'calendar': {
+    privacyWarning: true,
     name: 'Calendar',
     icon: '📅',
     category: 'large',
@@ -1686,6 +1690,7 @@ const WIDGETS = {
   // ─────────────────────────────────────────────
 
   'todo-list': {
+    privacyWarning: true,
     name: 'Todo List',
     icon: '✅',
     category: 'large',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lobsterboard",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Self-hosted drag-and-drop dashboard builder with 50 widgets, template gallery, and custom pages. Works standalone or with OpenClaw.",
   "keywords": [
     "dashboard",

package/server.cjs

@@ -294,6 +294,82 @@ const MIME_TYPES = {
 };
 
 const CONFIG_FILE = path.join(__dirname, 'config.json');
+const AUTH_FILE = path.join(__dirname, 'auth.json');
+const SECRETS_FILE = path.join(__dirname, 'secrets.json');
+
+// ─────────────────────────────────────────────
+// Security helpers
+// ─────────────────────────────────────────────
+const crypto = require('crypto');
+
+function hashPin(pin) {
+  return crypto.createHash('sha256').update(pin).digest('hex');
+}
+
+function readJsonFile(filepath, fallback) {
+  try { return JSON.parse(fs.readFileSync(filepath, 'utf8')); } catch (_) { return fallback; }
+}
+
+function writeJsonFile(filepath, data) {
+  fs.writeFileSync(filepath, JSON.stringify(data, null, 2));
+}
+
+function getAuth() { return readJsonFile(AUTH_FILE, {}); }
+function getSecrets() { return readJsonFile(SECRETS_FILE, {}); }
+
+const SENSITIVE_KEYS = ['apiKey', 'api_key', 'token', 'secret', 'password', 'icalUrl'];
+
+function isSensitiveKey(key) {
+  return SENSITIVE_KEYS.includes(key);
+}
+
+function isPublicMode() {
+  const auth = getAuth();
+  return auth.publicMode === true;
+}
+
+/** Mask sensitive fields in config before sending to browser */
+function maskConfig(config) {
+  const secrets = getSecrets();
+  const masked = JSON.parse(JSON.stringify(config));
+  if (masked.widgets) {
+    masked.widgets.forEach(w => {
+      if (!w.properties) return;
+      const widgetSecrets = secrets[w.id] || {};
+      for (const key of Object.keys(w.properties)) {
+        if (isSensitiveKey(key) && (w.properties[key] === '__SECRET__' || widgetSecrets[key])) {
+          w.properties[key] = '••••••••';
+        }
+      }
+    });
+  }
+  return masked;
+}
+
+/** On save: extract sensitive values into secrets.json, replace with __SECRET__ in config */
+function extractSecrets(config) {
+  const secrets = getSecrets();
+  if (config.widgets) {
+    config.widgets.forEach(w => {
+      if (!w.properties) return;
+      for (const key of Object.keys(w.properties)) {
+        if (isSensitiveKey(key)) {
+          const val = w.properties[key];
+          if (val && val !== '__SECRET__' && val !== '••••••••') {
+            if (!secrets[w.id]) secrets[w.id] = {};
+            secrets[w.id][key] = val;
+            w.properties[key] = '__SECRET__';
+          } else if (val === '••••••••') {
+            // User didn't change it — keep existing secret, restore placeholder
+            w.properties[key] = '__SECRET__';
+          }
+        }
+      }
+    });
+  }
+  writeJsonFile(SECRETS_FILE, secrets);
+  return config;
+}
 
 // Scan templates directory for meta.json files
 function scanTemplates(templatesDir) {
@@ -399,7 +475,7 @@ const server = http.createServer(async (req, res) => {
       }
       try {
         const config = JSON.parse(data);
-        sendJson(res, 200, config);
+        sendJson(res, 200, maskConfig(config));
       } catch (parseErr) {
         sendError(res, `Failed to parse config file: ${parseErr.message}`);
       }
@@ -419,7 +495,8 @@ const server = http.createServer(async (req, res) => {
     req.on('end', () => {
       if (overflow) { sendError(res, 'Request body too large', 413); return; }
       try {
-        const config = JSON.parse(body);
+        let config = JSON.parse(body);
+        config = extractSecrets(config);
         fs.writeFile(CONFIG_FILE, JSON.stringify(config, null, 2), 'utf8', (err) => {
           if (err) {
             sendError(res, `Failed to write config file: ${err.message}`);
@@ -445,6 +522,140 @@ const server = http.createServer(async (req, res) => {
     return;
   }
 
+  // ── Security: PIN auth endpoints ──
+  if (req.method === 'GET' && pathname === '/api/auth/status') {
+    const auth = getAuth();
+    sendJson(res, 200, { hasPin: !!auth.pinHash, publicMode: !!auth.publicMode });
+    return;
+  }
+
+  if (req.method === 'POST' && pathname === '/api/auth/set-pin') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const { pin, currentPin } = JSON.parse(body);
+        if (!pin || pin.length < 4 || pin.length > 6 || !/^\d+$/.test(pin)) {
+          sendJson(res, 400, { error: 'PIN must be 4-6 digits' }); return;
+        }
+        const auth = getAuth();
+        // If PIN already set, require current PIN
+        if (auth.pinHash && (!currentPin || hashPin(currentPin) !== auth.pinHash)) {
+          sendJson(res, 403, { error: 'Current PIN is incorrect' }); return;
+        }
+        auth.pinHash = hashPin(pin);
+        writeJsonFile(AUTH_FILE, auth);
+        sendJson(res, 200, { status: 'ok' });
+      } catch (e) { sendError(res, e.message, 400); }
+    });
+    return;
+  }
+
+  if (req.method === 'POST' && pathname === '/api/auth/verify-pin') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const { pin } = JSON.parse(body);
+        const auth = getAuth();
+        if (!auth.pinHash) { sendJson(res, 200, { valid: true }); return; }
+        const valid = hashPin(pin) === auth.pinHash;
+        sendJson(res, 200, { valid });
+      } catch (e) { sendError(res, e.message, 400); }
+    });
+    return;
+  }
+
+  if (req.method === 'POST' && pathname === '/api/auth/remove-pin') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const { pin } = JSON.parse(body);
+        const auth = getAuth();
+        if (auth.pinHash && hashPin(pin) !== auth.pinHash) {
+          sendJson(res, 403, { error: 'PIN is incorrect' }); return;
+        }
+        delete auth.pinHash;
+        writeJsonFile(AUTH_FILE, auth);
+        sendJson(res, 200, { status: 'ok' });
+      } catch (e) { sendError(res, e.message, 400); }
+    });
+    return;
+  }
+
+  // ── Security: Public mode ──
+  if (req.method === 'GET' && pathname === '/api/mode') {
+    const auth = getAuth();
+    sendJson(res, 200, { publicMode: !!auth.publicMode });
+    return;
+  }
+
+  if (req.method === 'POST' && pathname === '/api/mode') {
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const { publicMode, pin } = JSON.parse(body);
+        const auth = getAuth();
+        // Require PIN to toggle mode if PIN is set
+        if (auth.pinHash && (!pin || hashPin(pin) !== auth.pinHash)) {
+          sendJson(res, 403, { error: 'PIN required' }); return;
+        }
+        auth.publicMode = !!publicMode;
+        writeJsonFile(AUTH_FILE, auth);
+        sendJson(res, 200, { status: 'ok', publicMode: auth.publicMode });
+      } catch (e) { sendError(res, e.message, 400); }
+    });
+    return;
+  }
+
+  // ── Security: Secrets management ──
+  if (req.method === 'POST' && pathname.match(/^\/api\/secrets\/[^/]+$/)) {
+    if (isPublicMode()) { sendJson(res, 403, { error: 'Forbidden in public mode' }); return; }
+    const widgetId = pathname.split('/')[3];
+    let body = '';
+    req.on('data', c => body += c);
+    req.on('end', () => {
+      try {
+        const updates = JSON.parse(body);
+        const secrets = getSecrets();
+        if (!secrets[widgetId]) secrets[widgetId] = {};
+        Object.assign(secrets[widgetId], updates);
+        writeJsonFile(SECRETS_FILE, secrets);
+        sendJson(res, 200, { status: 'ok' });
+      } catch (e) { sendError(res, e.message, 400); }
+    });
+    return;
+  }
+
+  if (req.method === 'DELETE' && pathname.match(/^\/api\/secrets\/[^/]+\/[^/]+$/)) {
+    if (isPublicMode()) { sendJson(res, 403, { error: 'Forbidden in public mode' }); return; }
+    const parts = pathname.split('/');
+    const widgetId = parts[3];
+    const key = parts[4];
+    const secrets = getSecrets();
+    if (secrets[widgetId]) {
+      delete secrets[widgetId][key];
+      if (Object.keys(secrets[widgetId]).length === 0) delete secrets[widgetId];
+      writeJsonFile(SECRETS_FILE, secrets);
+    }
+    sendJson(res, 200, { status: 'ok' });
+    return;
+  }
+
+  // ── Public mode guard: block edit-related APIs ──
+  if (isPublicMode()) {
+    const editPaths = ['/config'];
+    const isEditApi = (req.method === 'POST' && editPaths.includes(pathname)) ||
+                      (req.method === 'POST' && pathname.startsWith('/api/templates/')) ||
+                      (req.method === 'DELETE' && pathname.startsWith('/api/templates/'));
+    if (isEditApi) {
+      sendJson(res, 403, { error: 'Dashboard is in public mode. Editing is disabled.' });
+      return;
+    }
+  }
+
   // ── Pages system routing ──
   const pageMatch = matchPageRoute(loadedPages, req.method, pathname, parsedUrl);
   if (pageMatch) {
@@ -848,9 +1059,15 @@ const server = http.createServer(async (req, res) => {
     return;
   }
 
-  // GET /api/rss?url=<feedUrl> - Server-side RSS proxy
+  // GET /api/rss?url=<feedUrl>&widgetId=<id>&secretKey=<key> - Server-side RSS proxy
   if (req.method === 'GET' && pathname === '/api/rss') {
-    const feedUrl = parsedUrl.searchParams.get('url');
+    let feedUrl = parsedUrl.searchParams.get('url');
+    const rssWidgetId = parsedUrl.searchParams.get('widgetId');
+    const rssSecretKey = parsedUrl.searchParams.get('secretKey') || 'feedUrl';
+    if ((!feedUrl || feedUrl === '••••••••' || feedUrl === '__SECRET__') && rssWidgetId) {
+      const secrets = getSecrets();
+      feedUrl = secrets[rssWidgetId]?.[rssSecretKey] || null;
+    }
     if (!feedUrl) { sendError(res, 'Missing url parameter', 400); return; }
 
     // Validate URL: only http/https, block private/internal IPs (SSRF protection)
@@ -903,10 +1120,17 @@ const server = http.createServer(async (req, res) => {
     return;
   }
 
-  // GET /api/calendar?url=<icalUrl>&max=<maxEvents> - iCal feed proxy + parser
+  // GET /api/calendar?url=<icalUrl>&max=<maxEvents>&widgetId=<id>&secretKey=<key> - iCal feed proxy + parser
   if (req.method === 'GET' && pathname === '/api/calendar') {
-    const icalUrl = parsedUrl.searchParams.get('url');
+    let icalUrl = parsedUrl.searchParams.get('url');
     const maxEvents = Math.min(parseInt(parsedUrl.searchParams.get('max')) || 10, 50);
+    const widgetId = parsedUrl.searchParams.get('widgetId');
+    const secretKey = parsedUrl.searchParams.get('secretKey') || 'icalUrl';
+    // If url is masked/placeholder, resolve from secrets
+    if ((!icalUrl || icalUrl === '••••••••' || icalUrl === '__SECRET__') && widgetId) {
+      const secrets = getSecrets();
+      icalUrl = secrets[widgetId]?.[secretKey] || null;
+    }
     if (!icalUrl) { sendError(res, 'Missing url parameter', 400); return; }
 
     // Validate URL: only http/https, block private/internal IPs
@@ -981,7 +1205,13 @@ const server = http.createServer(async (req, res) => {
       try {
         const cfg = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
         const w = (cfg.widgets || []).find(w => w.type === 'ai-usage-claude');
-        if (w && w.properties && w.properties.apiKey) apiKey = w.properties.apiKey;
+        if (w && w.properties && w.properties.apiKey && w.properties.apiKey !== '__SECRET__') {
+          apiKey = w.properties.apiKey;
+        } else if (w) {
+          // Check secrets store
+          const secrets = getSecrets();
+          apiKey = secrets[w.id]?.apiKey || null;
+        }
       } catch(e) {}
     }
     if (!apiKey) { sendJson(res, 200, { error: 'No API key configured. Add your Anthropic Admin key in the widget properties.', tokens: 0, cost: 0, models: [] }); return; }
@@ -1051,7 +1281,12 @@ const server = http.createServer(async (req, res) => {
       try {
         const cfg = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf8'));
         const w = (cfg.widgets || []).find(w => w.type === 'ai-usage-openai');
-        if (w && w.properties && w.properties.apiKey) apiKey = w.properties.apiKey;
+        if (w && w.properties && w.properties.apiKey && w.properties.apiKey !== '__SECRET__') {
+          apiKey = w.properties.apiKey;
+        } else if (w) {
+          const secrets = getSecrets();
+          apiKey = secrets[w.id]?.apiKey || null;
+        }
       } catch(e) {}
     }
     if (!apiKey) { sendJson(res, 200, { error: 'No API key configured. Add your OpenAI key in the widget properties.', tokens: 0, cost: 0, models: [] }); return; }