Use custom guest registration modal

config/minimal_ui_patch.js

@@ -1,5 +1,4 @@
 (() => {
-  // ── Prompt suggestions ──────────────────────────────────────────
   const MONTAIGNE_SUGGESTIONS = [
     {
       title: ['What occupies your thoughts', 'most lately?'],
@@ -27,7 +26,6 @@
     }
   ];
 
-  // ── Elements to hide ────────────────────────────────────────────
   const HIDE_TEXT = new Set([
     'Settings',
     'Archived Chats',
@@ -39,143 +37,249 @@
     'Releases',
     'Set as default'
   ]);
-
   const HIDE_HREF = new Set(['/playground', '/admin']);
   const HIDE_ARIA = new Set(['Controls', 'Add Model', 'Remove Model', 'Voice Input', 'Voice mode']);
 
-  // ── Guest upgrade constants ─────────────────────────────────────
-  const GUEST_TOKEN_KEY = 'montaigne_guest_upgrade_token';
   const CHAT_COMPLETIONS_PATH = '/api/chat/completions';
-  const GUEST_SIGNUP_NOTICE_ID = 'montaigne-guest-signup-notice';
+  const GUEST_TOKEN_KEY = 'montaigne_guest_upgrade_token';
+  const GUEST_CLAIM_URL_KEY = 'montaigne_guest_claim_url';
+  const MONTAIGNE_TOKEN_KEY = 'montaigne_access_token';
 
   function normalize(text) {
     return (text || '').replace(/\s+/g, ' ').trim();
   }
 
-  // ── Guest upgrade: CTA banner ───────────────────────────────────
-  function showGuestBanner() {
-    if (document.getElementById('montaigne-guest-banner')) return;
-
-    const banner = document.createElement('div');
-    banner.id = 'montaigne-guest-banner';
-    banner.style.cssText =
-      'position:fixed;bottom:0;left:0;right:0;z-index:99999;' +
-      'background:linear-gradient(135deg,#3d2b1f,#5c3d2e);color:#f5e6d3;' +
-      'padding:14px 20px;display:flex;align-items:center;justify-content:center;' +
-      'gap:16px;font-family:Inter,system-ui,sans-serif;font-size:14px;' +
-      'box-shadow:0 -2px 12px rgba(0,0,0,.3);';
-
-    const msg = document.createElement('span');
-    msg.textContent =
-      'You\u2019ve used your 5 free messages. Create a free account to continue chatting with Montaigne.';
-
-    const btn = document.createElement('a');
-    btn.textContent = 'Create free account';
-    btn.style.cssText =
-      'background:#c9a96e;color:#2b1d0e;padding:8px 18px;border-radius:6px;' +
-      'text-decoration:none;font-weight:600;white-space:nowrap;cursor:pointer;' +
-      'transition:background .15s;';
-    btn.onmouseenter = () => (btn.style.background = '#d4b87a');
-    btn.onmouseleave = () => (btn.style.background = '#c9a96e');
-
-    const currentPath = window.location.pathname + window.location.search;
-    const authUrl = '/auth?form=true&redirect=' + encodeURIComponent(currentPath) + '&guestUpgrade=1';
-    btn.href = authUrl;
-
-    const close = document.createElement('button');
-    close.textContent = '\u00d7';
-    close.style.cssText =
-      'background:none;border:none;color:#f5e6d3;font-size:20px;cursor:pointer;' +
-      'padding:0 4px;line-height:1;';
-    close.onclick = () => banner.remove();
+  function removeGuestBanner() {
+    const banner = document.getElementById('montaigne-guest-banner');
+    if (banner) {
+      banner.remove();
+    }
+  }
 
-    banner.appendChild(msg);
-    banner.appendChild(btn);
-    banner.appendChild(close);
-    document.body.appendChild(banner);
+  function closeGuestModal() {
+    const modal = document.getElementById('montaigne-guest-modal');
+    if (modal) {
+      modal.remove();
+    }
   }
 
-  function applyGuestUpgradeAuthPrompt() {
-    const url = new URL(window.location.href);
-    if (url.pathname !== '/auth' || url.searchParams.get('guestUpgrade') !== '1') {
+  async function submitGuestClaim(form, statusEl) {
+    const guestUpgradeToken = localStorage.getItem(GUEST_TOKEN_KEY);
+    const claimUrl = localStorage.getItem(GUEST_CLAIM_URL_KEY);
+    const username = form.querySelector('[name="username"]').value.trim();
+    const password = form.querySelector('[name="password"]').value;
+
+    if (!guestUpgradeToken || !claimUrl) {
+      statusEl.textContent = 'This guest session can no longer be claimed. Please refresh and try again.';
       return;
     }
-
-    const authContainer = document.getElementById('auth-container');
-    if (!authContainer) {
+    if (username.length < 3) {
+      statusEl.textContent = 'Choose a username with at least 3 characters.';
+      return;
+    }
+    if (password.length < 6) {
+      statusEl.textContent = 'Choose a password with at least 6 characters.';
       return;
     }
 
-    if (!document.getElementById(GUEST_SIGNUP_NOTICE_ID)) {
-      const notice = document.createElement('div');
-      notice.id = GUEST_SIGNUP_NOTICE_ID;
-      notice.textContent = 'Create an account to keep this conversation and continue where you left off.';
-      notice.style.cssText =
-        'margin:18px auto 14px;max-width:28rem;padding:12px 14px;border-radius:10px;' +
-        'background:rgba(201,169,110,.12);border:1px solid rgba(201,169,110,.35);' +
-        'color:inherit;font-size:14px;line-height:1.45;';
-      const target = authContainer.querySelector('.w-full.px-10') || authContainer.firstElementChild;
-      if (target) {
-        target.insertBefore(notice, target.firstChild || null);
+    statusEl.textContent = 'Creating your account...';
+
+    try {
+      const response = await fetch(claimUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          guest_upgrade_token: guestUpgradeToken,
+          username,
+          password
+        })
+      });
+      const payload = await response.json();
+      if (!response.ok) {
+        throw new Error(payload.detail || 'Could not create your account.');
       }
+
+      localStorage.setItem(MONTAIGNE_TOKEN_KEY, payload.access_token);
+      localStorage.removeItem(GUEST_TOKEN_KEY);
+      localStorage.removeItem(GUEST_CLAIM_URL_KEY);
+      closeGuestModal();
+      removeGuestBanner();
+
+      const toast = document.createElement('div');
+      toast.style.cssText =
+        'position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:100000;' +
+        'background:#16311f;color:#e6f6ea;padding:10px 14px;border-radius:10px;' +
+        'font:13px Inter,system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.25);';
+      toast.textContent = 'Account created. Send your next message to continue.';
+      document.body.appendChild(toast);
+      setTimeout(() => toast.remove(), 4000);
+    } catch (error) {
+      statusEl.textContent = error instanceof Error ? error.message : 'Could not create your account.';
     }
+  }
 
-    if (document.documentElement.dataset.montaigneGuestSignupActivated === '1') {
+  function openGuestModal() {
+    closeGuestModal();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'montaigne-guest-modal';
+    overlay.style.cssText =
+      'position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;' +
+      'background:rgba(22,16,12,.62);padding:20px;';
+
+    const card = document.createElement('div');
+    card.style.cssText =
+      'width:min(420px,100%);border-radius:18px;padding:22px;background:#f5ede0;color:#2b2118;' +
+      'box-shadow:0 20px 60px rgba(0,0,0,.35);font:14px Inter,system-ui,sans-serif;';
+
+    const title = document.createElement('h2');
+    title.textContent = 'Create your account';
+    title.style.cssText = 'margin:0 0 8px;font:600 22px Georgia,serif;';
+
+    const intro = document.createElement('p');
+    intro.textContent = 'Keep this conversation and continue chatting with Montaigne.';
+    intro.style.cssText = 'margin:0 0 16px;line-height:1.45;color:#5b4a3c;';
+
+    const form = document.createElement('form');
+    form.style.cssText = 'display:grid;gap:12px;';
+
+    const username = document.createElement('input');
+    username.name = 'username';
+    username.placeholder = 'Username';
+    username.autocomplete = 'username';
+    username.style.cssText =
+      'width:100%;padding:12px 14px;border:1px solid #cfb89b;border-radius:10px;background:#fffdf9;';
+
+    const password = document.createElement('input');
+    password.name = 'password';
+    password.type = 'password';
+    password.placeholder = 'Password';
+    password.autocomplete = 'new-password';
+    password.style.cssText = username.style.cssText;
+
+    const status = document.createElement('div');
+    status.style.cssText = 'min-height:18px;font-size:13px;color:#8a2f2f;';
+
+    const actions = document.createElement('div');
+    actions.style.cssText = 'display:flex;justify-content:flex-end;gap:10px;margin-top:4px;';
+
+    const cancel = document.createElement('button');
+    cancel.type = 'button';
+    cancel.textContent = 'Cancel';
+    cancel.style.cssText =
+      'padding:10px 14px;border:1px solid #cfb89b;border-radius:10px;background:#fff8ef;cursor:pointer;';
+    cancel.onclick = () => closeGuestModal();
+
+    const submit = document.createElement('button');
+    submit.type = 'submit';
+    submit.textContent = 'Create account';
+    submit.style.cssText =
+      'padding:10px 14px;border:none;border-radius:10px;background:#8b6243;color:#fff;cursor:pointer;font-weight:600;';
+
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      await submitGuestClaim(form, status);
+    });
+
+    actions.appendChild(cancel);
+    actions.appendChild(submit);
+    form.appendChild(username);
+    form.appendChild(password);
+    form.appendChild(status);
+    form.appendChild(actions);
+
+    card.appendChild(title);
+    card.appendChild(intro);
+    card.appendChild(form);
+    overlay.appendChild(card);
+    overlay.addEventListener('click', (event) => {
+      if (event.target === overlay) {
+        closeGuestModal();
+      }
+    });
+    document.body.appendChild(overlay);
+    username.focus();
+  }
+
+  function showGuestBanner() {
+    if (document.getElementById('montaigne-guest-banner')) {
       return;
     }
 
-    const toggleButtons = Array.from(authContainer.querySelectorAll('button[type="button"]'));
-    const signupToggle = toggleButtons.find((button) => normalize(button.textContent) === 'Sign up');
-    if (signupToggle) {
-      document.documentElement.dataset.montaigneGuestSignupActivated = '1';
-      signupToggle.click();
-    }
+    const banner = document.createElement('div');
+    banner.id = 'montaigne-guest-banner';
+    banner.style.cssText =
+      'position:fixed;bottom:0;left:0;right:0;z-index:99999;background:linear-gradient(135deg,#3d2b1f,#5c3d2e);' +
+      'color:#f5e6d3;padding:14px 20px;display:flex;align-items:center;justify-content:center;gap:16px;' +
+      'font:14px Inter,system-ui,sans-serif;box-shadow:0 -2px 12px rgba(0,0,0,.3);';
+
+    const message = document.createElement('span');
+    message.textContent = 'You have used your 5 free messages. Create a free account to continue chatting with Montaigne.';
+
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = 'Create free account';
+    button.style.cssText =
+      'background:#c9a96e;color:#2b1d0e;padding:8px 18px;border:none;border-radius:6px;' +
+      'font-weight:600;white-space:nowrap;cursor:pointer;';
+    button.onclick = () => openGuestModal();
+
+    const close = document.createElement('button');
+    close.type = 'button';
+    close.textContent = 'x';
+    close.style.cssText =
+      'background:none;border:none;color:#f5e6d3;font-size:20px;cursor:pointer;padding:0 4px;line-height:1;';
+    close.onclick = () => removeGuestBanner();
+
+    banner.appendChild(message);
+    banner.appendChild(button);
+    banner.appendChild(close);
+    document.body.appendChild(banner);
   }
 
-  // ── Unified fetch patch (config + guest upgrade) ───────────────
   function installFetchPatch() {
-    if (window.__montaigneFetchPatched) return;
+    if (window.__montaigneFetchPatched) {
+      return;
+    }
     window.__montaigneFetchPatched = true;
 
     const originalFetch = window.fetch.bind(window);
 
     window.fetch = async (...args) => {
-      // ── Outgoing request: inject guest upgrade token ──────────
       try {
         const input = args[0];
         const rawUrl = input instanceof Request ? input.url : String(input);
         const url = new URL(rawUrl, window.location.origin);
 
         if (url.pathname === CHAT_COMPLETIONS_PATH) {
-          const storedToken = localStorage.getItem(GUEST_TOKEN_KEY);
-          if (storedToken) {
-            let body = args[1] && args[1].body;
-            if (typeof body === 'string') {
-              try {
-                const parsed = JSON.parse(body);
-                if (!parsed.variables) parsed.variables = {};
-                parsed.variables.guest_upgrade_token = storedToken;
-                args[1] = { ...args[1], body: JSON.stringify(parsed) };
-              } catch (_) {
-                // Body not JSON — skip injection
+          const body = args[1] && args[1].body;
+          if (typeof body === 'string') {
+            try {
+              const parsed = JSON.parse(body);
+              parsed.variables = parsed.variables || {};
+              const montaigneToken = localStorage.getItem(MONTAIGNE_TOKEN_KEY);
+              if (montaigneToken) {
+                parsed.variables.montaigne_token = montaigneToken;
               }
+              args[1] = { ...args[1], body: JSON.stringify(parsed) };
+            } catch (_) {
+              // Ignore non-JSON payloads.
             }
           }
         }
       } catch (_) {
-        // URL parsing failed — proceed with original args
+        // Ignore URL parsing errors.
       }
 
-      // ── Perform request ───────────────────────────────────────
       const response = await originalFetch(...args);
 
-      // ── Incoming response handling ────────────────────────────
       try {
         const input = args[0];
         const rawUrl = input instanceof Request ? input.url : String(input);
         const url = new URL(rawUrl, window.location.origin);
 
-        // Patch 1: inject prompt suggestions into /api/config
         if (url.pathname === '/api/config') {
           const payload = await response.clone().json();
           payload.default_prompt_suggestions = MONTAIGNE_SUGGESTIONS;
@@ -189,42 +293,26 @@
           });
         }
 
-        // Patch 2: intercept 403 guest_limit_reached on chat completions
         if (url.pathname === CHAT_COMPLETIONS_PATH && response.status === 403) {
-          const clone = response.clone();
-          try {
-            const body = await clone.json();
-            const code = typeof body === 'object' ? body.code : null;
-            const token = typeof body === 'object' ? body.guest_upgrade_token : null;
-
-            if (code === 'guest_limit_reached' && token) {
-              localStorage.setItem(GUEST_TOKEN_KEY, token);
-              showGuestBanner();
-            }
-          } catch (_) {
-            // Not JSON — fall through
+          const payload = await response.clone().json().catch(() => null);
+          if (payload && payload.code === 'guest_limit_reached' && payload.guest_upgrade_token && payload.claim_guest_url) {
+            localStorage.setItem(GUEST_TOKEN_KEY, payload.guest_upgrade_token);
+            localStorage.setItem(GUEST_CLAIM_URL_KEY, payload.claim_guest_url);
+            showGuestBanner();
           }
-
-          // Patch 3: on successful chat response, clear consumed token
-        } else if (
-          url.pathname === CHAT_COMPLETIONS_PATH &&
-          response.ok
-        ) {
-          localStorage.removeItem(GUEST_TOKEN_KEY);
-          const banner = document.getElementById('montaigne-guest-banner');
-          if (banner) banner.remove();
         }
       } catch (_) {
-        // Swallow — never break the page
+        // Keep the UI resilient.
       }
 
       return response;
     };
   }
 
-  // ── Minimal UI: hide power-user elements ───────────────────────
   function hide(el) {
-    if (!el || el.dataset.montaigneHidden === '1') return;
+    if (!el || el.dataset.montaigneHidden === '1') {
+      return;
+    }
     el.dataset.montaigneHidden = '1';
     el.style.display = 'none';
   }
@@ -248,8 +336,6 @@
   }
 
   function applyMinimalUi() {
-    applyGuestUpgradeAuthPrompt();
-
     document
       .querySelectorAll('[id^="model-selector-"][id$="-button"]')
       .forEach(hideModelSelector);
@@ -261,7 +347,9 @@
       const text = normalize(el.textContent);
       if (text.includes("What's New") || text.includes('Release Notes')) {
         const closeButton = el.querySelector('button[aria-label="Close"]');
-        if (closeButton) closeButton.click();
+        if (closeButton) {
+          closeButton.click();
+        }
         hide(el);
       }
     });
@@ -278,7 +366,6 @@
     document.querySelectorAll('#temporary-chat-button').forEach(hide);
   }
 
-  // ── Boot ───────────────────────────────────────────────────────
   installFetchPatch();
 
   const run = () => window.requestAnimationFrame(applyMinimalUi);

config/ui_policy.json

@@ -1,10 +1,6 @@
 {
   "default_models": "montaigne",
   "default_pinned_models": "montaigne",
-  "ui": {
-    "enable_signup": true,
-    "ENABLE_LOGIN_FORM": true
-  },
   "permissions": {
     "workspace": {
       "models": false,

docker-entrypoint.sh

@@ -1,11 +1,6 @@
 #!/bin/bash
 set -e
 
-export WEBUI_AUTH=true
-export ENABLE_FORWARD_USER_INFO_HEADERS=true
-export ENABLE_LOGIN_FORM=true
-export ENABLE_SIGNUP=true
-
 SUGGESTIONS_FILE="/app/montaigne-config/prompt_suggestions.json"
 POLICY_FILE="/app/montaigne-config/ui_policy.json"
 MINIMAL_UI_PATCH_FILE="/app/montaigne-config/minimal_ui_patch.js"
@@ -54,9 +49,6 @@ def merge_config(config: dict, suggestions: list, policy: dict) -> dict:
     ui["prompt_suggestions"] = suggestions
     config["ui"] = ui
 
-    if "ui" in policy:
-        deep_update(ui, policy["ui"])
-
     # Policy fields
     if "default_models" in policy:
         config["default_models"] = policy["default_models"]