@drawnagency/primitives 0.1.0

package/src/components/shell/SiteSettingsModal.tsx

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { EditorModal } from "./EditorModal";
+import { Button } from "../shared/Button";
+import { SiteSettingsViewerAccess } from "./SiteSettingsViewerAccess";
+import { SiteSettingsDisplay } from "./SiteSettingsDisplay";
+import { SiteSettingsUsers } from "./SiteSettingsUsers";
+import { cn } from "../../lib/cn";
+import type { SiteConfig } from "../../schemas/site-config";
+import type { Audience } from "../../auth/types";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  siteConfig: SiteConfig;
+  onSiteConfigChange: (config: SiteConfig) => void;
+  onAudiencesChange: (audiences: Audience[]) => void;
+  capabilities: {
+    oauth: boolean;
+    emailPassword: boolean;
+    passwordOnly: boolean;
+    userManagement: boolean;
+    audienceManagement: boolean;
+    passwordToggle: boolean;
+  };
+  currentUser: { email: string; role: "owner" | "editor" } | null;
+}
+
+type TabId = "users" | "viewer-access" | "display";
+
+export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, capabilities, currentUser }: Props) {
+  const tabs: { id: TabId; label: string; show: boolean }[] = [
+    { id: "users", label: "Users", show: capabilities.userManagement },
+    { id: "viewer-access", label: "Viewer Access", show: true },
+    { id: "display", label: "Display", show: true },
+  ];
+
+  const visibleTabs = tabs.filter((t) => t.show);
+  const [activeTab, setActiveTab] = useState<TabId>(visibleTabs[0]?.id ?? "display");
+  const [signOutError, setSignOutError] = useState<string | null>(null);
+
+  async function handleSignOut() {
+    setSignOutError(null);
+    try {
+      const res = await fetch("/api/auth/sign-out", { method: "POST" });
+      if (!res.ok) {
+        setSignOutError("Sign out failed");
+        return;
+      }
+      window.location.assign("/edit/login");
+    } catch {
+      setSignOutError("Network error during sign out");
+    }
+  }
+
+  const identityLabel = currentUser?.email
+    ? currentUser.email
+    : currentUser
+      ? (currentUser.role === "owner" ? "Owner" : "Editor")
+      : null;
+
+  return (
+    <EditorModal isOpen={isOpen} onClose={onClose} title="Site Settings" size="settings" noPadding>
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <div className="border-b border-base-200">
+          <div className="flex px-6" role="tablist">
+            {visibleTabs.map((tab) => (
+              <button
+                key={tab.id}
+                role="tab"
+                aria-selected={activeTab === tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "cursor-pointer px-4 py-2 text-sm font-medium border-b-2 -mb-px",
+                  activeTab === tab.id
+                    ? "border-brand text-brand"
+                    : "border-transparent text-base-contrast-light hover:text-base-contrast",
+                )}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div
+          data-testid="site-settings-tab-panel"
+          className="flex flex-1 flex-col overflow-y-auto px-6 py-4"
+        >
+          {activeTab === "users" && <SiteSettingsUsers currentUser={currentUser} />}
+          {activeTab === "viewer-access" && (
+            <SiteSettingsViewerAccess
+                audienceManagement={capabilities.audienceManagement}
+                passwordToggle={capabilities.passwordToggle}
+                onAudiencesChange={onAudiencesChange}
+              />
+          )}
+          {activeTab === "display" && (
+            <SiteSettingsDisplay
+              siteConfig={siteConfig}
+              onChange={onSiteConfigChange}
+            />
+          )}
+        </div>
+
+        {currentUser && (
+          <div className="flex items-center justify-between gap-3 border-t border-base-200 px-6 py-3">
+            <div className="text-xs text-base-contrast-light">
+              Signed in as{" "}
+              <span className="font-medium text-base-contrast">{identityLabel}</span>
+              {currentUser.email && (
+                <span className="ml-1 capitalize">({currentUser.role})</span>
+              )}
+              {signOutError && (
+                <span className="ml-2 text-red-600">— {signOutError}</span>
+              )}
+            </div>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleSignOut}
+            >
+              Sign out
+            </Button>
+          </div>
+        )}
+      </div>
+    </EditorModal>
+  );
+}

package/src/components/shell/SiteSettingsUsers.tsx

@@ -0,0 +1,190 @@
+import { Fragment, useState, useEffect, type FormEvent } from "react";
+import { ChevronDown } from "lucide-react";
+import type { Role } from "../../auth/types";
+import { Button } from "../shared/Button";
+
+interface User {
+  id: string;
+  email: string;
+  role: Role;
+  createdAt: string;
+}
+
+interface Props {
+  currentUser: { email: string; role: "owner" | "editor" } | null;
+}
+
+export function SiteSettingsUsers({ currentUser }: Props) {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState<Role>("editor");
+  const [error, setError] = useState<string | null>(null);
+  const [confirmingRevoke, setConfirmingRevoke] = useState<string | null>(null);
+
+  async function loadUsers() {
+    try {
+      const res = await fetch("/api/auth/users");
+      if (!res.ok) {
+        setError("Failed to load users");
+        setUsers([]);
+        return;
+      }
+      const data = await res.json();
+      setUsers(data.users);
+    } catch {
+      setError("Network error while loading users");
+      setUsers([]);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    loadUsers();
+  }, []);
+
+  async function handleInvite(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    try {
+      const res = await fetch("/api/auth/users", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: inviteEmail, role: inviteRole }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error || "Invite failed");
+        return;
+      }
+
+      setInviteEmail("");
+      await loadUsers();
+    } catch {
+      setError("Network error while inviting");
+    }
+  }
+
+  function handleRevoke(userId: string) {
+    setError(null);
+    const ownerCount = users.filter((u) => u.role === "owner").length;
+    const user = users.find((u) => u.id === userId);
+    if (user?.role === "owner" && ownerCount <= 1) {
+      setError("Cannot remove the last owner");
+      return;
+    }
+
+    setConfirmingRevoke(userId);
+  }
+
+  async function confirmRevoke(userId: string) {
+    setConfirmingRevoke(null);
+    try {
+      const res = await fetch("/api/auth/users", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ userId }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error || "Revoke failed");
+        return;
+      }
+      await loadUsers();
+    } catch {
+      setError("Network error while removing user");
+    }
+  }
+
+  if (loading) return <p className="text-sm text-base-contrast-light">Loading users...</p>;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-[1fr_7rem_5rem] text-sm">
+        <div className="flex items-center border-b border-base-200 pr-2 pb-2 text-base-contrast-light">Email</div>
+        <div className="flex items-center border-b border-base-200 pr-2 pb-2 text-base-contrast-light">Role</div>
+        <div className="border-b border-base-200 pb-2" />
+
+        {users.map((user) => (
+          <Fragment key={user.id}>
+            <div className="flex items-center border-b border-base-200 py-2 pr-2 text-base-contrast">{user.email}</div>
+            <div className="flex items-center border-b border-base-200 py-2 pr-2 capitalize text-base-contrast-light">
+              {user.role}
+            </div>
+            <div className="flex items-center justify-end border-b border-base-200 py-2">
+              {currentUser?.email === user.email ? (
+                <span className="text-xs text-base-contrast-light">—</span>
+              ) : confirmingRevoke === user.id ? (
+                <span className="flex items-center gap-1">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    tone="destructive"
+                    onClick={() => confirmRevoke(user.id)}
+                  >
+                    Confirm
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => setConfirmingRevoke(null)}
+                  >
+                    Cancel
+                  </Button>
+                </span>
+              ) : (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  tone="destructive"
+                  onClick={() => handleRevoke(user.id)}
+                >
+                  Remove
+                </Button>
+              )}
+            </div>
+          </Fragment>
+        ))}
+      </div>
+
+      <form onSubmit={handleInvite} className="grid grid-cols-[1fr_7rem_5rem] text-sm">
+        <div className="pr-2">
+          <input
+            type="email"
+            placeholder="Email address"
+            value={inviteEmail}
+            onChange={(e) => setInviteEmail(e.target.value)}
+            required
+            aria-label="Email address"
+            className="w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast"
+          />
+        </div>
+        <div className="pr-2">
+          <div className="relative">
+            <select
+              value={inviteRole}
+              onChange={(e) => setInviteRole(e.target.value as Role)}
+              aria-label="Role"
+              className="w-full appearance-none rounded border border-base-200 bg-base py-2 pr-8 pl-3 text-sm text-base-contrast focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast"
+            >
+              <option value="editor">Editor</option>
+              <option value="owner">Owner</option>
+            </select>
+            <ChevronDown
+              size={14}
+              className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-base-contrast-light"
+            />
+          </div>
+        </div>
+        <Button type="submit" variant="primary" size="md" className="w-full">
+          Invite
+        </Button>
+      </form>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+    </div>
+  );
+}

