From c16397559b3154a07bbbf649ae99a154337e2836 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Sun, 1 Nov 2026 14:19:23 +0000
Subject: [PATCH 1/2] feat: import OpenProfile on connect

---
 apps/web/package.json          |  2 +-
 apps/web/public/app/app.js     | 14 +++++++++++---
 apps/web/public/app/index.html |  1 +
 apps/web/src/app.js            |  7 ++++++-
 bun.lock                       |  6 ++++--
 5 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index f169a2f..fb3f02c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "@profullstack/affiliates": "0.3.0",
     "@profullstack/footer": "latest",
-    "@profullstack/profile": "0.1.6",
+    "@profullstack/profile": "0.1.7",
     "@profullstack/redeem-credits": "0.2.0",
     "@profullstack/sealed-secrets": "0.1.0",
     "@profullstack/x402-gateway": "^0.13.1",
diff --git a/apps/web/public/app/app.js b/apps/web/public/app/app.js
index 42edef8..bae3e3d 100644
--- a/apps/web/public/app/app.js
+++ b/apps/web/public/app/app.js
@@ -271,8 +271,8 @@ function bindShell() {
  * The shared profile fields (@profullstack/profile), from the <template> the
  * server renders into the shell, filled with `values`.
  */
-function profileFields(values = {}) {
-  const t = document.getElementById('profile-fields');
+function profileFields(values = {}, importOpenProfile = false) {
+  const t = document.getElementById(importOpenProfile ? 'contact-profile-fields' : 'profile-fields');
   if (!t) return '';
   const box = document.createElement('div');
   box.append(t.content.cloneNode(true));
@@ -296,6 +296,13 @@ function showFieldErrors(form, errors = {}) {
   }
 }
 
+function enhanceProfile() {
+  const script = document.createElement('script');
+  script.src = '/assets/profile.js';
+  document.body.append(script);
+  script.onload = () => script.remove();
+}
+
 function renderSignin(q, signup = false) {
   const email = q.get('email') ?? '';
   root.innerHTML = `<div class="center"><div class="auth">
@@ -1327,7 +1334,7 @@ async function viewSettings() {
         <form id="me-form" class="row"><label class="f" style="flex:1">Name<input name="name" value="${esc(state.me.user.name ?? '')}"></label><button type="submit" style="align-self:flex-end">Save</button></form>
         <p class="dim small">${esc(state.me.user.email)}</p></div></section>
       <section class="card" id="contact"><div class="card-h"><h2>Contact details</h2></div><div class="card-b">
-        <form id="contact-form" class="stack">${profileFields(profile)}<div><button type="submit">Save contact details</button></div></form>
+        <form id="contact-form" class="stack">${profileFields(profile, true)}<div><button type="submit">Save contact details</button></div></form>
         <p class="dim small">Private to your account. Sent with ${esc(state.me.user.email)}.</p></div></section>
       <section class="card"><div class="card-h"><h2>Passkeys</h2><button class="sm" id="add-passkey">Add a passkey</button></div>
         <div class="card-b muted">${state.me.passkeys ? `${state.me.passkeys} passkey${state.me.passkeys === 1 ? '' : 's'} saved. Sign in with Face ID, Touch ID or your security key.` : 'Add one to sign in without waiting for an email.'}</div></section>
@@ -1354,6 +1361,7 @@ async function viewSettings() {
   return {
     html,
     bind() {
+      enhanceProfile();
       document.getElementById('signout').onclick = signOut;
       document.getElementById('me-form').onsubmit = (e) => {
         e.preventDefault();
diff --git a/apps/web/public/app/index.html b/apps/web/public/app/index.html
index 5b9595e..62b9f96 100644
--- a/apps/web/public/app/index.html
+++ b/apps/web/public/app/index.html
@@ -20,5 +20,6 @@
 <div id="toast" role="status" aria-live="polite"></div>
 <dialog id="modal"></dialog>
 <!--profile-fields-->
+<!--contact-profile-fields-->
 </body>
 </html>
diff --git a/apps/web/src/app.js b/apps/web/src/app.js
index 5ceb43b..b2e411c 100644
--- a/apps/web/src/app.js
+++ b/apps/web/src/app.js
@@ -64,13 +64,18 @@ app.get('/health/manifest.webmanifest', (c) =>
 const PROFILE_TEMPLATE = `<template id="profile-fields">${renderProfileFields({
   fields: PROFILE_COLUMNS.filter((f) => f !== 'email'),
 })}</template>`;
+const CONTACT_PROFILE_TEMPLATE = `<template id="contact-profile-fields">${renderProfileFields({
+  fields: PROFILE_COLUMNS.filter((f) => f !== 'email'),
+  importOpenProfile: true,
+})}</template>`;
 const shell = async (c) =>
   c.html(
     await withUniversalFooter(
       pub('app/index.html')
         .toString()
         .replace('<!--year-->', String(new Date().getFullYear()))
-        .replace('<!--profile-fields-->', PROFILE_TEMPLATE),
+        .replace('<!--profile-fields-->', PROFILE_TEMPLATE)
+        .replace('<!--contact-profile-fields-->', CONTACT_PROFILE_TEMPLATE),
     ),
   );
 for (const p of ['/app', '/app/*', '/signin', '/signup', '/portal', '/portal/*']) app.get(p, shell);
diff --git a/bun.lock b/bun.lock
index c7c0f13..252fb05 100644
--- a/bun.lock
+++ b/bun.lock
@@ -11,7 +11,7 @@
       "dependencies": {
         "@profullstack/affiliates": "0.3.0",
         "@profullstack/footer": "latest",
-        "@profullstack/profile": "0.1.6",
+        "@profullstack/profile": "0.1.7",
         "@profullstack/redeem-credits": "0.2.0",
         "@profullstack/sealed-secrets": "0.1.0",
         "@profullstack/x402-gateway": "^0.13.1",
@@ -99,9 +99,11 @@
 
     "@profullstack/keys": ["@profullstack/keys@0.1.0", "", {}, "sha512-Vys47LvS5ivhdZu4SYOxh9Le3DEmWhjP0+CtrU45RhXAbY0ZFG/2Dk9V1bIIUGDp8UWMJqctvUD21JrNjfh04w=="],
 
+    "@profullstack/openprofile": ["@profullstack/openprofile@0.2.0", "", {}, "sha512-cdFsBbfRXurvy5KqHDNcKXxurK2s/YlfVgnILFRpVl2hq3860rExqDee8IfsFGxw5cPdqGv2fxUxtek1Xy2U5Q=="],
+
     "@profullstack/orgs": ["@profullstack/orgs@0.2.0", "", { "peerDependencies": { "postgres": "^3.4.0" }, "bin": { "orgs": "src/cli.js" } }, "sha512-KYax/CBA4MGIqWennoroPjbsrCthY1iXwvad7YUHUwLwus9FyLDOriRnyLMWjMVCG/pihkDfKALUfdCYFGu+Ng=="],
 
-    "@profullstack/profile": ["@profullstack/profile@0.1.6", "", { "peerDependencies": { "@libsql/client": ">=0.6.0", "postgres": "^3.4.0", "react": ">=18" }, "optionalPeers": ["@libsql/client", "postgres", "react"], "bin": { "profile": "src/cli.js" } }, "sha512-xkn0P3ANz151QJdlBwcBXkHk813qW9qAmuTZKcuvpEZYkyHDC9J9KfvpVSRepfjECzz4ONGHWO5Zwc4BHpfK8g=="],
+    "@profullstack/profile": ["@profullstack/profile@0.1.7", "", { "dependencies": { "@profullstack/openprofile": "^0.2.0" }, "peerDependencies": { "@libsql/client": ">=0.6.0", "postgres": "^3.4.0", "react": ">=18" }, "optionalPeers": ["@libsql/client", "postgres", "react"], "bin": { "profile": "src/cli.js" } }, "sha512-N7UkypkkY2JkSBKzmdmyy6+DCoxI048qUZQksEjSRwSIyy4mjU9H1qW4yhZD+LJBhTEupgJv//Uxwhiy2FuGmA=="],
 
     "@profullstack/redeem-credits": ["@profullstack/redeem-credits@0.2.0", "", { "bin": { "redeem-credits": "dist/cli.js" } }, "sha512-JLowb7mWYfouIK7O522tuPPhvLjQjhdEfm6g3xEYrlNLGzLhrIADDhrYldBlGHfiVBWUFX7wefLuCSLF9fnyog=="],
 

From 19d7f35fe45bdd536ea7b251d8ca675fd67c05f4 Mon Sep 17 00:00:00 2001
From: Anthony Ettinger <anthony@profullstack.com>
Date: Sun, 1 Nov 2026 14:22:11 +0000
Subject: [PATCH 2/2] test: scope profile field assertion to signup template

---
 test/signup-profile.test.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/signup-profile.test.js b/test/signup-profile.test.js
index 9e29d37..f988b6b 100644
--- a/test/signup-profile.test.js
+++ b/test/signup-profile.test.js
@@ -18,8 +18,9 @@ const link = (body) =>
 
 test('the signup page shell carries the profile fields, once each', async () => {
   const html = await (await app.request('/signup')).text();
+  const signupFields = html.match(/<template id="profile-fields">([\s\S]*?)<\/template>/)?.[1] ?? '';
   for (const name of ['first_name', 'last_name', 'company_domain', 'job_title', 'linkedin_url'])
-    expect(html.match(new RegExp(`name="${name}"`, 'g'))?.length).toBe(1);
+    expect(signupFields.match(new RegExp(`name="${name}"`, 'g'))?.length).toBe(1);
   // The shared footer has its own email field; the profile template does not.
   const fields = html.match(/<template id="profile-fields">[\s\S]*?<\/template>/)?.[0] ?? '';
   expect(fields).not.toContain('name="email"');