@drawnagency/primitives 0.1.105 → 0.1.106

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>
+  );
+}

package/src/components/shell/EditorShell.tsx

@@ -93,7 +93,11 @@ import { generateSiteNav } from "../../lib/nav";
 import { deriveSiteDocuments, type SiteDocument } from "../../lib/documents";
 import { setSiteDocuments, closeDocFile } from "../docfile/doc-file-state";
 import { pagesInNavOrder, moveNavEntry, addGroup, renameGroup, setGroupStartCollapsed, deleteGroup, type NavLocation } from "../../lib/nav-tree";
-import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, historyRestoreEvent, historyRestoreFailedEvent, editorDirtyEvent } from "../../lib/events";
+import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, historyRestoreEvent, historyRestoreFailedEvent, editorDirtyEvent, audienceDetailsEvent } from "../../lib/events";
+import { AudienceDetailsPanel, type AudienceDetail } from "./AudienceDetailsPanel";
+import { buildAudienceOverview, type SectionDisplay } from "../../lib/audience-overview";
+import { toThumbViews } from "../../lib/thumb-views";
+import type { ViewerCredential } from "../../schemas/audience";
 import {
   homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
   reorderVisibleSectionInPage, audiencePasses,
@@ -263,6 +267,13 @@ export default function EditorShell({
   // fully landed when part of it was refused.
   const [saveWarnings, setSaveWarnings] = useState<string[]>([]);
   const [activePageId, setActivePageId] = useState<string | null>(null);
+  // The Audience Details surface, opened from the nav. Rendered INSTEAD of the
+  // section canvas so the toolbar, unsaved drafts and modals all stay mounted —
+  // an editor reviewing access never leaves the editor.
+  const [showAudienceDetails, setShowAudienceDetails] = useState(false);
+  // null = the auth provider has no named sign-ins (`.env` mode → route 501s),
+  // which is also what turns the reveal buttons off.
+  const [viewerCredentials, setViewerCredentials] = useState<ViewerCredential[] | null>(null);
   const [movingSectionId, setMovingSectionId] = useState<string | null>(null);
   // Set by recoverConflict when a rebase surfaces overlapping edits; drives the
   // keep-mine/take-theirs dialog. `resolve` is the promise resolver recovery
@@ -369,6 +380,41 @@ export default function EditorShell({
     return resolvedActivePage.order.map((id) => sectionsById[id]).filter((s): s is LoadedSection => !!s);
   }, [resolvedActivePage, sectionsById]);
 
+  // Same model the /audiences route builds server-side, from the shell's own
+  // live state — so an editor sees their SAVED draft's access, not the published
+  // snapshot the route would show.
+  const audienceDetails = useMemo<AudienceDetail[]>(() => {
+    if (!showAudienceDetails) return [];
+    const cache = new Map<string, SectionDisplay>();
+    const display = (sectionId: string): SectionDisplay => {
+      const cached = cache.get(sectionId);
+      if (cached) return cached;
+      const loaded = sectionsById[sectionId];
+      const type = loaded?.section.type ?? siteIndex.sections[sectionId]?.type ?? "unknown";
+      const definition = getSection(type);
+      const resolved: SectionDisplay = {
+        label: loaded
+          ? definition?.getLabel?.(loaded.section) ?? definition?.label ?? type
+          : definition?.label ?? type,
+        typeLabel: definition?.label ?? type,
+        thumbnails: loaded ? toThumbViews(definition?.getThumbnails?.(loaded.section) ?? [], mediaManifest) : [],
+      };
+      cache.set(sectionId, resolved);
+      return resolved;
+    };
+    return audiences.map((a) => ({
+      name: a.name,
+      displayName: a.displayName,
+      color: a.color,
+      isDefault: a.isDefault,
+      hasPassword: a.hasPassword,
+      credentials: (viewerCredentials ?? [])
+        .filter((c) => c.audienceName === a.name)
+        .map((c) => ({ username: c.username, label: c.label })),
+      overview: buildAudienceOverview(siteIndex, display, a.name),
+    }));
+  }, [showAudienceDetails, audiences, viewerCredentials, siteIndex, sectionsById, mediaManifest]);
+
   const pageAudiences = useMemo(() => {
     if (!resolvedActivePage || resolvedActivePage.access.length === 0) return audiences;
     return audiences.filter((a) => resolvedActivePage.access.includes(a.name));
@@ -965,11 +1011,16 @@ export default function EditorShell({
   useEffect(() => {
     if (!resolvedActivePage) return;
     const nav = generateSiteNav({
-      index: siteIndex, activeSections, activePageId: resolvedActivePage.id, mode: "editor", audience: null,
+      index: siteIndex, activeSections,
+      // The Audience Details surface is not a page: clearing the active id drops
+      // the previous page's highlight (and its heading tree), so the sidebar
+      // never shows you in two places at once.
+      activePageId: showAudienceDetails ? null : resolvedActivePage.id,
+      mode: "editor", audience: null,
       documents: siteDocuments ?? [],
     });
     siteNavChangeEvent.dispatch(nav);
-  }, [siteIndex, activeSections, resolvedActivePage, siteDocuments]);
+  }, [siteIndex, activeSections, resolvedActivePage, siteDocuments, showAudienceDetails]);
 
   const goToPage = useCallback((pageId: string) => {
     const page = pageById(siteIndexRef.current, pageId);
@@ -986,7 +1037,25 @@ export default function EditorShell({
   }, []);
 
   // Nav island → shell page selection.
-  useEffect(() => pageSelectEvent.listen((id) => goToPage(id)), [goToPage]);
+  useEffect(() => pageSelectEvent.listen((id) => { setShowAudienceDetails(false); goToPage(id); }), [goToPage]);
+  useEffect(() => audienceDetailsEvent.listen(() => setShowAudienceDetails(true)), []);
+
+  // Fetched on open rather than at mount: most editing sessions never look at
+  // this, and the list changes whenever Site Settings adds or removes a sign-in.
+  useEffect(() => {
+    if (!showAudienceDetails) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch("/api/auth/credentials");
+        if (cancelled) return;
+        setViewerCredentials(res.ok ? (await res.json()).credentials ?? [] : null);
+      } catch {
+        if (!cancelled) setViewerCredentials(null);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [showAudienceDetails]);
 
   // Back/forward maps the URL back to the active page (no reload).
   useEffect(() => {
@@ -1879,6 +1948,26 @@ export default function EditorShell({
               document pane) lives here for exactly the same reason: hiding
               main would hide the toolbar and FABs too. */}
           <div className="bp-band-shift bp-page-content">
+          {showAudienceDetails ? (
+            <div className="py-8">
+              <div className="flex flex-wrap items-baseline justify-between gap-3">
+                <h1 className="text-2xl font-bold text-base-contrast">Audience details</h1>
+                <Button
+                  variant="secondary"
+                  onClick={() => resolvedActivePage && pageSelectEvent.dispatch(resolvedActivePage.id)}
+                >
+                  Back to editing
+                </Button>
+              </div>
+              <p className="mt-2 max-w-2xl text-sm text-base-contrast-light">
+                What each audience can see, and the sign-ins that reach it. Reflects your
+                current working copy — add or remove sign-ins under Site settings → Audiences.
+              </p>
+              <div className="mt-6">
+                <AudienceDetailsPanel audiences={audienceDetails} revealSupported={viewerCredentials !== null} />
+              </div>
+            </div>
+          ) : (
           <HistoryOrEditorContent
             index={siteIndex}
             activeSections={activeSections}
@@ -1907,6 +1996,7 @@ export default function EditorShell({
               onTakeover={confirmTakeover}
             />
           </HistoryOrEditorContent>
+          )}
           </div>
           <GlobalModal />
           <SiteSettingsModal

package/src/components/shell/SiteSettingsViewerAccess.tsx

@@ -4,6 +4,7 @@ import { Button } from "../shared/Button";
 import { Toggle } from "../shared/Toggle";
 import { AudienceRow } from "./AudienceRow";
 import { AudienceAddForm } from "./AudienceAddForm";
+import type { ViewerCredential } from "../../schemas/audience";
 import { cn } from "../../lib/cn";
 
 interface Props {
@@ -12,8 +13,18 @@ interface Props {
   onAudiencesChange: (audiences: Audience[]) => void;
 }
 
+/** 32 random hex chars — long enough that it can never be guessed or typed. */
+function unusablePassword(): string {
+  const bytes = crypto.getRandomValues(new Uint8Array(16));
+  return Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
 export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, onAudiencesChange }: Props) {
   const [audiences, setAudiences] = useState<Audience[]>([]);
+  // Null until we know: undefined-vs-empty matters, because an empty ARRAY means
+  // credential mode with no sign-ins yet, while null means this site has no
+  // credential support at all and keeps its audience-level password fields.
+  const [credentials, setCredentials] = useState<ViewerCredential[] | null>(null);
   const [passwordEnabled, setPasswordEnabled] = useState(true);
   const [loading, setLoading] = useState(true);
   const [showAddForm, setShowAddForm] = useState(false);
@@ -21,12 +32,17 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
 
   const loadAudiences = useCallback(async () => {
     try {
-      const res = await fetch("/api/auth/audiences");
-      const data = await res.json();
+      const [audienceRes, credentialRes] = await Promise.all([
+        fetch("/api/auth/audiences"),
+        fetch("/api/auth/credentials"),
+      ]);
+      const data = await audienceRes.json();
       const list = data.audiences ?? [];
       setAudiences(list);
       onAudiencesChange(list);
       setPasswordEnabled(data.passwordEnabled ?? true);
+      // 501 = no credential support (`.env` mode) — stay in audience-password UI.
+      setCredentials(credentialRes.ok ? (await credentialRes.json()).credentials ?? [] : null);
     } finally {
       setLoading(false);
     }
@@ -58,10 +74,15 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
   }
 
   async function handleAdd(data: { displayName: string; color: string | null; password: string }) {
+    // In credential mode the audience-level password is vestigial but the column
+    // is NOT NULL, so it gets an unguessable value nobody is ever told. Writing
+    // an empty one would leave the audience walk-in-able through the legacy
+    // dropdown login if this site were ever rolled back to an older deployment.
+    const password = data.password.length > 0 ? data.password : unusablePassword();
     const res = await fetch("/api/auth/audiences", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
+      body: JSON.stringify({ ...data, password }),
     });
     if (!res.ok) {
       const err = await res.json().catch(() => ({}));
@@ -87,6 +108,31 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
     await loadAudiences();
   }
 
+  async function credentialRequest(method: string, body: unknown) {
+    const res = await fetch("/api/auth/credentials", {
+      method,
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error ?? "Request failed");
+    }
+    await loadAudiences();
+  }
+
+  function credentialActions(audienceName: string) {
+    return {
+      create: (d: { username: string; label: string | null; password: string }) =>
+        credentialRequest("POST", { ...d, audienceName }),
+      setPassword: (username: string, password: string) =>
+        credentialRequest("PATCH", { username, password }),
+      setLabel: (username: string, label: string | null) =>
+        credentialRequest("PATCH", { username, label }),
+      delete: (username: string) => credentialRequest("DELETE", { username }),
+    };
+  }
+
   async function handleDelete(name: string) {
     const res = await fetch("/api/auth/audiences", {
       method: "DELETE",
@@ -124,9 +170,11 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
             <span className="text-sm font-medium">Require password to view site</span>
           </div>
           <p className="text-xs text-base-contrast-light">
-            {passwordEnabled
-              ? "Viewers must select an audience and enter a password to see any content."
-              : "Site is fully public. All published sections are visible to anyone."}
+            {!passwordEnabled
+              ? "Site is fully public. All published sections are visible to anyone."
+              : credentials
+                ? "Viewers must sign in with a username and password to see any content."
+                : "Viewers must select an audience and enter a password to see any content."}
           </p>
           {toggleError && <p className="text-xs text-red-600">{toggleError}</p>}
         </div>
@@ -147,6 +195,8 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
             canMutate={audienceManagement}
             onSave={(patch) => handleSave(a.name, patch)}
             onDelete={() => handleDelete(a.name)}
+            credentials={credentials ? credentials.filter((c) => c.audienceName === a.name) : undefined}
+            credentialActions={credentials ? credentialActions(a.name) : undefined}
           />
         ))}
         {audiences.length === 0 && (
@@ -159,6 +209,7 @@ export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, o
           <AudienceAddForm
             onSubmit={handleAdd}
             onCancel={() => setShowAddForm(false)}
+            requirePassword={credentials === null}
           />
         ) : (
           <Button variant="secondary" onClick={() => setShowAddForm(true)}>