From 513e975530df124b2715c1f31bf0ad5dd0abc7f3 Mon Sep 17 00:00:00 2001
From: aewing <aewing@cardoza.construction>
Date: Tue, 24 Mar 2026 18:29:51 +0000
Subject: [PATCH] Fix PocketBase auth and note submission

- Replace popup OAuth with SDK authWithOAuth2 realtime channel (urlCallback)
  so login works in Edge app mode without navigating the main window
- Remove manual redirect/sessionStorage OAuth flow that broke in Edge app mode
- Serve PocketBase config (URL, collection, provider) from server endpoint
  backed by env vars instead of hardcoded localhost
- Fix /api/submit: target Notes collection with correct field mapping
  (body_plain, body_html, title, type, email, Username, userId, job_note,
  Job_Number) instead of Job_Info_Prod with wrong field names
- Remove localhost fallbacks from auth-module backend and frontend
---
 auth-module/backend.ts  |   2 +-
 auth-module/frontend.ts |   2 +-
 index.html              | 153 +++++++++++++++++++++++++++++++++-------
 server.ts               |  65 +++++++++++++----
 4 files changed, 182 insertions(+), 40 deletions(-)

diff --git a/auth-module/backend.ts b/auth-module/backend.ts
index 41248ca..b739818 100644
--- a/auth-module/backend.ts
+++ b/auth-module/backend.ts
@@ -100,7 +100,7 @@ export class PocketBaseValidator {
   private pb: PocketBase;
 
   constructor(pbUrl?: string) {
-    this.pb = new PocketBase(pbUrl || process.env.PB_DB || 'http://127.0.0.1:8090');
+    this.pb = new PocketBase(pbUrl || process.env.PB_URL || process.env.PB_DB || '');
   }
 
   /**
diff --git a/auth-module/frontend.ts b/auth-module/frontend.ts
index db89fe8..96b25cf 100644
--- a/auth-module/frontend.ts
+++ b/auth-module/frontend.ts
@@ -13,7 +13,7 @@ export class PocketBaseAuth {
 
   constructor(config: AuthConfig, callbacks?: Partial<AuthCallbacks>) {
     this.config = {
-      pbUrl: config.pbUrl || 'http://localhost:8090',
+      pbUrl: config.pbUrl || '',
       collection: config.collection || 'Users',
       provider: config.provider || 'microsoft',
       loginContainerId: config.loginContainerId || 'loginContainer',
diff --git a/index.html b/index.html
index 3c3d073..1a77321 100644
--- a/index.html
+++ b/index.html
@@ -19,14 +19,45 @@
       border-radius: 0.75rem;
       padding: 0.55rem 1rem;
       font-weight: 600;
-      transition: all 120ms ease;
+      transition: all 160ms ease;
+      position: relative;
+      overflow: hidden;
     }
     .btn:focus-visible,
     .field:focus-visible {
       outline: 2px solid rgb(34 211 238 / 0.8);
       outline-offset: 1px;
     }
-    .btn:hover { transform: translateY(-1px); }
+    .btn::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(120deg, transparent 0%, rgb(255 255 255 / 0.2) 48%, transparent 100%);
+      transform: translateX(-130%);
+      transition: transform 260ms ease;
+      pointer-events: none;
+    }
+    .btn:hover {
+      transform: translateY(-1px) scale(1.01);
+      box-shadow: 0 10px 22px rgb(15 23 42 / 0.28);
+    }
+    .btn:hover::before { transform: translateX(130%); }
+    .btn-accent-cyan {
+      color: rgb(8 47 73 / 1);
+      background: rgb(6 182 212 / 1);
+    }
+    .btn-accent-emerald {
+      color: rgb(6 44 32 / 1);
+      background: rgb(34 197 94 / 1);
+    }
+    .btn-accent-indigo {
+      color: rgb(255 255 255 / 0.98);
+      background: rgb(99 102 241 / 1);
+    }
+    .btn-accent-violet {
+      color: rgb(255 255 255 / 0.98);
+      background: rgb(139 92 246 / 1);
+    }
     .btn-secondary {
       border: 1px solid rgb(51 65 85 / 1);
       background: rgb(15 23 42 / 1);
@@ -42,7 +73,21 @@
       font-size: 0.875rem;
       color: rgb(248 250 252 / 1);
     }
+    .field option {
+      background: rgb(15 23 42 / 0.96);
+      color: rgb(248 250 252 / 1);
+    }
     .field::placeholder { color: rgb(100 116 139 / 1); }
+    #output {
+      border: 1px solid rgb(30 41 59 / 1);
+      background: rgb(2 6 23 / 1);
+    }
+    code {
+      border: 1px solid rgb(51 65 85 / 1);
+      background: rgb(15 23 42 / 1);
+      padding: 0.12rem 0.35rem;
+      border-radius: 0.45rem;
+    }
   </style>
 </head>
 <body class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900 text-slate-100">
@@ -78,7 +123,7 @@
         <h2 class="text-xl font-medium">1) Prism Notes Login</h2>
         <p class="mt-2 text-sm text-slate-300">Uses PocketBase OAuth with Microsoft to validate the Prism Notes user session.</p>
         <div class="mt-4 flex flex-wrap gap-3">
-          <button id="loginBtn" class="btn bg-cyan-500 text-slate-950 hover:bg-cyan-400">Login with Microsoft</button>
+          <button id="loginBtn" class="btn btn-accent-cyan">Login with Microsoft</button>
           <button id="logoutBtn" class="btn btn-secondary">Logout</button>
         </div>
       </article>
@@ -88,7 +133,7 @@
         <p class="mt-2 text-sm text-slate-300">Gets delegated Graph token used for OneNote APIs.</p>
         <p id="oneNoteAuthStatus" class="mt-3 text-sm font-medium">Disconnected</p>
         <div class="mt-4 flex flex-wrap gap-3">
-          <button id="connectOneNoteBtn" class="btn bg-emerald-500 text-slate-950 hover:bg-emerald-400">Connect OneNote</button>
+          <button id="connectOneNoteBtn" class="btn btn-accent-emerald">Connect OneNote</button>
           <button id="refreshOneNoteTokenBtn" class="btn btn-secondary">Refresh token</button>
         </div>
       </article>
@@ -120,8 +165,8 @@
           </div>
         </div>
         <div class="mt-4 flex flex-wrap gap-3">
-          <button id="submitNoteBtn" class="btn bg-indigo-500 text-white hover:bg-indigo-400">Submit to Prism Notes</button>
-          <button id="syncOneNoteBtn" class="btn bg-violet-500 text-white hover:bg-violet-400">Sync to OneNote</button>
+          <button id="submitNoteBtn" class="btn btn-accent-indigo">Submit to Prism Notes</button>
+          <button id="syncOneNoteBtn" class="btn btn-accent-violet">Sync to OneNote</button>
         </div>
       </article>
 
@@ -146,7 +191,7 @@
             <label class="text-sm font-medium text-slate-300">Proof Message</label>
             <textarea id="proofBody" rows="6" class="field mt-1"></textarea>
           </div>
-          <button id="createProofPageBtn" class="btn bg-emerald-500 text-slate-950 hover:bg-emerald-400">Create OneNote Proof Page</button>
+          <button id="createProofPageBtn" class="btn btn-accent-emerald">Create OneNote Proof Page</button>
         </div>
       </article>
     </section>
@@ -160,11 +205,12 @@
   <script type="module">
     import PocketBase from 'https://cdn.jsdelivr.net/npm/pocketbase@0.26.5/+esm';
 
-    const PB_URL = 'http://127.0.0.1:8090';
-    const PB_AUTH_COLLECTION = 'Users';
+    const PB_DEFAULT_AUTH_COLLECTION = 'Users';
+    const PB_DEFAULT_OAUTH_PROVIDER = 'microsoft';
     const SCOPES = ['User.Read', 'Notes.ReadWrite.All', 'Sites.Read.All', 'offline_access'];
 
-    const pb = new PocketBase(PB_URL);
+    let pb = null;
+    let pbConfigPromise = null;
 
     const output = document.getElementById('output');
     const healthStatus = document.getElementById('healthStatus');
@@ -194,6 +240,35 @@
     let delegatedAccessToken = '';
     let delegatedExpiresAt = 0;
 
+    async function getPocketBaseConfig() {
+      if (!pbConfigPromise) {
+        pbConfigPromise = fetch('/api/auth/pocketbase-config')
+          .then(async (resp) => {
+            const data = await resp.json().catch(() => ({}));
+            if (!resp.ok || !data?.success || !data?.pbUrl) {
+              throw new Error(data?.message || 'PocketBase config unavailable');
+            }
+            return {
+              pbUrl: data.pbUrl,
+              collection: data.collection || PB_DEFAULT_AUTH_COLLECTION,
+              provider: data.provider || PB_DEFAULT_OAUTH_PROVIDER,
+            };
+          })
+          .catch((error) => {
+            pbConfigPromise = null;
+            throw error;
+          });
+      }
+      return pbConfigPromise;
+    }
+
+    async function ensurePocketBaseClient() {
+      if (pb) return pb;
+      const config = await getPocketBaseConfig();
+      pb = new PocketBase(config.pbUrl);
+      return pb;
+    }
+
     function writeOutput(value) {
       output.textContent = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
     }
@@ -207,9 +282,10 @@
         .replace(/'/g, '&#39;');
     }
 
-    function updatePbStatus() {
-      if (pb.authStore?.isValid) {
-        const email = pb.authStore.model?.email || '(unknown user)';
+    async function updatePbStatus() {
+      const client = await ensurePocketBaseClient();
+      if (client.authStore?.isValid) {
+        const email = client.authStore.model?.email || '(unknown user)';
         pbStatus.textContent = `Logged in: ${email}`;
       } else {
         pbStatus.textContent = 'Not logged in';
@@ -352,15 +428,36 @@
     }
 
     async function loginPocketBase() {
-      writeOutput('Opening PocketBase Microsoft login...');
-      await pb.collection(PB_AUTH_COLLECTION).authWithOAuth2({ provider: 'microsoft' });
-      updatePbStatus();
-      writeOutput({ message: 'PocketBase login completed.', user: pb.authStore.model?.email || null });
+      writeOutput('Opening Microsoft login...');
+      const client = await ensurePocketBaseClient();
+      const config = await getPocketBaseConfig();
+
+      // Use the SDK's authWithOAuth2 realtime channel.
+      // Auth result is delivered back to this window via SSE from PocketBase,
+      // so it works regardless of how/where the login popup opens (including
+      // Edge app mode where external URLs open outside the app window).
+      const authData = await client.collection(config.collection).authWithOAuth2({
+        provider: config.provider,
+        urlCallback(url) {
+          const w = Math.min(900, window.screen.availWidth || 900);
+          const h = Math.min(680, window.screen.availHeight || 680);
+          const left = Math.floor(((window.screen.availWidth || 1280) - w) / 2);
+          const top = Math.floor(((window.screen.availHeight || 800) - h) / 2);
+          window.open(url, 'pb_oauth', `width=${w},height=${h},top=${top},left=${left},resizable=yes,menubar=no`);
+        },
+      });
+
+      await updatePbStatus();
+      writeOutput({
+        message: 'PocketBase login completed.',
+        user: authData?.record?.email || client.authStore.model?.email || null,
+      });
     }
 
-    function logoutPocketBase() {
-      pb.authStore.clear();
-      updatePbStatus();
+    async function logoutPocketBase() {
+      const client = await ensurePocketBaseClient();
+      client.authStore.clear();
+      await updatePbStatus();
       writeOutput({ message: 'PocketBase session cleared.' });
     }
 
@@ -375,13 +472,14 @@
         title,
         bodyPlain,
         noteType: noteType.value || 'personal',
-        userEmail: pb.authStore.model?.email || '',
+        userEmail: pb?.authStore.model?.email || '',
         jobNumber: noteJobNumber.value.trim(),
       };
     }
 
     async function submitNoteToPrismNotes() {
-      if (!pb.authStore.isValid || !pb.authStore.token) {
+      const client = await ensurePocketBaseClient();
+      if (!client.authStore.isValid || !client.authStore.token) {
         throw new Error('PocketBase login required');
       }
       const payload = buildNotePayload();
@@ -390,7 +488,7 @@
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           ...payload,
-          pbToken: pb.authStore.token,
+          pbToken: client.authStore.token,
         }),
       });
       const data = await resp.json().catch(() => ({}));
@@ -401,7 +499,8 @@
     }
 
     async function syncCurrentNoteToOneNote() {
-      if (!pb.authStore.isValid || !pb.authStore.token) {
+      const client = await ensurePocketBaseClient();
+      if (!client.authStore.isValid || !client.authStore.token) {
         throw new Error('PocketBase login required');
       }
       if (!hasUsableToken()) {
@@ -414,7 +513,7 @@
         headers: {
           'Content-Type': 'application/json',
           Authorization: `Bearer ${delegatedAccessToken}`,
-          'x-pb-token': pb.authStore.token,
+          'x-pb-token': client.authStore.token,
         },
         body: JSON.stringify(payload),
       });
@@ -505,7 +604,9 @@
     bind('resolveSectionsBtn', resolveSiteSections);
     bind('createProofPageBtn', createProofPage);
 
-    updatePbStatus();
+    ensurePocketBaseClient()
+      .then(() => updatePbStatus())
+      .catch((error) => writeOutput({ error: error?.message || String(error) }));
     updateOneNoteStatus();
     loadHealth();
     loadGraphStatus();
diff --git a/server.ts b/server.ts
index ec638d0..b15d688 100644
--- a/server.ts
+++ b/server.ts
@@ -34,14 +34,18 @@ app.use('/*', cors({ origin: '*', credentials: true }));
 // ---------------------------------------------------------------------------
 // PocketBase
 // ---------------------------------------------------------------------------
-const pb = new PocketBase(process.env.PB_DB || 'http://127.0.0.1:8090');
+const PB_BASE_URL = process.env.PB_URL || process.env.PB_DB || '';
+const PB_AUTH_COLLECTION = process.env.PB_AUTH_COLLECTION || 'Users';
+const PB_OAUTH_PROVIDER = 'microsoft';
+
+const pb = new PocketBase(PB_BASE_URL);
 
 function setPbToken(token: string) { pb.authStore.save(token, null); }
 function clearPbToken() { pb.authStore.clear(); }
 
 async function validatePbToken(token: string): Promise<void> {
   setPbToken(token);
-  await pb.collection(process.env.PB_AUTH_COLLECTION || 'Users').authRefresh();
+  await pb.collection(PB_AUTH_COLLECTION).authRefresh();
 }
 
 // ---------------------------------------------------------------------------
@@ -110,7 +114,19 @@ async function resolveSiteId(delegatedToken: string): Promise<string> {
 // Routes
 // ---------------------------------------------------------------------------
 
-app.get('/health', (c) => c.json({ ok: true, pbDB: process.env.PB_DB }));
+app.get('/health', (c) => c.json({ ok: true, pbDB: PB_BASE_URL }));
+
+app.get('/api/auth/pocketbase-config', (c) => {
+  if (!PB_BASE_URL) {
+    return c.json({ success: false, message: 'Missing PB_URL or PB_DB' }, 500);
+  }
+  return c.json({
+    success: true,
+    pbUrl: PB_BASE_URL,
+    collection: PB_AUTH_COLLECTION,
+    provider: PB_OAUTH_PROVIDER,
+  });
+});
 
 app.get('/api/auth/msal-config', (c) => {
   const clientId = process.env.CLIENT_ID || '';
@@ -275,8 +291,10 @@ app.post('/api/onenote/append', async (c) => {
 });
 
 // ---------------------------------------------------------------------------
-// POST /api/submit  —  save a record to PocketBase
+// POST /api/submit  —  save a note record to PocketBase Notes collection
 // ---------------------------------------------------------------------------
+const PB_NOTES_COLLECTION = process.env.PB_NOTES_COLLECTION || 'Notes';
+
 app.post('/api/submit', async (c) => {
   try {
     const body = await c.req.json();
@@ -288,19 +306,42 @@ app.post('/api/submit', async (c) => {
       return c.json({ success: false, message: 'Invalid token' }, 401);
     }
 
-    const record = await pb
-      .collection(process.env.PB_COLLECTION || 'Job_Info_TestEnv')
-      .create({
-        ...body,
-        submittedBy: pb.authStore.model?.email || 'unknown',
-        submittedAt: new Date().toISOString(),
-      });
+    const user = pb.authStore.model;
+    const bodyPlain = String(body.bodyPlain || '').trim();
+    const title = String(body.title || 'Untitled').trim();
+    const noteType = String(body.noteType || 'personal').trim();
+    const jobNumber = String(body.jobNumber || '').trim();
+
+    // Convert plain text to simple HTML (matches what the main app stores)
+    const bodyHtml = bodyPlain
+      .split(/\r\n|\r|\n/)
+      .map((line) => `<p>${line || '&nbsp;'}</p>`)
+      .join('');
+
+    const payload: Record<string, unknown> = {
+      body_plain: bodyPlain,
+      body_html: bodyHtml,
+      title,
+      type: noteType,
+      email: user?.email || body.userEmail || '',
+      Username: user?.name || user?.username || user?.email || '',
+      userId: user?.id || '',
+      job_note: noteType === 'job' || !!jobNumber,
+      shared: false,
+      shared_with: [],
+    };
+
+    if (jobNumber) {
+      payload['Job_Number'] = jobNumber;
+    }
+
+    const record = await pb.collection(PB_NOTES_COLLECTION).create(payload);
 
     console.log('submission_success', { recordId: record.id });
     return c.json({ success: true, recordId: record.id });
   } catch (err) {
     console.error('submit_error', { message: (err as Error)?.message });
-    return c.json({ success: false, message: 'Internal error' }, 500);
+    return c.json({ success: false, message: (err as Error)?.message || 'Internal error' }, 500);
   } finally {
     clearPbToken();
   }