@drawnagency/primitives 0.1.104 → 0.1.106

package/src/components/shell/AudienceDetailsPanel.tsx

@@ -0,0 +1,263 @@
+import { useState } from "react";
+import { ChevronRight, Copy, Check, Eye } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Button } from "../shared/Button";
+import { SectionSummaryRow } from "../shared/SectionSummaryRow";
+import type { AudienceOverview, OverviewPage } from "../../lib/audience-overview";
+
+/** One audience plus its resolved availability. Built server-side. */
+export interface AudienceDetail {
+  name: string;
+  displayName: string;
+  color: string | null;
+  isDefault: boolean;
+  hasPassword: boolean;
+  /** Named sign-ins that grant this audience. Empty in `.env`/audience mode. */
+  credentials: Array<{ username: string; label: string | null }>;
+  overview: AudienceOverview;
+}
+
+interface Props {
+  audiences: AudienceDetail[];
+  /** False when the auth provider cannot store a reversible password at all. */
+  revealSupported: boolean;
+}
+
+const PLACEHOLDER_COLOR = "#94a3b8";
+
+type RevealState =
+  | { kind: "hidden" }
+  | { kind: "loading" }
+  | { kind: "shown"; password: string }
+  | { kind: "message"; text: string };
+
+async function fetchPassword(username: string): Promise<RevealState> {
+  let res: Response;
+  try {
+    res = await fetch("/api/auth/viewer-password", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username }),
+    });
+  } catch {
+    return { kind: "message", text: "Network error — try again." };
+  }
+  if (res.status === 429) return { kind: "message", text: "Too many attempts. Try again in a few minutes." };
+  if (res.status === 403) return { kind: "message", text: "You don't have permission to view this." };
+  if (!res.ok) return { kind: "message", text: "Couldn't load the password." };
+
+  const body = await res.json().catch(() => ({}));
+  if (body.status === "revealed") return { kind: "shown", password: body.password };
+  // "unavailable": the honest case. Created before passwords could be shown, or
+  // changed by something that didn't store a readable copy.
+  return { kind: "message", text: "Hidden. Set a new password to view here." };
+}
+
+function PasswordCell({ username, revealSupported }: { username: string; revealSupported: boolean }) {
+  const [state, setState] = useState<RevealState>({ kind: "hidden" });
+  const [copied, setCopied] = useState(false);
+
+  if (!revealSupported) {
+    return <span className="text-xs tracking-widest text-base-contrast-light">••••</span>;
+  }
+
+  async function reveal() {
+    setState({ kind: "loading" });
+    setState(await fetchPassword(username));
+  }
+
+  async function copy(password: string) {
+    try {
+      await navigator.clipboard.writeText(password);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard blocked (insecure context, denied permission) — the password
+      // is on screen and selectable, so this needs no error surface.
+    }
+  }
+
+  if (state.kind === "shown") {
+    return (
+      <span className="flex items-center gap-2">
+        <code className="rounded bg-base-accent px-2 py-1 font-mono text-xs text-base-contrast select-all">
+          {state.password}
+        </code>
+        <Button variant="ghost" onClick={() => copy(state.password)} aria-label="Copy password">
+          {copied
+            ? <Check className="h-3.5 w-3.5" aria-hidden />
+            : <Copy className="h-3.5 w-3.5" aria-hidden />}
+        </Button>
+        <Button variant="ghost" onClick={() => setState({ kind: "hidden" })}>Hide</Button>
+      </span>
+    );
+  }
+
+  if (state.kind === "message") {
+    return (
+      <span className="flex items-center gap-2">
+        <span className="max-w-xs text-right text-xs text-base-contrast-light">{state.text}</span>
+        <Button variant="ghost" onClick={() => setState({ kind: "hidden" })}>Dismiss</Button>
+      </span>
+    );
+  }
+
+  return (
+    <Button variant="ghost" onClick={reveal} isLoading={state.kind === "loading"} loadingLabel="Loading...">
+      <span className="inline-flex items-center gap-1.5">
+        <Eye className="h-3.5 w-3.5" aria-hidden />
+        Show password
+      </span>
+    </Button>
+  );
+}
+
+function PageRow({ page }: { page: OverviewPage }) {
+  const [open, setOpen] = useState(false);
+  const availableCount = page.sections.filter((s) => s.available).length;
+  const blocked = page.availability === "none";
+
+  return (
+    <li className="rounded border border-base-200">
+      <button
+        type="button"
+        onClick={() => setOpen((p) => !p)}
+        aria-expanded={open}
+        className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left"
+      >
+        <ChevronRight className={cn("h-3.5 w-3.5 shrink-0 text-base-contrast-light transition-transform", open && "rotate-90")} aria-hidden />
+        <span className={cn("flex-1 truncate text-sm text-base-contrast", blocked && "opacity-50")}>
+          {page.title}
+          {page.hiddenFromNav && (
+            <span className="ml-2 rounded bg-base-accent px-1.5 py-0.5 text-[11px] text-base-contrast-light">
+              Not in menu
+            </span>
+          )}
+        </span>
+        <span className="shrink-0 text-xs text-base-contrast-light">
+          {blocked
+            ? "Whole page hidden"
+            : `${availableCount} of ${page.sections.length} sections`}
+        </span>
+      </button>
+
+      {open && (
+        <div className="flex flex-col gap-2 border-t border-base-200 px-3 py-2">
+          {page.sections.length === 0 && (
+            <p className="text-xs text-base-contrast-light">This page has no sections yet.</p>
+          )}
+          {page.sections.map((s) => (
+            <SectionSummaryRow
+              key={s.id}
+              label={s.label}
+              typeLabel={s.typeLabel}
+              thumbnails={s.thumbnails}
+              muted={!s.available}
+              trailing={
+                s.available ? null : (
+                  <span className="shrink-0 rounded bg-base-accent px-1.5 py-0.5 text-[11px] text-base-contrast-light">
+                    {s.draft ? "Draft" : "Hidden"}
+                  </span>
+                )
+              }
+            />
+          ))}
+        </div>
+      )}
+    </li>
+  );
+}
+
+function AudienceBlock({ audience, revealSupported }: { audience: AudienceDetail; revealSupported: boolean }) {
+  const [open, setOpen] = useState(false);
+  const { overview } = audience;
+
+  return (
+    <section className="rounded-lg border border-base-200">
+      <div className="flex flex-wrap items-center gap-3 px-4 py-3">
+        <button
+          type="button"
+          onClick={() => setOpen((p) => !p)}
+          aria-expanded={open}
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 text-left"
+        >
+          <ChevronRight className={cn("h-4 w-4 shrink-0 text-base-contrast-light transition-transform", open && "rotate-90")} aria-hidden />
+          <span
+            aria-hidden
+            className="inline-block h-4 w-4 shrink-0 rounded-full border border-base-200"
+            style={{ backgroundColor: audience.color ?? PLACEHOLDER_COLOR }}
+          />
+          <span className="min-w-0">
+            <span className="flex items-center gap-2 text-sm font-medium text-base-contrast">
+              <span className="truncate">{audience.displayName}</span>
+              {audience.isDefault && (
+                <span className="rounded bg-base-accent px-1.5 py-0.5 text-xs text-base-contrast-light">Default</span>
+              )}
+            </span>
+            <span className="block text-xs text-base-contrast-light">
+              {overview.pagesAvailable} of {overview.pagesTotal} pages ·{" "}
+              {overview.sectionsAvailable} of {overview.sectionsTotal} sections
+            </span>
+          </span>
+        </button>
+      </div>
+
+      <div className="border-t border-base-200 px-4 py-3">
+        {audience.credentials.length === 0 ? (
+          <p className="text-xs text-base-contrast-light">
+            {audience.hasPassword
+              // A legacy audience-level password, from a site that has not been
+              // migrated to named sign-ins.
+              ? "One shared password, set outside sign-ins — not shown here."
+              : "No sign-ins yet — add one in Site settings → Viewer access."}
+          </p>
+        ) : (
+          <ul className="flex flex-col gap-2">
+            {audience.credentials.map((c) => (
+              <li key={c.username} className="flex flex-wrap items-center gap-3">
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate font-mono text-sm text-base-contrast">{c.username}</span>
+                  {c.label && (
+                    <span className="block truncate text-[11px] text-base-contrast-light">{c.label}</span>
+                  )}
+                </span>
+                <PasswordCell username={c.username} revealSupported={revealSupported} />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {open && (
+        <ul className="flex flex-col gap-2 border-t border-base-200 px-4 py-3">
+          {overview.pages.map((page) => <PageRow key={page.id} page={page} />)}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+/**
+ * The Audience Details page body: who can see what, and what password to share.
+ * Reachable by editors and the site's default audience (the client), so the
+ * client can hand a new partner access without going through us.
+ */
+export function AudienceDetailsPanel({ audiences, revealSupported }: Props) {
+  if (audiences.length === 0) {
+    return (
+      <p className="text-sm text-base-contrast-light">
+        No audiences yet. Add one in Site settings → Viewer access.
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {audiences.map((a) => (
+        <AudienceBlock key={a.name} audience={a} revealSupported={revealSupported} />
+      ))}
+    </div>
+  );
+}
+
+export default AudienceDetailsPanel;

package/src/components/shell/AudienceRow.tsx

@@ -4,6 +4,8 @@ import { Input } from "../shared/Input";
 import { PasswordInput } from "../shared/PasswordInput";
 import { Button } from "../shared/Button";
 import { ColorPicker } from "../shared/ColorPicker";
+import { CredentialList } from "./CredentialList";
+import type { ViewerCredential } from "../../schemas/audience";
 
 interface Props {
   audience: Audience;
@@ -11,6 +13,15 @@ interface Props {
   canMutate: boolean;
   onSave: (patch: { displayName?: string; color?: string | null; password?: string }) => Promise<void>;
   onDelete: () => Promise<void>;
+  /** Named sign-ins for this audience. Undefined in `.env`/audience mode, where
+   *  the row keeps its single audience-level password field. */
+  credentials?: ViewerCredential[];
+  credentialActions?: {
+    create: (data: { username: string; label: string | null; password: string }) => Promise<void>;
+    setPassword: (username: string, password: string) => Promise<void>;
+    setLabel: (username: string, label: string | null) => Promise<void>;
+    delete: (username: string) => Promise<void>;
+  };
 }
 
 const PLACEHOLDER_COLOR = "#94a3b8";
@@ -21,7 +32,12 @@ export function AudienceRow({
   canMutate,
   onSave,
   onDelete,
+  credentials,
+  credentialActions,
 }: Props) {
+  // Credential mode: access comes from named sign-ins, so the row's own password
+  // field is gone. The two are never shown together.
+  const credentialMode = Boolean(credentials && credentialActions);
   const [isEditing, setIsEditing] = useState(false);
   const [draftDisplayName, setDraftDisplayName] = useState(audience.displayName);
   const [draftColor, setDraftColor] = useState(audience.color ?? PLACEHOLDER_COLOR);
@@ -76,7 +92,13 @@ export function AudienceRow({
   }
 
   async function remove() {
-    if (!confirm(`Remove audience "${audience.displayName}"?`)) return;
+    const signIns = audience.credentialCount;
+    if (!confirm(
+      `Remove audience "${audience.displayName}"?` +
+      (signIns > 0
+        ? `\n\nIts ${signIns === 1 ? "sign-in" : `${signIns} sign-ins`} will be removed too, locking out anyone using them.`
+        : ""),
+    )) return;
     try {
       await onDelete();
     } catch (e) {
@@ -95,17 +117,21 @@ export function AudienceRow({
               value={draftDisplayName}
               onChange={setDraftDisplayName}
             />
-            <PasswordInput
-              label="New password"
-              value={draftPassword}
-              onChange={setDraftPassword}
-              autoComplete="new-password"
-              placeholder={audience.hasPassword ? "Leave blank to keep current" : "Required"}
-              showToggle
-            />
-            <span className="block text-[11px] text-base-contrast-light">
-              Passwords are hashed — the existing one can't be recovered, only replaced.
-            </span>
+            {!credentialMode && (
+              <>
+                <PasswordInput
+                  label="New password"
+                  value={draftPassword}
+                  onChange={setDraftPassword}
+                  autoComplete="new-password"
+                  placeholder={audience.hasPassword ? "Leave blank to keep current" : "Required"}
+                  showToggle
+                />
+                <span className="block text-[11px] text-base-contrast-light">
+                  Passwords are hashed — the existing one can't be recovered, only replaced.
+                </span>
+              </>
+            )}
           </div>
         </div>
         {error && <p className="text-xs text-red-600">{error}</p>}
@@ -148,7 +174,11 @@ export function AudienceRow({
             </span>
           )}
         </span>
-        {audience.hasPassword ? (
+        {credentialMode ? (
+          <span className="text-xs text-base-contrast-light">
+            {audience.credentialCount === 1 ? "1 sign-in" : `${audience.credentialCount} sign-ins`}
+          </span>
+        ) : audience.hasPassword ? (
           <span
             aria-label="Password is set"
             title="Passwords are hashed and can't be shown. Edit to set a new one."
@@ -166,6 +196,18 @@ export function AudienceRow({
           <Button variant="ghost" tone="destructive" onClick={remove}>Remove</Button>
         )}
       </div>
+
+      {credentials && credentialActions && (
+        <CredentialList
+          audienceName={audience.displayName}
+          credentials={credentials}
+          canMutate={canMutate}
+          onCreate={credentialActions.create}
+          onSetPassword={credentialActions.setPassword}
+          onSetLabel={credentialActions.setLabel}
+          onDelete={credentialActions.delete}
+        />
+      )}
     </div>
   );
 }

package/src/components/shell/CredentialList.tsx

@@ -0,0 +1,285 @@
+import { useState } from "react";
+import { Eye, Copy, Check } from "lucide-react";
+import { Input } from "../shared/Input";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import {
+  ViewerUsernameSchema,
+  VIEWER_PASSWORD_MIN_LENGTH,
+  normalizeUsername,
+  slugifyAudienceName,
+} from "../../schemas/audience";
+import type { ViewerCredential } from "../../schemas/audience";
+
+interface Props {
+  audienceName: string;
+  credentials: ViewerCredential[];
+  canMutate: boolean;
+  onCreate: (data: { username: string; label: string | null; password: string }) => Promise<void>;
+  onSetPassword: (username: string, password: string) => Promise<void>;
+  onSetLabel: (username: string, label: string | null) => Promise<void>;
+  onDelete: (username: string) => Promise<void>;
+}
+
+function CopyableSecret({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <span className="flex items-center gap-2">
+      <code className="rounded bg-base-accent px-2 py-1 font-mono text-xs text-base-contrast select-all">{value}</code>
+      <Button
+        variant="ghost"
+        aria-label="Copy password"
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+          } catch {
+            // Clipboard blocked — the value is on screen and selectable.
+          }
+        }}
+      >
+        {copied ? <Check className="h-3.5 w-3.5" aria-hidden /> : <Copy className="h-3.5 w-3.5" aria-hidden />}
+      </Button>
+    </span>
+  );
+}
+
+function CredentialRow({
+  credential, canMutate, onSetPassword, onSetLabel, onDelete,
+}: {
+  credential: ViewerCredential;
+  canMutate: boolean;
+  onSetPassword: (username: string, password: string) => Promise<void>;
+  onSetLabel: (username: string, label: string | null) => Promise<void>;
+  onDelete: (username: string) => Promise<void>;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [label, setLabel] = useState(credential.label ?? "");
+  const [password, setPassword] = useState("");
+  const [revealed, setRevealed] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function reveal() {
+    setError(null);
+    setBusy(true);
+    try {
+      const res = await fetch("/api/auth/viewer-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username: credential.username }),
+      });
+      const body = await res.json().catch(() => ({}));
+      if (body.status === "revealed") setRevealed(body.password);
+      else if (body.status === "unavailable") {
+        setError("Hidden. Set a new password to view here.");
+      } else setError(body.error ?? "Couldn't load the password.");
+    } catch {
+      setError("Network error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function save() {
+    setError(null);
+    if (password.length > 0 && password.length < VIEWER_PASSWORD_MIN_LENGTH) {
+      setError(`Password must be at least ${VIEWER_PASSWORD_MIN_LENGTH} characters`);
+      return;
+    }
+    setBusy(true);
+    try {
+      const nextLabel = label.trim().length > 0 ? label.trim() : null;
+      if (nextLabel !== (credential.label ?? null)) await onSetLabel(credential.username, nextLabel);
+      if (password.length > 0) {
+        await onSetPassword(credential.username, password);
+        // Show what was just set, so it can be shared without a second lookup.
+        setRevealed(password);
+      }
+      setPassword("");
+      setEditing(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Save failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function remove() {
+    if (!confirm(
+      `Remove the sign-in "${credential.username}"?\n\n` +
+      "Anyone using it will be locked out — though a browser already signed in " +
+      "may keep access for up to 24 hours, until its session expires.",
+    )) return;
+    setError(null);
+    try {
+      await onDelete(credential.username);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Remove failed");
+    }
+  }
+
+  return (
+    <li className="rounded border border-base-200 px-3 py-2">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="min-w-0 flex-1">
+          <span className="block truncate font-mono text-sm text-base-contrast">{credential.username}</span>
+          {credential.label && !editing && (
+            <span className="block truncate text-[11px] text-base-contrast-light">{credential.label}</span>
+          )}
+        </span>
+
+        {revealed ? (
+          <CopyableSecret value={revealed} />
+        ) : (
+          <Button variant="ghost" onClick={reveal} isLoading={busy && !editing} loadingLabel="...">
+            <span className="inline-flex items-center gap-1.5">
+              <Eye className="h-3.5 w-3.5" aria-hidden />
+              Show
+            </span>
+          </Button>
+        )}
+        {revealed && <Button variant="ghost" onClick={() => setRevealed(null)}>Hide</Button>}
+
+        {canMutate && !editing && <Button variant="ghost" onClick={() => setEditing(true)}>Edit</Button>}
+        {canMutate && !editing && (
+          <Button variant="ghost" tone="destructive" onClick={remove}>Remove</Button>
+        )}
+      </div>
+
+      {editing && (
+        <div className="mt-2 space-y-2">
+          <Input label="Label" value={label} onChange={setLabel} placeholder="Login Name" />
+          <PasswordInput
+            label="New password"
+            value={password}
+            onChange={setPassword}
+            autoComplete="new-password"
+            placeholder="Leave blank to keep the current one"
+            showToggle
+          />
+          <div className="flex justify-end gap-2">
+            <Button variant="secondary" onClick={() => { setEditing(false); setPassword(""); setLabel(credential.label ?? ""); setError(null); }} disabled={busy}>
+              Cancel
+            </Button>
+            <Button variant="primary" onClick={save} isLoading={busy} loadingLabel="Saving...">Save</Button>
+          </div>
+        </div>
+      )}
+
+      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </li>
+  );
+}
+
+function AddForm({ audienceName, onCreate, onCancel }: {
+  audienceName: string;
+  onCreate: Props["onCreate"];
+  onCancel: () => void;
+}) {
+  const [label, setLabel] = useState("");
+  const [username, setUsername] = useState("");
+  // The username follows the label until the editor takes it over, so the
+  // common case is a single field and the slug stays predictable. Once they
+  // type in the username it stops tracking — otherwise their edit would be
+  // silently overwritten by the next keystroke in the label.
+  const [usernameOverridden, setUsernameOverridden] = useState(false);
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const derivedUsername = usernameOverridden ? username : slugifyAudienceName(label);
+
+  function editUsername(value: string) {
+    setUsernameOverridden(true);
+    setUsername(value);
+  }
+
+  async function submit() {
+    setError(null);
+    const normalized = normalizeUsername(derivedUsername);
+    if (normalized.length === 0) {
+      setError("Add a label — the username is generated from it");
+      return;
+    }
+    const parsed = ViewerUsernameSchema.safeParse(normalized);
+    if (!parsed.success) {
+      setError("Username: lowercase letters, numbers, dots, dashes and underscores only");
+      return;
+    }
+    if (password.length < VIEWER_PASSWORD_MIN_LENGTH) {
+      setError(`Password must be at least ${VIEWER_PASSWORD_MIN_LENGTH} characters`);
+      return;
+    }
+    setBusy(true);
+    try {
+      await onCreate({ username: normalized, label: label.trim() || null, password });
+      onCancel();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Add failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <li className="space-y-2 rounded border border-base-200 px-3 py-3">
+      <Input label="Label" value={label} onChange={setLabel} placeholder="Login Name" />
+      <Input
+        label="Username"
+        value={derivedUsername}
+        onChange={editUsername}
+        autoCapitalize="none"
+        spellCheck={false}
+      />
+      <p className="text-[11px] text-base-contrast-light">
+        Generated from the label — change it if you want something different. This is what they type to sign in, and it can't be renamed later.
+      </p>
+      <PasswordInput label="Password" value={password} onChange={setPassword} autoComplete="new-password" showToggle />
+      <p className="text-[11px] text-base-contrast-light">
+        Signs in to <span className="font-medium">{audienceName}</span> and sees exactly what that audience sees.
+        You can look this password up again later.
+      </p>
+      {error && <p className="text-xs text-red-600">{error}</p>}
+      <div className="flex justify-end gap-2">
+        <Button variant="secondary" onClick={onCancel} disabled={busy}>Cancel</Button>
+        <Button variant="primary" onClick={submit} isLoading={busy} loadingLabel="Adding...">Add</Button>
+      </div>
+    </li>
+  );
+}
+
+/** The named sign-ins for one audience, inside its Site Settings row. */
+export function CredentialList({
+  audienceName, credentials, canMutate, onCreate, onSetPassword, onSetLabel, onDelete,
+}: Props) {
+  const [adding, setAdding] = useState(false);
+
+  return (
+    <div className="mt-2 space-y-2 border-t border-base-200 pt-2">
+      <p className="text-[11px] font-medium uppercase tracking-wide text-base-contrast-light">Sign-ins</p>
+      <ul className="space-y-2">
+        {credentials.map((c) => (
+          <CredentialRow
+            key={c.username}
+            credential={c}
+            canMutate={canMutate}
+            onSetPassword={onSetPassword}
+            onSetLabel={onSetLabel}
+            onDelete={onDelete}
+          />
+        ))}
+        {credentials.length === 0 && !adding && (
+          <li className="text-xs text-base-contrast-light">
+            No sign-ins yet — nobody can enter as this audience.
+          </li>
+        )}
+        {adding && <AddForm audienceName={audienceName} onCreate={onCreate} onCancel={() => setAdding(false)} />}
+      </ul>
+      {canMutate && !adding && (
+        <Button variant="secondary" onClick={() => setAdding(true)}>Add sign-in</Button>
+      )}
+    </div>
+  );
+}