feat: persona onboarding — invite tokens, self-service setup, persona creation, switcher
New user flow:
1. Admin: python manage_passwords.py invite <username> → generates URL
2. User visits /setup/<token> → sets own password → logged in
3. User redirected to /setup/persona → fills name/emoji/description
4. persona_template.py generates all starter files → lands at /{user}/{persona}
Multiple personas:
- Header persona name is now a clickable dropdown listing all personas
- "New persona" link at bottom → /setup/persona (available to logged-in users)
- /api/personas endpoint returns persona list for current session user
New files:
- persona_template.py: generates IDENTITY/SOUL/PROTOCOLS/USER/HELP.md + data files
- routers/onboarding.py: /setup/{token}, /setup/persona GET+POST
- static/setup.html: two-step form (password → persona), emoji picker, mobile-friendly
Updated:
- auth_utils.py: create_invite(), validate_invite(), consume_invite()
- manage_passwords.py: invite command with URL output
- auth_middleware.py: /setup/* prefix is public (invite tokens need no auth)
- routers/ui.py: /api/personas endpoint; post-login redirect if no personas
- static/app.js: persona switcher dropdown with navigation + Add persona link
- static/style.css: .persona-switcher, .persona-dropdown, mobile adjustments
Mobile: login/setup pages are card-centered with responsive padding;
dropdown avoids edge-clipping on narrow screens; logout button stays visible.
All 80 tests pass.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -137,13 +137,58 @@
|
||||
updateInputMode();
|
||||
});
|
||||
|
||||
// ── Persona name in header ───────────────────────────────────
|
||||
const personaNameEl = document.getElementById('persona-name');
|
||||
// ── Persona name + switcher ──────────────────────────────────
|
||||
const personaNameEl = document.getElementById('persona-name');
|
||||
const personaDropEl = document.getElementById('persona-dropdown');
|
||||
const personaSwitcher = document.getElementById('persona-switcher');
|
||||
|
||||
if (personaNameEl && CORTEX_PERSONA) {
|
||||
// Capitalize first letter
|
||||
personaNameEl.textContent = CORTEX_PERSONA.charAt(0).toUpperCase() + CORTEX_PERSONA.slice(1);
|
||||
}
|
||||
|
||||
// Load persona list and build dropdown
|
||||
async function loadPersonaSwitcher() {
|
||||
try {
|
||||
const res = await fetch('/api/personas');
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
const personas = data.personas || [];
|
||||
if (personas.length === 0) return;
|
||||
|
||||
personaDropEl.innerHTML = '';
|
||||
|
||||
personas.forEach(p => {
|
||||
const a = document.createElement('a');
|
||||
a.href = `/${CORTEX_USER}/${p}`;
|
||||
a.textContent = p.charAt(0).toUpperCase() + p.slice(1);
|
||||
if (p === CORTEX_PERSONA) a.classList.add('active');
|
||||
personaDropEl.appendChild(a);
|
||||
});
|
||||
|
||||
const divider = document.createElement('div');
|
||||
divider.className = 'pd-divider';
|
||||
personaDropEl.appendChild(divider);
|
||||
|
||||
const addLink = document.createElement('a');
|
||||
addLink.href = '/setup/persona';
|
||||
addLink.className = 'pd-add';
|
||||
addLink.textContent = '+ New persona';
|
||||
personaDropEl.appendChild(addLink);
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
loadPersonaSwitcher();
|
||||
|
||||
// Toggle dropdown on click
|
||||
if (personaSwitcher) {
|
||||
personaSwitcher.addEventListener('click', (e) => {
|
||||
if (personaDropEl.children.length === 0) return;
|
||||
personaDropEl.classList.toggle('open');
|
||||
e.stopPropagation();
|
||||
});
|
||||
document.addEventListener('click', () => personaDropEl.classList.remove('open'));
|
||||
}
|
||||
|
||||
// ── Backend toggle ───────────────────────────────────────────
|
||||
|
||||
fetch('/backend').then(r => r.json()).then(d => setBackendUI(d.primary));
|
||||
|
||||
@@ -21,10 +21,11 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<span class="header-emoji">✨</span>
|
||||
<div>
|
||||
<span class="header-emoji" id="header-emoji">✨</span>
|
||||
<div class="persona-switcher" id="persona-switcher">
|
||||
<div class="name" id="persona-name">Inara</div>
|
||||
<div class="subtitle">Cortex · Local</div>
|
||||
<div class="persona-dropdown" id="persona-dropdown"></div>
|
||||
</div>
|
||||
<button id="sessions-btn" class="hdr-btn">Sessions</button>
|
||||
<button id="files-btn" class="hdr-btn">Files</button>
|
||||
|
||||
255
cortex/static/setup.html
Normal file
255
cortex/static/setup.html
Normal file
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cortex — Setup</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0f1117;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
color: #e2e8f0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #1a1d27;
|
||||
border: 1px solid #2d3148;
|
||||
border-radius: 12px;
|
||||
padding: 2.5rem 2rem;
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.logo h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.05em; color: #a78bfa; }
|
||||
.logo p { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 1.25rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #2d3148;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
label small { font-weight: 400; color: #475569; }
|
||||
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.85rem;
|
||||
background: #0f1117;
|
||||
border: 1px solid #2d3148;
|
||||
border-radius: 6px;
|
||||
color: #e2e8f0;
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
input:focus, select:focus { border-color: #7c3aed; }
|
||||
select option { background: #1a1d27; }
|
||||
|
||||
.field { margin-bottom: 1rem; }
|
||||
|
||||
.hint { font-size: 0.75rem; color: #475569; margin-top: 0.3rem; }
|
||||
|
||||
button[type="submit"] {
|
||||
width: 100%;
|
||||
padding: 0.7rem;
|
||||
margin-top: 0.5rem;
|
||||
background: #7c3aed;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover { background: #6d28d9; }
|
||||
|
||||
.error {
|
||||
color: #f87171;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 0.7rem;
|
||||
color: #475569;
|
||||
text-align: right;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.emoji-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.emoji-opt {
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0.35rem;
|
||||
border-radius: 6px;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.1s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.emoji-opt.selected { border-color: #7c3aed; background: #2d1f52; }
|
||||
#emoji-hidden { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="logo">
|
||||
<h1>Cortex</h1>
|
||||
<p>Let's get you set up.</p>
|
||||
</div>
|
||||
|
||||
<!-- ERROR -->
|
||||
|
||||
<!-- ── Step 1: password ───────────────────────────────────────── -->
|
||||
<div id="step-password">
|
||||
<div class="step-label">Step 1 of 2</div>
|
||||
<h2>Set your password</h2>
|
||||
<form method="POST" action="" id="password-form">
|
||||
<input type="hidden" name="step" value="password">
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password"
|
||||
autocomplete="new-password" autofocus required minlength="8">
|
||||
<p class="hint">Minimum 8 characters.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="confirm">Confirm password</label>
|
||||
<input type="password" id="confirm" name="confirm"
|
||||
autocomplete="new-password" required>
|
||||
</div>
|
||||
<button type="submit">Continue →</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- ── Step 2: persona ────────────────────────────────────────── -->
|
||||
<div id="step-persona" style="display:none">
|
||||
<div class="step-label">Step 2 of 2</div>
|
||||
<h2>Create your persona</h2>
|
||||
<form method="POST" action="" id="persona-form">
|
||||
<input type="hidden" name="step" value="persona">
|
||||
<div class="field">
|
||||
<label for="persona_name">
|
||||
Persona name <small>(used in the URL)</small>
|
||||
</label>
|
||||
<input type="text" id="persona_name" name="persona_name"
|
||||
pattern="[a-z_][a-z0-9_\-]{0,31}"
|
||||
placeholder="e.g. tina" required>
|
||||
<p class="hint">Lowercase, no spaces. This becomes /you/tina in the URL.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="display_name">Display name</label>
|
||||
<input type="text" id="display_name" name="display_name"
|
||||
placeholder="e.g. Tina" required>
|
||||
<p class="hint">Shown in the chat header.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="user_real_name">Your name</label>
|
||||
<input type="text" id="user_real_name" name="user_real_name"
|
||||
placeholder="e.g. Holly" required>
|
||||
<p class="hint">What your persona should call you.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Pick an emoji</label>
|
||||
<div class="emoji-row" id="emoji-row">
|
||||
<!-- populated by JS -->
|
||||
</div>
|
||||
<input type="hidden" name="emoji" id="emoji-hidden" value="✨">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="description">
|
||||
Short description <small>(optional)</small>
|
||||
</label>
|
||||
<input type="text" id="description" name="description"
|
||||
placeholder="e.g. Friendly, creative, loves music">
|
||||
</div>
|
||||
<button type="submit">Create my persona →</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── Emoji picker ──────────────────────────────────────────────────
|
||||
const EMOJIS = ['✨','🌙','🌸','🔮','🦋','🌿','⚡','🎯','🌊','🎨',
|
||||
'🦊','🐉','🌺','🍀','🎵','💫','🔥','❄️','🌈','🏔️'];
|
||||
const emojiRow = document.getElementById('emoji-row');
|
||||
const emojiHidden = document.getElementById('emoji-hidden');
|
||||
let selected = '✨';
|
||||
|
||||
EMOJIS.forEach(e => {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'emoji-opt' + (e === selected ? ' selected' : '');
|
||||
span.textContent = e;
|
||||
span.addEventListener('click', () => {
|
||||
document.querySelectorAll('.emoji-opt').forEach(s => s.classList.remove('selected'));
|
||||
span.classList.add('selected');
|
||||
selected = e;
|
||||
emojiHidden.value = e;
|
||||
});
|
||||
emojiRow.appendChild(span);
|
||||
});
|
||||
|
||||
// ── Step toggle (server tells us which step via query param) ─────
|
||||
const params = new URLSearchParams(location.search);
|
||||
if (params.get('step') === '2') {
|
||||
document.getElementById('step-password').style.display = 'none';
|
||||
document.getElementById('step-persona').style.display = 'block';
|
||||
}
|
||||
|
||||
// ── Client-side confirm password check ───────────────────────────
|
||||
document.getElementById('password-form').addEventListener('submit', e => {
|
||||
const pw = document.getElementById('password').value;
|
||||
const cfm = document.getElementById('confirm').value;
|
||||
if (pw !== cfm) {
|
||||
e.preventDefault();
|
||||
alert('Passwords do not match.');
|
||||
}
|
||||
});
|
||||
|
||||
// ── Auto-generate persona slug from display name ─────────────────
|
||||
document.getElementById('display_name').addEventListener('input', function() {
|
||||
const slugField = document.getElementById('persona_name');
|
||||
if (!slugField._touched) {
|
||||
slugField.value = this.value
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9_-]/g, '')
|
||||
.slice(0, 32);
|
||||
}
|
||||
});
|
||||
document.getElementById('persona_name').addEventListener('input', function() {
|
||||
this._touched = true;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -129,6 +129,56 @@
|
||||
header .name { font-size: 1.1rem; font-weight: 600; color: var(--accent); }
|
||||
header .subtitle { font-size: 0.78rem; color: var(--muted); }
|
||||
|
||||
/* Persona switcher */
|
||||
.persona-switcher {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.persona-switcher:hover .name { text-decoration: underline dotted; }
|
||||
|
||||
.persona-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
min-width: 160px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||
z-index: 200;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.persona-dropdown.open { display: block; }
|
||||
|
||||
.persona-dropdown a {
|
||||
display: block;
|
||||
padding: 0.55rem 0.85rem;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.persona-dropdown a:hover { background: var(--border); }
|
||||
|
||||
.persona-dropdown a.active { color: var(--accent); font-weight: 600; }
|
||||
|
||||
.persona-dropdown .pd-divider {
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.persona-dropdown .pd-add {
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.persona-dropdown .pd-add:hover { color: var(--text); }
|
||||
|
||||
.hdr-btn {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
@@ -1014,6 +1064,12 @@
|
||||
@media (max-width: 520px) {
|
||||
header { padding: 8px 12px; gap: 8px; }
|
||||
header .subtitle { display: none; }
|
||||
|
||||
/* Persona dropdown: avoid clipping off left edge on narrow screens */
|
||||
.persona-dropdown { left: 0; right: auto; min-width: 140px; }
|
||||
|
||||
/* Logout button: keep visible but compact */
|
||||
#logout-btn { padding: 5px 8px; font-size: 1rem; }
|
||||
#messages { padding: 12px; }
|
||||
|
||||
/* dvh adjusts as soft keyboard opens/closes */
|
||||
|
||||
Reference in New Issue
Block a user