src/auth-page.js

Rama main · réplica de lectura del repositorio original.

import { escapeHtml as esc } from './markdown.js';
import { markPair } from './mark.js';

const CSS = `
:root{
  --ground:#eceff3; --surface:#ffffff; --line:#d9dee6; --ink:#24292e; --body:#374151; --muted:#6b7280;
  --accent:#3a5bc7; --accent-ink:#fff; --bad:#ce2c31; --bad-soft:rgba(229,72,77,.12); --ok:#218358; --ok-soft:rgba(46,160,67,.14);
  --app:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --ground:#0f1115; --surface:#181b21; --line:#2a2f38; --ink:#e0dcd4; --body:#cfd3dd; --muted:#9099ad;
  --accent:#9eb1ff; --accent-ink:#0c1b33; --bad:#ff9ea1; --bad-soft:rgba(229,72,77,.18); --ok:#71d083; --ok-soft:rgba(70,180,110,.16);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--app);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
main{max-width:440px;margin:10vh auto 0;padding:0 20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px 22px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
h1{font-size:20px;margin:0 0 4px;color:var(--ink);letter-spacing:-.01em}
h2{font-size:13px;margin:22px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
p{margin:0 0 14px}
.sub{color:var(--muted);font-size:13.5px}
button{font:inherit;cursor:pointer;border-radius:8px;padding:10px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
button.small{padding:4px 10px;font-size:12.5px}
button[disabled]{opacity:.6;cursor:default}
.msg{margin-top:14px;padding:10px 12px;border-radius:8px;font-size:13.5px;display:none}
.msg.bad{display:block;background:var(--bad-soft);color:var(--bad)}
.msg.ok{display:block;background:var(--ok-soft);color:var(--ok)}
ul{list-style:none;margin:0;padding:0}
li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
li:first-child{border-top:0}
.meta{color:var(--muted);font-family:var(--mono);font-size:11.5px}
.who{display:flex;align-items:baseline;gap:8px}
.role{font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.row{display:flex;gap:8px;margin-top:18px}
.row button{flex:1}
a{color:var(--accent)}
a.provider{display:block;text-align:center;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 16px;margin-top:10px;font-weight:600}
.mark{display:block;width:40px;height:40px;margin:0 0 14px}
.mark-dark{display:none}
@media (prefers-color-scheme: dark){.mark-light{display:none}.mark-dark{display:block}}
.legal{text-align:center;margin-top:14px;font-size:12.5px}
.legal a{color:var(--muted)}
.copyable{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px}
.copyable code{flex:1;min-width:0;overflow-wrap:anywhere;font-family:var(--mono);font-size:12.5px;line-height:1.45;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.copyable button{flex:none}
`;

export function sameOriginPath(raw, origin, fallback) {
  const n = String(raw ?? '');
  if (!n.startsWith('/')) return fallback;
  let u, base;
  try { base = new URL(origin); u = new URL(n, base); } catch { return fallback; }
  return u.origin === base.origin ? u.pathname + u.search + u.hash : fallback;
}

const JS = `
(() => {
  const mount = document.body.dataset.mount || '';
  const q = new URLSearchParams(location.search);
  const sameOriginPath = ${sameOriginPath.toString()};
  const next = sameOriginPath(q.get('next') || '', location.origin, mount + '/');
  // The loopback dev instance's redirect URI is http://localhost:<port>, and
  // the trip cookie is per host, so an address typed as 127.0.0.1 moves there.
  if (location.hostname === '127.0.0.1') { location.replace(location.href.replace('127.0.0.1', 'localhost')); return; }
  const $ = (id) => document.getElementById(id);
  const api = async (path, body, method) => {
    const res = await fetch(mount + '/api/auth' + path, { method: method || (body ? 'POST' : 'GET'), headers: { 'Content-Type': 'application/json' }, body: body ? JSON.stringify(body) : undefined, credentials: 'same-origin' });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(data.error || ('HTTP ' + res.status));
    return data;
  };
  const say = (kind, text) => { const m = $('msg'); m.className = 'msg ' + kind; m.textContent = text; };
  const show = (id) => { for (const s of document.querySelectorAll('section')) s.hidden = s.id !== id; };
  const explain = (err) => String(err && err.message || err);

  const when = (iso) => { const d = new Date(iso); return isNaN(d) ? '' : d.toLocaleString(); };
  function renderMe(me) {
    $('who-name').textContent = me.account.name;
    $('who-role').textContent = me.role;
    const sess = $('sessions'); sess.innerHTML = '';
    for (const s of me.sessions) {
      const li = document.createElement('li');
      li.innerHTML = '<span><strong></strong> <span class="meta"></span></span>';
      li.querySelector('strong').textContent = s.current ? 'This browser' : (s.ua || 'Browser').slice(0, 48);
      li.querySelector('.meta').textContent = 'seen ' + when(s.lastSeenAt);
      if (!s.current) { const b = document.createElement('button'); b.className = 'small'; b.textContent = 'Sign out'; b.onclick = async () => { try { await api('/sessions/' + s.id, null, 'DELETE'); load(); } catch (e) { say('bad', explain(e)); } }; li.appendChild(b); }
      sess.appendChild(li);
    }
    $('others').hidden = me.sessions.filter((s) => !s.current).length === 0;
  }

  async function load() {
    let me = null;
    try { me = await api('/me'); } catch { me = null; }
    if (me) {
      const tell = () => globalThis.WeaveConsent && globalThis.WeaveConsent.identify(me.analytics.user);
      if (me.analytics) document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', tell) : tell();
      renderMe(me);
      show('sec-me');
      $('go').href = next;
      $('signout').onclick = async () => { await api('/logout', {}); location.replace(mount + '/auth?signed-out=1'); };
      $('everywhere').onclick = async () => { await api('/logout?everywhere=1', {}); location.replace(mount + '/auth?signed-out=1'); };
      $('others').onclick = async () => { try { await api('/sessions/others', null, 'DELETE'); load(); } catch (e) { say('bad', explain(e)); } };
      return;
    }
    show('sec-signin');
  }
  if ($('oidc')) $('oidc').href += '?next=' + encodeURIComponent(next);
  load();
})();
`;

