@knotpad/app 0.1.0

package/components/settings/team-settings.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Copy, Check, Trash2, UserPlus } from "lucide-react";
+import { ConfirmDangerAction } from "@/components/settings/confirm-danger-action";
+
+type Member = {
+  id: string;
+  userId: string;
+  name: string;
+  email: string;
+  role: "OWNER" | "ADMIN" | "MEMBER";
+  joinedAt: string;
+  isCurrentUser: boolean;
+};
+
+type PendingInvite = {
+  id: string;
+  email: string;
+  role: "OWNER" | "ADMIN" | "MEMBER";
+  token: string;
+  expiresAt: string;
+};
+
+type McpToken = {
+  id: string;
+  alias: string | null;
+  userName: string;
+  userId: string;
+  lastUsed: string | null;
+};
+
+const ROLE_LABELS = { OWNER: "Owner", ADMIN: "Admin", MEMBER: "Member" };
+
+export function TeamSettings({
+  members,
+  pendingInvites,
+  canManage,
+  workspaceId,
+  mcpTokens = [],
+}: {
+  members: Member[];
+  pendingInvites: PendingInvite[];
+  canManage: boolean;
+  currentUserId: string;
+  workspaceId: string;
+  mcpTokens?: McpToken[];
+}) {
+  const router = useRouter();
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [inviteRole, setInviteRole] = useState<"ADMIN" | "MEMBER">("MEMBER");
+  const [inviting, setInviting] = useState(false);
+  const [inviteLink, setInviteLink] = useState("");
+  const [copied, setCopied] = useState(false);
+  const [error, setError] = useState("");
+  const [actionError, setActionError] = useState("");
+  const [removeConfirm, setRemoveConfirm] = useState<{ open: boolean; memberId: string }>({ open: false, memberId: "" });
+
+  async function handleInvite(e: React.FormEvent) {
+    e.preventDefault();
+    setInviting(true);
+    setError("");
+    setInviteLink("");
+
+    try {
+      const res = await fetch("/api/invites", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        // workspaceId scopes the invite to the correct workspace for multi-workspace users
+        body: JSON.stringify({ email: inviteEmail, role: inviteRole, workspaceId }),
+      });
+
+      if (res.ok) {
+        const { link } = await res.json();
+        setInviteLink(link);
+        setInviteEmail("");
+        router.refresh();
+      } else {
+        const d = await res.json();
+        // upgrade_required has a human-readable message separate from the error code
+        setError(d.message ?? d.error ?? "Failed to create invite");
+      }
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setInviting(false);
+    }
+  }
+
+  async function copyLink(link: string) {
+    await navigator.clipboard.writeText(link);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  async function removeMember(memberId: string) {
+    setRemoveConfirm({ open: true, memberId });
+  }
+
+  async function confirmRemoveMember() {
+    const { memberId } = removeConfirm;
+    setActionError("");
+    const res = await fetch(`/api/workspace/members/${memberId}`, { method: "DELETE" });
+    if (res.ok) {
+      router.refresh();
+    } else {
+      const d = await res.json().catch(() => ({}));
+      setActionError(d.error ?? "Failed to remove member");
+    }
+    setRemoveConfirm({ open: false, memberId: "" });
+  }
+
+  async function revokeInvite(inviteToken: string) {
+    setActionError("");
+    // Route uses the token field (JWT slug), not the database id
+    const res = await fetch(`/api/invites/${inviteToken}`, { method: "DELETE" });
+    if (res.ok) {
+      router.refresh();
+    } else {
+      const d = await res.json().catch(() => ({}));
+      setActionError(d.error ?? "Failed to revoke invite");
+    }
+  }
+
+  async function revokeToken(tokenId: string) {
+    setActionError("");
+    const res = await fetch(`/api/mcp/revoke-token/${tokenId}`, { method: "DELETE" });
+    if (res.ok) {
+      router.refresh();
+    } else {
+      const d = await res.json().catch(() => ({}));
+      setActionError(d.error ?? "Failed to revoke token");
+    }
+  }
+
+  return (
+    <div className="space-y-8">
+      {actionError && (
+        <div className="rounded-md border border-red-800/40 bg-red-950/40 px-4 py-3 flex items-start justify-between gap-3">
+          <p className="text-sm text-red-300">{actionError}</p>
+          <button onClick={() => setActionError("")} className="text-red-500 hover:text-red-300 shrink-0 text-lg leading-none">×</button>
+        </div>
+      )}
+      {/* Members list */}
+      <div>
+        <h3 className="text-sm font-semibold text-zinc-300 mb-3">
+          Members ({members.length})
+        </h3>
+        <p className="mb-3 text-xs text-zinc-500">
+          Removing a member or revoking an active token updates workspace access
+          immediately.
+        </p>
+        <div className="space-y-1 rounded-lg border border-zinc-800 overflow-hidden">
+          {members.map((m) => (
+            <div
+              key={m.id}
+              className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800 last:border-0"
+            >
+              <div className="min-w-0">
+                <p className="text-sm font-medium text-zinc-200 truncate">
+                  {m.name} {m.isCurrentUser && <span className="text-zinc-500 font-normal">(you)</span>}
+                </p>
+                <p className="text-xs text-zinc-500 truncate">{m.email}</p>
+              </div>
+              <div className="flex items-center gap-3 shrink-0 ml-4">
+                <span className="text-xs text-zinc-500 bg-zinc-800 px-2 py-0.5 rounded">
+                  {ROLE_LABELS[m.role]}
+                </span>
+                {canManage && !m.isCurrentUser && m.role !== "OWNER" && (
+                  <button
+                    onClick={() => removeMember(m.id)}
+                    className="text-zinc-600 hover:text-red-400 transition-colors"
+                    title="Remove member"
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Invite form */}
+      {canManage && (
+        <div>
+          <h3 className="text-sm font-semibold text-zinc-300 mb-3 flex items-center gap-2">
+            <UserPlus size={14} /> Invite member
+          </h3>
+          <p className="mb-3 text-xs text-zinc-500">
+            Invites stay pending until accepted. Revoking an invite immediately
+            invalidates the link.
+          </p>
+          <form onSubmit={handleInvite} className="flex gap-2">
+            <input
+              type="email"
+              value={inviteEmail}
+              onChange={(e) => setInviteEmail(e.target.value)}
+              required
+              placeholder="colleague@example.com"
+              className="flex-1 rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none ring-focus"
+            />
+            <select
+              value={inviteRole}
+              onChange={(e) => setInviteRole(e.target.value as "ADMIN" | "MEMBER")}
+              className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-2 text-sm text-zinc-300 focus:outline-none ring-focus"
+            >
+              <option value="MEMBER">Member</option>
+              <option value="ADMIN">Admin</option>
+            </select>
+            <button
+              type="submit"
+              disabled={inviting}
+              className="rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50 shrink-0"
+            >
+              {inviting ? "…" : "Generate link"}
+            </button>
+          </form>
+          {error && <p className="mt-2 text-sm text-red-400">{error}</p>}
+
+          {inviteLink && (
+            <div className="mt-3 flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/50 px-3 py-2">
+              <p className="flex-1 text-xs text-zinc-400 font-mono truncate">{inviteLink}</p>
+              <button
+                onClick={() => copyLink(inviteLink)}
+                className="shrink-0 text-zinc-500 hover:text-zinc-300 transition-colors"
+                title="Copy invite link"
+              >
+                {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* MCP Tokens */}
+      {canManage && mcpTokens.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-zinc-300 mb-3">Active agent tokens</h3>
+          <div className="space-y-1 rounded-lg border border-zinc-800 overflow-hidden">
+            {mcpTokens.map((t) => (
+              <div key={t.id} className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800 last:border-0">
+                <div className="min-w-0">
+                  <p className="text-sm text-zinc-300 truncate">{t.alias ?? "Unnamed token"}</p>
+                  <p className="text-xs text-zinc-600">
+                    {t.userName}
+                    {t.lastUsed ? ` · last used ${new Date(t.lastUsed).toLocaleDateString()}` : " · never used"}
+                  </p>
+                </div>
+                <button
+                  onClick={() => revokeToken(t.id)}
+                  className="shrink-0 text-zinc-600 hover:text-red-400 transition-colors"
+                  title="Revoke token"
+                >
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Pending invites */}
+      {pendingInvites.length > 0 && (
+        <div>
+          <h3 className="text-sm font-semibold text-zinc-300 mb-3">
+            Pending invites ({pendingInvites.length})
+          </h3>
+          <div className="space-y-1 rounded-lg border border-zinc-800 overflow-hidden">
+            {pendingInvites.map((inv) => (
+              <div
+                key={inv.id}
+                className="flex items-center justify-between px-4 py-3 bg-zinc-900 border-b border-zinc-800 last:border-0"
+              >
+                <div className="min-w-0">
+                  <p className="text-sm text-zinc-300 truncate">{inv.email}</p>
+                  <p className="text-xs text-zinc-600">
+                    {ROLE_LABELS[inv.role]} · Expires{" "}
+                    {new Date(inv.expiresAt).toLocaleDateString()}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 shrink-0 ml-4">
+                  <button
+                    onClick={() => copyLink(`${process.env.NEXT_PUBLIC_APP_URL ?? window.location.origin}/invite/${inv.token}`)}
+                    className="text-zinc-500 hover:text-zinc-300 transition-colors"
+                    title="Copy link"
+                  >
+                    <Copy size={14} />
+                  </button>
+                  {canManage && (
+                    <button
+                      onClick={() => revokeInvite(inv.token)}
+                      className="text-zinc-600 hover:text-red-400 transition-colors"
+                      title="Revoke invite"
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Confirmation dialog */}
+      <ConfirmDangerAction
+        open={removeConfirm.open}
+        title="Remove Member"
+        body="Remove this member from the workspace?"
+        confirmLabel="Remove"
+        cancelLabel="Cancel"
+        onConfirm={confirmRemoveMember}
+        onClose={() => setRemoveConfirm({ open: false, memberId: "" })}
+      />
+    </div>
+  );
+}

package/components/settings/two-factor-auth.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import { useState } from "react";
+import { Shield, ShieldCheck, Loader2, Copy, Check, Smartphone, Lock } from "lucide-react";
+import { PasswordInput } from "@/components/auth/password-input";
+import { TwoFactorInput } from "@/components/auth/two-factor-input";
+
+export function TwoFactorAuth({ initialEnabled = false }: { initialEnabled?: boolean }) {
+  const [enabled, setEnabled] = useState(initialEnabled);
+  const [settingUp, setSettingUp] = useState(false);
+  const [qrCode, setQrCode] = useState<string | null>(null);
+  const [secret, setSecret] = useState<string | null>(null);
+  const [manualKey, setManualKey] = useState<string | null>(null);
+  const [verifyCode, setVerifyCode] = useState("");
+  const [disabling, setDisabling] = useState(false);
+  const [disablePassword, setDisablePassword] = useState("");
+  const [disableCode, setDisableCode] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  async function startSetup() {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/auth/2fa", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "setup" }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to setup 2FA");
+
+      setQrCode(data.qrCodeURL);
+      setSecret(data.secret);
+      setManualKey(data.manualEntryKey);
+      setSettingUp(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to setup 2FA");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function verifyAndEnable() {
+    if (!verifyCode.match(/^\d{6}$/)) {
+      setError("Please enter a valid 6-digit code");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/auth/2fa", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "verify", code: verifyCode }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Invalid code");
+
+      setEnabled(true);
+      setSettingUp(false);
+      setSuccess("Two-factor authentication enabled successfully");
+      setQrCode(null);
+      setSecret(null);
+      setManualKey(null);
+      setVerifyCode("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to verify code");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function disable2FA() {
+    if (!disablePassword) {
+      setError("Please enter your password");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/auth/2fa", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "disable",
+          password: disablePassword,
+          code: disableCode || undefined,
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Failed to disable 2FA");
+
+      setEnabled(false);
+      setDisabling(false);
+      setSuccess("Two-factor authentication disabled");
+      setDisablePassword("");
+      setDisableCode("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to disable 2FA");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function copyManualKey() {
+    if (manualKey) {
+      navigator.clipboard.writeText(manualKey.replace(/\s/g, ""));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }
+
+  // Generate QR code URL using Google Charts API
+  const qrCodeImageUrl = qrCode
+    ? `https://chart.googleapis.com/chart?cht=qr&chs=200x200&chld=M|0&chl=${encodeURIComponent(qrCode)}`
+    : null;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        {enabled ? (
+          <ShieldCheck size={20} className="text-emerald-400" />
+        ) : (
+          <Shield size={20} className="text-zinc-500" />
+        )}
+        <div>
+          <h3 className="text-sm font-semibold text-zinc-300">Two-Factor Authentication</h3>
+          <p className="text-xs text-zinc-500">
+            {enabled
+              ? "Your account is protected with an authenticator app"
+              : "Add an extra layer of security to your account"}
+          </p>
+        </div>
+      </div>
+
+      {success && (
+        <div className="rounded-md border border-emerald-800/40 bg-emerald-950/30 px-3 py-2">
+          <p className="text-xs text-emerald-400">{success}</p>
+        </div>
+      )}
+
+      {error && (
+        <div className="rounded-md border border-red-800/40 bg-red-950/30 px-3 py-2">
+          <p className="text-xs text-red-400">{error}</p>
+        </div>
+      )}
+
+      {!enabled && !settingUp && (
+        <button
+          onClick={startSetup}
+          disabled={loading}
+          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"
+        >
+          {loading ? <Loader2 size={13} className="animate-spin" /> : <Smartphone size={13} />}
+          Set up 2FA
+        </button>
+      )}
+
+      {settingUp && (
+        <div className="space-y-4 rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
+          <div className="flex items-center gap-2">
+            <Smartphone size={16} className="text-zinc-400" />
+            <h4 className="text-xs font-medium text-zinc-300">Scan QR Code</h4>
+          </div>
+
+          <p className="text-xs text-zinc-400">
+            Scan this QR code with your authenticator app (Google Authenticator, Authy, 1Password, etc.)
+          </p>
+
+          {qrCodeImageUrl && (
+            <div className="flex justify-center">
+              <img
+                src={qrCodeImageUrl}
+                alt="2FA QR Code"
+                className="rounded-lg border border-zinc-800"
+                width={200}
+                height={200}
+              />
+            </div>
+          )}
+
+          {manualKey && (
+            <div className="space-y-2">
+              <p className="text-xs text-zinc-500">Or enter this key manually:</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 rounded-md bg-zinc-950 px-3 py-2 text-xs text-zinc-300 font-mono">
+                  {manualKey}
+                </code>
+                <button
+                  onClick={copyManualKey}
+                  className="shrink-0 rounded-md bg-zinc-800 p-2 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-300 transition-colors"
+                  title="Copy to clipboard"
+                >
+                  {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+                </button>
+              </div>
+            </div>
+          )}
+
+          <div className="border-t border-zinc-800 pt-4 space-y-3">
+            <p className="text-xs text-zinc-400">Enter the 6-digit code from your authenticator app to verify:</p>
+            <div className="flex items-center gap-2">
+              <TwoFactorInput
+                value={verifyCode}
+                onChange={setVerifyCode}
+                length={6}
+                disabled={loading}
+                autoFocus
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={verifyAndEnable}
+                disabled={loading || verifyCode.length !== 6}
+                className="flex items-center gap-1.5 rounded-md bg-emerald-600 px-3 py-2 text-xs font-medium text-white hover:bg-emerald-500 disabled:opacity-50 transition-colors"
+              >
+                {loading ? <Loader2 size={13} className="animate-spin" /> : <Check size={13} />}
+                Verify & Enable
+              </button>
+              <button
+                onClick={() => setSettingUp(false)}
+                disabled={loading}
+                className="rounded-md border border-zinc-700 px-3 py-2 text-xs text-zinc-400 hover:bg-zinc-800 transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {enabled && !disabling && (
+        <button
+          onClick={() => setDisabling(true)}
+          className="flex items-center gap-1.5 rounded-md border border-red-800/40 bg-red-950/20 px-3 py-1.5 text-xs font-medium text-red-400 hover:bg-red-950/40 transition-colors"
+        >
+          <Lock size={13} />
+          Disable 2FA
+        </button>
+      )}
+
+      {enabled && disabling && (
+        <div className="space-y-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
+          <p className="text-xs text-zinc-400">Enter your password {enabled && "and 2FA code"} to disable:</p>
+          <div className="space-y-2">
+            <PasswordInput
+              value={disablePassword}
+              onChange={(e) => setDisablePassword(e.target.value)}
+              placeholder="Your password"
+            />
+            {enabled && (
+              <div className="space-y-1">
+                <label className="text-xs text-zinc-400">2FA Code</label>
+                <TwoFactorInput
+                  value={disableCode}
+                  onChange={setDisableCode}
+                  length={6}
+                  disabled={loading}
+                />
+              </div>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={disable2FA}
+              disabled={loading || !disablePassword}
+              className="flex items-center gap-1.5 rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-500 disabled:opacity-50 transition-colors"
+            >
+              {loading ? <Loader2 size={13} className="animate-spin" /> : "Disable 2FA"}
+            </button>
+            <button
+              onClick={() => {
+                setDisabling(false);
+                setDisablePassword("");
+                setDisableCode("");
+                setError(null);
+              }}
+              disabled={loading}
+              className="rounded-md border border-zinc-700 px-3 py-1.5 text-xs text-zinc-400 hover:bg-zinc-800 transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}