@knotpad/app 0.1.0 → 0.1.1

package/components/settings/team-settings.tsx

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

@@ -1,296 +0,0 @@
-"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>
-  );
-}