@knotpad/app 0.1.0 → 0.1.2

package/components/settings/confirm-danger-action.test.tsx

@@ -1,215 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { AgentTokenSettings } from "@/components/settings/agent-token-settings";
-import { BackupRestoreSettings } from "@/components/settings/backup-restore-settings";
-import { ConfirmDangerAction } from "@/components/settings/confirm-danger-action";
-
-const { refreshMock } = vi.hoisted(() => ({
-  refreshMock: vi.fn(),
-}));
-
-vi.mock("next/navigation", () => ({
-  useRouter: () => ({ refresh: refreshMock }),
-}));
-
-describe("ConfirmDangerAction", () => {
-  beforeEach(() => {
-    vi.stubGlobal("fetch", vi.fn());
-    refreshMock.mockReset();
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.unstubAllGlobals();
-  });
-
-  it("requires explicit confirmation before calling onConfirm", async () => {
-    const user = userEvent.setup();
-    const onConfirm = vi.fn();
-
-    render(
-      <ConfirmDangerAction
-        open
-        title="Delete"
-        body="Irreversible."
-        onConfirm={onConfirm}
-        onClose={vi.fn()}
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Confirm" }));
-
-    expect(onConfirm).toHaveBeenCalledTimes(1);
-  });
-
-  it("confirms before regenerating an existing token", async () => {
-    const user = userEvent.setup();
-    const fetchMock = vi.mocked(fetch);
-    fetchMock.mockResolvedValue({
-      ok: true,
-      json: async () => ({ token: "mcp_tok_new", id: "tok-2", alias: null }),
-    } as Response);
-
-    render(
-      <AgentTokenSettings
-        workspaces={[
-          {
-            id: "ws-1",
-            name: "Workspace One",
-            slug: "workspace-one",
-            existingToken: { id: "tok-1", alias: "Existing token", lastUsed: null },
-          },
-        ]}
-        mcpUrl="https://example.com/mcp"
-        appUrl="https://example.com"
-        userId="user-1"
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Regenerate" }));
-
-    expect(fetchMock).not.toHaveBeenCalled();
-    expect(screen.getByText("Regenerate token")).toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Confirm" }));
-
-    await waitFor(() =>
-      expect(fetchMock).toHaveBeenCalledWith("/api/mcp/generate-token", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ workspaceId: "ws-1" }),
-      })
-    );
-  });
-
-  it("confirms before revoking a token", async () => {
-    const user = userEvent.setup();
-    const fetchMock = vi.mocked(fetch);
-    fetchMock.mockResolvedValue({
-      ok: true,
-      json: async () => ({}),
-    } as Response);
-
-    render(
-      <AgentTokenSettings
-        workspaces={[
-          {
-            id: "ws-1",
-            name: "Workspace One",
-            slug: "workspace-one",
-            existingToken: { id: "tok-1", alias: "Existing token", lastUsed: null },
-          },
-        ]}
-        mcpUrl="https://example.com/mcp"
-        appUrl="https://example.com"
-        userId="user-1"
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Revoke" }));
-
-    expect(fetchMock).not.toHaveBeenCalled();
-    expect(screen.getByText("Revoke token")).toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Confirm" }));
-
-    await waitFor(() =>
-      expect(fetchMock).toHaveBeenCalledWith("/api/mcp/revoke-token/tok-1", {
-        method: "DELETE",
-      })
-    );
-  });
-
-  it("shows reusable setup guidance for an existing token without revealing the secret", () => {
-    render(
-      <AgentTokenSettings
-        workspaces={[
-          {
-            id: "ws-1",
-            name: "Workspace One",
-            slug: "workspace-one",
-            existingToken: { id: "tok-1", alias: "Laptop", lastUsed: null },
-          },
-        ]}
-        mcpUrl="https://example.com/mcp"
-        appUrl="https://example.com"
-        userId="user-1"
-      />
-    );
-
-    expect(screen.getByText("Quick Setup")).toBeInTheDocument();
-    expect(screen.getAllByText(/<your-existing-token>/)).toHaveLength(2);
-    expect(screen.queryByText(/won't be shown again/i)).not.toBeInTheDocument();
-  });
-
-  it("copies the reusable MCP config template for an existing token", async () => {
-    const user = userEvent.setup();
-    const writeText = vi.fn();
-    Object.assign(navigator, {
-      clipboard: {
-        writeText,
-      },
-    });
-
-    render(
-      <AgentTokenSettings
-        workspaces={[
-          {
-            id: "ws-1",
-            name: "Workspace One",
-            slug: "workspace-one",
-            existingToken: { id: "tok-1", alias: "Laptop", lastUsed: null },
-          },
-        ]}
-        mcpUrl="https://example.com/mcp"
-        appUrl="https://example.com"
-        userId="user-1"
-      />
-    );
-
-    await user.click(screen.getByRole("button", { name: "Copy MCP config" }));
-
-    expect(writeText).toHaveBeenCalledWith(
-      expect.stringContaining('"Authorization": "Bearer <your-existing-token>"')
-    );
-  });
-
-  it("waits for confirmation before restoring a selected backup", async () => {
-    const user = userEvent.setup();
-    const fetchMock = vi.mocked(fetch);
-    fetchMock.mockResolvedValue({
-      ok: true,
-      json: async () => ({ notesRestored: 2, tasksRestored: 1 }),
-    } as Response);
-
-    const { container } = render(
-      <BackupRestoreSettings
-        isCloudWorkspace
-        isOwner
-        initialSettings={null}
-      />
-    );
-
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    const file = new File([JSON.stringify({ version: 1 })], "backup.json", {
-      type: "application/json",
-    });
-
-    fireEvent.change(fileInput, { target: { files: [file] } });
-
-    expect(fetchMock).not.toHaveBeenCalled();
-    expect(screen.getByText("Restore backup")).toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "Confirm" }));
-
-    await waitFor(() =>
-      expect(fetchMock).toHaveBeenCalledWith("/api/restore", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ type: "file-replace", data: { version: 1 } }),
-      })
-    );
-  });
-});

