@hienlh/ppm 0.23.24 → 0.23.26

package/src/web/components/settings/remote-access/review-address-setup.tsx

@@ -0,0 +1,226 @@
+/**
+ * Setting a domain up for the review address: Cloudflare sign-in when there is none or it cannot
+ * be used, the zone, the hostname, then `POST /api/share-host/setup`. Shared by Settings → Remote
+ * Access → Review links and the Share dialog, which show it in place of their address choices
+ * while it runs. Cloudflare sign-in is PPM's own (`/api/tunnel/named/login`), whose progress
+ * arrives as the same `tunnel:login_*` events.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { namedTunnelApi, type LoginState } from "@/lib/api-named-tunnel";
+import { shareHostApi, type ShareHostApplied, type ShareHostStatus } from "@/lib/api-share-host";
+import { NamedTunnelLoginStep } from "@/components/tunnels/named-tunnel/named-tunnel-login-step";
+import { NamedTunnelHostnameField } from "@/components/tunnels/named-tunnel/named-tunnel-hostname-field";
+import { buildHostname, validateHostname } from "@/components/tunnels/named-tunnel/hostname-validation";
+import { namedTunnelCopy } from "@/components/tunnels/named-tunnel/named-tunnel-copy";
+
+const DEFAULT_PREFIX = "share";
+const btn = "min-h-11 cursor-pointer md:min-h-9";
+
+/** `named`: a tunnel of the review address's own; `shared`: a second hostname on PPM's tunnel. */
+export type DomainMode = "named" | "shared";
+
+type SetupFlow =
+  /** The saved Cloudflare sign-in cannot be used; signing in again moves it aside, so ask first. */
+  | { k: "relogin"; mode: DomainMode; reason: "invalid" | "mismatch" }
+  | { k: "login"; mode: DomainMode; url: string | null; slow: boolean }
+  | { k: "zone"; mode: DomainMode }
+  | { k: "hostname"; mode: DomainMode; zone: string; prefix: string; error?: string }
+  | { k: "submitting"; mode: DomainMode; hostname: string };
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+/** Toast a change the server saved, saying so when the supervisor could not apply it yet. */
+export function reportApplied(applied: ShareHostApplied, done: string): void {
+  if (applied.applied) toast.success(done);
+  else toast.warning(`${done} — not applied yet`, { description: applied.message });
+}
+
+export interface ReviewAddressSetup {
+  /** The step on screen, or null when no setup runs. */
+  flow: SetupFlow | null;
+  /** Set a domain up on `mode`, signing in to Cloudflare first when needed. */
+  begin: (mode: DomainMode) => void;
+  cancel: () => void;
+  cancelLogin: () => void;
+  /** Move the unusable sign-in aside and sign in again. */
+  relogin: (mode: DomainMode) => void;
+  setPrefix: (prefix: string) => void;
+  submit: () => Promise<void>;
+}
+
+/** `onDone` runs once a setup is saved and the status read again. */
+export function useReviewAddressSetup(
+  status: ShareHostStatus | null, refresh: () => Promise<void>, onDone?: () => void,
+): ReviewAddressSetup {
+  const [flow, setFlow] = useState<SetupFlow | null>(null);
+  const flowRef = useRef(flow);
+  flowRef.current = flow;
+
+  const hostnameError = useCallback((hostname: string, zone: string): string | undefined => {
+    const check = validateHostname(hostname, zone);
+    if (!check.ok) return check.reason;
+    if (hostname === status?.ppmTunnel.hostname) return "That is PPM's own address — pick another prefix";
+    return undefined;
+  }, [status?.ppmTunnel.hostname]);
+
+  const loadZone = useCallback((mode: DomainMode) => {
+    setFlow({ k: "zone", mode });
+    shareHostApi.zone()
+      .then(({ zone }) => {
+        const current = status?.hostname;
+        const prefix = current?.endsWith(`.${zone}`) ? current.slice(0, -(zone.length + 1)) : DEFAULT_PREFIX;
+        setFlow((f) => (f?.k === "zone" ? { k: "hostname", mode, zone, prefix } : f));
+      })
+      .catch((e) => {
+        setFlow(null);
+        toast.error("Could not read your Cloudflare domain", { description: message(e) });
+      });
+  }, [status?.hostname]);
+
+  const onLoginState = useCallback((mode: DomainMode, state: LoginState, detail: string | null) => {
+    if (state === "slow") setFlow((f) => (f?.k === "login" ? { ...f, slow: true } : f));
+    if (state === "success") { void refresh(); loadZone(mode); }
+    if (state === "timeout" || state === "error") {
+      setFlow(null);
+      toast.error(state === "timeout" ? "The Cloudflare sign-in link expired" : "Cloudflare sign-in failed", {
+        description: detail ?? undefined,
+      });
+    }
+    if (state === "cancelled") setFlow(null);
+  }, [loadZone, refresh]);
+
+  const loginMode = flow?.k === "login" ? flow.mode : null;
+  useEffect(() => {
+    if (!loginMode) return;
+    const onUrl = (e: Event) => {
+      const url = ((e as CustomEvent).detail as { url?: unknown })?.url;
+      if (typeof url === "string") setFlow((f) => (f?.k === "login" ? { ...f, url } : f));
+    };
+    const onState = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { state?: LoginState; message?: string | null };
+      if (detail?.state) onLoginState(loginMode, detail.state, detail.message ?? null);
+    };
+    window.addEventListener("tunnel:login_url", onUrl);
+    window.addEventListener("tunnel:login_state", onState);
+    return () => {
+      window.removeEventListener("tunnel:login_url", onUrl);
+      window.removeEventListener("tunnel:login_state", onState);
+    };
+  }, [loginMode, onLoginState]);
+
+  const startLogin = (mode: DomainMode, relogin: boolean) => {
+    setFlow({ k: "login", mode, url: null, slow: false });
+    // `relogin` moves the unusable cert aside for a fresh sign-in.
+    namedTunnelApi.login(relogin)
+      .then((snap) => {
+        if (snap.url) setFlow((f) => (f?.k === "login" ? { ...f, url: snap.url } : f));
+        onLoginState(mode, snap.state, snap.message);
+      })
+      .catch((e) => {
+        setFlow(null);
+        toast.error("Could not start the Cloudflare sign-in", { description: message(e) });
+      });
+  };
+
+  const begin = (mode: DomainMode) => {
+    if (!status) return;
+    if (status.certState === "ok") { loadZone(mode); return; }
+    if (status.certState === "invalid" || status.certState === "mismatch") {
+      setFlow({ k: "relogin", mode, reason: status.certState });
+      return;
+    }
+    startLogin(mode, false);
+  };
+
+  const cancelLogin = () => {
+    setFlow(null);
+    void namedTunnelApi.cancelLogin().catch(() => {});
+  };
+
+  const setPrefix = (prefix: string) => {
+    setFlow((f) => (f?.k === "hostname" ? { ...f, prefix, error: hostnameError(buildHostname(prefix, f.zone), f.zone) } : f));
+  };
+
+  const submit = async () => {
+    const f = flowRef.current;
+    if (f?.k !== "hostname") return;
+    const hostname = buildHostname(f.prefix, f.zone);
+    const error = hostnameError(hostname, f.zone);
+    if (error) { setFlow({ ...f, error }); return; }
+    setFlow({ k: "submitting", mode: f.mode, hostname });
+    try {
+      const result = await shareHostApi.setup(f.mode, hostname);
+      setFlow(null);
+      reportApplied(result.applied, `Review address set to https://${result.hostname}`);
+      await refresh();
+      onDone?.();
+    } catch (e) {
+      setFlow({ ...f, error: message(e) });
+    }
+  };
+
+  return {
+    flow, begin, cancel: () => setFlow(null), cancelLogin, relogin: (mode) => startLogin(mode, true), setPrefix, submit,
+  };
+}
+
+/** The setup's current step; nothing when no setup runs. */
+export function ReviewAddressSetupView({ setup, ppmHostname }: { setup: ReviewAddressSetup; ppmHostname: string | null }) {
+  const { flow } = setup;
+  if (!flow) return null;
+  switch (flow.k) {
+    case "relogin":
+      return (
+        <div className="space-y-4">
+          <div>
+            <h4 className="text-sm font-medium">{namedTunnelCopy.needsRelogin.title}</h4>
+            <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+              {flow.reason === "mismatch" ? namedTunnelCopy.needsRelogin.certMismatch : namedTunnelCopy.needsRelogin.certInvalid}
+            </p>
+          </div>
+          <div className="flex flex-col-reverse gap-2 md:flex-row md:justify-end">
+            <Button variant="outline" onClick={setup.cancel} className={btn}>Cancel</Button>
+            <Button onClick={() => setup.relogin(flow.mode)} className={btn}>{namedTunnelCopy.needsRelogin.action}</Button>
+          </div>
+        </div>
+      );
+    case "login":
+      return <NamedTunnelLoginStep url={flow.url} slow={flow.slow} onCancel={setup.cancelLogin} />;
+    case "zone":
+      return (
+        <p className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="size-4 animate-spin" /> Reading your Cloudflare domain…
+        </p>
+      );
+    case "submitting":
+      return (
+        <p className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="size-4 shrink-0 animate-spin" />
+          <span>Setting up <span className="break-all">https://{flow.hostname}</span>… This takes a few seconds.</span>
+        </p>
+      );
+    case "hostname":
+      return (
+        <form className="space-y-4" onSubmit={(e) => { e.preventDefault(); void setup.submit(); }}>
+          <div>
+            <h4 className="text-sm font-medium">
+              {flow.mode === "named" ? "Review address on its own tunnel" : "Review address on PPM's tunnel"}
+            </h4>
+            <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+              {flow.mode === "named"
+                ? "PPM creates a Cloudflare tunnel for review links and points this name at it."
+                : `PPM adds this name to its tunnel, next to ${ppmHostname ? `https://${ppmHostname}` : "its public link"}.`}
+            </p>
+          </div>
+          <NamedTunnelHostnameField zone={flow.zone} prefix={flow.prefix} error={flow.error} onChange={setup.setPrefix} />
+          <div className="flex flex-col-reverse gap-2 md:flex-row md:justify-end">
+            <Button type="button" variant="outline" onClick={setup.cancel} className={btn}>Cancel</Button>
+            <Button type="submit" className={btn} data-testid="review-links-submit">Set up</Button>
+          </div>
+        </form>
+      );
+  }
+}

package/src/web/components/settings/remote-access/review-links-pane.tsx

@@ -0,0 +1,203 @@
+/**
+ * Settings → Remote Access → Review links: a public address for design review links that opens
+ * the review pages and nothing else of PPM — no editor, chats, files or sign-in page answer
+ * there — so a design can be shared while PPM itself stays private.
+ *
+ * A process of its own (the share host) answers that address and passes only the review pages
+ * through to PPM. It reaches Cloudflare one of three ways: a temporary trycloudflare address, a
+ * tunnel of its own on the user's domain, or a second hostname on PPM's named tunnel. As on the
+ * Public link pane, the switch only writes config and the supervisor applies it, so the state is
+ * polled (`use-share-host-status.ts`). Setting a domain up is `review-address-setup.tsx`, which
+ * the Share dialog uses too.
+ */
+import { useState } from "react";
+import { toast } from "sonner";
+import { Loader2, Lock, TriangleAlert } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { shareHostApi } from "@/lib/api-share-host";
+import { openSettings } from "../open-settings";
+import { Notice } from "../tailscale/tailscale-settings-section";
+import { AdaptiveDialog } from "../tailscale/tailscale-ui";
+import { AddressOption } from "./public-link-pane";
+import { reportApplied, ReviewAddressSetupView, useReviewAddressSetup } from "./review-address-setup";
+import { useShareHostStatus } from "./use-share-host-status";
+
+const btn = "min-h-11 cursor-pointer md:min-h-9";
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+export function ReviewLinksPane() {
+  const { status, setStatus, loadError, refresh, connecting } = useShareHostStatus();
+  const setup = useReviewAddressSetup(status, refresh);
+  const [pending, setPending] = useState(false);
+  const [switching, setSwitching] = useState(false);
+  const [confirmTemporary, setConfirmTemporary] = useState(false);
+
+  const setEnabled = async (next: boolean) => {
+    setPending(true);
+    setStatus((s) => s && { ...s, enabled: next });
+    try {
+      const applied = await shareHostApi.setEnabled(next);
+      if (!applied.applied) reportApplied(applied, next ? "Review address turned on" : "Review address turned off");
+      await refresh();
+    } catch (e) {
+      setStatus((s) => s && { ...s, enabled: !next });
+      toast.error(next ? "Could not turn the review address on" : "Could not turn the review address off", { description: message(e) });
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const switchToTemporary = async () => {
+    setConfirmTemporary(false);
+    setSwitching(true);
+    try {
+      reportApplied(await shareHostApi.useTemporary(), "Switched to a temporary address");
+      await refresh();
+    } catch (e) {
+      toast.error("Could not switch to a temporary address", { description: message(e) });
+    } finally {
+      setSwitching(false);
+    }
+  };
+
+  if (!status) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {loadError ? `Could not read the review address's state: ${loadError}` : "Reading the review address's state…"}
+      </p>
+    );
+  }
+
+  const { enabled, mode, authEnabled } = status;
+  const hostname = mode === "quick" ? null : status.hostname;
+  const ppmHostname = status.ppmTunnel.named ? status.ppmTunnel.hostname : null;
+
+  return (
+    <div className="space-y-6" data-testid="review-links-pane">
+      <p className="text-sm leading-relaxed text-muted-foreground">
+        Share design review links without making PPM public. Reviewers get an address of its own that
+        opens the review pages and nothing else: no editor, chats, files or sign-in page answer there.
+      </p>
+
+      <section className="space-y-4 rounded-lg border border-border p-4" data-testid="review-links-switch-card">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0 space-y-1">
+            <Label htmlFor="review-links-switch" className="text-sm font-medium">Review address</Label>
+            <p className="text-sm leading-relaxed text-muted-foreground" data-testid="review-links-status">
+              {!enabled
+                ? "Off."
+                : status.connected
+                  ? <>On. Review links open at <span className="break-all font-medium text-foreground">{status.url}</span></>
+                  : status.running
+                    ? "On. Connecting to Cloudflare…"
+                    : "On. Starting…"}
+            </p>
+          </div>
+          <div className="flex min-h-11 shrink-0 items-center gap-2">
+            {(pending || (connecting && status.canApply)) && <Loader2 className="size-4 animate-spin text-muted-foreground" />}
+            <Switch
+              id="review-links-switch"
+              checked={enabled}
+              disabled={pending || (!enabled && !authEnabled)}
+              onCheckedChange={(on) => void setEnabled(on)}
+            />
+          </div>
+        </div>
+
+        {!authEnabled && (
+          <Notice icon={<Lock className="size-4" />}>
+            <p>PPM's password is off, and share links do not open while it is. Turn it on first.</p>
+            <Button variant="outline" onClick={() => openSettings("general")} className={btn}>Open General</Button>
+          </Notice>
+        )}
+        {enabled && !status.canApply && (
+          <Notice icon={<TriangleAlert className="size-4 text-warning" />}>
+            <p>
+              {status.supervised
+                ? "This PPM was started before review addresses existed. Run `ppm restart` to apply these settings."
+                : "Review addresses run under `ppm start`. This PPM was started without it, so nothing serves the address."}
+            </p>
+          </Notice>
+        )}
+      </section>
+
+      <section className="space-y-3" data-testid="review-links-address">
+        <h3 className="text-sm font-medium">Address</h3>
+        {setup.flow ? (
+          <div className="rounded-lg border border-border p-4" data-testid="review-links-setup">
+            <ReviewAddressSetupView setup={setup} ppmHostname={ppmHostname} />
+          </div>
+        ) : (
+          <div className="divide-y divide-border rounded-lg border border-border">
+            <AddressOption
+              title="Temporary address"
+              inUse={mode === "quick"}
+              description="A random trycloudflare.com address of its own. It changes every time PPM restarts, and links already sent stop working then."
+              action={mode !== "quick" && (
+                <Button variant="outline" onClick={() => setConfirmTemporary(true)} disabled={switching} className={btn}>
+                  {switching ? <Loader2 className="size-4 animate-spin" /> : "Switch"}
+                </Button>
+              )}
+            />
+            <AddressOption
+              title="Your domain, its own tunnel"
+              inUse={mode === "named"}
+              description={mode === "named" && hostname
+                ? <><span className="break-all font-medium text-foreground">https://{hostname}</span>, on a Cloudflare tunnel of its own.</>
+                : "A fixed address like share.example.com, on a Cloudflare tunnel of its own. PPM's public link is not involved."}
+              action={authEnabled && (
+                <Button variant={mode === "named" ? "outline" : "default"} onClick={() => setup.begin("named")} className={btn}
+                  data-testid="review-links-setup-named">
+                  {mode === "named" ? "Change" : "Set up"}
+                </Button>
+              )}
+            />
+            <AddressOption
+              title="Your domain, on PPM's tunnel"
+              inUse={mode === "shared"}
+              description={mode === "shared" && hostname
+                ? <><span className="break-all font-medium text-foreground">https://{hostname}</span>, on the tunnel of PPM's public link. PPM's own address answers only while that link is on.</>
+                : "A fixed address like share.example.com, added to the tunnel PPM's public link uses. PPM's own address answers only while that link is on."}
+              action={authEnabled && status.ppmTunnel.named && (
+                <Button variant={mode === "shared" ? "outline" : "default"} onClick={() => setup.begin("shared")} className={btn}
+                  data-testid="review-links-setup-shared">
+                  {mode === "shared" ? "Change" : "Set up"}
+                </Button>
+              )}
+            />
+          </div>
+        )}
+
+        {!setup.flow && !authEnabled && (
+          <p className="text-xs text-muted-foreground">Turn on PPM's password to use your own domain.</p>
+        )}
+        {!setup.flow && authEnabled && !status.ppmTunnel.named && (
+          <p className="text-xs leading-relaxed text-muted-foreground">
+            To use PPM's tunnel, set your domain up under Public link first. Its link can stay off.
+          </p>
+        )}
+        {enabled && status.warning && (
+          <Notice icon={<TriangleAlert className="size-4 text-warning" />}>
+            <p>{status.warning}</p>
+          </Notice>
+        )}
+      </section>
+
+      <AdaptiveDialog open={confirmTemporary} title="Switch to a temporary address?" onClose={() => setConfirmTemporary(false)}>
+        <div className="space-y-4">
+          <p className="text-sm leading-relaxed text-muted-foreground">
+            Review links stop opening at https://{hostname} and get a new random address instead. Links
+            already sent with your domain stop working until you set it up again.
+          </p>
+          <div className="flex flex-col-reverse gap-2 pt-2 md:flex-row md:justify-end">
+            <Button variant="outline" onClick={() => setConfirmTemporary(false)} className={btn}>Cancel</Button>
+            <Button variant="destructive" onClick={() => void switchToTemporary()} className={btn}>Switch</Button>
+          </div>
+        </div>
+      </AdaptiveDialog>
+    </div>
+  );
+}

package/src/web/components/settings/remote-access/use-share-host-status.ts

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from "react";
+import { shareHostApi, type ShareHostStatus } from "@/lib/api-share-host";
+
+const POLL_MS = 10_000;
+/** While the switch is on and the address is not connected: it usually is within seconds. */
+const CONNECTING_POLL_MS = 2_000;
+
+const message = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+export interface ShareHostStatusFeature {
+  status: ShareHostStatus | null;
+  /** For an optimistic switch: the server's answer replaces it on the next read. */
+  setStatus: (update: (s: ShareHostStatus | null) => ShareHostStatus | null) => void;
+  loadError: string | null;
+  refresh: () => Promise<void>;
+  /** Switched on, not connected yet. */
+  connecting: boolean;
+}
+
+/**
+ * The review address's settings and what runs, read while `active`: on mount, on window focus,
+ * and on a timer. A switch only writes config and the supervisor applies it, so the timer runs
+ * faster while the address is on but not connected.
+ */
+export function useShareHostStatus(active = true): ShareHostStatusFeature {
+  const [status, setStatus] = useState<ShareHostStatus | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      setStatus(await shareHostApi.status());
+      setLoadError(null);
+    } catch (e) {
+      // Keep the last known state: a failed poll is not a state change.
+      setLoadError(message(e));
+    }
+  }, []);
+
+  const connecting = !!status?.enabled && !status.connected;
+
+  useEffect(() => {
+    if (!active) return;
+    void refresh();
+    const reload = () => { void refresh(); };
+    window.addEventListener("focus", reload);
+    return () => window.removeEventListener("focus", reload);
+  }, [active, refresh]);
+
+  useEffect(() => {
+    if (!active) return;
+    const timer = setInterval(() => {
+      if (document.visibilityState === "visible") void refresh();
+    }, connecting ? CONNECTING_POLL_MS : POLL_MS);
+    return () => clearInterval(timer);
+  }, [active, connecting, refresh]);
+
+  return { status, setStatus, loadError, refresh, connecting };
+}