Add first-boot onboarding wizard (backend + frontend)
Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/d070c508-d5df-43c7-a0a6-a7be4c65fed7 Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
committed by
GitHub
GitHub
parent
3488a888de
commit
04d282f790
@@ -50,6 +50,8 @@ ZEUS_CONNECT_FILE = "/var/lib/secrets/zeus-connect-url"
|
||||
|
||||
REBOOT_COMMAND = ["reboot"]
|
||||
|
||||
ONBOARDING_FLAG = "/var/lib/sovran/onboarding-complete"
|
||||
|
||||
# ── Tech Support constants ────────────────────────────────────────
|
||||
|
||||
SUPPORT_KEY_FILE = "/root/.ssh/sovran_support_authorized"
|
||||
@@ -256,6 +258,7 @@ def _file_hash(filename: str) -> str:
|
||||
|
||||
_APP_JS_HASH = _file_hash("app.js")
|
||||
_STYLE_CSS_HASH = _file_hash("style.css")
|
||||
_ONBOARDING_JS_HASH = _file_hash("onboarding.js")
|
||||
|
||||
# ── Update check helpers ──────────────────────────────────────────
|
||||
|
||||
@@ -819,6 +822,32 @@ async def index(request: Request):
|
||||
})
|
||||
|
||||
|
||||
@app.get("/onboarding", response_class=HTMLResponse)
|
||||
async def onboarding(request: Request):
|
||||
return templates.TemplateResponse("onboarding.html", {
|
||||
"request": request,
|
||||
"onboarding_js_hash": _ONBOARDING_JS_HASH,
|
||||
"style_css_hash": _STYLE_CSS_HASH,
|
||||
})
|
||||
|
||||
|
||||
@app.get("/api/onboarding/status")
|
||||
async def api_onboarding_status():
|
||||
complete = os.path.exists(ONBOARDING_FLAG)
|
||||
return {"complete": complete}
|
||||
|
||||
|
||||
@app.post("/api/onboarding/complete")
|
||||
async def api_onboarding_complete():
|
||||
os.makedirs(os.path.dirname(ONBOARDING_FLAG), exist_ok=True)
|
||||
try:
|
||||
with open(ONBOARDING_FLAG, "w") as f:
|
||||
f.write("")
|
||||
except OSError as exc:
|
||||
raise HTTPException(status_code=500, detail=f"Could not write flag file: {exc}")
|
||||
return {"ok": True}
|
||||
|
||||
|
||||
@app.get("/api/config")
|
||||
async def api_config():
|
||||
cfg = load_config()
|
||||
|
||||
@@ -1475,6 +1475,17 @@ function _renderPortHealthBanner(data) {
|
||||
// ── Init ──────────────────────────────────────────────────────────
|
||||
|
||||
async function init() {
|
||||
// Check onboarding status first — redirect to wizard if not complete
|
||||
try {
|
||||
var onboardingStatus = await apiFetch("/api/onboarding/status");
|
||||
if (!onboardingStatus.complete) {
|
||||
window.location.href = "/onboarding";
|
||||
return;
|
||||
}
|
||||
} catch (_) {
|
||||
// If we can't reach the endpoint, continue to normal dashboard
|
||||
}
|
||||
|
||||
try {
|
||||
var cfg = await apiFetch("/api/config");
|
||||
if (cfg.category_order) {
|
||||
|
||||
731
app/sovran_systemsos_web/static/onboarding.js
Normal file
731
app/sovran_systemsos_web/static/onboarding.js
Normal file
@@ -0,0 +1,731 @@
|
||||
/* Sovran_SystemsOS Hub — First-Boot Onboarding Wizard
|
||||
Drives the 6-step post-install setup flow. */
|
||||
"use strict";
|
||||
|
||||
// ── Constants ─────────────────────────────────────────────────────
|
||||
|
||||
const TOTAL_STEPS = 6;
|
||||
|
||||
// Domains that may need configuration, with service unit mapping for enabled check
|
||||
const DOMAIN_DEFS = [
|
||||
{ name: "matrix", label: "Matrix (Synapse)", unit: "matrix-synapse.service", needsDdns: false },
|
||||
{ name: "haven", label: "Haven Nostr Relay", unit: "haven-relay.service", needsDdns: true },
|
||||
{ name: "element-calling", label: "Element Video/Audio Calling", unit: "livekit.service", needsDdns: true },
|
||||
{ name: "vaultwarden", label: "Vaultwarden (Password Vault)", unit: "vaultwarden.service", needsDdns: false },
|
||||
{ name: "btcpayserver", label: "BTCPay Server", unit: "btcpayserver.service", needsDdns: false },
|
||||
{ name: "nextcloud", label: "Nextcloud", unit: "phpfpm-nextcloud.service",needsDdns: false },
|
||||
{ name: "wordpress", label: "WordPress", unit: "phpfpm-wordpress.service",needsDdns: false },
|
||||
];
|
||||
|
||||
const REBUILD_POLL_INTERVAL = 2000;
|
||||
|
||||
// ── State ─────────────────────────────────────────────────────────
|
||||
|
||||
var _currentStep = 1;
|
||||
var _servicesData = null;
|
||||
var _domainsData = null;
|
||||
var _featuresData = null;
|
||||
|
||||
var _rebuildPollTimer = null;
|
||||
var _rebuildLogOffset = 0;
|
||||
var _rebuildFinished = false;
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────
|
||||
|
||||
function escHtml(str) {
|
||||
return String(str)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
async function apiFetch(path, options) {
|
||||
var res = await fetch(path, options || {});
|
||||
if (!res.ok) {
|
||||
var detail = res.status + " " + res.statusText;
|
||||
try {
|
||||
var body = await res.json();
|
||||
if (body && body.detail) detail = body.detail;
|
||||
} catch (e) {}
|
||||
throw new Error(detail);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function setStatus(elId, msg, type) {
|
||||
var el = document.getElementById(elId);
|
||||
if (!el) return;
|
||||
el.textContent = msg;
|
||||
el.className = "onboarding-save-status" + (type ? " onboarding-save-status--" + type : "");
|
||||
}
|
||||
|
||||
// ── Progress / step navigation ────────────────────────────────────
|
||||
|
||||
function updateProgress(step) {
|
||||
var fill = document.getElementById("onboarding-progress-fill");
|
||||
if (fill) {
|
||||
fill.style.width = Math.round(((step - 1) / (TOTAL_STEPS - 1)) * 100) + "%";
|
||||
}
|
||||
var dots = document.querySelectorAll(".onboarding-step-dot");
|
||||
dots.forEach(function(dot) {
|
||||
var ds = parseInt(dot.dataset.step, 10);
|
||||
dot.classList.remove("active", "completed");
|
||||
if (ds < step) dot.classList.add("completed");
|
||||
if (ds === step) dot.classList.add("active");
|
||||
});
|
||||
}
|
||||
|
||||
function showStep(step) {
|
||||
for (var i = 1; i <= TOTAL_STEPS; i++) {
|
||||
var panel = document.getElementById("step-" + i);
|
||||
if (panel) panel.style.display = (i === step) ? "" : "none";
|
||||
}
|
||||
_currentStep = step;
|
||||
updateProgress(step);
|
||||
|
||||
// Lazy-load step content
|
||||
if (step === 2) loadStep2();
|
||||
if (step === 3) loadStep3();
|
||||
if (step === 4) loadStep4();
|
||||
if (step === 5) loadStep5();
|
||||
}
|
||||
|
||||
// ── Step 1: Welcome ───────────────────────────────────────────────
|
||||
|
||||
async function loadStep1() {
|
||||
try {
|
||||
var cfg = await apiFetch("/api/config");
|
||||
var badge = document.getElementById("onboarding-role-badge");
|
||||
if (badge && cfg.role_label) badge.textContent = cfg.role_label;
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
// ── Step 2: Domain Configuration ─────────────────────────────────
|
||||
|
||||
async function loadStep2() {
|
||||
var body = document.getElementById("step-2-body");
|
||||
if (!body) return;
|
||||
|
||||
try {
|
||||
// Fetch services + domains in parallel
|
||||
var results = await Promise.all([
|
||||
apiFetch("/api/services"),
|
||||
apiFetch("/api/domains/status"),
|
||||
]);
|
||||
_servicesData = results[0];
|
||||
_domainsData = results[1];
|
||||
} catch (err) {
|
||||
body.innerHTML = '<p class="onboarding-error">⚠ Could not load service data: ' + escHtml(err.message) + '</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Build set of enabled service units
|
||||
var enabledUnits = new Set();
|
||||
(_servicesData || []).forEach(function(svc) {
|
||||
if (svc.enabled) enabledUnits.add(svc.unit);
|
||||
});
|
||||
|
||||
// Filter domain defs to only those whose service is enabled
|
||||
var relevantDomains = DOMAIN_DEFS.filter(function(d) {
|
||||
return enabledUnits.has(d.unit);
|
||||
});
|
||||
|
||||
var html = "";
|
||||
|
||||
if (relevantDomains.length === 0) {
|
||||
html += '<p class="onboarding-body-text">No domain-based services are enabled for your role. You can skip this step.</p>';
|
||||
} else {
|
||||
html += '<p class="onboarding-hint">Enter a fully-qualified domain name (e.g. <code>matrix.example.com</code>) for each service.</p>';
|
||||
relevantDomains.forEach(function(d) {
|
||||
var currentVal = (_domainsData && _domainsData[d.name]) || "";
|
||||
html += '<div class="onboarding-domain-group">';
|
||||
html += '<label class="onboarding-domain-label">' + escHtml(d.label) + '</label>';
|
||||
html += '<input class="onboarding-domain-input domain-field-input" type="text" id="domain-input-' + escHtml(d.name) + '" data-domain="' + escHtml(d.name) + '" placeholder="e.g. ' + escHtml(d.name) + '.yourdomain.com" value="' + escHtml(currentVal) + '" />';
|
||||
if (d.needsDdns) {
|
||||
html += '<label class="onboarding-domain-label onboarding-domain-label--sub">DDNS Update URL <span class="onboarding-optional">(optional)</span></label>';
|
||||
html += '<input class="onboarding-domain-input domain-field-input" type="text" id="ddns-input-' + escHtml(d.name) + '" data-ddns="' + escHtml(d.name) + '" placeholder="https://njal.la/update?...&auto" />';
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
}
|
||||
|
||||
// SSL email section
|
||||
var emailVal = (_domainsData && _domainsData["sslemail"]) || "";
|
||||
html += '<div class="onboarding-domain-group onboarding-domain-group--email">';
|
||||
html += '<label class="onboarding-domain-label">📧 SSL Certificate Email</label>';
|
||||
html += '<p class="onboarding-hint onboarding-hint--inline">Let\'s Encrypt uses this for certificate expiry notifications.</p>';
|
||||
html += '<input class="onboarding-domain-input domain-field-input" type="email" id="ssl-email-input" placeholder="you@example.com" value="' + escHtml(emailVal) + '" />';
|
||||
html += '</div>';
|
||||
|
||||
body.innerHTML = html;
|
||||
}
|
||||
|
||||
async function saveStep2() {
|
||||
setStatus("step-2-status", "Saving domains…", "info");
|
||||
var errors = [];
|
||||
|
||||
// Save each domain input
|
||||
var domainInputs = document.querySelectorAll("[data-domain]");
|
||||
for (var i = 0; i < domainInputs.length; i++) {
|
||||
var inp = domainInputs[i];
|
||||
var domainName = inp.dataset.domain;
|
||||
var domainVal = inp.value.trim();
|
||||
if (!domainVal) continue; // skip empty — not required
|
||||
|
||||
var ddnsInput = document.getElementById("ddns-input-" + domainName);
|
||||
var ddnsVal = ddnsInput ? ddnsInput.value.trim() : "";
|
||||
|
||||
try {
|
||||
await apiFetch("/api/domains/set", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ domain_name: domainName, domain: domainVal, ddns_url: ddnsVal }),
|
||||
});
|
||||
} catch (err) {
|
||||
errors.push(domainName + ": " + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Save SSL email
|
||||
var emailInput = document.getElementById("ssl-email-input");
|
||||
if (emailInput && emailInput.value.trim()) {
|
||||
try {
|
||||
await apiFetch("/api/domains/set-email", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: emailInput.value.trim() }),
|
||||
});
|
||||
} catch (err) {
|
||||
errors.push("SSL email: " + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
setStatus("step-2-status", "⚠ Some errors: " + errors.join("; "), "error");
|
||||
return false;
|
||||
}
|
||||
|
||||
setStatus("step-2-status", "✓ Saved", "ok");
|
||||
return true;
|
||||
}
|
||||
|
||||
// ── Step 3: Port Forwarding ───────────────────────────────────────
|
||||
|
||||
async function loadStep3() {
|
||||
var body = document.getElementById("step-3-body");
|
||||
if (!body) return;
|
||||
body.innerHTML = '<p class="onboarding-loading">Checking ports…</p>';
|
||||
|
||||
var networkData = null;
|
||||
var portHealth = null;
|
||||
|
||||
try {
|
||||
var results = await Promise.all([
|
||||
apiFetch("/api/network"),
|
||||
apiFetch("/api/ports/health"),
|
||||
]);
|
||||
networkData = results[0];
|
||||
portHealth = results[1];
|
||||
} catch (err) {
|
||||
body.innerHTML = '<p class="onboarding-error">⚠ Could not load port data: ' + escHtml(err.message) + '</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var internalIp = (networkData && networkData.internal_ip) || "unknown";
|
||||
|
||||
var html = '<div class="onboarding-port-ip">';
|
||||
html += ' <span class="onboarding-port-ip-label">Forward ports to this machine\'s internal IP:</span>';
|
||||
html += ' <span class="port-req-internal-ip">' + escHtml(internalIp) + '</span>';
|
||||
html += '</div>';
|
||||
|
||||
var status = (portHealth && portHealth.status) || "ok";
|
||||
var totalPorts = (portHealth && portHealth.total_ports) || 0;
|
||||
var closedPorts = (portHealth && portHealth.closed_ports) || 0;
|
||||
|
||||
if (totalPorts === 0) {
|
||||
html += '<p class="onboarding-body-text">No port requirements detected for your current role.</p>';
|
||||
} else if (status === "ok") {
|
||||
html += '<p class="onboarding-port-all-ok">✅ All ' + totalPorts + ' required ports are open and ready.</p>';
|
||||
} else {
|
||||
html += '<div class="onboarding-port-warn">';
|
||||
html += '⚠ ' + closedPorts + ' of ' + totalPorts + ' ports appear closed. ';
|
||||
html += 'You can continue, but affected services may not work until ports are forwarded.';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// Show per-service breakdown
|
||||
var affectedSvcs = (portHealth && portHealth.affected_services) || [];
|
||||
if (affectedSvcs.length > 0) {
|
||||
html += '<div class="onboarding-port-breakdown">';
|
||||
html += '<div class="onboarding-port-breakdown-title">Affected Services</div>';
|
||||
affectedSvcs.forEach(function(svc) {
|
||||
html += '<div class="onboarding-port-svc">';
|
||||
html += '<div class="onboarding-port-svc-name">' + escHtml(svc.name) + '</div>';
|
||||
(svc.closed_ports || []).forEach(function(p) {
|
||||
html += '<div class="onboarding-port-row">';
|
||||
html += ' <span class="port-status-closed">🔴</span>';
|
||||
html += ' <span class="port-req-port">' + escHtml(p.port) + '/' + escHtml(p.protocol) + '</span>';
|
||||
if (p.description) html += ' <span class="port-req-desc">' + escHtml(p.description) + '</span>';
|
||||
html += '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
// Full port table from services
|
||||
if (_servicesData) {
|
||||
// Collect all unique port requirements
|
||||
var allPorts = [];
|
||||
var seen = new Set();
|
||||
(_servicesData || []).forEach(function(svc) {
|
||||
(svc.port_requirements || []).forEach(function(p) {
|
||||
var key = p.port + "/" + p.protocol;
|
||||
if (!seen.has(key)) {
|
||||
seen.add(key);
|
||||
allPorts.push(p);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (allPorts.length > 0) {
|
||||
html += '<details class="onboarding-port-details">';
|
||||
html += '<summary class="onboarding-port-details-summary">View All Required Ports</summary>';
|
||||
html += '<table class="onboarding-port-table">';
|
||||
html += '<thead><tr><th>Port</th><th>Protocol</th><th>Purpose</th></tr></thead>';
|
||||
html += '<tbody>';
|
||||
allPorts.forEach(function(p) {
|
||||
html += '<tr>';
|
||||
html += '<td class="port-req-port">' + escHtml(p.port) + '</td>';
|
||||
html += '<td class="port-req-proto">' + escHtml(p.protocol) + '</td>';
|
||||
html += '<td class="port-req-desc">' + escHtml(p.description || "") + '</td>';
|
||||
html += '</tr>';
|
||||
});
|
||||
html += '</tbody></table>';
|
||||
html += '</details>';
|
||||
}
|
||||
}
|
||||
|
||||
body.innerHTML = html;
|
||||
}
|
||||
|
||||
// ── Step 4: Credentials ───────────────────────────────────────────
|
||||
|
||||
async function loadStep4() {
|
||||
var body = document.getElementById("step-4-body");
|
||||
if (!body) return;
|
||||
body.innerHTML = '<p class="onboarding-loading">Loading credentials…</p>';
|
||||
|
||||
if (!_servicesData) {
|
||||
try {
|
||||
_servicesData = await apiFetch("/api/services");
|
||||
} catch (err) {
|
||||
body.innerHTML = '<p class="onboarding-error">⚠ Could not load services: ' + escHtml(err.message) + '</p>';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Find services with credentials that are enabled
|
||||
var credsServices = (_servicesData || []).filter(function(svc) {
|
||||
return svc.has_credentials && svc.enabled;
|
||||
});
|
||||
|
||||
if (credsServices.length === 0) {
|
||||
body.innerHTML = '<p class="onboarding-body-text">No credentials found for your current configuration.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
body.innerHTML = '<p class="onboarding-loading">Loading credentials…</p>';
|
||||
|
||||
// Fetch all credentials in parallel
|
||||
var fetches = credsServices.map(function(svc) {
|
||||
return apiFetch("/api/credentials/" + encodeURIComponent(svc.unit))
|
||||
.then(function(data) { return { svc: svc, data: data, error: null }; })
|
||||
.catch(function(err) { return { svc: svc, data: null, error: err.message }; });
|
||||
});
|
||||
var allCreds = await Promise.all(fetches);
|
||||
|
||||
// Group by category
|
||||
var CATEGORY_ORDER_LOCAL = [
|
||||
["infrastructure", "🔧 Infrastructure"],
|
||||
["bitcoin-base", "₿ Bitcoin Base"],
|
||||
["bitcoin-apps", "₿ Bitcoin Apps"],
|
||||
["communication", "💬 Communication"],
|
||||
["apps", "📦 Self-Hosted Apps"],
|
||||
["nostr", "📡 Nostr"],
|
||||
];
|
||||
|
||||
var grouped = {};
|
||||
allCreds.forEach(function(item) {
|
||||
var cat = item.svc.category || "other";
|
||||
if (!grouped[cat]) grouped[cat] = [];
|
||||
grouped[cat].push(item);
|
||||
});
|
||||
|
||||
var html = '<div class="onboarding-creds-notice">💡 Save these credentials somewhere safe. You can always view them again from the Hub dashboard.</div>';
|
||||
|
||||
CATEGORY_ORDER_LOCAL.forEach(function(pair) {
|
||||
var catKey = pair[0];
|
||||
var catLabel = pair[1];
|
||||
if (!grouped[catKey] || grouped[catKey].length === 0) return;
|
||||
|
||||
html += '<div class="onboarding-creds-category">';
|
||||
html += '<div class="onboarding-creds-category-title">' + escHtml(catLabel) + '</div>';
|
||||
|
||||
grouped[catKey].forEach(function(item) {
|
||||
html += '<div class="onboarding-creds-service">';
|
||||
html += '<div class="onboarding-creds-service-name">' + escHtml(item.svc.name) + '</div>';
|
||||
|
||||
if (item.error) {
|
||||
html += '<p class="onboarding-error">⚠ ' + escHtml(item.error) + '</p>';
|
||||
} else if (item.data && item.data.credentials) {
|
||||
item.data.credentials.forEach(function(cred) {
|
||||
html += '<div class="onboarding-cred-row">';
|
||||
html += '<span class="onboarding-cred-label">' + escHtml(cred.label || "") + '</span>';
|
||||
if (cred.value) {
|
||||
var isSecret = /password|secret|key|token/i.test(cred.label || "");
|
||||
if (isSecret) {
|
||||
html += '<span class="onboarding-cred-value onboarding-cred-secret" title="Click to reveal">'
|
||||
+ '<span class="onboarding-cred-hidden">••••••••</span>'
|
||||
+ '<span class="onboarding-cred-real" style="display:none">' + escHtml(cred.value) + '</span>'
|
||||
+ '<button class="onboarding-cred-reveal-btn">Show</button>'
|
||||
+ '</span>';
|
||||
} else {
|
||||
html += '<span class="onboarding-cred-value">' + escHtml(cred.value) + '</span>';
|
||||
}
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
// Remaining categories not in the order
|
||||
Object.keys(grouped).forEach(function(catKey) {
|
||||
var inOrder = CATEGORY_ORDER_LOCAL.some(function(p) { return p[0] === catKey; });
|
||||
if (inOrder || !grouped[catKey] || grouped[catKey].length === 0) return;
|
||||
|
||||
html += '<div class="onboarding-creds-category">';
|
||||
html += '<div class="onboarding-creds-category-title">' + escHtml(catKey) + '</div>';
|
||||
grouped[catKey].forEach(function(item) {
|
||||
html += '<div class="onboarding-creds-service">';
|
||||
html += '<div class="onboarding-creds-service-name">' + escHtml(item.svc.name) + '</div>';
|
||||
if (item.error) {
|
||||
html += '<p class="onboarding-error">⚠ ' + escHtml(item.error) + '</p>';
|
||||
} else if (item.data && item.data.credentials) {
|
||||
item.data.credentials.forEach(function(cred) {
|
||||
if (cred.value) {
|
||||
html += '<div class="onboarding-cred-row">';
|
||||
html += '<span class="onboarding-cred-label">' + escHtml(cred.label || "") + '</span>';
|
||||
html += '<span class="onboarding-cred-value">' + escHtml(cred.value) + '</span>';
|
||||
html += '</div>';
|
||||
}
|
||||
});
|
||||
}
|
||||
html += '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
body.innerHTML = html;
|
||||
|
||||
// Wire up reveal buttons
|
||||
body.querySelectorAll(".onboarding-cred-secret").forEach(function(el) {
|
||||
var btn = el.querySelector(".onboarding-cred-reveal-btn");
|
||||
var hidden = el.querySelector(".onboarding-cred-hidden");
|
||||
var real = el.querySelector(".onboarding-cred-real");
|
||||
if (!btn || !hidden || !real) return;
|
||||
btn.addEventListener("click", function() {
|
||||
if (real.style.display === "none") {
|
||||
real.style.display = "";
|
||||
hidden.style.display = "none";
|
||||
btn.textContent = "Hide";
|
||||
} else {
|
||||
real.style.display = "none";
|
||||
hidden.style.display = "";
|
||||
btn.textContent = "Show";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ── Step 5: Feature Manager ───────────────────────────────────────
|
||||
|
||||
async function loadStep5() {
|
||||
var body = document.getElementById("step-5-body");
|
||||
if (!body) return;
|
||||
body.innerHTML = '<p class="onboarding-loading">Loading features…</p>';
|
||||
|
||||
try {
|
||||
_featuresData = await apiFetch("/api/features");
|
||||
} catch (err) {
|
||||
body.innerHTML = '<p class="onboarding-error">⚠ Could not load features: ' + escHtml(err.message) + '</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
renderFeaturesStep(_featuresData);
|
||||
}
|
||||
|
||||
function renderFeaturesStep(data) {
|
||||
var body = document.getElementById("step-5-body");
|
||||
if (!body) return;
|
||||
|
||||
var SUBCATEGORY_LABELS = {
|
||||
"infrastructure": "🔧 Infrastructure",
|
||||
"bitcoin": "₿ Bitcoin",
|
||||
"communication": "💬 Communication",
|
||||
"nostr": "📡 Nostr",
|
||||
};
|
||||
|
||||
var SUBCATEGORY_ORDER = ["infrastructure", "bitcoin", "communication", "nostr"];
|
||||
|
||||
var grouped = {};
|
||||
(data.features || []).forEach(function(f) {
|
||||
var cat = f.category || "other";
|
||||
if (!grouped[cat]) grouped[cat] = [];
|
||||
grouped[cat].push(f);
|
||||
});
|
||||
|
||||
var html = "";
|
||||
var orderedCats = SUBCATEGORY_ORDER.filter(function(k) { return grouped[k]; });
|
||||
Object.keys(grouped).forEach(function(k) {
|
||||
if (orderedCats.indexOf(k) === -1) orderedCats.push(k);
|
||||
});
|
||||
|
||||
orderedCats.forEach(function(catKey) {
|
||||
var feats = grouped[catKey];
|
||||
if (!feats || feats.length === 0) return;
|
||||
|
||||
var catLabel = SUBCATEGORY_LABELS[catKey] || catKey;
|
||||
html += '<div class="onboarding-feat-group">';
|
||||
html += '<div class="onboarding-feat-group-title">' + escHtml(catLabel) + '</div>';
|
||||
|
||||
feats.forEach(function(feat) {
|
||||
var domainHtml = "";
|
||||
if (feat.needs_domain) {
|
||||
if (feat.domain_configured) {
|
||||
domainHtml = '<span class="onboarding-feat-domain onboarding-feat-domain--ok">🌐 Domain configured</span>';
|
||||
} else {
|
||||
domainHtml = '<span class="onboarding-feat-domain onboarding-feat-domain--missing">🌐 Domain not set</span>';
|
||||
}
|
||||
}
|
||||
|
||||
html += '<div class="onboarding-feat-card" id="feat-card-' + escHtml(feat.id) + '">';
|
||||
html += '<div class="onboarding-feat-info">';
|
||||
html += '<div class="onboarding-feat-name">' + escHtml(feat.name) + '</div>';
|
||||
html += '<div class="onboarding-feat-desc">' + escHtml(feat.description) + '</div>';
|
||||
html += domainHtml;
|
||||
html += '</div>';
|
||||
html += '<label class="feature-toggle' + (feat.enabled ? " active" : "") + '" title="Toggle ' + escHtml(feat.name) + '">';
|
||||
html += '<input type="checkbox" class="feature-toggle-input" data-feat-id="' + escHtml(feat.id) + '"' + (feat.enabled ? " checked" : "") + ' />';
|
||||
html += '<span class="feature-toggle-slider"></span>';
|
||||
html += '</label>';
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
body.innerHTML = html;
|
||||
|
||||
// Wire up toggles
|
||||
body.querySelectorAll(".feature-toggle-input").forEach(function(input) {
|
||||
var featId = input.dataset.featId;
|
||||
var label = input.closest(".feature-toggle");
|
||||
var feat = (data.features || []).find(function(f) { return f.id === featId; });
|
||||
if (!feat) return;
|
||||
|
||||
input.addEventListener("change", function() {
|
||||
var newEnabled = input.checked;
|
||||
// Revert UI until confirmed/done
|
||||
input.checked = feat.enabled;
|
||||
if (newEnabled) { if (label) label.classList.remove("active"); }
|
||||
else { if (label) label.classList.add("active"); }
|
||||
|
||||
handleFeatureToggleStep5(feat, newEnabled, input, label);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function handleFeatureToggleStep5(feat, newEnabled, inputEl, labelEl) {
|
||||
setStatus("step-5-rebuild-status", "Saving…", "info");
|
||||
|
||||
// Collect nostr_npub if needed
|
||||
var extra = {};
|
||||
if (newEnabled && feat.id === "haven") {
|
||||
var npub = prompt("Enter your Nostr public key (npub1…):");
|
||||
if (!npub || !npub.trim()) {
|
||||
setStatus("step-5-rebuild-status", "⚠ npub required for Haven", "error");
|
||||
return;
|
||||
}
|
||||
extra.nostr_npub = npub.trim();
|
||||
}
|
||||
|
||||
try {
|
||||
await apiFetch("/api/features/toggle", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ feature: feat.id, enabled: newEnabled, extra: extra }),
|
||||
});
|
||||
} catch (err) {
|
||||
setStatus("step-5-rebuild-status", "⚠ " + err.message, "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// Update local state
|
||||
feat.enabled = newEnabled;
|
||||
if (inputEl) inputEl.checked = newEnabled;
|
||||
if (labelEl) {
|
||||
if (newEnabled) labelEl.classList.add("active");
|
||||
else labelEl.classList.remove("active");
|
||||
}
|
||||
|
||||
setStatus("step-5-rebuild-status", "✓ Feature updated — system rebuild started", "ok");
|
||||
startRebuildPoll();
|
||||
}
|
||||
|
||||
// ── Rebuild progress polling ──────────────────────────────────────
|
||||
|
||||
function startRebuildPoll() {
|
||||
_rebuildLogOffset = 0;
|
||||
_rebuildFinished = false;
|
||||
|
||||
var modal = document.getElementById("ob-rebuild-modal");
|
||||
var statusEl = document.getElementById("ob-rebuild-status");
|
||||
var logEl = document.getElementById("ob-rebuild-log");
|
||||
var closeBtn = document.getElementById("ob-rebuild-close");
|
||||
var spinner = document.getElementById("ob-rebuild-spinner");
|
||||
|
||||
if (modal) modal.style.display = "flex";
|
||||
if (statusEl) statusEl.textContent = "Rebuilding…";
|
||||
if (logEl) logEl.textContent = "";
|
||||
if (closeBtn) closeBtn.disabled = true;
|
||||
if (spinner) spinner.style.display = "";
|
||||
|
||||
if (_rebuildPollTimer) clearInterval(_rebuildPollTimer);
|
||||
_rebuildPollTimer = setInterval(pollRebuild, REBUILD_POLL_INTERVAL);
|
||||
}
|
||||
|
||||
async function pollRebuild() {
|
||||
if (_rebuildFinished) {
|
||||
clearInterval(_rebuildPollTimer);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
var data = await apiFetch("/api/rebuild/status?offset=" + _rebuildLogOffset);
|
||||
var logEl = document.getElementById("ob-rebuild-log");
|
||||
var statusEl = document.getElementById("ob-rebuild-status");
|
||||
var closeBtn = document.getElementById("ob-rebuild-close");
|
||||
var spinner = document.getElementById("ob-rebuild-spinner");
|
||||
|
||||
if (data.log && logEl) {
|
||||
logEl.textContent += data.log;
|
||||
logEl.scrollTop = logEl.scrollHeight;
|
||||
_rebuildLogOffset = data.offset || _rebuildLogOffset;
|
||||
}
|
||||
|
||||
if (!data.running) {
|
||||
_rebuildFinished = true;
|
||||
clearInterval(_rebuildPollTimer);
|
||||
if (data.result === "success" || data.result === "ok") {
|
||||
if (statusEl) statusEl.textContent = "✓ Rebuild complete";
|
||||
if (spinner) spinner.style.display = "none";
|
||||
setStatus("step-5-rebuild-status", "✓ Rebuild complete", "ok");
|
||||
} else {
|
||||
if (statusEl) statusEl.textContent = "⚠ Rebuild finished with issues";
|
||||
if (spinner) spinner.style.display = "none";
|
||||
setStatus("step-5-rebuild-status", "⚠ Rebuild finished with issues — see log", "error");
|
||||
}
|
||||
if (closeBtn) closeBtn.disabled = false;
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
// ── Step 6: Complete ──────────────────────────────────────────────
|
||||
|
||||
async function completeOnboarding() {
|
||||
var btn = document.getElementById("step-6-finish");
|
||||
if (btn) { btn.disabled = true; btn.textContent = "Finishing…"; }
|
||||
|
||||
try {
|
||||
await apiFetch("/api/onboarding/complete", { method: "POST" });
|
||||
} catch (_) {
|
||||
// Even if this fails, navigate to dashboard
|
||||
}
|
||||
|
||||
window.location.href = "/";
|
||||
}
|
||||
|
||||
// ── Event wiring ──────────────────────────────────────────────────
|
||||
|
||||
function wireNavButtons() {
|
||||
// Step 1 → 2
|
||||
var s1next = document.getElementById("step-1-next");
|
||||
if (s1next) s1next.addEventListener("click", function() { showStep(2); });
|
||||
|
||||
// Step 2 → 3 (save first)
|
||||
var s2next = document.getElementById("step-2-next");
|
||||
if (s2next) s2next.addEventListener("click", async function() {
|
||||
s2next.disabled = true;
|
||||
s2next.textContent = "Saving…";
|
||||
await saveStep2();
|
||||
s2next.disabled = false;
|
||||
s2next.textContent = "Save & Continue →";
|
||||
showStep(3);
|
||||
});
|
||||
|
||||
// Step 3 → 4
|
||||
var s3next = document.getElementById("step-3-next");
|
||||
if (s3next) s3next.addEventListener("click", function() { showStep(4); });
|
||||
|
||||
// Step 4 → 5
|
||||
var s4next = document.getElementById("step-4-next");
|
||||
if (s4next) s4next.addEventListener("click", function() { showStep(5); });
|
||||
|
||||
// Step 5 → 6
|
||||
var s5next = document.getElementById("step-5-next");
|
||||
if (s5next) s5next.addEventListener("click", function() { showStep(6); });
|
||||
|
||||
// Step 6: finish
|
||||
var s6finish = document.getElementById("step-6-finish");
|
||||
if (s6finish) s6finish.addEventListener("click", completeOnboarding);
|
||||
|
||||
// Back buttons
|
||||
document.querySelectorAll(".onboarding-btn-back").forEach(function(btn) {
|
||||
var prev = parseInt(btn.dataset.prev, 10);
|
||||
btn.addEventListener("click", function() { showStep(prev); });
|
||||
});
|
||||
|
||||
// Rebuild modal close
|
||||
var rebuildClose = document.getElementById("ob-rebuild-close");
|
||||
if (rebuildClose) {
|
||||
rebuildClose.addEventListener("click", function() {
|
||||
var modal = document.getElementById("ob-rebuild-modal");
|
||||
if (modal) modal.style.display = "none";
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ── Init ──────────────────────────────────────────────────────────
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async function() {
|
||||
// If onboarding is already complete, go to dashboard
|
||||
try {
|
||||
var status = await apiFetch("/api/onboarding/status");
|
||||
if (status.complete) {
|
||||
window.location.href = "/";
|
||||
return;
|
||||
}
|
||||
} catch (_) {}
|
||||
|
||||
wireNavButtons();
|
||||
updateProgress(1);
|
||||
loadStep1();
|
||||
});
|
||||
@@ -1684,3 +1684,600 @@ button.btn-reboot:hover:not(:disabled) {
|
||||
.sidebar .section-header {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* ── Onboarding Wizard ────────────────────────────────────────── */
|
||||
|
||||
.onboarding-body {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
background-color: var(--bg-color);
|
||||
min-height: 100vh;
|
||||
padding: 32px 16px 64px;
|
||||
}
|
||||
|
||||
.onboarding-shell {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
|
||||
.onboarding-progress-bar {
|
||||
height: 4px;
|
||||
background-color: var(--border-color);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.onboarding-progress-fill {
|
||||
height: 100%;
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s ease;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
/* Step dots */
|
||||
|
||||
.onboarding-steps-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.onboarding-step-dot {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--card-color);
|
||||
border: 2px solid var(--border-color);
|
||||
color: var(--text-dim);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.onboarding-step-dot.active {
|
||||
background-color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
color: #1e1e2e;
|
||||
}
|
||||
|
||||
.onboarding-step-dot.completed {
|
||||
background-color: #2ec27e;
|
||||
border-color: #2ec27e;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.onboarding-step-connector {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background-color: var(--border-color);
|
||||
max-width: 60px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
|
||||
.onboarding-panel-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.onboarding-panel {
|
||||
animation: ob-fadein 0.25s ease;
|
||||
}
|
||||
|
||||
@keyframes ob-fadein {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Hero (steps 1 and 6) */
|
||||
|
||||
.onboarding-hero {
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.onboarding-logo {
|
||||
font-size: 3.5rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.onboarding-title {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.onboarding-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--accent-color);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Step header (steps 2-5) */
|
||||
|
||||
.onboarding-step-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.onboarding-step-icon {
|
||||
font-size: 2rem;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.onboarding-step-title {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.onboarding-step-desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
|
||||
.onboarding-card {
|
||||
background-color: var(--card-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.onboarding-card--scroll {
|
||||
max-height: 440px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.onboarding-body-text {
|
||||
font-size: 0.92rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.onboarding-body-text--dim {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.onboarding-body-text:last-child { margin-bottom: 0; }
|
||||
|
||||
/* Role badge */
|
||||
|
||||
.onboarding-role-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.onboarding-role-label {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.onboarding-role-badge {
|
||||
background-color: var(--accent-color);
|
||||
color: #1e1e2e;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
padding: 3px 12px;
|
||||
border-radius: 20px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Checklist */
|
||||
|
||||
.onboarding-checklist {
|
||||
list-style: none;
|
||||
margin: 16px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.onboarding-checklist li {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Footer navigation */
|
||||
|
||||
.onboarding-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.onboarding-btn-next,
|
||||
.onboarding-btn-back {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* Status messages */
|
||||
|
||||
.onboarding-save-status {
|
||||
font-size: 0.85rem;
|
||||
min-height: 1.4em;
|
||||
margin-bottom: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.onboarding-save-status--ok {
|
||||
color: #a6e3a1;
|
||||
}
|
||||
|
||||
.onboarding-save-status--error {
|
||||
color: #f38ba8;
|
||||
}
|
||||
|
||||
.onboarding-save-status--info {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Loading / error states */
|
||||
|
||||
.onboarding-loading {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.onboarding-error {
|
||||
font-size: 0.88rem;
|
||||
color: #f38ba8;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
/* Hints */
|
||||
|
||||
.onboarding-hint {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.onboarding-hint code {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
background: rgba(137, 180, 250, 0.1);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.onboarding-hint--inline {
|
||||
margin-bottom: 6px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.onboarding-optional {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Domain inputs */
|
||||
|
||||
.onboarding-domain-group {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.onboarding-domain-group--email {
|
||||
border-top: 1px solid var(--border-color);
|
||||
padding-top: 18px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.onboarding-domain-label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.onboarding-domain-label--sub {
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.onboarding-domain-input {
|
||||
width: 100%;
|
||||
background-color: var(--surface-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-btn);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.88rem;
|
||||
padding: 8px 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.onboarding-domain-input:focus {
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Port forwarding */
|
||||
|
||||
.onboarding-port-ip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
background: rgba(137, 180, 250, 0.06);
|
||||
border: 1px solid rgba(137, 180, 250, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.onboarding-port-ip-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.onboarding-port-all-ok {
|
||||
color: #a6e3a1;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.onboarding-port-warn {
|
||||
background: rgba(229, 165, 10, 0.08);
|
||||
border: 1px solid rgba(229, 165, 10, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.onboarding-port-breakdown {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.onboarding-port-breakdown-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.onboarding-port-svc {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.onboarding-port-svc-name {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.onboarding-port-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 2px 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.onboarding-port-details {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.onboarding-port-details-summary {
|
||||
font-size: 0.82rem;
|
||||
color: var(--accent-color);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.onboarding-port-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.onboarding-port-table th {
|
||||
text-align: left;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-dim);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.onboarding-port-table td {
|
||||
padding: 4px 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Credentials */
|
||||
|
||||
.onboarding-creds-notice {
|
||||
background: rgba(137, 180, 250, 0.06);
|
||||
border: 1px solid rgba(137, 180, 250, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.onboarding-creds-category {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.onboarding-creds-category-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.onboarding-creds-service {
|
||||
background: var(--surface-color);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.onboarding-creds-service-name {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.onboarding-cred-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 3px 0;
|
||||
font-size: 0.85rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.onboarding-cred-label {
|
||||
color: var(--text-dim);
|
||||
font-weight: 600;
|
||||
min-width: 100px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.onboarding-cred-value {
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.onboarding-cred-secret {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.onboarding-cred-hidden {
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.onboarding-cred-reveal-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
color: var(--accent-color);
|
||||
font-size: 0.72rem;
|
||||
padding: 1px 6px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.onboarding-cred-reveal-btn:hover {
|
||||
background-color: rgba(137, 180, 250, 0.1);
|
||||
}
|
||||
|
||||
/* Feature step */
|
||||
|
||||
.onboarding-feat-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.onboarding-feat-group-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.onboarding-feat-card {
|
||||
background: var(--surface-color);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.onboarding-feat-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.onboarding-feat-name {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.onboarding-feat-desc {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.onboarding-feat-domain {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.onboarding-feat-domain--ok {
|
||||
background: rgba(46, 194, 126, 0.12);
|
||||
color: #a6e3a1;
|
||||
}
|
||||
|
||||
.onboarding-feat-domain--missing {
|
||||
background: rgba(229, 165, 10, 0.1);
|
||||
color: #f9e2af;
|
||||
}
|
||||
|
||||
|
||||
199
app/sovran_systemsos_web/templates/onboarding.html
Normal file
199
app/sovran_systemsos_web/templates/onboarding.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sovran_SystemsOS — First-Boot Setup</title>
|
||||
<link rel="stylesheet" href="/static/style.css?v={{ style_css_hash }}" />
|
||||
</head>
|
||||
<body class="onboarding-body">
|
||||
|
||||
<!-- Onboarding wizard container -->
|
||||
<div class="onboarding-shell">
|
||||
|
||||
<!-- Progress bar -->
|
||||
<div class="onboarding-progress-bar">
|
||||
<div class="onboarding-progress-fill" id="onboarding-progress-fill"></div>
|
||||
</div>
|
||||
|
||||
<!-- Step indicators -->
|
||||
<div class="onboarding-steps-nav" id="onboarding-steps-nav">
|
||||
<span class="onboarding-step-dot" data-step="1">1</span>
|
||||
<span class="onboarding-step-connector"></span>
|
||||
<span class="onboarding-step-dot" data-step="2">2</span>
|
||||
<span class="onboarding-step-connector"></span>
|
||||
<span class="onboarding-step-dot" data-step="3">3</span>
|
||||
<span class="onboarding-step-connector"></span>
|
||||
<span class="onboarding-step-dot" data-step="4">4</span>
|
||||
<span class="onboarding-step-connector"></span>
|
||||
<span class="onboarding-step-dot" data-step="5">5</span>
|
||||
<span class="onboarding-step-connector"></span>
|
||||
<span class="onboarding-step-dot" data-step="6">6</span>
|
||||
</div>
|
||||
|
||||
<!-- Step panels -->
|
||||
<div class="onboarding-panel-wrap">
|
||||
|
||||
<!-- ── Step 1: Welcome ── -->
|
||||
<div class="onboarding-panel" id="step-1">
|
||||
<div class="onboarding-hero">
|
||||
<div class="onboarding-logo">🛡️</div>
|
||||
<h1 class="onboarding-title">Welcome to Sovran_SystemsOS!</h1>
|
||||
<p class="onboarding-subtitle">Be Digitally Sovereign</p>
|
||||
</div>
|
||||
<div class="onboarding-card">
|
||||
<p class="onboarding-body-text">
|
||||
Your system is installed and ready to configure. This wizard will guide
|
||||
you through the final setup steps so everything works perfectly.
|
||||
</p>
|
||||
<div class="onboarding-role-row" id="onboarding-role-row">
|
||||
<span class="onboarding-role-label">Your Role:</span>
|
||||
<span class="onboarding-role-badge" id="onboarding-role-badge">Loading…</span>
|
||||
</div>
|
||||
<p class="onboarding-body-text onboarding-body-text--dim">
|
||||
This setup only takes a few minutes. You can always revisit these
|
||||
settings from the main Hub dashboard.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboarding-footer">
|
||||
<div></div>
|
||||
<button class="btn btn-primary onboarding-btn-next" id="step-1-next">
|
||||
Let's Go →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Step 2: Domain Configuration ── -->
|
||||
<div class="onboarding-panel" id="step-2" style="display:none">
|
||||
<div class="onboarding-step-header">
|
||||
<span class="onboarding-step-icon">🌐</span>
|
||||
<h2 class="onboarding-step-title">Domain Configuration</h2>
|
||||
<p class="onboarding-step-desc">
|
||||
Enter the domain names for your services. If you're using dynamic DNS,
|
||||
also provide your DDNS update URL.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboarding-card onboarding-card--scroll" id="step-2-body">
|
||||
<p class="onboarding-loading">Loading service information…</p>
|
||||
</div>
|
||||
<div id="step-2-status" class="onboarding-save-status"></div>
|
||||
<div class="onboarding-footer">
|
||||
<button class="btn btn-close-modal onboarding-btn-back" data-prev="1">← Back</button>
|
||||
<button class="btn btn-primary onboarding-btn-next" id="step-2-next">
|
||||
Save & Continue →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Step 3: Port Forwarding ── -->
|
||||
<div class="onboarding-panel" id="step-3" style="display:none">
|
||||
<div class="onboarding-step-header">
|
||||
<span class="onboarding-step-icon">🔌</span>
|
||||
<h2 class="onboarding-step-title">Port Forwarding Check</h2>
|
||||
<p class="onboarding-step-desc">
|
||||
Your router must forward these ports to this machine. Configure port
|
||||
forwarding in your router's admin panel pointing to the internal IP shown below.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboarding-card onboarding-card--scroll" id="step-3-body">
|
||||
<p class="onboarding-loading">Checking ports…</p>
|
||||
</div>
|
||||
<div class="onboarding-footer">
|
||||
<button class="btn btn-close-modal onboarding-btn-back" data-prev="2">← Back</button>
|
||||
<button class="btn btn-primary onboarding-btn-next" id="step-3-next">
|
||||
Continue →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Step 4: Credentials ── -->
|
||||
<div class="onboarding-panel" id="step-4" style="display:none">
|
||||
<div class="onboarding-step-header">
|
||||
<span class="onboarding-step-icon">🔑</span>
|
||||
<h2 class="onboarding-step-title">Your Credentials</h2>
|
||||
<p class="onboarding-step-desc">
|
||||
These are your generated service passwords. Save them somewhere safe —
|
||||
the Hub is your permanent credentials viewer.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboarding-card onboarding-card--scroll" id="step-4-body">
|
||||
<p class="onboarding-loading">Loading credentials…</p>
|
||||
</div>
|
||||
<div class="onboarding-footer">
|
||||
<button class="btn btn-close-modal onboarding-btn-back" data-prev="3">← Back</button>
|
||||
<button class="btn btn-primary onboarding-btn-next" id="step-4-next">
|
||||
Continue →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Step 5: Feature Manager ── -->
|
||||
<div class="onboarding-panel" id="step-5" style="display:none">
|
||||
<div class="onboarding-step-header">
|
||||
<span class="onboarding-step-icon">⚙️</span>
|
||||
<h2 class="onboarding-step-title">Feature Manager</h2>
|
||||
<p class="onboarding-step-desc">
|
||||
Enable or disable optional features. Toggling a feature will start
|
||||
a system rebuild in the background.
|
||||
</p>
|
||||
</div>
|
||||
<div class="onboarding-card onboarding-card--scroll" id="step-5-body">
|
||||
<p class="onboarding-loading">Loading features…</p>
|
||||
</div>
|
||||
<div id="step-5-rebuild-status" class="onboarding-save-status"></div>
|
||||
<div class="onboarding-footer">
|
||||
<button class="btn btn-close-modal onboarding-btn-back" data-prev="4">← Back</button>
|
||||
<button class="btn btn-primary onboarding-btn-next" id="step-5-next">
|
||||
Continue →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Step 6: Complete ── -->
|
||||
<div class="onboarding-panel" id="step-6" style="display:none">
|
||||
<div class="onboarding-hero">
|
||||
<div class="onboarding-logo">✅</div>
|
||||
<h1 class="onboarding-title">Your Sovran_SystemsOS is Ready!</h1>
|
||||
<p class="onboarding-subtitle">Setup complete</p>
|
||||
</div>
|
||||
<div class="onboarding-card">
|
||||
<p class="onboarding-body-text">
|
||||
All configuration steps are done. Head to the main Hub dashboard to
|
||||
monitor your services, manage credentials, and make changes at any time.
|
||||
</p>
|
||||
<ul class="onboarding-checklist" id="onboarding-checklist">
|
||||
<li>✅ Domain configuration saved</li>
|
||||
<li>✅ Port forwarding reviewed</li>
|
||||
<li>✅ Credentials noted</li>
|
||||
<li>✅ Features configured</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="onboarding-footer">
|
||||
<button class="btn btn-close-modal onboarding-btn-back" data-prev="5">← Back</button>
|
||||
<button class="btn btn-primary" id="step-6-finish">
|
||||
Go to Dashboard →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /panel-wrap -->
|
||||
</div><!-- /shell -->
|
||||
|
||||
<!-- Rebuild progress modal (reused from main app) -->
|
||||
<div class="modal-overlay" id="ob-rebuild-modal" role="dialog" aria-modal="true" aria-labelledby="ob-rebuild-title">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title" id="ob-rebuild-title">Rebuilding System…</span>
|
||||
<div class="modal-spinner" id="ob-rebuild-spinner"></div>
|
||||
<span class="modal-status" id="ob-rebuild-status">Please wait</span>
|
||||
</div>
|
||||
<div class="modal-log" id="ob-rebuild-log" aria-live="polite"></div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-close-modal" id="ob-rebuild-close" disabled>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/onboarding.js?v={{ onboarding_js_hash }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user