const MARK = markPair('a', { cls: 'mark' });

export function renderRefusalPage({ title, lines = [], actions = [] } = {}) {
  return `<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="robots" content="noindex, nofollow">
<title>${esc(title)}</title>
<style>${CSS}</style>
</head><body>
<main>
  <div class="card">
    ${MARK}
    <h1>${esc(title)}</h1>
${[].concat(lines).map((l) => `    <p class="sub">${esc(l)}</p>\n`).join('')}${actions.map((a) => `    <a class="provider" href="${esc(a.href)}">${esc(a.label)}</a>\n`).join('')}  </div>
</main>
</body></html>`;
}

const COPY_JS = `for (const b of document.querySelectorAll('[data-copy]')) b.addEventListener('click', async () => {
  try { await navigator.clipboard.writeText(b.dataset.copy); b.textContent = 'Copied'; } catch { b.textContent = 'Select and copy'; }
  setTimeout(() => { b.textContent = 'Copy'; }, 1600);
});`;

const copyable = (text, label) => `    <div class="copyable"><code>${esc(text)}</code><button class="small" type="button" data-copy="${esc(text)}" aria-label="${esc(label)}">Copy</button></div>\n`;

export function renderMcpDoorPage({ workspace, url, server = 'weave', docsHref = '/docs', signInHref = null, signUpHref = null } = {}) {
  const add = `claude mcp add --transport http ${server} ${url}`;
  return `<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="robots" content="noindex, nofollow">
<title>MCP server for ${esc(workspace)}</title>
<style>${CSS}</style>
</head><body>
<main>
  <div class="card">
    ${MARK}
    <h1>MCP server for ${esc(workspace)}</h1>
    <p class="sub">This address connects AI clients such as Claude and ChatGPT to ${esc(workspace)} over MCP. A browser has nothing to show here. Add the address to your AI client, and its first call opens a sign-in.</p>
${copyable(url, 'Copy the MCP address')}    <h2>Claude Code</h2>
${copyable(add, 'Copy the Claude Code command')}    <p class="sub">Then run <code>/mcp</code> in Claude Code and sign in.</p>
    <h2>Claude.ai</h2>
    <p class="sub">Open Settings, then Connectors, and add a custom connector with the address above.</p>
    <h2>ChatGPT</h2>
    <p class="sub">Add a custom connector with the address above.</p>
    <a class="provider" href="${esc(docsHref)}">Connect an agent guide</a>
${signInHref ? `    <p class="sub" style="margin-top:14px"><a href="${esc(signInHref)}">Sign in</a>${signUpHref ? ` or <a href="${esc(signUpHref)}">Create an account</a>` : ''} to open ${esc(workspace)} in a browser.</p>
` : ''}  </div>
</main>
<script>${COPY_JS}</script>
</body></html>`;
}

export function renderAuthPage({ mount = '', workspace = 'weave', provider = null, analyticsKey = null, signInPath = null, signUpHref = null } = {}) {
  return `<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="robots" content="noindex, nofollow">
<title>Sign in — ${esc(workspace)}</title>
<style>${CSS}</style>
</head><body data-mount="${esc(mount)}">
<main>
  <div class="card">
    ${MARK}
    <section id="sec-signin" hidden>
      <h1>Sign in to ${esc(workspace)}</h1>
${provider ? `      <a id="oidc" class="provider" href="${esc(signInPath ?? `${mount}/api/auth/oidc/start`)}">Sign in</a>
${signUpHref ? `      <p class="sub" style="margin-top:14px">New to weave? <a id="signup" href="${esc(signUpHref)}">Create an account</a></p>
` : `      <p class="sub" style="margin-top:14px">No account yet? Ask a workspace architect for a link that adds you.</p>
`}` : `      <p class="sub">No sign-in provider is configured for this server. An operator sets WEAVE_OIDC_ISSUER and WEAVE_OIDC_CLIENT_ID to add one. Agents and the CLI use a <code>wv_</code> token.</p>
`}    </section>
    <section id="sec-me" hidden>
      <div class="who"><h1 id="who-name"></h1><span id="who-role" class="role"></span></div>
      <p class="sub">You are signed in. <a id="go" href="${esc(mount)}/">Open the workspace →</a></p>
      <h2>Sessions</h2>
      <ul id="sessions"></ul>
      <div class="row">
        <button id="others" type="button" hidden>Sign out other sessions</button>
        <button id="signout" type="button">Sign out of ${esc(workspace)}</button>
      </div>
      <div class="row">
        <button id="everywhere" type="button">Sign out of every workspace</button>
      </div>
    </section>
    <div id="msg" class="msg" role="status"></div>
  </div>
  <p class="sub legal"><a href="/privacy">Privacy</a> · <a href="/terms">Terms</a>${analyticsKey ? ' · <a href="/privacy#cookies" data-consent-open>Cookies</a>' : ''}</p>
</main>
<script>${JS}</script>
${analyticsKey ? `<script src="/consent.js" data-posthog-key="${esc(analyticsKey)}"></script>\n` : ''}
</body></html>`;
}