package/components/settings/confirm-danger-action.tsx

@@ -1,65 +0,0 @@
-"use client";
-
-type ConfirmDangerActionProps = {
-  open: boolean;
-  title: string;
-  body: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  busy?: boolean;
-  onConfirm: () => void | Promise<void>;
-  onClose: () => void;
-};
-
-export function ConfirmDangerAction({
-  open,
-  title,
-  body,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  busy = false,
-  onConfirm,
-  onClose,
-}: ConfirmDangerActionProps) {
-  if (!open) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="confirm-danger-action-title"
-        aria-describedby="confirm-danger-action-body"
-        className="w-full max-w-md rounded-xl border border-red-900/40 bg-zinc-950 p-4 shadow-2xl"
-      >
-        <h3 id="confirm-danger-action-title" className="text-sm font-medium text-red-200">
-          {title}
-        </h3>
-        <p
-          id="confirm-danger-action-body"
-          className="mt-2 whitespace-pre-line text-sm text-zinc-400"
-        >
-          {body}
-        </p>
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={busy}
-            className="rounded-md border border-zinc-800 px-3 py-1.5 text-xs text-zinc-300 transition-colors hover:bg-zinc-900 disabled:opacity-50"
-          >
-            {cancelLabel}
-          </button>
-          <button
-            type="button"
-            onClick={() => void onConfirm()}
-            disabled={busy}
-            className="rounded-md bg-red-900/70 px-3 py-1.5 text-xs text-red-100 transition-colors hover:bg-red-900 disabled:opacity-50"
-          >
-            {confirmLabel}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/components/settings/security-settings.tsx

@@ -1,252 +0,0 @@
-"use client";
-
-import { useState } from "react"
-import { TwoFactorAuth } from "@/components/settings/two-factor-auth";
-import { useRouter } from "next/navigation";
-import { Laptop, Trash2, CloudDownload, Loader2, KeyRound } from "lucide-react";
-import { PasswordInput } from "@/components/auth/password-input";
-import { PasswordChecklist } from "@/components/auth/password-checklist";
-import { ConfirmDangerAction } from "@/components/settings/confirm-danger-action";
-
-type Device = { id: string; deviceName: string; deviceId: string; lastActive: string };
-
-type Props = {
-  isPro: boolean;
-  isOwner: boolean;
-  devices: Device[];
-  hasPassword: boolean;
-  twoFactorEnabled?: boolean;
-};
-
-export function SecuritySettings({ isPro, isOwner, devices, hasPassword, twoFactorEnabled }: Props) {
-  const router = useRouter();
-  const [revoking, setRevoking] = useState<string | null>(null);
-  const [restoring, setRestoring] = useState(false);
-  const [restoreMsg, setRestoreMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
-  const [restoreConfirm, setRestoreConfirm] = useState(false);
-
-  const [currentPw, setCurrentPw] = useState("");
-  const [newPw, setNewPw] = useState("");
-  const [confirmPw, setConfirmPw] = useState("");
-  const [changingPw, setChangingPw] = useState(false);
-  const [pwMsg, setPwMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
-
-  async function handleChangePassword(e: React.FormEvent) {
-    e.preventDefault();
-    setPwMsg(null);
-
-    if (newPw !== confirmPw) {
-      setPwMsg({ type: "err", text: "New passwords do not match." });
-      return;
-    }
-    if (newPw.length < 8) {
-      setPwMsg({ type: "err", text: "New password must be at least 8 characters." });
-      return;
-    }
-
-    setChangingPw(true);
-    try {
-      const res = await fetch("/api/auth/change-password", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ currentPassword: currentPw, newPassword: newPw }),
-      });
-      const data = await res.json();
-      if (res.ok) {
-        setPwMsg({ type: "ok", text: "Password updated successfully." });
-        setCurrentPw("");
-        setNewPw("");
-        setConfirmPw("");
-      } else {
-        setPwMsg({ type: "err", text: data.error ?? "Failed to update password." });
-      }
-    } finally {
-      setChangingPw(false);
-    }
-  }
-
-  async function handleCloudRestore() {
-    setRestoreConfirm(true);
-  }
-
-  async function confirmCloudRestore() {
-    setRestoring(true);
-    setRestoreMsg(null);
-    try {
-      const res = await fetch("/api/restore", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ type: "cloud" }),
-      });
-      const data = await res.json();
-      if (res.ok) {
-        setRestoreMsg({ type: "ok", text: `Cloud restore complete. ${data.notesProcessed ?? 0} notes synced.` });
-        router.refresh();
-      } else {
-        setRestoreMsg({ type: "err", text: data.error ?? "Cloud restore failed." });
-      }
-    } finally {
-      setRestoring(false);
-      setRestoreConfirm(false);
-    }
-  }
-
-  async function revokeDevice(deviceId: string) {
-    setRevoking(deviceId);
-    await fetch(`/api/devices/${deviceId}`, { method: "DELETE" });
-    router.refresh();
-    setRevoking(null);
-  }
-
-  return (
-    <div className="space-y-8">
-        {/* Device sessions */}
-        <div className="space-y-3">
-          <h3 className="text-sm font-semibold text-zinc-300">Connected devices</h3>
-          {devices.length === 0 ? (
-            <p className="text-xs text-zinc-600">No active device sessions.</p>
-          ) : (
-            <div className="space-y-1 rounded-lg border border-zinc-800 overflow-hidden">
-              {devices.map((d) => (
-                <div
-                  key={d.id}
-                  className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800 last:border-0"
-                >
-                  <div className="flex items-center gap-2 min-w-0">
-                    <Laptop size={14} className="shrink-0 text-zinc-500" />
-                    <div className="min-w-0">
-                      <p className="text-sm text-zinc-300 truncate">{d.deviceName}</p>
-                      <p className="text-xs text-zinc-600">
-                        Last active {new Date(d.lastActive).toLocaleDateString()}
-                      </p>
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => revokeDevice(d.id)}
-                    disabled={revoking === d.id}
-                    className="shrink-0 text-zinc-600 hover:text-red-400 transition-colors disabled:opacity-50"
-                    title="Revoke device"
-                  >
-                    <Trash2 size={13} />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-          <p className="text-xs text-zinc-700">
-            Revoking a device removes its session. It will need to log in again to reconnect.
-          </p>
-        </div>
-
-        {/* Change password */}
-        {hasPassword && (
-          <div className="space-y-3">
-            <h3 className="text-sm font-semibold text-zinc-300">Change password</h3>
-            <form onSubmit={handleChangePassword} className="space-y-3">
-              <div className="space-y-1.5">
-                <label className="text-xs text-zinc-400">Current password</label>
-                <PasswordInput
-                  value={currentPw}
-                  onChange={(e) => setCurrentPw(e.target.value)}
-                  placeholder="Enter current password"
-                  required
-                />
-              </div>
-              <div className="space-y-1.5">
-                <label className="text-xs text-zinc-400">New password</label>
-                <PasswordInput
-                  value={newPw}
-                  onChange={(e) => setNewPw(e.target.value)}
-                  placeholder="Enter new password"
-                  required
-                />
-                <PasswordChecklist password={newPw} />
-              </div>
-              <div className="space-y-1.5">
-                <label className="text-xs text-zinc-400">Confirm new password</label>
-                <PasswordInput
-                  value={confirmPw}
-                  onChange={(e) => setConfirmPw(e.target.value)}
-                  placeholder="Re-enter new password"
-                  required
-                />
-              </div>
-              <button
-                type="submit"
-                disabled={changingPw || !currentPw || !newPw || !confirmPw}
-                className="flex items-center gap-1.5 rounded-md bg-zinc-800 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:bg-zinc-700 disabled:opacity-50 transition-colors"
-              >
-                {changingPw ? (
-                  <Loader2 size={13} className="animate-spin" />
-                ) : (
-                  <KeyRound size={13} />
-                )}
-                Update password
-              </button>
-              {pwMsg && (
-                <p className={`text-xs ${pwMsg.type === "ok" ? "text-emerald-400" : "text-red-400"}`}>
-                  {pwMsg.text}
-                </p>
-              )}
-            </form>
-          </div>
-        )}
-
-        {/* 2FA */}
-        {hasPassword && (
-          <div className="space-y-3">
-            <TwoFactorAuth initialEnabled={twoFactorEnabled ?? false} />
-          </div>
-        )}
-
-        {/* Restore */}
-        {isOwner && (
-          <div className="space-y-3">
-            <h3 className="text-sm font-semibold text-zinc-300">Restore data</h3>
-            <p className="text-xs text-zinc-500">
-              Restore your workspace from the cloud. File restore now lives under Backup & Restore.
-            </p>
-
-            <div className="flex flex-wrap gap-2">
-              {isPro && (
-                <button
-                  onClick={handleCloudRestore}
-                  disabled={restoring}
-                  className="flex items-center gap-1.5 rounded-md bg-zinc-800 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:bg-zinc-700 disabled:opacity-50 transition-colors"
-                >
-                  {restoring ? (
-                    <Loader2 size={13} className="animate-spin" />
-                  ) : (
-                    <CloudDownload size={13} />
-                  )}
-                  Restore from cloud
-                </button>
-              )}
-            </div>
-
-            {restoreMsg && (
-              <p
-                className={`text-xs ${restoreMsg.type === "ok" ? "text-emerald-400" : "text-red-400"}`}
-              >
-                {restoreMsg.text}
-              </p>
-            )}
-            <p className="text-xs text-zinc-700">
-              Cloud restore pulls all data from your cloud backup.
-            </p>
-          </div>
-        )}
-
-      {/* Confirmation dialog */}
-      <ConfirmDangerAction
-        open={restoreConfirm}
-        title="Restore from Cloud"
-        body="Pull all data from cloud to this device. Local changes may be overwritten. Continue?"
-        confirmLabel="Restore"
-        cancelLabel="Cancel"
-        onConfirm={confirmCloudRestore}
-        onClose={() => setRestoreConfirm(false)}
-      />
-    </div>
-  );
-}

package/components/settings/settings-guidance.test.tsx

@@ -1,98 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render, screen } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import SettingsLayout from "@/app/(app)/settings/layout";
-import { AgentTokenSettings } from "@/components/settings/agent-token-settings";
-import { BackupRestoreSettings } from "@/components/settings/backup-restore-settings";
-import { TeamSettings } from "@/components/settings/team-settings";
-
-const { mockUsePathname } = vi.hoisted(() => ({
-  mockUsePathname: vi.fn(),
-}));
-
-vi.mock("next/navigation", () => ({
-  usePathname: mockUsePathname,
-  useRouter: () => ({ refresh: vi.fn() }),
-}));
-
-describe("settings guidance", () => {
-  beforeEach(() => {
-    mockUsePathname.mockReset();
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  it("shows route-specific intro copy in the shared settings layout", () => {
-    mockUsePathname.mockReturnValue("/settings/agent-token");
-
-    render(
-      <SettingsLayout>
-        <div>Content</div>
-      </SettingsLayout>
-    );
-
-    expect(
-      screen.getByText("Create and revoke agent access with clear operational consequences.")
-    ).toBeInTheDocument();
-  });
-
-  it("shows a danger zone in agent token settings", () => {
-    render(
-      <AgentTokenSettings
-        workspaces={[
-          {
-            id: "ws-1",
-            name: "Workspace One",
-            slug: "workspace-one",
-            existingToken: null,
-          },
-        ]}
-        mcpUrl="https://example.com/mcp"
-        appUrl="https://example.com"
-        userId="user-1"
-      />
-    );
-
-    expect(screen.getByText("Danger zone")).toBeInTheDocument();
-    expect(
-      screen.getByText("Revoking or regenerating a token disconnects any agent currently using it.")
-    ).toBeInTheDocument();
-  });
-
-  it("explains backup export and restore outcomes before destructive actions", () => {
-    render(
-      <BackupRestoreSettings
-        isCloudWorkspace
-        isOwner
-        initialSettings={null}
-      />
-    );
-
-    expect(
-      screen.getByText(
-        "Export creates a portable backup of the current workspace state. Restore replaces current local data with the uploaded backup."
-      )
-    ).toBeInTheDocument();
-    expect(screen.getByText("Danger zone")).toBeInTheDocument();
-  });
-
-  it("explains pending invites and immediate revocation outcomes", () => {
-    render(
-      <TeamSettings
-        members={[]}
-        pendingInvites={[]}
-        canManage
-        currentUserId="user-1"
-        workspaceId="ws-1"
-      />
-    );
-
-    expect(
-      screen.getByText(
-        "Invites stay pending until accepted. Revoking an invite immediately invalidates the link."
-      )
-    ).toBeInTheDocument();
-  });
-});