Replace security warning modal with inline banner in Preferences section

Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/e7946288-08c7-4081-85dd-6780f1eba17a

Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com>

app/sovran_systemsos_web/static/css/security.css

@@ -1,55 +1,42 @@
-/* ── Legacy security warning modal ──────────────────────────────── */
+/* ── Legacy security inline warning banner ───────────────────────── */
 
-.security-warning-dialog {
-  max-width: 520px;
-}
-
-.security-warning-header {
-  background-color: #3b1212;
-  border-bottom-color: #7a2020;
-}
-
-.security-warning-body {
+.security-inline-banner {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 24px 20px;
-}
-
-.security-warning-icon {
-  font-size: 2.5rem;
-}
-
-.security-warning-message {
-  text-align: center;
+  gap: 10px;
+  padding: 12px 14px;
+  margin-bottom: 12px;
+  background-color: rgba(180, 100, 0, 0.12);
+  border-left: 3px solid #c97a00;
+  border-radius: 6px;
   color: var(--text-primary);
-  line-height: 1.6;
-  margin: 0;
 }
 
-.security-warning-actions {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
+.security-inline-icon {
+  font-size: 1rem;
+  color: #e69000;
+  flex-shrink: 0;
 }
 
-.security-warning-hint {
+.security-inline-text {
+  font-size: 0.82rem;
+  line-height: 1.5;
   color: var(--text-secondary);
-  font-size: 0.85rem;
-  margin: 0;
-  text-align: center;
 }
 
-.security-warning-links {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.security-warning-link {
+.security-inline-link {
+  display: inline-block;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #e69000;
   text-decoration: none;
+  border: 1px solid #c97a00;
+  border-radius: 4px;
+  padding: 4px 10px;
+  align-self: flex-start;
+  transition: background-color 0.15s;
+}
+
+.security-inline-link:hover {
+  background-color: rgba(180, 100, 0, 0.22);
 }

app/sovran_systemsos_web/static/js/events.js

@@ -38,9 +38,6 @@ if ($upgradeCloseBtn) $upgradeCloseBtn.addEventListener("click", closeUpgradeMod
 if ($upgradeCancelBtn) $upgradeCancelBtn.addEventListener("click", closeUpgradeModal);
 if ($upgradeModal) $upgradeModal.addEventListener("click", function(e) { if (e.target === $upgradeModal) closeUpgradeModal(); });
 
-// Legacy security warning modal — dismiss closes the modal only
-if ($securityWarningDismiss) $securityWarningDismiss.addEventListener("click", closeSecurityWarningModal);
-
 // ── Upgrade modal functions ───────────────────────────────────────
 
 function openUpgradeModal() {

app/sovran_systemsos_web/static/js/features.js

@@ -599,9 +599,21 @@ function renderAutolaunchToggle(enabled) {
   var section = document.createElement("div");
   section.className = "category-section autolaunch-section";
 
+  var securityBanner = "";
+  if (_securityIsLegacy) {
+    var msg = _securityWarningMessage || "Your system may have factory default passwords. Please change your passwords to secure your system.";
+    securityBanner =
+      '<div class="security-inline-banner">' +
+        '<span class="security-inline-icon">⚠</span>' +
+        '<span class="security-inline-text">' + msg + '</span>' +
+        '<a class="security-inline-link" href="/onboarding?step=passwords">Change Passwords</a>' +
+      '</div>';
+  }
+
   section.innerHTML =
     '<div class="section-header">Preferences</div>' +
     '<hr class="section-divider" />' +
+    securityBanner +
     '<div class="feature-card">' +
       '<div class="feature-card-top">' +
         '<div class="feature-card-info">' +

app/sovran_systemsos_web/static/js/security.js

@@ -2,20 +2,12 @@
 
 // ── Legacy security warning ───────────────────────────────────────
 
-function openSecurityWarningModal(message) {
-  if ($securityWarningMessage) $securityWarningMessage.textContent = message;
-  if ($securityWarningModal) $securityWarningModal.classList.add("open");
-}
-
-function closeSecurityWarningModal() {
-  if ($securityWarningModal) $securityWarningModal.classList.remove("open");
-}
-
 async function checkLegacySecurity() {
   try {
     var data = await apiFetch("/api/security/status");
     if (data && data.status === "legacy") {
-      openSecurityWarningModal(data.warning || "This machine may have a known factory password. Please change your passwords immediately.");
+      _securityIsLegacy       = true;
+      _securityWarningMessage = data.warning || "This machine may have a known factory password. Please change your passwords immediately.";
     }
   } catch (_) {
     // Non-fatal — silently ignore if the endpoint is unreachable

app/sovran_systemsos_web/static/js/state.js

@@ -99,10 +99,9 @@ const $upgradeConfirmBtn  = document.getElementById("upgrade-confirm-btn");
 const $upgradeCancelBtn   = document.getElementById("upgrade-cancel-btn");
 const $upgradeCloseBtn    = document.getElementById("upgrade-close-btn");
 
-// Legacy security warning modal
-const $securityWarningModal   = document.getElementById("security-warning-modal");
-const $securityWarningMessage = document.getElementById("security-warning-message");
-const $securityWarningDismiss = document.getElementById("security-warning-dismiss-btn");
+// Legacy security warning state (populated by checkLegacySecurity in security.js)
+var _securityIsLegacy       = false;
+var _securityWarningMessage = "";
 
 // System status banner
 // (removed — health is now shown per-tile via the composite health field)

app/sovran_systemsos_web/templates/index.html

@@ -210,26 +210,6 @@
     </div>
   </div>
 
-  <!-- Legacy Security Warning Modal -->
-  <div class="modal-overlay" id="security-warning-modal" role="alertdialog" aria-modal="true" aria-labelledby="security-warning-title">
-    <div class="creds-dialog security-warning-dialog">
-      <div class="creds-header security-warning-header">
-        <span class="creds-title" id="security-warning-title">⚠️ Security Warning</span>
-      </div>
-      <div class="creds-body security-warning-body">
-        <div class="security-warning-icon">🔒</div>
-        <p class="security-warning-message" id="security-warning-message"></p>
-        <div class="security-warning-actions">
-          <p class="security-warning-hint">Change your passwords now to secure your system:</p>
-          <div class="security-warning-links">
-            <a class="btn btn-primary security-warning-link" href="/onboarding?step=passwords" id="security-warning-change-btn">Change Passwords</a>
-            <button class="btn btn-close-modal" id="security-warning-dismiss-btn">I Understand — Dismiss</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <!-- Reboot overlay -->
   <div class="reboot-overlay" id="reboot-overlay">
     <div class="reboot-card">