@volter/world-console 3.0.24 → 3.0.25

package/client/console.tsx

@@ -1712,10 +1712,40 @@ const branchFrameUrl = (name: string, branch: string, f: BoardFrame): string | n
 const shownOn = (b: SavedBoard, all: BoardFrame[]): BoardFrame[] => b.include
   ? all.filter((f) => b.include!.includes(frameKey(f)) || sectionKeys(f).some((k) => b.include!.includes(k)))
   : all.filter((f) => !(b.hidden ?? []).includes(frameKey(f)));
-type Screen = { world: string; branch: boolean; frame: BoardFrame; url: string | null; active: boolean; picked: boolean; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null; compare: (key: string) => void; /** its name moves it, as a canvas app's frame name does */ grab: (e: React.PointerEvent) => void };
+type ViewedPerson = { vendor: string; person: string | null; label: string };
+type ViewAsMenuData = { world: string; token: string; vendor: string; label?: string; busy: boolean; choose: (person: string | null) => void };
+type ViewAsNavigation = { frame: string; url: string; pass: string; done: (viewed?: ViewedPerson, error?: string) => void };
+/** The choice lives in the vendor's cookie; a menu reads people, never password material. */
+function ViewAsMenu({ data }: { data: ViewAsMenuData }): React.JSX.Element {
+  const [reads, setReads] = useState(0);
+  const people = useDoor<{ viewAs: boolean; people: Array<{ id: string; label: string }> }>(data.token, `/-/${data.world}/twins/${data.vendor}/people`, reads);
+  const offered = useRef(false);
+  if (people.state === 'ok') offered.current = people.data.viewAs;
+  if (!offered.current) return <></>;
+  return <select className="nodrag nopan frame-add" value="" aria-label={`View ${vendorName(data.vendor)} as`} disabled={data.busy}
+    onFocus={() => setReads((n) => n + 1)} onChange={(e) => { if (e.target.value) data.choose(e.target.value === 'signed-out' ? null : e.target.value); }}>
+    <option value="">{data.busy ? 'Signing in…' : data.label ? `View as: ${data.label}` : 'View as…'}</option>
+    <option value="signed-out">Signed out</option>
+    {people.state === 'ok' ? people.data.people.map((p) => <option key={p.id} value={p.id}>{p.label}</option>) : <option disabled>{people.state === 'error' ? people.error : 'Loading people…'}</option>}
+  </select>;
+}
+type Screen = { viewAs?: ViewAsMenuData; navigation?: ViewAsNavigation; revision?: number; world: string; branch: boolean; frame: BoardFrame; url: string | null; active: boolean; picked: boolean; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null; compare: (key: string) => void; /** its name moves it, as a canvas app's frame name does */ grab: (e: React.PointerEvent) => void };
 function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
   const { frame, url, active, picked, boards, addTo, remove, compare, grab, branch } = data;
   const key = frameKey(frame);
+  const iframe = useRef<HTMLIFrameElement>(null);
+  const navigation = data.navigation?.frame === key ? data.navigation : undefined;
+  useEffect(() => {
+    if (!navigation) return;
+    const origin = new URL(navigation.url).origin;
+    const on = (event: MessageEvent): void => {
+      if (event.origin !== origin || event.source !== iframe.current?.contentWindow || event.data?.type !== 'volter-view-as' || event.data.pass !== navigation.pass) return;
+      if (event.data.viewed?.vendor !== frame.vendor && !event.data.error) return;
+      navigation.done(event.data.viewed, event.data.error);
+    };
+    window.addEventListener('message', on);
+    return () => window.removeEventListener('message', on);
+  }, [navigation, frame.vendor]);
   const others = boards.filter((b) => b.include && !b.include.includes(key) && !sectionKeys(frame).some((k) => b.include!.includes(k)));
   // its name is drawn the same size at every zoom while the head above it shrinks: zoomed out past the point the name fits
   // there, it is left out, as a canvas app leaves out a frame name that does not fit; selected or in use, it is always shown
@@ -1727,6 +1757,7 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
         <span className="frame-name" onPointerDown={grab}><Mark vendor={frame.vendor} /><span>{frame.title}</span></span>
         {frame.changes ? <button type="button" className="frame-changed nodrag" onClick={() => compare(key)} title={`${counted(frame.changes, 'change')} ${branch ? 'on this branch' : 'here, not in a changeset'}: compare`}><Icon name="square-dot" size={14} />{frame.changes}</button>
           : picked ? <button type="button" className="ghost nodrag" onClick={() => compare(key)} title="Compare with a branch of this World" aria-label={`Compare ${frame.title} with a branch`}><Icon name="file-diff" size={14} /></button> : null}