package/src/components/shell/SiteSettingsViewerAccess.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect, useCallback } from "react";
+import type { Audience } from "../../auth/types";
+import { Button } from "../shared/Button";
+import { Toggle } from "../shared/Toggle";
+import { AudienceRow } from "./AudienceRow";
+import { AudienceAddForm } from "./AudienceAddForm";
+import { cn } from "../../lib/cn";
+
+interface Props {
+  audienceManagement: boolean;
+  passwordToggle: boolean;
+  onAudiencesChange: (audiences: Audience[]) => void;
+}
+
+export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, onAudiencesChange }: Props) {
+  const [audiences, setAudiences] = useState<Audience[]>([]);
+  const [passwordEnabled, setPasswordEnabled] = useState(true);
+  const [loading, setLoading] = useState(true);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [toggleError, setToggleError] = useState<string | null>(null);
+
+  const loadAudiences = useCallback(async () => {
+    try {
+      const res = await fetch("/api/auth/audiences");
+      const data = await res.json();
+      const list = data.audiences ?? [];
+      setAudiences(list);
+      onAudiencesChange(list);
+      setPasswordEnabled(data.passwordEnabled ?? true);
+    } finally {
+      setLoading(false);
+    }
+  }, [onAudiencesChange]);
+
+  useEffect(() => {
+    loadAudiences();
+  }, [loadAudiences]);
+
+  async function handlePasswordToggle(enabled: boolean) {
+    setToggleError(null);
+    const previous = passwordEnabled;
+    setPasswordEnabled(enabled);
+    try {
+      const res = await fetch("/api/auth/password-enabled", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        setToggleError(body.error ?? "Update failed");
+        setPasswordEnabled(previous);
+      }
+    } catch {
+      setToggleError("Network error");
+      setPasswordEnabled(previous);
+    }
+  }
+
+  async function handleAdd(data: { displayName: string; color: string | null; password: string }) {
+    const res = await fetch("/api/auth/audiences", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error ?? "Add failed");
+    }
+    setShowAddForm(false);
+    await loadAudiences();
+  }
+
+  async function handleSave(
+    name: string,
+    patch: { displayName?: string; color?: string | null; password?: string },
+  ) {
+    const res = await fetch("/api/auth/audiences", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, ...patch }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error ?? "Save failed");
+    }
+    await loadAudiences();
+  }
+
+  async function handleDelete(name: string) {
+    const res = await fetch("/api/auth/audiences", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error ?? "Delete failed");
+    }
+    await loadAudiences();
+  }
+
+  if (loading) {
+    return <p className="text-sm text-base-contrast-light">Loading audiences...</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {!audienceManagement && (
+        <p className="text-xs text-base-contrast-light">
+          This site is running in password-only mode. A developer can configure
+          the environment variables for Admin, Editor, and Viewer details.
+        </p>
+      )}
+
+      {passwordToggle && (
+        <div className="space-y-2 rounded border border-base-200 p-3">
+          <div className="flex items-center gap-3">
+            <Toggle
+              checked={passwordEnabled}
+              onChange={handlePasswordToggle}
+              label="Require password to view site"
+            />
+            <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."}
+          </p>
+          {toggleError && <p className="text-xs text-red-600">{toggleError}</p>}
+        </div>
+      )}
+
+      <div className={cn("space-y-2", !passwordEnabled && "opacity-60")}>
+        {!passwordEnabled && (
+          <p className="mb-2 text-xs text-base-contrast-light">
+            Audiences are saved but not enforced while the password is disabled.
+          </p>
+        )}
+
+        {audiences.map((a) => (
+          <AudienceRow
+            key={a.name}
+            audience={a}
+            isDefault={a.isDefault}
+            canMutate={audienceManagement}
+            onSave={(patch) => handleSave(a.name, patch)}
+            onDelete={() => handleDelete(a.name)}
+          />
+        ))}
+        {audiences.length === 0 && (
+          <p className="text-sm text-base-contrast-light">No audiences configured.</p>
+        )}
+      </div>
+
+      {audienceManagement && (
+        showAddForm ? (
+          <AudienceAddForm
+            onSubmit={handleAdd}
+            onCancel={() => setShowAddForm(false)}
+          />
+        ) : (
+          <Button variant="secondary" onClick={() => setShowAddForm(true)}>
+            Add audience
+          </Button>
+        )
+      )}
+    </div>
+  );
+}

