@knotpad/app 0.1.4 → 0.1.6

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

@@ -0,0 +1,215 @@
+// @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

@@ -0,0 +1,65 @@
+"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

@@ -0,0 +1,252 @@
+"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

@@ -0,0 +1,98 @@
+// @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();
+  });
+});