+        {picked && data.viewAs ? <ViewAsMenu data={data.viewAs} /> : null}
         {picked && others.length ? <select className="nodrag frame-add" value="" aria-label={`Add ${frame.title} to a board`} onChange={(e) => { if (e.target.value) addTo(e.target.value, key); }}><option value="">Add to board…</option>{others.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}</select> : null}
         {picked && remove ? <button type="button" className="ghost nodrag" onClick={() => remove.act(key)} title={remove.label} aria-label={remove.label}>✕</button> : null}
       </NodeToolbar>
@@ -1738,7 +1769,7 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
         </div>
         <div className={active ? 'frame-body nodrag nopan nowheel' : 'frame-body'}>
           {url
-            ? <iframe title={frame.title} src={url} loading="lazy" style={{ pointerEvents: active ? 'auto' : 'none' }} />
+            ? <iframe ref={iframe} key={data.revision ?? 0} title={frame.title} src={navigation?.url ?? url} loading={navigation ? "eager" : "lazy"} style={{ pointerEvents: active ? 'auto' : 'none' }} />
             : <div className="frame-none"><p><strong>{frame.unseen === 'branch-sites' ? BRANCH_SITES_UNSEEN : frame.unseen === 'sites-not-routed' ? `This World shows ${frame.title} only at its own local address.` : `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet.`}</strong></p><p className="mode">{frame.url}</p></div>}
         </div>
       </div>
