224 lines
7.6 KiB
JavaScript
Executable File
224 lines
7.6 KiB
JavaScript
Executable File
// Soleprint Sidebar - Self-Injecting Script
|
|
// Matches the original Jinja2 sidebar look
|
|
|
|
(function () {
|
|
"use strict";
|
|
|
|
// Soleprint routes are at root (no prefix)
|
|
const SPR_BASE = "";
|
|
|
|
let config = null;
|
|
let user = null;
|
|
|
|
let expanded = localStorage.getItem("spr_sidebar_expanded") === "true";
|
|
|
|
// Icons as SVG strings
|
|
const icons = {
|
|
toggle: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<path d="M9 3v18M3 9h6"/>
|
|
</svg>`,
|
|
home: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3m10-11v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1"/>
|
|
</svg>`,
|
|
soleprint: `<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<ellipse cx="8" cy="10" rx="3" ry="5" transform="rotate(-10 8 10)"/>
|
|
<ellipse cx="8" cy="17" rx="2.5" ry="3" transform="rotate(-10 8 17)"/>
|
|
<ellipse cx="16" cy="8" rx="3" ry="5" transform="rotate(10 16 8)"/>
|
|
<ellipse cx="16" cy="15" rx="2.5" ry="3" transform="rotate(10 16 15)"/>
|
|
</svg>`,
|
|
artery: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2v8M12 10L6 18M12 10l6 8"/>
|
|
<circle cx="12" cy="10" r="2"/>
|
|
</svg>`,
|
|
atlas: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="8"/>
|
|
<path d="M12 4v16M4 12h16"/>
|
|
</svg>`,
|
|
station: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="4" y="6" width="16" height="12" rx="1"/>
|
|
<circle cx="9" cy="11" r="2"/>
|
|
<circle cx="15" cy="11" r="2"/>
|
|
</svg>`,
|
|
google: `<svg viewBox="0 0 24 24">
|
|
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
|
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
|
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
|
</svg>`,
|
|
user: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="8" r="4"/>
|
|
<path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>
|
|
</svg>`,
|
|
logout: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
|
|
</svg>`,
|
|
};
|
|
|
|
async function init() {
|
|
try {
|
|
// Load config using dynamic base URL
|
|
const response = await fetch(`${SPR_BASE}/api/sidebar/config`);
|
|
config = await response.json();
|
|
|
|
// Check auth status
|
|
await checkAuth();
|
|
|
|
// Create sidebar
|
|
createSidebar();
|
|
|
|
console.log("[Soleprint] Sidebar initialized for room:", config.room);
|
|
} catch (error) {
|
|
console.error("[Soleprint] Failed to initialize sidebar:", error);
|
|
}
|
|
}
|
|
|
|
async function checkAuth() {
|
|
if (!config.auth_enabled) return;
|
|
|
|
try {
|
|
const response = await fetch(`${SPR_BASE}/artery/google/oauth/status`, {
|
|
credentials: "include",
|
|
});
|
|
const data = await response.json();
|
|
if (data.authenticated) {
|
|
user = data.user;
|
|
}
|
|
} catch (error) {
|
|
console.log("[Soleprint] Auth check failed:", error);
|
|
}
|
|
}
|
|
|
|
function renderSystemSection(systemKey, title) {
|
|
const veins = config.veins || [];
|
|
|
|
// System link with icon and label (same as soleprint)
|
|
let html = `
|
|
<a href="${SPR_BASE}/${systemKey}" class="spr-sidebar-item" title="${title}">
|
|
${icons[systemKey]}
|
|
<span class="label">${title}</span>
|
|
<span class="tooltip">${title}</span>
|
|
</a>
|
|
`;
|
|
|
|
// Nested elements below - auth-gated
|
|
if (user) {
|
|
// Logged in - show vein links under artery
|
|
if (systemKey === "artery") {
|
|
for (const vein of veins) {
|
|
html += `
|
|
<a href="${SPR_BASE}/artery/${vein}" class="spr-sidebar-item spr-vein-item" title="${vein}">
|
|
<span class="label">${vein}</span>
|
|
<span class="tooltip">${vein}</span>
|
|
</a>
|
|
`;
|
|
}
|
|
}
|
|
} else if (config.auth_enabled) {
|
|
// Not logged in: show "login to access" below each system icon
|
|
html += `
|
|
<div class="spr-sidebar-locked">
|
|
<span class="lock-text">login to access</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
function createSidebar() {
|
|
// Add body class
|
|
document.body.classList.add("spr-sidebar-active");
|
|
if (expanded) {
|
|
document.body.classList.add("spr-sidebar-expanded");
|
|
}
|
|
|
|
const sidebar = document.createElement("nav");
|
|
sidebar.id = "spr-sidebar";
|
|
if (expanded) sidebar.classList.add("expanded");
|
|
|
|
sidebar.innerHTML = `
|
|
<button class="spr-sidebar-item spr-toggle" title="Toggle sidebar">
|
|
${icons.toggle}
|
|
<span class="label">Menu</span>
|
|
<span class="tooltip">Toggle</span>
|
|
</button>
|
|
|
|
<a href="/" class="spr-sidebar-item" title="${config.room}">
|
|
${icons.home}
|
|
<span class="label">${config.room}</span>
|
|
<span class="tooltip">${config.room}</span>
|
|
</a>
|
|
|
|
<div class="spr-sidebar-divider"></div>
|
|
|
|
<a href="/spr/" class="spr-sidebar-item active" title="Soleprint">
|
|
${icons.soleprint}
|
|
<span class="label">Soleprint</span>
|
|
<span class="tooltip">Soleprint</span>
|
|
</a>
|
|
|
|
<div class="spr-sidebar-divider"></div>
|
|
|
|
${renderSystemSection("artery", "Artery")}
|
|
${renderSystemSection("atlas", "Atlas")}
|
|
${renderSystemSection("station", "Station")}
|
|
|
|
<div class="spr-sidebar-spacer"></div>
|
|
|
|
${config.auth_enabled ? renderAuthSection() : ""}
|
|
`;
|
|
|
|
// Add toggle click handler
|
|
sidebar
|
|
.querySelector(".spr-toggle")
|
|
.addEventListener("click", toggleSidebar);
|
|
|
|
document.body.appendChild(sidebar);
|
|
}
|
|
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById("spr-sidebar");
|
|
expanded = !expanded;
|
|
sidebar.classList.toggle("expanded", expanded);
|
|
document.body.classList.toggle("spr-sidebar-expanded", expanded);
|
|
localStorage.setItem("spr_sidebar_expanded", expanded);
|
|
}
|
|
|
|
function renderAuthSection() {
|
|
if (user) {
|
|
return `
|
|
<div class="spr-sidebar-user">
|
|
<a href="${config.auth.logout_url}" class="spr-sidebar-item" title="Logout (${user.email})">
|
|
${icons.logout}
|
|
<span class="label">Logout</span>
|
|
<span class="tooltip">Logout</span>
|
|
</a>
|
|
</div>
|
|
`;
|
|
} else {
|
|
// Include current path as redirect target after login (relative, not full URL)
|
|
const redirectPath = window.location.pathname + window.location.search;
|
|
const loginUrl = `${config.auth.login_url}?redirect=${encodeURIComponent(redirectPath)}`;
|
|
return `
|
|
<div class="spr-sidebar-user">
|
|
<a href="${loginUrl}" class="spr-sidebar-item" title="Login with Google">
|
|
${icons.google}
|
|
<span class="label">Login</span>
|
|
<span class="tooltip">Login</span>
|
|
</a>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", init);
|
|
} else {
|
|
init();
|
|
}
|
|
|
|
console.log("[Soleprint] Sidebar script loaded");
|
|
})();
|