Changeset 0.37.5 (#217)
Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
@@ -8,398 +8,49 @@
|
||||
<link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
|
||||
<link rel="icon" type="image/x-icon" href="{{.BasePath}}/favicon.ico?v={{.Version}}">
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/variables.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/sw-login.css?v={{.Version}}">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0e0e10; --bg-surface: #18181b; --bg-raised: #222227;
|
||||
--border: #2e2e35; --border-light: #3a3a42;
|
||||
--text: #e8e8ed; --text-2: #9898a8; --text-3: #6b6b7b;
|
||||
--accent: #6c9fff; --accent-hover: #84b0ff; --accent-dim: rgba(108,159,255,0.12);
|
||||
--purple: #a78bfa; --purple-dim: rgba(167,139,250,0.10);
|
||||
--danger: #ef4444; --success: #22c55e;
|
||||
--input-bg: #1a1a1f;
|
||||
--grid-line: rgba(108,159,255,0.04);
|
||||
--glow1: rgba(108,159,255,0.06); --glow2: rgba(167,139,250,0.05);
|
||||
--orb: rgba(167,139,250,0.08);
|
||||
--font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--mono: 'JetBrains Mono', monospace;
|
||||
--banner-h: 28px;
|
||||
--banner-top-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
|
||||
--banner-bot-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; }
|
||||
|
||||
.login-shell { display: flex; flex-direction: column; height: 100vh; }
|
||||
.login-main { display: flex; flex: 1; min-height: 0; }
|
||||
|
||||
/* ── Hero Panel (left) ─────────────────── */
|
||||
.hero {
|
||||
flex: 1; display: flex; flex-direction: column; justify-content: center;
|
||||
padding: 4rem 3.5rem; position: relative; overflow: hidden;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 30% 40%, var(--glow1), transparent),
|
||||
radial-gradient(ellipse 60% 50% at 70% 70%, var(--glow2), transparent),
|
||||
var(--bg);
|
||||
}
|
||||
.hero-grid {
|
||||
position: absolute; inset: -50%;
|
||||
background-image:
|
||||
linear-gradient(var(--grid-line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
animation: gridDrift 30s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-orb {
|
||||
position: absolute; width: 320px; height: 320px; bottom: -80px; right: -60px;
|
||||
background: radial-gradient(circle, var(--orb), transparent 70%);
|
||||
border-radius: 50%; pointer-events: none;
|
||||
}
|
||||
.hero-content { position: relative; z-index: 1; max-width: 520px; }
|
||||
|
||||
.hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 1.5rem; }
|
||||
.hero-brand-icon { width: 40px; height: 40px; }
|
||||
.hero-brand-text { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
|
||||
.hero-brand-text .hl { color: var(--accent); }
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.4rem; font-weight: 700; line-height: 1.15;
|
||||
letter-spacing: -0.03em; margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||||
}
|
||||
.hero-sub {
|
||||
font-size: 1.05rem; color: var(--text-2); line-height: 1.6;
|
||||
margin-bottom: 2.5rem; max-width: 440px;
|
||||
}
|
||||
.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; }
|
||||
.hero-pill {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 7px 14px; background: var(--bg-surface);
|
||||
border-radius: 100px; font-size: 0.8rem; font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.hero-pill.ac { border: 1px solid rgba(108,159,255,0.2); color: var(--accent); }
|
||||
.hero-pill.pu { border: 1px solid rgba(167,139,250,0.2); color: var(--purple); }
|
||||
.hero-pill-icon { font-size: 0.95rem; line-height: 1; }
|
||||
|
||||
.hero-version {
|
||||
margin-top: 3rem; font-size: 0.72rem; font-family: var(--mono);
|
||||
color: var(--text-3); letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ── Auth Panel (right) ────────────────── */
|
||||
.auth-panel {
|
||||
width: 440px; flex-shrink: 0; display: flex; align-items: center;
|
||||
justify-content: center; padding: 2rem; background: var(--bg-surface);
|
||||
border-left: 1px solid var(--border); overflow-y: auto;
|
||||
}
|
||||
.auth-inner { width: 100%; max-width: 340px; }
|
||||
|
||||
.auth-heading { margin-bottom: 2rem; }
|
||||
.auth-heading h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
|
||||
.auth-heading p { font-size: 0.85rem; color: var(--text-3); }
|
||||
|
||||
.auth-tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
|
||||
.auth-tab {
|
||||
flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
|
||||
color: var(--text-3); padding: 10px 0; cursor: pointer; font-family: var(--font);
|
||||
font-size: 0.85rem; font-weight: 500; transition: color 0.15s;
|
||||
}
|
||||
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.auth-tab:hover { color: var(--text-2); }
|
||||
|
||||
.form-field { margin-bottom: 16px; }
|
||||
.form-field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
|
||||
.form-field input {
|
||||
width: 100%; box-sizing: border-box; background: var(--input-bg);
|
||||
border: 1px solid var(--border); color: var(--text);
|
||||
padding: 10px 14px; border-radius: 10px; font-size: 14px; font-family: var(--font);
|
||||
outline: none; transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.form-field input:focus {
|
||||
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
.auth-error { color: var(--danger); font-size: 0.78rem; margin: 0 0 0.5rem; }
|
||||
|
||||
.btn-login {
|
||||
width: 100%; background: var(--accent); color: #fff; border: none;
|
||||
padding: 10px 18px; font-size: 14px; border-radius: 10px; cursor: pointer;
|
||||
font-family: var(--font); font-weight: 600; letter-spacing: -0.01em;
|
||||
transition: all 0.18s; margin-top: 1.5rem;
|
||||
}
|
||||
.btn-login:hover { background: var(--accent-hover); }
|
||||
.btn-login:disabled { opacity: 0.55; cursor: not-allowed; }
|
||||
|
||||
.auth-footer {
|
||||
margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
|
||||
text-align: center;
|
||||
}
|
||||
.auth-footer p { font-size: 0.75rem; color: var(--text-3); line-height: 1.6; }
|
||||
|
||||
/* ── Banner ─────────────────────────────── */
|
||||
.login-banner {
|
||||
text-align: center; font-size: 11px; font-weight: 700;
|
||||
letter-spacing: 1.2px; padding: 3px 0; text-transform: uppercase; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Animations ─────────────────────────── */
|
||||
@keyframes gridDrift { to { transform: translate(48px, 48px); } }
|
||||
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
|
||||
.anim { opacity: 0; transform: translateY(12px); animation: fadeUp 0.5s ease forwards; }
|
||||
.anim-1 { animation-delay: .05s; } .anim-2 { animation-delay: .12s; }
|
||||
.anim-3 { animation-delay: .19s; } .anim-4 { animation-delay: .26s; }
|
||||
.anim-5 { animation-delay: .33s; }
|
||||
.anim-a1 { animation-delay: .15s; } .anim-a2 { animation-delay: .22s; }
|
||||
.anim-a3 { animation-delay: .29s; }
|
||||
|
||||
/* ── Responsive ─────────────────────────── */
|
||||
@media (max-width: 900px) {
|
||||
.hero { display: none; }
|
||||
.auth-panel { width: 100%; border-left: none; }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 5px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--border); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-shell">
|
||||
|
||||
{{if .Banner.Visible}}
|
||||
<div class="login-banner" style="background:{{.Banner.Background}};color:{{.Banner.Color}};">
|
||||
{{.Banner.Text}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="login-main">
|
||||
|
||||
<!-- ═══ HERO (left) ═══ -->
|
||||
<div class="hero">
|
||||
<div class="hero-grid"></div>
|
||||
<div class="hero-orb"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-brand anim anim-1">
|
||||
<img class="hero-brand-icon" src="{{.BasePath}}/favicon.svg?v={{.Version}}" alt="Chat Switchboard">
|
||||
<span class="hero-brand-text">Chat <span class="hl">Switchboard</span></span>
|
||||
</div>
|
||||
<h1 class="anim anim-2">Your AI conversations,<br>your infrastructure</h1>
|
||||
<p class="hero-sub anim anim-3">
|
||||
Self-hosted multi-provider chat with team collaboration, BYOK privacy, and an extensible plugin system.
|
||||
</p>
|
||||
<div class="hero-pills anim anim-4">
|
||||
<span class="hero-pill ac"><span class="hero-pill-icon">🤖</span> Multi-Provider AI</span>
|
||||
<span class="hero-pill pu"><span class="hero-pill-icon">🔑</span> Bring Your Own Key</span>
|
||||
<span class="hero-pill ac"><span class="hero-pill-icon">👥</span> Teams & Projects</span>
|
||||
<span class="hero-pill pu"><span class="hero-pill-icon">🧩</span> Extensions</span>
|
||||
<span class="hero-pill ac"><span class="hero-pill-icon">🔍</span> Web Search Tools</span>
|
||||
<span class="hero-pill pu"><span class="hero-pill-icon">📝</span> Notes & Memory</span>
|
||||
</div>
|
||||
<p class="hero-version anim anim-5">v{{.Version}}{{if .Environment}} · {{.Environment}}{{end}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ AUTH (right) ═══ -->
|
||||
<div class="auth-panel">
|
||||
<div class="auth-inner">
|
||||
<div class="auth-heading anim anim-a1">
|
||||
<h2 id="authTitle">Welcome back</h2>
|
||||
<p id="authSubtitle">Sign in to your Switchboard instance</p>
|
||||
</div>
|
||||
|
||||
{{if eq .AuthMode "oidc"}}
|
||||
<!-- SSO LOGIN -->
|
||||
<div class="anim anim-a2">
|
||||
<p style="color: var(--text-2); font-size: 0.9rem; margin-bottom: 1.5rem;">
|
||||
This instance uses Single Sign-On. Click below to authenticate with your identity provider.
|
||||
</p>
|
||||
<a class="btn-login" href="{{.BasePath}}/api/v1/auth/oidc/login" style="display:block; text-align:center; text-decoration:none;">
|
||||
Sign in with SSO
|
||||
</a>
|
||||
</div>
|
||||
{{else if eq .AuthMode "mtls"}}
|
||||
<!-- mTLS LOGIN -->
|
||||
<div class="anim anim-a2">
|
||||
<p style="color: var(--text-2); font-size: 0.9rem; margin-bottom: 1.5rem;">
|
||||
This instance uses client certificate authentication. Ensure your browser has a valid certificate installed.
|
||||
</p>
|
||||
<a class="btn-login" href="{{.BasePath}}/" style="display:block; text-align:center; text-decoration:none;">
|
||||
Continue with Certificate
|
||||
</a>
|
||||
</div>
|
||||
{{else}}
|
||||
<!-- BUILTIN LOGIN -->
|
||||
<div class="auth-tabs anim anim-a2">
|
||||
<button class="auth-tab active" id="tabLogin" onclick="_switchTab('login')">Log In</button>
|
||||
{{if .RegistrationOpen}}<button class="auth-tab" id="tabRegister" onclick="_switchTab('register')">Register</button>{{end}}
|
||||
</div>
|
||||
|
||||
<!-- LOGIN FORM -->
|
||||
<div id="loginForm" class="anim anim-a3">
|
||||
<div class="form-field">
|
||||
<label for="loginUsername">Username</label>
|
||||
<input type="text" id="loginUsername" placeholder="Enter username" autocomplete="username" autofocus>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="loginPassword">Password</label>
|
||||
<input type="password" id="loginPassword" placeholder="Enter password" autocomplete="current-password">
|
||||
</div>
|
||||
<p class="auth-error" id="loginError" style="display:none;"></p>
|
||||
<button class="btn-login" id="loginBtn" onclick="Pages.doLogin()">Log In</button>
|
||||
</div>
|
||||
|
||||
<!-- REGISTER FORM -->
|
||||
{{if .RegistrationOpen}}
|
||||
<div id="registerForm" style="display:none;">
|
||||
<div class="form-field">
|
||||
<label for="regUsername">Username</label>
|
||||
<input type="text" id="regUsername" placeholder="Choose a username" autocomplete="username">
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="regEmail">Email</label>
|
||||
<input type="email" id="regEmail" placeholder="you@example.com" autocomplete="email">
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="regPassword">Password</label>
|
||||
<input type="password" id="regPassword" placeholder="Min 8 characters" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="regConfirm">Confirm Password</label>
|
||||
<input type="password" id="regConfirm" placeholder="Re-enter password" autocomplete="new-password">
|
||||
</div>
|
||||
<p class="auth-error" id="regError" style="display:none;"></p>
|
||||
<button class="btn-login" id="regBtn" onclick="_doRegister()">Create Account</button>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}{{/* end auth mode conditional */}}
|
||||
|
||||
<div class="auth-footer">
|
||||
<p>Self-hosted instance · Your data stays on your infrastructure</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if .Banner.Visible}}
|
||||
<div class="login-banner" style="background:{{.Banner.Background}};color:{{.Banner.Color}};">
|
||||
{{.Banner.Text}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
</div>
|
||||
<div id="login-mount"></div>
|
||||
|
||||
<script>
|
||||
window.__BASE__ = '{{.BasePath}}';
|
||||
window.__AUTH_MODE__ = '{{.AuthMode}}';
|
||||
window.__REGISTRATION_OPEN__ = {{if .RegistrationOpen}}true{{else}}false{{end}};
|
||||
window.__VERSION__ = '{{.Version}}';
|
||||
window.__ENVIRONMENT__ = {{if .Environment}}'{{.Environment}}'{{else}}null{{end}};
|
||||
window.__BANNER__ = {{if .Banner.Visible}}{
|
||||
visible: true,
|
||||
text: '{{.Banner.Text}}',
|
||||
background: '{{.Banner.Background}}',
|
||||
color: '{{.Banner.Color}}'
|
||||
}{{else}}null{{end}};
|
||||
</script>
|
||||
<script src="{{.BasePath}}/js/pages.js?v={{.Version}}"></script>
|
||||
<script>
|
||||
// ── OIDC SSO callback handler ───────────────
|
||||
// The OIDC callback redirects here with #oidc_result=<base64 JSON>.
|
||||
// We decode it, save to localStorage (same format as builtin login),
|
||||
// set the page-auth cookie, and redirect to the app.
|
||||
(function() {
|
||||
const hash = window.location.hash;
|
||||
if (!hash.startsWith('#oidc_result=')) return;
|
||||
try {
|
||||
const encoded = hash.slice('#oidc_result='.length);
|
||||
const json = atob(encoded);
|
||||
const data = JSON.parse(json);
|
||||
const base = window.__BASE__ || '';
|
||||
const storageKey = base ? 'sb_auth_' + base.replace(/\//g, '') : 'sb_auth';
|
||||
localStorage.setItem(storageKey, JSON.stringify({
|
||||
accessToken: data.access_token,
|
||||
refreshToken: data.refresh_token,
|
||||
user: data.user,
|
||||
}));
|
||||
document.cookie = 'sb_token=' + data.access_token + '; path=/; max-age=900; SameSite=Strict';
|
||||
window.location.replace(base + '/');
|
||||
} catch (e) {
|
||||
console.error('[oidc] failed to process SSO callback:', e);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
// Builtin auth handlers — safe to include always; no-op if DOM elements absent.
|
||||
function _switchTab(tab) {
|
||||
const lf = document.getElementById('loginForm');
|
||||
if (lf) lf.style.display = tab === 'login' ? '' : 'none';
|
||||
const regForm = document.getElementById('registerForm');
|
||||
if (regForm) regForm.style.display = tab === 'register' ? '' : 'none';
|
||||
document.getElementById('tabLogin')?.classList.toggle('active', tab === 'login');
|
||||
document.getElementById('tabRegister')?.classList.toggle('active', tab === 'register');
|
||||
const title = document.getElementById('authTitle');
|
||||
if (title) title.textContent = tab === 'login' ? 'Welcome back' : 'Create account';
|
||||
const sub = document.getElementById('authSubtitle');
|
||||
if (sub) sub.textContent = tab === 'login'
|
||||
? 'Sign in to your Switchboard instance'
|
||||
: 'Join your team on Switchboard';
|
||||
const loginErr = document.getElementById('loginError');
|
||||
if (loginErr) loginErr.textContent = '';
|
||||
const regErr = document.getElementById('regError');
|
||||
if (regErr) { regErr.textContent = ''; regErr.style.display = 'none'; }
|
||||
}
|
||||
|
||||
async function _doRegister() {
|
||||
const username = document.getElementById('regUsername')?.value.trim();
|
||||
const email = document.getElementById('regEmail')?.value.trim();
|
||||
const password = document.getElementById('regPassword')?.value;
|
||||
const confirm = document.getElementById('regConfirm')?.value;
|
||||
const errEl = document.getElementById('regError');
|
||||
const btn = document.getElementById('regBtn');
|
||||
if (!errEl || !btn) return;
|
||||
{{/* Vendor: Preact + htm → globals (window.preact, window.hooks, window.html) */}}
|
||||
<script type="module">
|
||||
const { h, render } = await import('{{.BasePath}}/js/sw/vendor/preact.module.js');
|
||||
const hooksModule = await import('{{.BasePath}}/js/sw/vendor/hooks.module.js');
|
||||
const { default: htm } = await import('{{.BasePath}}/js/sw/vendor/htm.module.js');
|
||||
const html = htm.bind(h);
|
||||
window.preact = { h, render };
|
||||
window.hooks = hooksModule;
|
||||
window.html = html;
|
||||
|
||||
if (!username || !password) { errEl.textContent = 'Username and password are required'; errEl.style.display = ''; return; }
|
||||
if (password.length < 8) { errEl.textContent = 'Password must be at least 8 characters'; errEl.style.display = ''; return; }
|
||||
if (password !== confirm) { errEl.textContent = 'Passwords do not match'; errEl.style.display = ''; return; }
|
||||
{{/* SDK boot → window.sw */}}
|
||||
const { boot } = await import('{{.BasePath}}/js/sw/sdk/index.js?v={{.Version}}');
|
||||
await boot();
|
||||
|
||||
errEl.style.display = 'none';
|
||||
errEl.textContent = '';
|
||||
btn.disabled = true; btn.textContent = 'Creating account\u2026';
|
||||
|
||||
const base = window.__BASE__ || '';
|
||||
try {
|
||||
const resp = await fetch(base + '/api/v1/auth/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, email, password }),
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
throw new Error(err.error || 'Registration failed');
|
||||
}
|
||||
const data = await resp.json();
|
||||
if (data.pending) {
|
||||
errEl.textContent = 'Account created — pending admin approval.';
|
||||
errEl.style.color = 'var(--success)';
|
||||
errEl.style.display = '';
|
||||
setTimeout(() => { errEl.style.color = ''; errEl.style.display = 'none'; _switchTab('login'); }, 3000);
|
||||
} else {
|
||||
const storageKey = base ? 'sb_auth_' + base.replace(/\//g, '') : 'sb_auth';
|
||||
localStorage.setItem(storageKey, JSON.stringify({
|
||||
accessToken: data.access_token, refreshToken: data.refresh_token, user: data.user,
|
||||
}));
|
||||
document.cookie = 'sb_token=' + data.access_token + '; path=/; max-age=900; SameSite=Strict';
|
||||
window.location.href = base + '/';
|
||||
}
|
||||
} catch (e) {
|
||||
errEl.textContent = e.message;
|
||||
errEl.style.display = '';
|
||||
} finally {
|
||||
btn.disabled = false; btn.textContent = 'Create Account';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('loginPassword')?.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') Pages.doLogin();
|
||||
});
|
||||
document.getElementById('loginUsername')?.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') document.getElementById('loginPassword')?.focus();
|
||||
});
|
||||
document.getElementById('regConfirm')?.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') _doRegister();
|
||||
});
|
||||
{{/* Login surface */}}
|
||||
await import('{{.BasePath}}/js/sw/surfaces/login/index.js?v={{.Version}}');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,181 +1,27 @@
|
||||
{{/*
|
||||
Settings surface — matches switchboard-prototype-settings.jsx.
|
||||
Full-page layout: topbar + left nav + content area.
|
||||
JS (settings-handlers.js, ui-settings.js) populates dynamic sections.
|
||||
Settings surface — v0.37.5: Preact component tree.
|
||||
Replaces server-rendered DOM with a mount point.
|
||||
Bridge sections (tasks, gitkeys, workflows, data) still load old JS.
|
||||
*/}}
|
||||
|
||||
{{define "surface-settings"}}
|
||||
<div class="surface-settings" style="flex-direction:column;">
|
||||
|
||||
{{/* Top Bar */}}
|
||||
<div class="settings-topbar">
|
||||
<a href="{{.BasePath}}/" class="settings-topbar-back" id="settingsBackBtn">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
|
||||
Back
|
||||
</a>
|
||||
<div class="settings-topbar-sep"></div>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--text-2)"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||
<span class="settings-topbar-title">Settings</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex:1;min-height:0;">
|
||||
{{/* Left Nav */}}
|
||||
<div class="settings-nav">
|
||||
{{$section := .Section}}
|
||||
{{$base := .BasePath}}
|
||||
|
||||
<a href="{{$base}}/settings/general" class="settings-nav-link{{if eq $section "general"}} active{{end}}">General</a>
|
||||
<a href="{{$base}}/settings/appearance" class="settings-nav-link{{if eq $section "appearance"}} active{{end}}">Appearance</a>
|
||||
<a href="{{$base}}/settings/models" class="settings-nav-link{{if eq $section "models"}} active{{end}}">Models</a>
|
||||
<a href="{{$base}}/settings/personas" class="settings-nav-link{{if eq $section "personas"}} active{{end}}">Personas</a>
|
||||
<a href="{{$base}}/settings/profile" class="settings-nav-link{{if eq $section "profile"}} active{{end}}">Profile</a>
|
||||
<a href="{{$base}}/settings/teams" class="settings-nav-link{{if eq $section "teams"}} active{{end}}">Teams</a>
|
||||
<a href="{{$base}}/settings/workflows" class="settings-nav-link{{if eq $section "workflows"}} active{{end}}">Workflows</a>
|
||||
<a href="{{$base}}/settings/tasks" class="settings-nav-link{{if eq $section "tasks"}} active{{end}}">Tasks</a>
|
||||
<a href="{{$base}}/settings/gitkeys" class="settings-nav-link{{if eq $section "gitkeys"}} active{{end}}">Git Keys</a>
|
||||
<a href="{{$base}}/settings/data" class="settings-nav-link{{if eq $section "data"}} active{{end}}">Data & Privacy</a>
|
||||
|
||||
{{/* BYOK-gated nav items */}}
|
||||
<div id="settingsByokNav" style="display:none;">
|
||||
<div class="settings-nav-sep"></div>
|
||||
<a href="{{$base}}/settings/providers" class="settings-nav-link{{if eq $section "providers"}} active{{end}}">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
|
||||
My Providers
|
||||
</a>
|
||||
<a href="{{$base}}/settings/roles" class="settings-nav-link{{if eq $section "roles"}} active{{end}}">Model Roles</a>
|
||||
<a href="{{$base}}/settings/usage" class="settings-nav-link{{if eq $section "usage"}} active{{end}}">My Usage</a>
|
||||
</div>
|
||||
|
||||
{{/* BYOK indicator */}}
|
||||
<div id="settingsByokIndicator" class="settings-nav-footer" style="display:none;">
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
|
||||
<span style="font-size:11px;font-weight:600;color:var(--success);">BYOK Enabled</span>
|
||||
</div>
|
||||
<p style="font-size:10px;color:var(--text-3);margin:0;line-height:1.5;">Admin has enabled Bring Your Own Key</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Content */}}
|
||||
<div class="settings-content" id="settingsContentMount">
|
||||
<div id="settingsSection" data-section="{{.Section}}">
|
||||
<h2 id="settingsSectionTitle">{{if eq .Section "general"}}General{{else if eq .Section "appearance"}}Appearance{{else if eq .Section "models"}}Models{{else if eq .Section "personas"}}Personas{{else if eq .Section "profile"}}Profile{{else if eq .Section "teams"}}Teams{{else if eq .Section "workflows"}}Workflows{{else if eq .Section "tasks"}}Tasks{{else if eq .Section "providers"}}My Providers{{else if eq .Section "roles"}}Model Roles{{else if eq .Section "usage"}}My Usage{{else if eq .Section "knowledge"}}Knowledge Bases{{else if eq .Section "memory"}}Memory{{else if eq .Section "notifications"}}Notifications{{else if eq .Section "data"}}Data & Privacy{{else}}Settings{{end}}</h2>
|
||||
|
||||
{{if eq .Section "general"}}
|
||||
<div class="settings-section">
|
||||
<h3>Chat Defaults</h3>
|
||||
<div class="form-group">
|
||||
<label>Default Model</label>
|
||||
<select id="settingsModel"></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>System Prompt</label>
|
||||
<textarea id="settingsSystemPrompt" rows="3" placeholder="Optional system prompt…" style="max-width:100%;"></textarea>
|
||||
</div>
|
||||
<div style="display:flex;gap:16px;">
|
||||
<div class="form-group" style="flex:1;">
|
||||
<label>Max Tokens <span id="settingsMaxHint" style="font-weight:400;color:var(--text-3);"></span></label>
|
||||
<input type="number" id="settingsMaxTokens" placeholder="default">
|
||||
</div>
|
||||
<div class="form-group" style="flex:1;">
|
||||
<label>Temperature</label>
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="range" id="settingsTemp" min="0" max="2" step="0.1" value="0.7" style="flex:1;">
|
||||
<span id="settingsTempValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);">0.7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label style="display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);cursor:pointer;margin-top:4px;">
|
||||
<input type="checkbox" id="settingsThinking"> Show thinking blocks
|
||||
</label>
|
||||
</div>
|
||||
{{else if eq .Section "appearance"}}
|
||||
<div class="settings-section">
|
||||
<h3>Theme</h3>
|
||||
<div id="themeToggle" class="toggle-group">
|
||||
<button class="toggle-btn" data-theme="light">☀ Light</button>
|
||||
<button class="toggle-btn" data-theme="dark">☾ Dark</button>
|
||||
<button class="toggle-btn" data-theme="system">⊞ System</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3>UI Scale</h3>
|
||||
<div class="form-group">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="range" id="settingsScale" min="80" max="175" step="5" value="100" style="flex:1;">
|
||||
<span id="scaleValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 style="margin-top:16px;">Message Font Size</h3>
|
||||
<div class="form-group">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<input type="range" id="settingsMsgFont" min="12" max="20" step="1" value="14" style="flex:1;">
|
||||
<span id="msgFontValue" style="font-size:12px;color:var(--text-2);font-family:var(--mono);min-width:32px;">14px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-md btn-primary" onclick="sb.call('UI.saveAppearance')">Save</button>
|
||||
{{else if eq .Section "profile"}}
|
||||
<div class="settings-section">
|
||||
<h3>Profile</h3>
|
||||
<div class="form-group"><label>Display Name</label><input type="text" id="profileDisplayName" placeholder="Your display name"></div>
|
||||
<div class="form-group"><label>Email</label><input type="email" id="profileEmail" disabled></div>
|
||||
<button class="btn-md btn-primary" onclick="sb.call('Pages.saveProfile')">Save Profile</button>
|
||||
</div>
|
||||
<div class="settings-section" style="margin-top:20px;">
|
||||
<h3>Change Password</h3>
|
||||
<div class="form-group"><label>Current Password</label><input type="password" id="settingsCurrentPw" autocomplete="current-password"></div>
|
||||
<div class="form-group"><label>New Password</label><input type="password" id="settingsNewPw" autocomplete="new-password"></div>
|
||||
<div class="form-group"><label>Confirm New Password</label><input type="password" id="settingsConfirmPw" autocomplete="new-password"></div>
|
||||
<button class="btn-md btn-primary" onclick="sb.call('Pages.changePassword')">Update Password</button>
|
||||
</div>
|
||||
{{else if eq .Section "providers"}}
|
||||
<div id="userProvidersDisabled" style="display:none;">
|
||||
<div class="settings-section"><p style="color:var(--text-2);font-size:13px;">Your admin has disabled user-managed API keys (BYOK).</p></div>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<button class="btn-md btn-primary" id="providerShowAddBtn" style="display:none;">+ Add Provider</button>
|
||||
</div>
|
||||
<div id="providerAddForm" style="display:none;"></div>
|
||||
<div id="providerList"><div class="settings-placeholder">Loading providers…</div></div>
|
||||
{{else if eq .Section "personas"}}
|
||||
<div style="margin-bottom:12px;">
|
||||
<button class="btn-md btn-primary" id="userAddPersonaBtn" style="display:none;">+ New Persona</button>
|
||||
</div>
|
||||
<div id="userAddPersonaForm" style="display:none;"></div>
|
||||
<div id="userPersonaList"><div class="settings-placeholder">Loading personas…</div></div>
|
||||
{{else if eq .Section "models"}}
|
||||
<div id="userModelList"><div class="settings-placeholder">Loading models…</div></div>
|
||||
{{else if eq .Section "roles"}}
|
||||
<div id="userRolesDisabled" class="settings-section" style="display:none;">
|
||||
<p style="color:var(--text-2);font-size:13px;">Add a personal provider first to configure model role overrides.</p>
|
||||
</div>
|
||||
<div id="userRolesConfig"></div>
|
||||
{{else if eq .Section "usage"}}
|
||||
<div id="myUsageTotals"></div>
|
||||
{{else if eq .Section "teams"}}
|
||||
<div id="settingsDynamic"><div class="settings-placeholder">Loading teams…</div></div>
|
||||
{{else if eq .Section "workflows"}}
|
||||
<div id="settingsDynamic"><div class="settings-placeholder">Loading workflows…</div></div>
|
||||
{{else if eq .Section "tasks"}}
|
||||
<div id="settingsTasksMount"><div class="settings-placeholder">Loading tasks…</div></div>
|
||||
{{else if eq .Section "data"}}
|
||||
<div id="dpMount"><div class="settings-placeholder">Loading…</div></div>
|
||||
{{else}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settings-mount" class="surface-settings" style="flex-direction:column;">
|
||||
{{/* Preact renders into this div. Show a loading state until it mounts. */}}
|
||||
<div class="settings-placeholder" style="padding:40px;text-align:center;">Loading settings…</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
|
||||
{{/* CSS: loaded via base.html (variables, layout, primitives, modals, surfaces) */}}
|
||||
{{define "css-settings"}}{{end}}
|
||||
|
||||
{{/* Scripts */}}
|
||||
{{define "scripts-settings"}}
|
||||
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-settings.js?v={{.Version}}"></script>
|
||||
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/settings-handlers.js?v={{.Version}}"></script>
|
||||
{{/* Inject section name for Preact routing */}}
|
||||
<script nonce="{{.CSPNonce}}">
|
||||
window.__SECTION__ = '{{.Section}}';
|
||||
</script>
|
||||
|
||||
{{/* Bridge section JS — deferred sections still use old imperative code */}}
|
||||
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/task-settings.js?v={{.Version}}"></script>
|
||||
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/git-credentials-ui.js?v={{.Version}}"></script>
|
||||
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
|
||||
@@ -185,103 +31,22 @@
|
||||
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notification-prefs.js?v={{.Version}}"></script>
|
||||
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
|
||||
<script type="module" nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/data-portability.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}">
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const section = document.getElementById('settingsSection')?.dataset.section;
|
||||
if (!section) return;
|
||||
|
||||
// ── Settings navigation: don't pollute browser history ──
|
||||
// On first settings page load, stash the URL the user came from.
|
||||
// Tab switches use location.replace() so they don't stack in history.
|
||||
// Back button navigates directly to the stored return URL.
|
||||
const RETURN_KEY = 'sb_settings_return';
|
||||
if (!sessionStorage.getItem(RETURN_KEY)) {
|
||||
// Prefer referrer if it's on the same origin and not another settings page
|
||||
const ref = document.referrer;
|
||||
const base = (window.__BASE__ || '') + '/';
|
||||
if (ref && ref.startsWith(location.origin) && !ref.includes('/settings')) {
|
||||
sessionStorage.setItem(RETURN_KEY, ref);
|
||||
} else {
|
||||
sessionStorage.setItem(RETURN_KEY, location.origin + base);
|
||||
}
|
||||
}
|
||||
{{/* Vendor: Preact + htm → globals, then SDK boot, then settings surface */}}
|
||||
<script type="module" nonce="{{.CSPNonce}}">
|
||||
const { h, render } = await import('{{.BasePath}}/js/sw/vendor/preact.module.js');
|
||||
const hooksModule = await import('{{.BasePath}}/js/sw/vendor/hooks.module.js');
|
||||
const { default: htm } = await import('{{.BasePath}}/js/sw/vendor/htm.module.js');
|
||||
const html = htm.bind(h);
|
||||
window.preact = window.preact || { h, render };
|
||||
window.hooks = window.hooks || hooksModule;
|
||||
window.html = window.html || html;
|
||||
|
||||
const backBtn = document.getElementById('settingsBackBtn');
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const returnURL = sessionStorage.getItem(RETURN_KEY);
|
||||
sessionStorage.removeItem(RETURN_KEY);
|
||||
location.href = returnURL || (window.__BASE__ || '') + '/';
|
||||
});
|
||||
}
|
||||
// Boot SDK (idempotent — may already be loaded by base.html in future)
|
||||
const { boot } = await import('{{.BasePath}}/js/sw/sdk/index.js?v={{.Version}}');
|
||||
await boot();
|
||||
|
||||
// Tab links: replace current history entry instead of pushing
|
||||
document.querySelectorAll('.settings-nav-link').forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
location.replace(link.href);
|
||||
});
|
||||
});
|
||||
|
||||
// Show BYOK nav if enabled
|
||||
const pageData = window.__PAGE_DATA__;
|
||||
if (pageData && pageData.BYOKEnabled) {
|
||||
const byokNav = document.getElementById('settingsByokNav');
|
||||
const byokInd = document.getElementById('settingsByokIndicator');
|
||||
if (byokNav) byokNav.style.display = '';
|
||||
if (byokInd) byokInd.style.display = '';
|
||||
}
|
||||
|
||||
if (section === 'appearance' && typeof UI !== 'undefined') {
|
||||
UI.loadAppearanceSettings?.();
|
||||
UI.initAppearance?.();
|
||||
}
|
||||
if (section === 'general' && typeof UI !== 'undefined') {
|
||||
UI.loadGeneralSettings?.();
|
||||
}
|
||||
if (section === 'profile') {
|
||||
const user = window.__USER__;
|
||||
if (user) {
|
||||
const dn = document.getElementById('profileDisplayName');
|
||||
const em = document.getElementById('profileEmail');
|
||||
if (dn) dn.value = user.display_name || user.username || '';
|
||||
if (em) em.value = user.email || '';
|
||||
}
|
||||
}
|
||||
|
||||
const dynamicSections = {
|
||||
providers: () => typeof UI !== 'undefined' && UI.loadProviderList?.(),
|
||||
models: () => typeof UI !== 'undefined' && UI.loadUserModels?.(),
|
||||
personas: () => typeof UI !== 'undefined' && UI.loadUserPersonas?.(),
|
||||
usage: () => typeof UI !== 'undefined' && UI.loadMyUsage?.(),
|
||||
roles: () => typeof UI !== 'undefined' && UI.loadUserRoles?.(),
|
||||
knowledge: () => typeof KnowledgeUI !== 'undefined' && KnowledgeUI.openManagePanel?.(),
|
||||
memory: () => typeof MemoryUI !== 'undefined' && MemoryUI.openSettingsPanel?.(),
|
||||
notifications: () => typeof NotifPrefs !== 'undefined' && NotifPrefs.load?.(),
|
||||
teams: () => typeof UI !== 'undefined' && UI.loadTeamsSettings?.(),
|
||||
workflows: () => typeof loadTeamWorkflows === 'function' && loadTeamWorkflows(),
|
||||
tasks: () => typeof _loadSettingsTasks === 'function' && _loadSettingsTasks(),
|
||||
gitkeys: () => typeof _loadSettingsGitKeys === 'function' && _loadSettingsGitKeys(),
|
||||
data: () => typeof loadDataPrivacy === 'function' && loadDataPrivacy(),
|
||||
};
|
||||
|
||||
// Populate App.policies and App.models from API.
|
||||
// On chat surface, app.js does this. On settings surface, we must do it here.
|
||||
try {
|
||||
const pubData = await API.getPublicSettings();
|
||||
App.policies = pubData.policies || {};
|
||||
} catch (_) { App.policies = App.policies || {}; }
|
||||
if (typeof fetchModels === 'function') await fetchModels();
|
||||
|
||||
// Wire up interactive handlers (BYOK provider form, model visibility, etc.)
|
||||
if (typeof _initSettingsListeners === 'function') _initSettingsListeners();
|
||||
// Show/hide BYOK and persona features based on policies
|
||||
if (typeof UI !== 'undefined') {
|
||||
UI.checkUserProvidersAllowed?.();
|
||||
UI.checkUserPersonasAllowed?.();
|
||||
}
|
||||
if (dynamicSections[section]) dynamicSections[section]();
|
||||
});
|
||||
// Mount settings surface
|
||||
await import('{{.BasePath}}/js/sw/surfaces/settings/index.js?v={{.Version}}');
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
package main
|
||||
|
||||
const Version = "0.36.0"
|
||||
const Version = "0.37.5"
|
||||
|
||||
Reference in New Issue
Block a user