@@ -1755,7 +1786,7 @@ function NameField({ name, label, done }: { name: string; label: string; done: (
 }
 /** A section, as a canvas app's: a region of the board with a name, holding whatever frames sit in it. Its name stays the
  *  same size at every zoom; selected, it can be resized from its edges, renamed (double-click the name) or removed. */
-type SectionData = { key: string; name: string; vendor: string | null; /** renamed by someone, so its name is kept */ named: boolean; picked: boolean; editable: boolean; renaming: boolean; pick: (key: string) => void; rename: (key: string) => void; renamed: (key: string, next: string | null) => void; remove: (key: string) => void; resized: () => void; /** its name moves it, with what it holds */ grab: (e: React.PointerEvent) => void };
+type SectionData = { viewAs?: ViewAsMenuData; key: string; name: string; vendor: string | null; /** renamed by someone, so its name is kept */ named: boolean; picked: boolean; editable: boolean; renaming: boolean; pick: (key: string) => void; rename: (key: string) => void; renamed: (key: string, next: string | null) => void; remove: (key: string) => void; resized: () => void; /** its name moves it, with what it holds */ grab: (e: React.PointerEvent) => void };
 function SectionBox({ data }: NodeProps<Node<SectionData>>): React.JSX.Element {
   return (
     <>
@@ -1766,6 +1797,7 @@ function SectionBox({ data }: NodeProps<Node<SectionData>>): React.JSX.Element {
           : <button type="button" className={data.picked ? 'nodrag on' : 'nodrag'} onPointerDown={data.grab} onClick={() => data.pick(data.key)} onDoubleClick={() => { if (data.editable) data.rename(data.key); }} title={data.editable ? 'Double-click to rename' : undefined}>
             {data.vendor ? <Mark vendor={data.vendor} /> : null}<span>{data.name}</span>
           </button>}
+        {data.viewAs ? <ViewAsMenu data={data.viewAs} /> : null}
         {data.picked && data.editable && !data.renaming ? <button type="button" className="ghost nodrag" onClick={() => data.remove(data.key)} aria-label={`Remove the section ${data.name}`} title="Remove the section (its frames stay)">✕</button> : null}
       </NodeToolbar>
       <div className={data.picked ? 'section-box on' : 'section-box'} />
@@ -1975,6 +2007,13 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
   // the pages opened from the ones they sit under (Everything shows a vendor's top pages; a page's own open from it)
   const [opened, setOpened] = useState<Set<string>>(new Set());
   const editable = canWrite && !snapshot && !viewing;
+  const [viewedAs, setViewedAs] = useState<Record<string, { label: string; revision: number }>>({});
+  const [signingAs, setSigningAs] = useState<Record<string, ViewAsNavigation>>({});
+  const busyAs = useRef(new Set<string>());
+  const [askingAs, setAskingAs] = useState<string[]>([]);
+  const viewAsTimers = useRef(new Set<ReturnType<typeof setTimeout>>());
+  const viewAsMounted = useRef(true);
+  useEffect(() => { viewAsMounted.current = true; return () => { viewAsMounted.current = false; for (const timer of viewAsTimers.current) clearTimeout(timer); }; }, []);
   /** An edit of the boards: shown at once, saved after the edits before it, made from the boards as they then stand. */
   const save = useCallback((edit: (all: SavedBoard[]) => SavedBoard[]): Promise<void> => {
     if (!editable) return Promise.resolve();
@@ -2192,10 +2231,45 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite,
     };
     el.addEventListener('pointermove', move); el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up);
   };
+  const choosePerson = async (vendor: string, person: string | null): Promise<void> => {
+    if (!editable || busyAs.current.has(vendor)) return;
+    const target = nodes.find((n) => n.type === 'screen' && (n.data as Screen).frame.vendor === vendor && (n.data as Screen).frame.at && 'screen' in (n.data as Screen).frame.at!);
+    if (!target) { toast('Open a page of this vendor on the board first', 'error'); return; }
+    const frame = (target.data as Screen).frame;
+    busyAs.current.add(vendor); setAskingAs([...busyAs.current]);
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let settled = false;
+    const done = (viewed?: ViewedPerson, error?: string): void => {
+      if (settled || !viewAsMounted.current) return;
+      settled = true;
+      if (timer) { clearTimeout(timer); viewAsTimers.current.delete(timer); }
+      busyAs.current.delete(vendor);
+      setAskingAs([...busyAs.current]);
+      setSigningAs((all) => { const next = { ...all }; delete next[vendor]; return next; });
+      if (error) { toast(error, 'error'); return; }
+      // Reload every frame, including one that had navigated to the sign-in page. No board arrangement is saved.
+      setViewedAs((all) => ({ ...all, [vendor]: { label: viewed?.label ?? all[vendor]?.label ?? '', revision: (all[vendor]?.revision ?? 0) + 1 } }));
+    };
+    try {
+      const land = `/${name}/${vendor}${(frame.at as { screen: string }).screen}`;
+      const answer = await door(SESSION, `/-/${name}/twins/${vendor}/session`, { method: 'POST', body: JSON.stringify({ person, land }) });
+      if (!answer.ok) { done(undefined, await failure(answer)); return; }
+      const opened = await answer.json() as { url: string };
+      if (!viewAsMounted.current) return;
+      const pass = new URLSearchParams(new URL(opened.url).hash.slice(1)).get('pass');
+      if (!pass) throw new Error('The World did not return a sign-in pass.');
+      setSigningAs((all) => ({ ...all, [vendor]: { frame: target.id, url: opened.url, pass, done } }));
+      // The pass lasts a minute; also recover if its frame was removed before it answered.
+      timer = setTimeout(() => done(undefined, 'The sign-in did not finish. Choose View as again.'), 60_000);
+      viewAsTimers.current.add(timer);
+    } catch (error) { done(undefined, error instanceof Error ? error.message : 'The World did not answer.'); }
+  };
+  const viewAsMenu = (vendor: string | null): ViewAsMenuData | undefined => editable && token === SESSION && vendor && nodes.some((n) => n.type === 'screen' && (n.data as Screen).frame.vendor === vendor && (n.data as Screen).frame.at && 'screen' in (n.data as Screen).frame.at!)
+    ? { world: name, token, vendor, label: viewedAs[vendor]?.label, busy: askingAs.includes(vendor), choose: (person) => { void choosePerson(vendor, person); } } : undefined;
   // what each node shows: in use, selected, and what can be done to it
   const shownNodes = nodes.map((n) => (n.type === 'section'
-    ? { ...n, data: { ...n.data, grab: grab(n.id), picked: picked === n.id, editable, renaming: editable && renaming === (n.data as { key: string }).key, pick: (k: string) => setPicked(`sec:${k}`), rename: renameSection, renamed: renamedSection, remove: removeSection, resized: () => requestAnimationFrame(() => { const k = (n.data as { key: string }).key; keep(groupFrames(k), [k]); }) } }
-    : { ...n, data: { ...n.data, grab: grab(n.id), active: active === n.id, picked: picked === n.id, boards: editable ? others : [], addTo, remove: !editable || (board.include && !board.include.includes(n.id)) ? null : removeFrame, compare: (k: string) => { setPicked(k); setComparing(k); } } }));
+    ? { ...n, data: { ...n.data, viewAs: viewAsMenu((n.data as SectionData).vendor), grab: grab(n.id), picked: picked === n.id, editable, renaming: editable && renaming === (n.data as { key: string }).key, pick: (k: string) => setPicked(`sec:${k}`), rename: renameSection, renamed: renamedSection, remove: removeSection, resized: () => requestAnimationFrame(() => { const k = (n.data as { key: string }).key; keep(groupFrames(k), [k]); }) } }
+    : { ...n, data: { ...n.data, viewAs: (n.data as Screen).frame.at && 'screen' in (n.data as Screen).frame.at! ? viewAsMenu((n.data as Screen).frame.vendor) : undefined, navigation: editable ? signingAs[(n.data as Screen).frame.vendor] : undefined, revision: viewedAs[(n.data as Screen).frame.vendor]?.revision, grab: grab(n.id), active: active === n.id, picked: picked === n.id, boards: editable ? others : [], addTo, remove: !editable || (board.include && !board.include.includes(n.id)) ? null : removeFrame, compare: (k: string) => { setPicked(k); setComparing(k); } } }));
   // the keys a canvas app answers: Esc leaves a frame, then the selection; Delete removes what is selected; ⇧S draws a section
   useEffect(() => {
     const on = (e: KeyboardEvent): void => {