naturallaw777
2013df55bd
Apply the approved "The Hub" redesign to the web admin while keeping every existing mechanic intact (polling, service-detail modals, Matrix and system password management, NWC wallet manager, update/rebuild/backup/security/ reboot flows, feature manager, onboarding, role handling). Layout (templates/index.html): - Old header bar + IP bar replaced by a sidebar + topbar app shell. Sidebar carries the brand (The Hub / Sovran_SystemsOS version), category navigation with live counts, the System actions (Update System, Tech Support, Manual Backup, Security, node-only Upgrade), Feature Manager / Preferences, and the role badge. - Topbar carries the page title, a service search box, the LAN | WAN network chip (external IP always visible, one line), Reboot and Sign Out. - New widgets row: Systems Operational summary (opens the new Systems Operational modal) and Bitcoin Core sync progress with block/ETA. - New Systems Operational modal: service counts, router port-forwarding steps (80/443 to this machine's LAN IP), the live domain diagnostics checklist, and which services use those ports. New static/js/dashboard.js (namespaced IIFE, no new globals) renders the nav, search filtering, widgets, and the Systems Operational modal; it is driven by the existing /api/services payloads via a window.dashboardServicesUpdated() hook called from buildTiles/updateTiles. Visual design (static/css/*): - New token set (softer dark surfaces, lifted contrast, Sovran green reserved for status and actions) with legacy variable names aliased so every secondary sheet re-skins automatically. - Tiles, dialogs, buttons, inputs, toggles, tables, forms, overlays and the login page restyled to the GNOME/libadwaita-flavored surfaces: 20px cards, 26px dialogs, pill buttons, libadwaita switches, mono value pills with Copy buttons, consistent modal anatomy. - Inline SVG symbol set for chrome/nav icons (monochrome, currentColor); service icons still load from /static/icons/*.svg as before. - Sidebar system buttons now use vector glyphs instead of emoji. Behavioral details: - Service detail modal header gains a status pill next to the version chip; credentials render with pre-wrap for multiline values. - First-login security banner now renders as a card inside the content area instead of a full-width strip above the app. - Search + category filtering hide/show sections and tiles without touching the polling or update logic. Onboarding and login pages rebranded to "The Hub" with aligned palette.
514 lines
27 KiB
HTML
514 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Sovran_SystemsOS — The Hub</title>
|
||
<link rel="stylesheet" href="/static/css/base.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/buttons.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/header.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/layout.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/tiles.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/modals.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/features.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/onboarding.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/support.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/domain-setup.css?v={{ asset_version }}" />
|
||
<link rel="stylesheet" href="/static/css/security.css?v={{ asset_version }}" />
|
||
</head>
|
||
<body>
|
||
|
||
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
|
||
|
||
<!-- The Hub logo (verbatim from app/sovran_systemsos_web/static/sovran-hub-icon.svg) -->
|
||
<symbol id="g-sovran" viewBox="0 0 256 256">
|
||
<linearGradient id="sv-bg" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#153126"/><stop offset="55%" stop-color="#0F241B"/><stop offset="100%" stop-color="#091C14"/>
|
||
</linearGradient>
|
||
<linearGradient id="sv-outer" x1="70" y1="40" x2="190" y2="210" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#42F39A"/><stop offset="45%" stop-color="#28D978"/><stop offset="100%" stop-color="#1AA45D"/>
|
||
</linearGradient>
|
||
<linearGradient id="sv-inner" x1="90" y1="60" x2="180" y2="190" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0%" stop-color="#27C86F"/><stop offset="100%" stop-color="#157E49"/>
|
||
</linearGradient>
|
||
<rect width="256" height="256" rx="48" ry="48" fill="url(#sv-bg)"/>
|
||
<rect x="1.5" y="1.5" width="253" height="253" rx="46.5" ry="46.5" fill="none" stroke="rgba(255,255,255,0.08)"/>
|
||
<path d="M128 32 A96 96 0 1 1 58 196" fill="none" stroke="url(#sv-outer)" stroke-width="12" stroke-linecap="round"/>
|
||
<path d="M128 56 A72 72 0 1 1 76 178" fill="none" stroke="url(#sv-inner)" stroke-width="10" stroke-linecap="round"/>
|
||
<circle cx="128" cy="128" r="8" fill="#F2FFF7"/>
|
||
<circle cx="128" cy="128" r="18" fill="none" stroke="#7BFFC0" stroke-opacity="0.14" stroke-width="4"/>
|
||
</symbol>
|
||
|
||
<!-- service glyphs -->
|
||
<!-- ═══ Real service logos — extracted verbatim from app/icons/*.svg ═══
|
||
(internal ids namespaced per icon to avoid collisions) -->
|
||
|
||
<!-- symbolic helpers (nav + modal internals) -->
|
||
<!-- Bitcoin nav icon: the OFFICIAL logo silhouette (paths taken verbatim
|
||
from app/icons/bitcoin-core.svg) rendered monochrome in currentColor
|
||
so it matches the symbolic sidebar set -->
|
||
<symbol id="g-btc-sym" viewBox="-34 -34 580 580">
|
||
<path fill="currentColor" d="M317.871 7.656c-137.12-34.192-276.024 49.28-310.2 186.44-34.208 137.136 49.256 276.048 186.36 310.24 137.16 34.199 276.063-49.265 310.256-186.408 34.192-137.152-49.264-276.08-186.416-310.272m50.936 211.872c-3.688 24.936-17.512 37.008-35.864 41.24 25.2 13.12 38.024 33.239 25.809 68.12-15.16 43.319-51.176 46.976-99.072 37.912l-11.624 46.584-28.088-7 11.472-45.96a1076 1076 0 0 1-22.384-5.809l-11.512 46.177-28.056-7 11.624-46.673c-6.561-1.68-13.225-3.464-20.024-5.168l-36.552-9.111 13.943-32.152s20.696 5.504 20.416 5.096c7.952 1.969 11.48-3.216 12.872-6.672l18.368-73.64.048-.2 13.104-52.568c.344-5.968-1.712-13.496-13.088-16.336.439-.296-20.4-5.072-20.4-5.072l7.472-30 38.736 9.673-.032.144c5.824 1.448 11.824 2.824 17.937 4.216L245.423 89.2l28.072 7-11.28 45.224c7.536 1.721 15.12 3.456 22.504 5.297l11.2-44.929 28.088 7-11.504 46.145c35.464 12.215 61.401 30.527 56.304 64.591"/>
|
||
<path fill="currentColor" d="m254.647 174.6-13.983 56.08c15.855 3.951 64.735 20.071 72.656-11.656 8.248-33.096-42.817-40.472-58.673-44.424"/>
|
||
<path fill="currentColor" d="m233.608 258.984-15.425 61.832c19.04 4.729 77.769 23.584 86.448-11.296 9.072-36.376-51.984-45.784-71.023-50.536"/>
|
||
</symbol>
|
||
|
||
<symbol id="g-chat" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 5.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4 3.2c-.6.5-1 .3-1-.5V5.5A2.5 2.5 0 0 1 7.5 3h10A2.5 2.5 0 0 1 20 5.5z"/>
|
||
<circle cx="8.7" cy="9.2" r="0.5" fill="currentColor"/><circle cx="12" cy="9.2" r="0.5" fill="currentColor"/><circle cx="15.3" cy="9.2" r="0.5" fill="currentColor"/>
|
||
</g>
|
||
</symbol>
|
||
|
||
<symbol id="g-antenna" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
|
||
<path d="M5.4 9.9a9.3 9.3 0 0 1 13.2 0"/>
|
||
<path d="M8.1 12.9a5.6 5.6 0 0 1 7.8 0"/>
|
||
<circle cx="12" cy="16.6" r="1.5" fill="currentColor" stroke="none"/>
|
||
<path d="M12 16.6V21"/>
|
||
</g>
|
||
</symbol>
|
||
|
||
<symbol id="g-lock" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="5.5" y="10.5" width="13" height="9.5" rx="2.6"/>
|
||
<path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/>
|
||
<circle cx="12" cy="15" r="1.3" fill="currentColor" stroke="none"/>
|
||
</g>
|
||
</symbol>
|
||
<!-- nav + ui symbolic icons -->
|
||
<symbol id="g-grid" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round">
|
||
<rect x="3.5" y="3.5" width="7.2" height="7.2" rx="2"/><rect x="13.3" y="3.5" width="7.2" height="7.2" rx="2"/>
|
||
<rect x="3.5" y="13.3" width="7.2" height="7.2" rx="2"/><rect x="13.3" y="13.3" width="7.2" height="7.2" rx="2"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-server" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round">
|
||
<rect x="3.5" y="3.5" width="17" height="7.4" rx="2"/><rect x="3.5" y="13.1" width="17" height="7.4" rx="2"/>
|
||
<circle cx="7.2" cy="7.2" r="0.6" fill="currentColor"/><circle cx="7.2" cy="16.8" r="0.6" fill="currentColor"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-dots" viewBox="0 0 24 24">
|
||
<g fill="currentColor">
|
||
<circle cx="5" cy="5" r="1.7"/><circle cx="12" cy="5" r="1.7"/><circle cx="19" cy="5" r="1.7"/>
|
||
<circle cx="5" cy="12" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="19" cy="12" r="1.7"/>
|
||
<circle cx="5" cy="19" r="1.7"/><circle cx="12" cy="19" r="1.7"/><circle cx="19" cy="19" r="1.7"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-refresh" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<path d="M20 12a8 8 0 1 1-2.9-6.2"/>
|
||
<path d="M20.6 2.6l-.5 4.9-4.6-1.7z" fill="currentColor" stroke="none"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-box" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3.5" y="4" width="17" height="4.4" rx="1.6"/>
|
||
<path d="M5.2 8.4v9a2.4 2.4 0 0 0 2.4 2.4h8.8a2.4 2.4 0 0 0 2.4-2.4v-9"/>
|
||
<path d="M10 12.5h4"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-shield-check" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 2.5 4.5 5.5v6c0 4.6 3.1 8 7.5 9.9 4.4-1.9 7.5-5.3 7.5-9.9v-6z"/>
|
||
<path d="M8.6 12l2.4 2.4 4.4-4.6"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-lifebuoy" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="8.6"/><circle cx="12" cy="12" r="3.6"/>
|
||
<path d="M6 6l3.2 3.2M18 6l-3.2 3.2M6 18l3.2-3.2M18 18l-3.2-3.2"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-power" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<path d="M7.2 6.1a7 7 0 1 0 9.6 0"/>
|
||
<path d="M12 2.8v8.4"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-logout" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14"/>
|
||
<path d="M4 12h10M10.5 8.5 14 12l-3.5 3.5"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-search" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<circle cx="11" cy="11" r="6.5"/>
|
||
<path d="M15.8 15.8 21 21"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-copy" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="9" y="9" width="11" height="11" rx="2.2"/>
|
||
<path d="M5.5 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v.5"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-check" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.5l5 5 10-11"/></symbol>
|
||
<symbol id="g-chev" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M9.5 5.5 16 12l-6.5 6.5"/></symbol>
|
||
<symbol id="g-x" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M6 6l12 12M18 6 6 18"/></symbol>
|
||
<symbol id="g-wifi" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
|
||
<path d="M4.5 10.2a11 11 0 0 1 15 0"/>
|
||
<path d="M7.3 13.3a7 7 0 0 1 9.4 0"/>
|
||
<circle cx="12" cy="17" r="1.4" fill="currentColor" stroke="none"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-key" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="7.5" cy="15.5" r="4"/>
|
||
<path d="M10.4 12.6 20 3M16.2 6.8l2.4 2.4M18.8 4.2l2.2 2.2"/>
|
||
</g>
|
||
</symbol>
|
||
<symbol id="g-alert" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 3.6 22.2 20.4H1.8z"/>
|
||
<path d="M12 9.8v4.6"/><circle cx="12" cy="17.2" r="0.6" fill="currentColor" stroke="none"/>
|
||
</g>
|
||
</symbol>
|
||
</svg>
|
||
|
||
<div class="app">
|
||
|
||
<!-- ═══ SIDEBAR ═══ -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="brand">
|
||
<svg class="brand-logo"><use href="#g-sovran"/></svg>
|
||
<div class="brand-text">
|
||
<div class="brand-title">The <em>Hub</em></div>
|
||
<div class="brand-sub">Sovran_SystemsOS v{{ sovran_version }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav id="sidebar-nav" aria-label="Service categories"></nav>
|
||
|
||
<div class="nav-label">System</div>
|
||
<div id="sidebar-support"></div>
|
||
|
||
<!-- Feature Manager + Preferences (features.js) -->
|
||
<div id="sidebar-features"></div>
|
||
|
||
<div class="sidebar-spacer"></div>
|
||
|
||
<div class="sidebar-footer">
|
||
<span class="role-badge" id="role-badge-wrap" title="Sovran_SystemsOS role">
|
||
<svg width="13" height="13"><use href="#g-shield-check"/></svg>
|
||
<span id="role-badge">Loading…</span>
|
||
</span>
|
||
<div class="host-note">sovransystemsos.local</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ═══ MAIN ═══ -->
|
||
<div class="main">
|
||
<header class="topbar">
|
||
<div class="page-title" id="page-title">Dashboard</div>
|
||
|
||
<div class="search-box">
|
||
<svg><use href="#g-search"/></svg>
|
||
<input id="search-input" type="text" placeholder="Search services…" autocomplete="off" />
|
||
</div>
|
||
|
||
<div class="net-chip" title="Internal IP · External IP">
|
||
<svg><use href="#g-wifi"/></svg>
|
||
<span class="int-wrap"><span class="ip-label">LAN</span><span class="ip-value" id="ip-internal">…</span></span>
|
||
<span class="net-separator">|</span>
|
||
<span class="ext-wrap"><span class="ip-label">WAN</span><span class="ip-value" id="ip-external">…</span></span>
|
||
</div>
|
||
|
||
<div class="top-actions">
|
||
<button class="btn btn-header-reboot" id="btn-header-reboot" title="Restart the entire computer">Reboot</button>
|
||
<button class="btn btn-logout" id="btn-logout" title="Sign out">Sign Out</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="content" id="content">
|
||
<!-- Widgets row (dashboard.js) -->
|
||
<section class="widgets" id="widgets" style="display:none"></section>
|
||
|
||
<div id="tiles-area">
|
||
<div class="dashboard-loading" role="status" aria-live="polite">
|
||
<span class="dashboard-loading-spinner" aria-hidden="true"></span>
|
||
<span>Loading service status…</span>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ═══ SYSTEMS OPERATIONAL MODAL (dashboard.js) ═══ -->
|
||
<div class="modal-overlay" id="systems-modal" role="dialog" aria-modal="true" aria-labelledby="systems-modal-title">
|
||
<div class="creds-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="systems-modal-title">
|
||
<span class="widget-chip chip-green" style="width:54px;height:54px;border-radius:16px"><svg style="width:27px;height:27px"><use href="#g-shield-check"/></svg></span>
|
||
<span>Systems Operational</span>
|
||
</span>
|
||
<button class="creds-close-btn" id="systems-close-btn" title="Close">✕</button>
|
||
</div>
|
||
<div class="creds-body" id="systems-body">
|
||
<p class="creds-loading">Loading…</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Update modal -->
|
||
<div class="modal-overlay" id="update-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title-text">
|
||
<div class="modal-dialog">
|
||
<div class="modal-header">
|
||
<span class="modal-title" id="modal-title-text">Sovran_SystemsOS Update</span>
|
||
<div class="modal-spinner" id="modal-spinner"></div>
|
||
<span class="modal-status" id="modal-status">Updating…</span>
|
||
</div>
|
||
<div class="modal-log" id="modal-log" aria-live="polite"></div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-save" id="btn-save-report" style="display:none">Save Error Report</button>
|
||
<button class="btn btn-save" id="btn-retry-update-status" style="display:none">Retry Status</button>
|
||
<button class="btn btn-reboot" id="btn-retry-update" style="display:none">Retry Update</button>
|
||
<button class="btn btn-reboot" id="btn-reboot" style="display:none">Restart Entire System</button>
|
||
<button class="btn btn-close-modal" id="btn-close-modal" disabled>Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Credentials info modal -->
|
||
<div class="modal-overlay" id="creds-modal" role="dialog" aria-modal="true" aria-labelledby="creds-modal-title">
|
||
<div class="creds-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="creds-modal-title">Service Info</span>
|
||
<button class="creds-close-btn" id="creds-close-btn" title="Close">✕</button>
|
||
</div>
|
||
<div class="creds-body" id="creds-body">
|
||
<p class="creds-loading">Loading…</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tech Support modal -->
|
||
<div class="modal-overlay" id="support-modal" role="dialog" aria-modal="true" aria-labelledby="support-modal-title">
|
||
<div class="creds-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="support-modal-title">Tech Support</span>
|
||
<button class="creds-close-btn" id="support-close-btn" title="Close">✕</button>
|
||
</div>
|
||
<div class="creds-body" id="support-body">
|
||
<p class="creds-loading">Loading…</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Domain Setup Modal -->
|
||
<div class="modal-overlay" id="domain-setup-modal" role="dialog" aria-modal="true" aria-labelledby="domain-setup-title">
|
||
<div class="creds-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="domain-setup-title">🌐 Domain Setup</span>
|
||
<button class="creds-close-btn" id="domain-setup-close-btn" title="Close">✕</button>
|
||
</div>
|
||
<div class="creds-body" id="domain-setup-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SSL Email Modal -->
|
||
<div class="modal-overlay" id="ssl-email-modal" role="dialog" aria-modal="true" aria-labelledby="ssl-email-title">
|
||
<div class="creds-dialog domain-narrow-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="ssl-email-title">📧 SSL Certificate Email</span>
|
||
<button class="creds-close-btn" id="ssl-email-close-btn" title="Close">✕</button>
|
||
</div>
|
||
<div class="creds-body">
|
||
<p class="support-desc">Let's Encrypt needs an email address for SSL certificate notifications.</p>
|
||
<div class="domain-field-group">
|
||
<label class="domain-field-label" for="ssl-email-input">Email:</label>
|
||
<input class="domain-field-input" type="email" id="ssl-email-input" placeholder="you@example.com" />
|
||
</div>
|
||
<div class="domain-field-actions">
|
||
<button class="btn btn-close-modal" id="ssl-email-cancel-btn">Cancel</button>
|
||
<button class="btn btn-primary" id="ssl-email-save-btn">Save</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Feature Confirm Modal -->
|
||
<div class="modal-overlay" id="feature-confirm-modal" role="dialog" aria-modal="true" aria-labelledby="feature-confirm-title">
|
||
<div class="creds-dialog domain-narrow-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="feature-confirm-title">Confirm Action</span>
|
||
<button class="creds-close-btn" id="feature-confirm-close-btn" title="Close">✕</button>
|
||
</div>
|
||
<div class="creds-body">
|
||
<p class="support-desc" id="feature-confirm-message"></p>
|
||
<div class="domain-field-actions">
|
||
<button class="btn btn-close-modal" id="feature-confirm-cancel-btn">Cancel</button>
|
||
<button class="btn btn-primary" id="feature-confirm-ok-btn">Continue</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Port Requirements Modal -->
|
||
<div class="modal-overlay" id="port-requirements-modal" role="dialog" aria-modal="true" aria-labelledby="port-req-title">
|
||
<div class="creds-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="port-req-title">🔌 Router / Firewall Port Requirements</span>
|
||
<button class="creds-close-btn" id="port-req-close-btn" title="Close">✕</button>
|
||
</div>
|
||
<div class="creds-body" id="port-req-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rebuild Modal -->
|
||
<div class="modal-overlay" id="rebuild-modal" role="dialog" aria-modal="true" aria-labelledby="rebuild-modal-title">
|
||
<div class="modal-dialog">
|
||
<div class="modal-header">
|
||
<span class="modal-title" id="rebuild-modal-title">Sovran_SystemsOS Rebuild</span>
|
||
<div class="modal-spinner" id="rebuild-spinner"></div>
|
||
<span class="modal-status" id="rebuild-status">Rebuilding…</span>
|
||
</div>
|
||
<div class="modal-log" id="rebuild-log" aria-live="polite"></div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-save" id="rebuild-save-report" style="display:none">Save Error Report</button>
|
||
<button class="btn btn-reboot" id="rebuild-reboot-btn" style="display:none">Restart Entire System</button>
|
||
<button class="btn btn-close-modal" id="rebuild-close-btn" disabled>Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Upgrade Modal (Node → Server+Desktop) -->
|
||
<div class="modal-overlay" id="upgrade-modal" role="dialog" aria-modal="true" aria-labelledby="upgrade-modal-title">
|
||
<div class="creds-dialog upgrade-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="upgrade-modal-title">🚀 Upgrade to Server + Desktop</span>
|
||
<button class="creds-close-btn" id="upgrade-close-btn" title="Close">✕</button>
|
||
</div>
|
||
<div class="creds-body">
|
||
<p class="support-desc">
|
||
Upgrading to the full <strong>Server + Desktop</strong> experience will unlock all services —
|
||
encrypted messaging, password management, cloud storage, website hosting, and more.
|
||
</p>
|
||
<div class="upgrade-info-box">
|
||
<p class="upgrade-info-title">Simple, guided setup:</p>
|
||
<ul class="upgrade-info-list">
|
||
<li>Sovran_SystemsOS walks you through getting your domain from <a href="https://njal.la" target="_blank" rel="noopener noreferrer">Njal.la</a> and connecting your services</li>
|
||
<li>To make your services available outside your home, complete one router task: forward ports <strong>80 and 443</strong> to this computer</li>
|
||
</ul>
|
||
</div>
|
||
<p class="support-desc">
|
||
The Hub guides you through every step.
|
||
</p>
|
||
<p class="support-desc upgrade-rebuild-note">
|
||
The system will rebuild after upgrading. This may take several minutes.
|
||
</p>
|
||
<div class="domain-field-actions">
|
||
<button class="btn btn-close-modal" id="upgrade-cancel-btn">Cancel</button>
|
||
<button class="btn btn-primary" id="upgrade-confirm-btn">Yes, Upgrade</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Security Reset overlay -->
|
||
<div class="security-reset-overlay" id="security-reset-overlay">
|
||
<!-- Phase 1: wiping in progress -->
|
||
<div class="reboot-card" id="security-reset-phase1">
|
||
<div class="security-reset-overlay-icon">🛡</div>
|
||
<h2 class="reboot-title">Security Reset In Progress</h2>
|
||
<p class="reboot-message">
|
||
⚠️ Wiping all data and credentials.<br />
|
||
<strong>Do not power off your computer.</strong><br />
|
||
This may take several minutes.
|
||
</p>
|
||
<div class="reboot-dots">
|
||
<span class="reboot-dot"></span>
|
||
<span class="reboot-dot"></span>
|
||
<span class="reboot-dot"></span>
|
||
</div>
|
||
<p class="reboot-submessage" id="security-reset-overlay-step">Erasing data and resetting credentials…</p>
|
||
</div>
|
||
<!-- Phase 2: password display -->
|
||
<div class="reboot-card" id="security-reset-phase2" style="display:none;">
|
||
<div class="security-reset-overlay-icon">🔑</div>
|
||
<h2 class="reboot-title">Security Reset Complete</h2>
|
||
<p class="security-reset-password-label">Your new login password is:</p>
|
||
<div class="security-reset-password-box" id="security-reset-new-password"> </div>
|
||
<p class="security-reset-password-warning">
|
||
✍️ <strong>Write this down now.</strong><br />
|
||
You will need it to log in to your computer<br />and the Sovran Hub at <em>sovransystemsos.local</em>.
|
||
</p>
|
||
<button class="security-reset-reboot-btn" id="security-reset-reboot-btn" disabled>
|
||
I have written down my new password — Restart Entire System
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Reboot overlay -->
|
||
<div class="reboot-overlay" id="reboot-overlay">
|
||
<!-- Normal restarting card -->
|
||
<div class="reboot-card" id="reboot-main-card">
|
||
<div class="reboot-icon" aria-hidden="true"></div>
|
||
<h2 class="reboot-title">Restarting Entire System</h2>
|
||
<p class="reboot-message">
|
||
The entire computer is restarting, including the desktop and all hosted services.<br />
|
||
This page will reconnect automatically when Sovran_SystemsOS is back online.
|
||
</p>
|
||
<div class="reboot-dots" aria-hidden="true">
|
||
<span class="reboot-dot"></span>
|
||
<span class="reboot-dot"></span>
|
||
<span class="reboot-dot"></span>
|
||
</div>
|
||
<p class="reboot-submessage" id="reboot-submessage" aria-live="polite">Sending restart request…</p>
|
||
</div>
|
||
<!-- Error card (shown if restart request fails definitively) -->
|
||
<div class="reboot-card" id="reboot-error-card" style="display:none">
|
||
<div class="reboot-icon" aria-hidden="true"></div>
|
||
<h2 class="reboot-title">Restart could not be started</h2>
|
||
<p class="reboot-message">
|
||
The computer did not begin restarting. No services were intentionally stopped. Please try again.
|
||
</p>
|
||
<div class="reboot-error-actions">
|
||
<button class="btn btn-close-modal" id="reboot-error-close-btn">Close</button>
|
||
<button class="btn btn-restart-amber" id="reboot-error-retry-btn">Try Again</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Restart Confirm Dialog -->
|
||
<div class="modal-overlay" id="restart-confirm-modal" role="dialog" aria-modal="true" aria-labelledby="restart-confirm-title">
|
||
<div class="creds-dialog domain-narrow-dialog">
|
||
<div class="creds-header">
|
||
<span class="creds-title" id="restart-confirm-title">Restart the entire computer?</span>
|
||
</div>
|
||
<div class="creds-body">
|
||
<div id="restart-conflict-box" class="restart-conflict-box" style="display:none">
|
||
<p class="restart-conflict-title">The system cannot restart right now.</p>
|
||
<p class="restart-conflict-desc">A system update, rebuild, backup, restore, or security operation is currently running. Wait for it to finish, then try again.</p>
|
||
</div>
|
||
<p class="support-desc"><strong>This will reboot the physical machine running Sovran_SystemsOS — not just the Hub.</strong></p>
|
||
<p class="support-desc">The desktop and all hosted services will stop temporarily and restart with the computer. Anyone currently using these services will be disconnected.</p>
|
||
<p class="support-desc">The system usually returns within 1–3 minutes. This page will reconnect automatically.</p>
|
||
<div class="domain-field-actions">
|
||
<button class="btn btn-close-modal" id="restart-confirm-cancel-btn">Cancel</button>
|
||
<button class="btn btn-restart-amber" id="restart-confirm-ok-btn">Restart Entire System</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/static/js/constants.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/state.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/helpers.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/domain-prereqs.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/tiles.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/service-detail.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/support.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/update.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/rebuild.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/features.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/security.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/dashboard.js?v={{ asset_version }}"></script>
|
||
<script src="/static/js/events.js?v={{ asset_version }}"></script>
|
||
</body>
|
||
</html>
|