package/src/components/shell/ViewerLoginForm.tsx

@@ -0,0 +1,95 @@
+import { useState, type FormEvent } from "react";
+import { PasswordInput } from "../shared/PasswordInput";
+import { Button } from "../shared/Button";
+import { safeRedirect } from "../../lib/safeRedirect";
+
+interface Props {
+  audiences: Array<{ name: string; displayName: string }>;
+  next?: string | null;
+}
+
+export function ViewerLoginForm({ audiences, next }: Props) {
+  const [audience, setAudience] = useState(audiences.length === 1 ? audiences[0].name : "");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    const body: { audience: string; password: string; next?: string } = { audience, password };
+    if (next) body.next = next;
+
+    try {
+      const response = await fetch("/api/auth/verify-audience", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        setError(data.error || "Access denied");
+        return;
+      }
+
+      const data = await response.json().catch(() => ({}));
+      window.location.assign(safeRedirect(data.redirectTo, "/"));
+    } catch {
+      setError("Network error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-sm">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="audience" className="mb-1.5 block text-sm font-medium text-base-contrast">
+            Audience
+          </label>
+          <select
+            id="audience"
+            value={audience}
+            onChange={(e) => setAudience(e.target.value)}
+            required
+            className="w-full rounded border border-base-200 px-3 py-2 text-sm"
+          >
+            {audiences.length > 1 && <option value="">Select audience...</option>}
+            {audiences.map((a) => (
+              <option key={a.name} value={a.name}>
+                {a.displayName}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <PasswordInput
+          label="Password"
+          value={password}
+          onChange={setPassword}
+          autoComplete="current-password"
+        />
+
+        {error && (
+          <p className="text-sm text-red-600">{error}</p>
+        )}
+
+        <Button
+          type="submit"
+          variant="brand"
+          size="md"
+          disabled={loading || !audience}
+          isLoading={loading}
+          loadingLabel="Verifying..."
+          className="w-full"
+        >
+          Enter
+        </Button>
+      </form>
+    </div>
+  );
+}