39146288e1
Adds an optional Jinja2/HTML banner displayed above the bootstrap commands on /setup. Empty by default; admin authors it at /admin/setup-banner. autoescape=True — safe for HTML context. Render failures return "" so a broken banner never breaks /setup. Schema v22: setup_banner singleton table, auto-migration v21→v22.
465 lines
18 KiB
HTML
465 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Setup Banner — {{ config.INSTANCE_NAME }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material-darker.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/jinja2/jinja2.min.js"></script>
|
|
|
|
<style>
|
|
.container:has(.welcome-page) { max-width: none; padding: 24px 16px; }
|
|
.welcome-page { max-width: 1400px; margin: 0 auto; padding: 0; }
|
|
|
|
.welcome-toolbar {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
|
|
}
|
|
.welcome-title { margin: 0; font-size: 22px; font-weight: 600; }
|
|
.welcome-sub { color: var(--text-secondary, #6b7280); font-size: 13px; margin-top: 4px; margin-bottom: 0; }
|
|
|
|
.origin-chip {
|
|
display: inline-block;
|
|
padding: 3px 10px; border-radius: 999px;
|
|
font-size: 11px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: 0.4px;
|
|
}
|
|
.origin-override { background: #ede9fe; color: #6d28d9; }
|
|
.origin-default { background: #f3f4f6; color: #6b7280; }
|
|
|
|
.welcome-card {
|
|
background: var(--surface, #fff);
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 12px;
|
|
margin-bottom: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.welcome-card-body { padding: 20px 22px; }
|
|
|
|
.welcome-desc { font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0 0 16px; }
|
|
|
|
/* Placeholder cheatsheet — collapsible */
|
|
details.welcome-cheatsheet { margin-bottom: 18px; }
|
|
details.welcome-cheatsheet summary {
|
|
cursor: pointer; font-size: 13px; font-weight: 500;
|
|
color: var(--text-primary, #111827); list-style: none;
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
}
|
|
details.welcome-cheatsheet summary::-webkit-details-marker { display: none; }
|
|
details.welcome-cheatsheet summary::before {
|
|
content: "▶"; font-size: 10px; color: var(--text-secondary, #6b7280);
|
|
transition: transform 0.15s;
|
|
}
|
|
details.welcome-cheatsheet[open] summary::before { transform: rotate(90deg); }
|
|
|
|
/* Dark code block */
|
|
.code-block {
|
|
background: #1e1e2e;
|
|
border-radius: 8px;
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
|
|
font-size: 13px;
|
|
color: #cdd6f4;
|
|
line-height: 1.6;
|
|
margin-top: 10px;
|
|
position: relative;
|
|
}
|
|
.code-block .code-body { flex: 1; white-space: pre; overflow-x: auto; }
|
|
.btn-copy {
|
|
padding: 6px 14px;
|
|
background: transparent;
|
|
border: 1px solid #45475a;
|
|
color: #cdd6f4;
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
.btn-copy:hover { border-color: #89b4fa; color: #89b4fa; background: rgba(137, 180, 250, 0.08); }
|
|
.btn-copy.copied { border-color: #a6e3a1; color: #a6e3a1; background: rgba(166, 227, 161, 0.08); }
|
|
|
|
/* CodeMirror editor styling */
|
|
.welcome-page .CodeMirror {
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
|
|
}
|
|
|
|
/* Split layout: editor left, preview right */
|
|
.welcome-editor-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 0;
|
|
}
|
|
.welcome-editor-col, .welcome-preview-col {
|
|
flex: 1 1 50%;
|
|
min-width: 0;
|
|
}
|
|
.welcome-preview-col {
|
|
border: 1px solid var(--border, #e5e7eb);
|
|
border-radius: 8px;
|
|
background: var(--surface, #fff);
|
|
color: var(--text-primary, #111827);
|
|
padding: 16px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
overflow: auto;
|
|
max-height: 600px;
|
|
}
|
|
.welcome-preview-col h4 {
|
|
color: var(--text-secondary, #6b7280); margin: 0 0 8px; font-size: 12px;
|
|
text-transform: uppercase; letter-spacing: 0.5px;
|
|
}
|
|
.welcome-preview-empty {
|
|
color: var(--text-secondary, #6b7280);
|
|
font-style: italic;
|
|
font-size: 13px;
|
|
}
|
|
.welcome-preview-error {
|
|
background: rgba(234, 88, 12, 0.15);
|
|
color: #b91c1c;
|
|
border: 1px solid rgba(234, 88, 12, 0.4);
|
|
border-radius: 6px;
|
|
padding: 10px 12px;
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.welcome-editor-row { flex-direction: column; }
|
|
}
|
|
|
|
/* Action row */
|
|
.welcome-actions {
|
|
padding: 14px 22px;
|
|
background: var(--border-light, #fafafa);
|
|
border-top: 1px solid var(--border, #e5e7eb);
|
|
display: flex; gap: 8px; justify-content: flex-end;
|
|
}
|
|
.welcome-btn {
|
|
padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
|
|
border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
|
|
cursor: pointer; transition: all 0.15s;
|
|
}
|
|
.welcome-btn:hover { background: var(--border-light, #f9fafb); }
|
|
.welcome-btn.primary { background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1); }
|
|
.welcome-btn.primary:hover { filter: brightness(1.05); }
|
|
.welcome-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
|
|
.welcome-btn.danger:hover { filter: brightness(1.05); }
|
|
.welcome-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
|
|
/* Modal */
|
|
.modal-backdrop {
|
|
position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
|
|
display: none; align-items: center; justify-content: center; z-index: 1000;
|
|
padding: 16px;
|
|
}
|
|
.modal-backdrop.is-open { display: flex; }
|
|
.modal-card {
|
|
background: var(--surface, #fff); border-radius: 12px;
|
|
padding: 24px; width: 100%; max-width: 440px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
|
}
|
|
.modal-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
|
|
.modal-card p.sub { margin: 0 0 18px; font-size: 13px; color: var(--text-secondary, #6b7280); }
|
|
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
|
|
.modal-btn {
|
|
padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
|
|
border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
|
|
cursor: pointer;
|
|
}
|
|
.modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
|
|
|
|
/* Toast stack */
|
|
.toast-stack {
|
|
position: fixed; bottom: 24px; right: 24px; z-index: 2000;
|
|
display: flex; flex-direction: column; gap: 8px; pointer-events: none;
|
|
}
|
|
.toast {
|
|
background: #111827; color: #fff; padding: 10px 16px;
|
|
border-radius: 8px; font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
|
opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s;
|
|
pointer-events: auto; max-width: 380px;
|
|
}
|
|
.toast.show { opacity: 1; transform: translateY(0); }
|
|
.toast.success { background: #047857; }
|
|
.toast.error { background: #b91c1c; }
|
|
</style>
|
|
|
|
<div class="welcome-page">
|
|
<div class="welcome-toolbar">
|
|
<div>
|
|
<h2 class="welcome-title">Setup Page Banner</h2>
|
|
<p class="welcome-sub">Shown above the bootstrap commands on <code>/setup</code>. Use it for org-specific notes: VPN requirements, support channel, data classification, platform prerequisites. Empty by default — no banner is shown when unset.</p>
|
|
</div>
|
|
<div id="status-chip">
|
|
{% if is_override %}
|
|
<span class="origin-chip origin-override"
|
|
title="Overridden by {{ updated_by }} on {{ updated_at.strftime('%Y-%m-%d %H:%M UTC') if updated_at else '—' }}">
|
|
Banner active
|
|
</span>
|
|
{% else %}
|
|
<span class="origin-chip origin-default">No banner</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="welcome-card">
|
|
<div class="welcome-card-body">
|
|
<p class="welcome-desc">
|
|
Author HTML or plain text with Jinja2 placeholders. The banner renders inside the <code>/setup</code> page —
|
|
HTML tags are allowed. Leave empty and click <strong>Remove banner</strong> to go back to no banner.
|
|
<code>{{ "{{ user }}" }}</code> may be <code>null</code> for anonymous visitors — guard with <code>{% if user %}</code>.
|
|
</p>
|
|
|
|
<details class="welcome-cheatsheet">
|
|
<summary>Available placeholders</summary>
|
|
<div class="code-block">
|
|
<span id="placeholder-text" class="code-body">{{ "{{ instance.name }}" }} — instance display name
|
|
{{ "{{ instance.subtitle }}" }} — operator name
|
|
{{ "{{ server.url }}" }} — full server URL
|
|
{{ "{{ server.hostname }}" }} — host part only
|
|
{{ "{{ user.email }}" }}, {{ "{{ user.name }}" }}, {{ "{{ user.is_admin }}" }}
|
|
— null for anonymous visitors; guard with {% if user %}
|
|
{{ "{{ now }}" }}, {{ "{{ today }}" }}</span>
|
|
<button class="btn-copy" data-copy-target="placeholder-text">Copy</button>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="welcome-editor-row">
|
|
<div class="welcome-editor-col">
|
|
<textarea id="content" name="content">{{ current }}</textarea>
|
|
</div>
|
|
<div class="welcome-preview-col">
|
|
<h4>Live preview</h4>
|
|
<div id="preview-content"></div>
|
|
<div id="preview-error" class="welcome-preview-error" hidden></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="welcome-actions">
|
|
<button type="button" class="welcome-btn danger" id="reset-btn">Remove banner</button>
|
|
<button type="button" class="welcome-btn primary" id="save-btn">Save banner</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remove confirmation modal -->
|
|
<div class="modal-backdrop" id="reset-modal" role="dialog" aria-modal="true" aria-labelledby="reset-modal-title">
|
|
<div class="modal-card">
|
|
<h3 id="reset-modal-title">Remove the banner?</h3>
|
|
<p class="sub"><code>/setup</code> will go back to showing no banner. This cannot be undone.</p>
|
|
<div class="modal-actions">
|
|
<button class="modal-btn" data-close-modal="reset-modal">Cancel</button>
|
|
<button class="modal-btn danger" id="reset-confirm-btn">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-stack" id="toast-stack" aria-live="polite"></div>
|
|
|
|
<script>
|
|
const API = "/api/admin/setup-banner";
|
|
|
|
// ── CodeMirror editor ─────────────────────────────────────────────────
|
|
const editor = CodeMirror.fromTextArea(document.getElementById("content"), {
|
|
mode: "jinja2",
|
|
lineNumbers: true,
|
|
lineWrapping: true,
|
|
theme: "material-darker",
|
|
indentUnit: 2,
|
|
tabSize: 2,
|
|
});
|
|
editor.setSize("100%", 480);
|
|
|
|
// ── Live preview (debounced) ──────────────────────────────────────────
|
|
let previewTimer = null;
|
|
function schedulePreview() {
|
|
if (previewTimer) clearTimeout(previewTimer);
|
|
previewTimer = setTimeout(renderPreview, 500);
|
|
}
|
|
|
|
async function renderPreview() {
|
|
const content = editor.getValue();
|
|
const previewBox = document.getElementById("preview-content");
|
|
const previewErr = document.getElementById("preview-error");
|
|
if (!content.trim()) {
|
|
previewBox.innerHTML = '<span class="welcome-preview-empty">(no banner)</span>';
|
|
previewErr.hidden = true;
|
|
return;
|
|
}
|
|
try {
|
|
const r = await fetch(API + "/preview", {
|
|
method: "POST",
|
|
credentials: "include",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content }),
|
|
});
|
|
if (r.ok) {
|
|
const j = await r.json();
|
|
previewBox.innerHTML = j.content;
|
|
previewErr.hidden = true;
|
|
} else {
|
|
let detail = r.statusText;
|
|
try { detail = (await r.json()).detail || detail; } catch (_) {}
|
|
previewBox.innerHTML = "";
|
|
previewErr.textContent = detail;
|
|
previewErr.hidden = false;
|
|
}
|
|
} catch (e) {
|
|
previewErr.textContent = "Network error: " + e.message;
|
|
previewErr.hidden = false;
|
|
}
|
|
}
|
|
|
|
editor.on("change", schedulePreview);
|
|
renderPreview(); // initial render on load
|
|
|
|
// ── Toast ─────────────────────────────────────────────────────────────
|
|
function toast(msg, kind) {
|
|
const el = document.createElement("div");
|
|
el.className = "toast" + (kind ? " " + kind : "");
|
|
el.textContent = msg;
|
|
document.getElementById("toast-stack").appendChild(el);
|
|
requestAnimationFrame(() => el.classList.add("show"));
|
|
setTimeout(() => { el.classList.remove("show"); setTimeout(() => el.remove(), 250); }, 3500);
|
|
}
|
|
|
|
// ── Modal helpers ─────────────────────────────────────────────────────
|
|
function openModal(id) { document.getElementById(id).classList.add("is-open"); }
|
|
function closeModal(id) { document.getElementById(id).classList.remove("is-open"); }
|
|
document.querySelectorAll("[data-close-modal]").forEach(el =>
|
|
el.addEventListener("click", () => closeModal(el.dataset.closeModal)));
|
|
document.querySelectorAll(".modal-backdrop").forEach(el => {
|
|
el.addEventListener("click", e => { if (e.target === el) el.classList.remove("is-open"); });
|
|
});
|
|
document.addEventListener("keydown", e => {
|
|
if (e.key === "Escape") document.querySelectorAll(".modal-backdrop.is-open").forEach(m => m.classList.remove("is-open"));
|
|
});
|
|
|
|
// ── Status chip ───────────────────────────────────────────────────────
|
|
function setStatusChip(data) {
|
|
const wrap = document.getElementById("status-chip");
|
|
if (data.content !== null && data.content !== undefined) {
|
|
const when = data.updated_at
|
|
? new Date(data.updated_at).toISOString().slice(0, 16).replace("T", " ") + " UTC"
|
|
: "—";
|
|
const who = data.updated_by || "—";
|
|
wrap.innerHTML = `<span class="origin-chip origin-override" title="Overridden by ${who} on ${when}">Banner active</span>`;
|
|
} else {
|
|
wrap.innerHTML = `<span class="origin-chip origin-default">No banner</span>`;
|
|
}
|
|
}
|
|
|
|
// ── Refresh status + editor content from API ─────────────────────────
|
|
async function refreshStatus() {
|
|
const r = await fetch(API, { credentials: "include" });
|
|
if (!r.ok) return;
|
|
const data = await r.json();
|
|
setStatusChip(data);
|
|
editor.setValue(data.content !== null && data.content !== undefined ? data.content : "");
|
|
renderPreview();
|
|
}
|
|
|
|
// ── Save ──────────────────────────────────────────────────────────────
|
|
document.getElementById("save-btn").addEventListener("click", async () => {
|
|
const btn = document.getElementById("save-btn");
|
|
const content = editor.getValue();
|
|
if (!content.trim()) {
|
|
toast("Nothing to save — editor is empty. Use Remove banner to clear.", "error");
|
|
return;
|
|
}
|
|
btn.disabled = true;
|
|
try {
|
|
const r = await fetch(API, {
|
|
method: "PUT",
|
|
credentials: "include",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content }),
|
|
});
|
|
if (r.ok) {
|
|
toast("Banner saved.", "success");
|
|
await refreshStatus();
|
|
} else {
|
|
let detail = r.statusText;
|
|
try { detail = (await r.json()).detail || detail; } catch (_) {}
|
|
toast("Save failed: " + detail, "error");
|
|
}
|
|
} catch (e) {
|
|
toast("Save failed: " + e.message, "error");
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// ── Remove (with confirm modal) ───────────────────────────────────────
|
|
document.getElementById("reset-btn").addEventListener("click", () => openModal("reset-modal"));
|
|
|
|
document.getElementById("reset-confirm-btn").addEventListener("click", async () => {
|
|
closeModal("reset-modal");
|
|
const btn = document.getElementById("reset-btn");
|
|
btn.disabled = true;
|
|
try {
|
|
const r = await fetch(API, { method: "DELETE", credentials: "include" });
|
|
if (r.ok) {
|
|
toast("Banner removed.", "success");
|
|
await refreshStatus();
|
|
} else {
|
|
let detail = r.statusText;
|
|
try { detail = (await r.json()).detail || detail; } catch (_) {}
|
|
toast("Remove failed: " + detail, "error");
|
|
}
|
|
} catch (e) {
|
|
toast("Remove failed: " + e.message, "error");
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// ── Copy widget ───────────────────────────────────────────────────────
|
|
function copyToClipboard(text) {
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
return navigator.clipboard.writeText(text);
|
|
}
|
|
const ta = document.createElement("textarea");
|
|
ta.value = text;
|
|
ta.style.cssText = "position:fixed;left:-9999px;top:-9999px";
|
|
document.body.appendChild(ta);
|
|
ta.focus();
|
|
ta.select();
|
|
return new Promise((resolve, reject) => {
|
|
try { document.execCommand("copy") ? resolve() : reject(); }
|
|
finally { document.body.removeChild(ta); }
|
|
});
|
|
}
|
|
|
|
function flashCopied(button) {
|
|
const original = button.textContent;
|
|
button.textContent = "Copied!";
|
|
button.classList.add("copied");
|
|
setTimeout(() => { button.textContent = original; button.classList.remove("copied"); }, 1500);
|
|
}
|
|
|
|
document.querySelectorAll(".btn-copy[data-copy-target]").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
const target = document.getElementById(btn.getAttribute("data-copy-target"));
|
|
if (!target) return;
|
|
copyToClipboard(target.textContent.trim())
|
|
.then(() => flashCopied(btn))
|
|
.catch(() => {
|
|
const range = document.createRange();
|
|
range.selectNodeContents(target);
|
|
const sel = window.getSelection();
|
|
sel.removeAllRanges();
|
|
sel.addRange(range);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|