mirror of
https://github.com/computerim/impactflow-discovery.git
synced 2026-08-27 07:10:37 +00:00
Complete Phase 1: goals, cookie auth, profile editing
Close the remaining Phase 1 DoD gaps and reconcile the browser flow with the auth layer. Goals (5 -> 7 prompts): - Add near-term (6-12mo) and long-term (3-5yr) goal prompts; collect raw text on the conversation and store AI-articulated goal summaries on the profile. Extractor articulates the person's own stated goals (mirror, not compass) and never fabricates. Alembic 003 adds the four columns. Cookie-based browser sessions (fixes frontend<->auth desync): - OAuth callback now sets httpOnly session cookies and redirects into the app instead of returning JSON. get_current_user gains a cookie fallback (X-API-Key -> Bearer -> cookie). refresh/logout read the refresh cookie and set/clear cookies. New shared auth.js (authedFetch) sends cookies and silently refreshes on 401. Static pages drop the bogus user_id and call the correct /me endpoints. Profile editing (read/edit/affirm): - PATCH /discovery/profile/me edits the prose (Ikigai summaries, overlap narrative, goals); owner-scoped, partial update, 409 when locked. Edit mode in profile.html with Save/Cancel. Also: bump default model to claude-sonnet-4-6, align ports to 8011 (OAuth redirect, CORS), add COOKIE_SECURE/POST_LOGIN_REDIRECT config, and refresh the README to match the shipped behavior. Tests: 33 passing (added cookie-auth, profile-edit, goal-extraction cases; factored a shared app_client fixture into conftest.py). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
// Shared client-side auth helpers.
|
||||
//
|
||||
// The session lives entirely in httpOnly cookies that the server sets at
|
||||
// /api/auth/callback, so there are no tokens for the page to store or read.
|
||||
// We just send the cookies with every request and recover from access-token
|
||||
// expiry by silently refreshing once before giving up and sending the user
|
||||
// back through Google.
|
||||
|
||||
function redirectToLogin() {
|
||||
window.location.href = "/api/auth/login";
|
||||
}
|
||||
|
||||
// fetch() wrapper that always sends the session cookies. On a 401 it attempts
|
||||
// a single silent refresh (the refresh cookie is scoped to /api/auth) and
|
||||
// retries the original request; if that still fails, it bounces to login.
|
||||
async function authedFetch(url, options = {}) {
|
||||
const opts = { credentials: "include", ...options };
|
||||
|
||||
let res = await fetch(url, opts);
|
||||
if (res.status !== 401) return res;
|
||||
|
||||
const refreshed = await fetch("/api/auth/refresh", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
});
|
||||
if (refreshed.ok) {
|
||||
res = await fetch(url, opts);
|
||||
if (res.status !== 401) return res;
|
||||
}
|
||||
|
||||
redirectToLogin();
|
||||
throw new Error("Not authenticated");
|
||||
}
|
||||
+19
-46
@@ -11,6 +11,7 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<script src="/static/auth.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Question flow -->
|
||||
@@ -67,44 +68,22 @@
|
||||
text:
|
||||
"If you knew you couldn't fail and money wasn't a factor, what would you spend the next five years building or doing?",
|
||||
},
|
||||
{
|
||||
key: "prompt_goals_short",
|
||||
title: "The Near Horizon",
|
||||
text:
|
||||
"Looking at the next 6 to 12 months, what do you most want to make progress on or accomplish? Say it in your own words.",
|
||||
},
|
||||
{
|
||||
key: "prompt_goals_long",
|
||||
title: "The Long Horizon",
|
||||
text:
|
||||
"Now stretch out 3 to 5 years. What do you want to have built, become, or changed by then?",
|
||||
},
|
||||
];
|
||||
|
||||
function createUserId() {
|
||||
const webCrypto = globalThis.crypto;
|
||||
if (webCrypto && typeof webCrypto.randomUUID === "function") {
|
||||
return webCrypto.randomUUID();
|
||||
}
|
||||
|
||||
if (webCrypto && typeof webCrypto.getRandomValues === "function") {
|
||||
const bytes = new Uint8Array(16);
|
||||
webCrypto.getRandomValues(bytes);
|
||||
bytes[6] = (bytes[6] & 0x0f) | 0x40;
|
||||
bytes[8] = (bytes[8] & 0x3f) | 0x80;
|
||||
const hex = Array.from(bytes, (b) =>
|
||||
b.toString(16).padStart(2, "0")
|
||||
).join("");
|
||||
return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(
|
||||
12,
|
||||
16
|
||||
)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
|
||||
}
|
||||
|
||||
return `local-${Date.now()}-${Math.random()
|
||||
.toString(16)
|
||||
.slice(2)}`;
|
||||
}
|
||||
|
||||
// Persistent per-browser user id.
|
||||
function getUserId() {
|
||||
let id = localStorage.getItem("impactflow_user_id");
|
||||
if (!id) {
|
||||
id = createUserId();
|
||||
localStorage.setItem("impactflow_user_id", id);
|
||||
}
|
||||
return id;
|
||||
}
|
||||
|
||||
const userId = getUserId();
|
||||
// The signed-in user is resolved server-side from the session cookie, so
|
||||
// the page no longer mints or tracks a user id of its own.
|
||||
const answers = new Array(PROMPTS.length).fill("");
|
||||
let index = 0;
|
||||
let conversationId = null;
|
||||
@@ -155,11 +134,7 @@
|
||||
});
|
||||
|
||||
async function startConversation() {
|
||||
const res = await fetch("/discovery/start", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ user_id: userId }),
|
||||
});
|
||||
const res = await authedFetch("/discovery/start", { method: "POST" });
|
||||
if (!res.ok) throw new Error("Could not start conversation");
|
||||
const data = await res.json();
|
||||
conversationId = data.conversation_id;
|
||||
@@ -177,7 +152,7 @@
|
||||
body[p.key] = answers[i];
|
||||
});
|
||||
|
||||
const respondRes = await fetch(
|
||||
const respondRes = await authedFetch(
|
||||
`/discovery/${conversationId}/respond`,
|
||||
{
|
||||
method: "PUT",
|
||||
@@ -187,7 +162,7 @@
|
||||
);
|
||||
if (!respondRes.ok) throw new Error("Could not save responses");
|
||||
|
||||
const completeRes = await fetch(
|
||||
const completeRes = await authedFetch(
|
||||
`/discovery/${conversationId}/complete`,
|
||||
{ method: "POST" }
|
||||
);
|
||||
@@ -198,9 +173,7 @@
|
||||
throw new Error(detail.detail || "Extraction failed");
|
||||
}
|
||||
|
||||
window.location.href = `/static/profile.html?user_id=${encodeURIComponent(
|
||||
userId
|
||||
)}`;
|
||||
window.location.href = "/static/profile.html";
|
||||
} catch (err) {
|
||||
el.loading.classList.remove("active");
|
||||
el.flow.style.display = "block";
|
||||
|
||||
+156
-44
@@ -11,6 +11,7 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<script src="/static/auth.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
@@ -48,10 +49,6 @@
|
||||
{ key: "vocation_summary", title: "What you can be paid for", icon: "$" },
|
||||
];
|
||||
|
||||
function getParam(name) {
|
||||
return new URLSearchParams(window.location.search).get(name);
|
||||
}
|
||||
|
||||
function confClass(level) {
|
||||
if (level === "high") return "high";
|
||||
if (level === "medium") return "medium";
|
||||
@@ -72,43 +69,76 @@
|
||||
.replace(/>/g, ">");
|
||||
}
|
||||
|
||||
// The editable prose. Order/labels mirror the read view. The AI's
|
||||
// structural read (triad/type/wing/variant) is shown but not edited here.
|
||||
const GOAL_FIELDS = [
|
||||
{ key: "short_term_goals", title: "Next 6–12 months" },
|
||||
{ key: "long_term_goals", title: "Next 3–5 years" },
|
||||
];
|
||||
|
||||
const content = document.getElementById("content");
|
||||
let currentProfile = null;
|
||||
|
||||
async function load() {
|
||||
const userId = getParam("user_id");
|
||||
const content = document.getElementById("content");
|
||||
|
||||
if (!userId) {
|
||||
content.innerHTML =
|
||||
'<div class="error-box">No user id provided.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let profile;
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/discovery/profile/${encodeURIComponent(userId)}`
|
||||
);
|
||||
const res = await authedFetch("/discovery/profile/me");
|
||||
if (!res.ok) throw new Error("Profile not found");
|
||||
profile = await res.json();
|
||||
currentProfile = await res.json();
|
||||
} catch (err) {
|
||||
content.innerHTML = `<div class="error-box">Could not load your profile: ${escapeHtml(
|
||||
err.message
|
||||
)}</div>`;
|
||||
return;
|
||||
}
|
||||
renderRead();
|
||||
}
|
||||
|
||||
function renderRead() {
|
||||
const profile = currentProfile;
|
||||
const conf = profile.confidence || {};
|
||||
const triad = TRIAD_INFO[profile.triad] || TRIAD_INFO.gut;
|
||||
|
||||
const ikigaiCards = IKIGAI.map((item) => {
|
||||
return `
|
||||
const ikigaiCards = IKIGAI.map(
|
||||
(item) => `
|
||||
<div class="card">
|
||||
<h3>${dot(conf.ikigai)} ${item.icon} ${item.title}</h3>
|
||||
<p>${escapeHtml(profile[item.key]) || "—"}</p>
|
||||
</div>`;
|
||||
}).join("");
|
||||
</div>`
|
||||
).join("");
|
||||
|
||||
const locked = profile.locked;
|
||||
|
||||
// Goals are the person's own articulated direction. Only show the
|
||||
// section if at least one horizon has content.
|
||||
const goals = GOAL_FIELDS.filter(
|
||||
(g) => profile[g.key] && profile[g.key].trim()
|
||||
);
|
||||
const goalsBlock = goals.length
|
||||
? `
|
||||
<p class="section-label">Where you're headed</p>
|
||||
<div class="ikigai-grid">${goals
|
||||
.map(
|
||||
(g) => `
|
||||
<div class="card">
|
||||
<h3>→ ${g.title}</h3>
|
||||
<p>${escapeHtml(profile[g.key])}</p>
|
||||
</div>`
|
||||
)
|
||||
.join("")}</div>
|
||||
`
|
||||
: "";
|
||||
|
||||
// Unlocked profiles can be edited and then affirmed; locked profiles are
|
||||
// final and show neither control as actionable.
|
||||
const actions = locked
|
||||
? `<div class="confirm-row">
|
||||
<button class="btn-primary confirmed" disabled>Profile confirmed ✓</button>
|
||||
</div>`
|
||||
: `<div class="nav">
|
||||
<button class="btn-ghost" id="editBtn">Edit my words</button>
|
||||
<button class="btn-primary" id="confirmBtn">This is me</button>
|
||||
</div>`;
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="profile-narrative">${escapeHtml(
|
||||
profile.overlap_narrative
|
||||
@@ -122,32 +152,114 @@
|
||||
<p>${triad.text}</p>
|
||||
</div>
|
||||
|
||||
<div class="confirm-row">
|
||||
<button class="btn-primary ${locked ? "confirmed" : ""}" id="confirmBtn" ${
|
||||
locked ? "disabled" : ""
|
||||
}>
|
||||
${locked ? "Profile confirmed ✓" : "This is me"}
|
||||
</button>
|
||||
${goalsBlock}
|
||||
${actions}
|
||||
`;
|
||||
|
||||
if (locked) return;
|
||||
|
||||
document
|
||||
.getElementById("editBtn")
|
||||
.addEventListener("click", renderEdit);
|
||||
|
||||
const btn = document.getElementById("confirmBtn");
|
||||
btn.addEventListener("click", async () => {
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const res = await authedFetch("/discovery/profile/me/confirm", {
|
||||
method: "PUT",
|
||||
});
|
||||
if (!res.ok) throw new Error("confirm failed");
|
||||
currentProfile.locked = true;
|
||||
renderRead();
|
||||
} catch (err) {
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Try again";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function editField(key, label, value) {
|
||||
return `
|
||||
<div class="edit-field">
|
||||
<label for="edit_${key}">${label}</label>
|
||||
<textarea class="edit" id="edit_${key}">${escapeHtml(
|
||||
value
|
||||
)}</textarea>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderEdit() {
|
||||
const profile = currentProfile;
|
||||
|
||||
const ikigaiFields = IKIGAI.map((item) =>
|
||||
editField(item.key, `${item.icon} ${item.title}`, profile[item.key])
|
||||
).join("");
|
||||
const goalFields = GOAL_FIELDS.map((g) =>
|
||||
editField(g.key, `→ ${g.title}`, profile[g.key])
|
||||
).join("");
|
||||
|
||||
content.innerHTML = `
|
||||
<p class="section-label">Edit your words</p>
|
||||
<p class="edit-help">These are your words to own. Revise anything that
|
||||
doesn't sound like you, then save.</p>
|
||||
|
||||
${editField(
|
||||
"overlap_narrative",
|
||||
"Where it all comes together",
|
||||
profile.overlap_narrative
|
||||
)}
|
||||
|
||||
<div class="ikigai-grid">${ikigaiFields}</div>
|
||||
<div class="ikigai-grid">${goalFields}</div>
|
||||
|
||||
<div id="editError"></div>
|
||||
<div class="nav">
|
||||
<button class="btn-ghost" id="cancelBtn">Cancel</button>
|
||||
<button class="btn-primary" id="saveBtn">Save changes</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const btn = document.getElementById("confirmBtn");
|
||||
if (btn && !locked) {
|
||||
btn.addEventListener("click", async () => {
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/discovery/profile/${encodeURIComponent(userId)}/confirm`,
|
||||
{ method: "PUT" }
|
||||
);
|
||||
if (!res.ok) throw new Error("confirm failed");
|
||||
btn.textContent = "Profile confirmed ✓";
|
||||
btn.classList.add("confirmed");
|
||||
} catch (err) {
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Try again";
|
||||
}
|
||||
document.getElementById("cancelBtn").addEventListener("click", renderRead);
|
||||
document.getElementById("saveBtn").addEventListener("click", saveEdits);
|
||||
}
|
||||
|
||||
const EDITABLE_KEYS = [
|
||||
"overlap_narrative",
|
||||
...IKIGAI.map((i) => i.key),
|
||||
...GOAL_FIELDS.map((g) => g.key),
|
||||
];
|
||||
|
||||
async function saveEdits() {
|
||||
const saveBtn = document.getElementById("saveBtn");
|
||||
saveBtn.disabled = true;
|
||||
|
||||
const payload = {};
|
||||
EDITABLE_KEYS.forEach((key) => {
|
||||
payload[key] = document.getElementById(`edit_${key}`).value;
|
||||
});
|
||||
|
||||
try {
|
||||
const res = await authedFetch("/discovery/profile/me", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const detail = await res
|
||||
.json()
|
||||
.catch(() => ({ detail: "Could not save changes" }));
|
||||
throw new Error(detail.detail || "Could not save changes");
|
||||
}
|
||||
currentProfile = await res.json();
|
||||
renderRead();
|
||||
} catch (err) {
|
||||
saveBtn.disabled = false;
|
||||
document.getElementById(
|
||||
"editError"
|
||||
).innerHTML = `<div class="error-box">${escapeHtml(
|
||||
err.message
|
||||
)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -277,6 +277,31 @@ button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ---------- Profile edit mode ---------- */
|
||||
|
||||
.edit-help {
|
||||
color: var(--navy-soft);
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.edit-field {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.edit-field label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--navy);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
textarea.edit {
|
||||
min-height: 120px;
|
||||
padding: 14px 16px;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
background: #fdecea;
|
||||
border: 1px solid var(--red);
|
||||
|
||||
Reference in New Issue
Block a user