@knotpad/app 0.1.0 → 0.1.1

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

@@ -1,116 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect } from "react";
-
-interface TwoFactorInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  length?: number;
-  disabled?: boolean;
-  autoFocus?: boolean;
-}
-
-export function TwoFactorInput({
-  value,
-  onChange,
-  length = 6,
-  disabled = false,
-  autoFocus = false,
-}: TwoFactorInputProps) {
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-  const [focusedIndex, setFocusedIndex] = useState<number>(autoFocus ? 0 : -1);
-
-  useEffect(() => {
-    if (autoFocus) {
-      inputRefs.current[0]?.focus();
-    }
-  }, [autoFocus]);
-
-  const handleChange = (index: number, e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    
-    // Only allow digits
-    if (!/^\d*$/.test(newValue)) return;
-
-    const currentValue = value.split("");
-    currentValue[index] = newValue.slice(-1); // Take only last character
-    const newValueStr = currentValue.join("");
-
-    onChange(newValueStr);
-
-    // Auto-focus next input
-    if (newValue && index < length - 1) {
-      inputRefs.current[index + 1]?.focus();
-    }
-  };
-
-  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
-    // Handle backspace
-    if (e.key === "Backspace") {
-      if (!value[index] && index > 0) {
-        // If current is empty, go back and delete previous
-        const currentValue = value.split("");
-        currentValue[index - 1] = "";
-        onChange(currentValue.join(""));
-        inputRefs.current[index - 1]?.focus();
-      } else {
-        // Delete current
-        const currentValue = value.split("");
-        currentValue[index] = "";
-        onChange(currentValue.join(""));
-      }
-    }
-    // Handle left arrow
-    else if (e.key === "ArrowLeft" && index > 0) {
-      inputRefs.current[index - 1]?.focus();
-    }
-    // Handle right arrow
-    else if (e.key === "ArrowRight" && index < length - 1) {
-      inputRefs.current[index + 1]?.focus();
-    }
-  };
-
-  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
-    onChange(pastedData);
-    
-    // Focus the next empty input or the last one
-    const nextIndex = Math.min(pastedData.length, length - 1);
-    inputRefs.current[nextIndex]?.focus();
-  };
-
-  const handleFocus = (index: number) => {
-    setFocusedIndex(index);
-  };
-
-  return (
-    <div className="flex gap-2">
-      {Array.from({ length }).map((_, index) => (
-        <input
-          key={index}
-          ref={(el) => {
-            inputRefs.current[index] = el;
-          }}
-          type="text"
-          inputMode="numeric"
-          pattern="[0-9]*"
-          maxLength={1}
-          value={value[index] || ""}
-          onChange={(e) => handleChange(index, e)}
-          onKeyDown={(e) => handleKeyDown(index, e)}
-          onPaste={handlePaste}
-          onFocus={() => handleFocus(index)}
-          disabled={disabled}
-          className={`w-12 h-14 rounded-lg border-2 text-center text-2xl font-semibold text-zinc-100 focus:outline-none transition-all
-            ${focusedIndex === index
-              ? "border-zinc-400 bg-zinc-800"
-              : "border-zinc-700 bg-zinc-900"
-            }
-            ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-          `}
-        />
-      ))}
-    </div>
-  );
-}

package/components/billing/billing-dashboard.tsx

@@ -1,265 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { CheckCircle, Zap, Users, RefreshCw, Gift } from "lucide-react";
-import { CardForm } from "./card-form";
-import { ClaimAccountForm } from "./claim-account-form";
-
-type Props = {
-  isPro: boolean;
-  isOwner: boolean;
-  memberCount: number;
-  seatCount: number;
-  stripeId: string | null;
-  planType: "FREE" | "PERSONAL_PRO" | "TEAM_PRO";
-  licenseType: "STANDARD" | "COMPLIMENTARY";
-  workspaceType: "PERSONAL" | "TEAM";
-  workspaceId: string;
-  isGuest: boolean;
-};
-
-const PRO_FEATURES = [
-  "Cloud sync & backup",
-  "Access from any device",
-  "Offline-ready in the desktop app",
-  "Cloud MCP token for AI agents",
-  "PDPA compliant by design",
-];
-
-const FREE_FEATURES = [
-  "Full note & task engine",
-  "Kanban, list, calendar, graph views",
-  "Unlimited AI agent usage (local MCP)",
-  "Local database — your data, your machine",
-];
-
-export function BillingDashboard({
-  isPro,
-  isOwner,
-  memberCount,
-  seatCount,
-  stripeId,
-  planType,
-  licenseType,
-  workspaceType,
-  workspaceId,
-  isGuest,
-}: Props) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const justUpgraded = searchParams.get("upgraded") === "1";
-
-  const isComplimentary = licenseType === "COMPLIMENTARY";
-  const isTeam = workspaceType === "TEAM";
-
-  // For team: min 2 seats, start at whichever is higher: current members or 2
-  const minSeats = isTeam ? 2 : 1;
-  const [seats, setSeats] = useState(Math.max(memberCount, minSeats));
-  const [showCardForm, setShowCardForm] = useState(false);
-  const [portalLoading, setPortalLoading] = useState(false);
-
-  useEffect(() => {
-    if (justUpgraded) {
-      router.replace("/settings/billing");
-    }
-  }, [justUpgraded, router]);
-
-  async function handleManage() {
-    setPortalLoading(true);
-    const res = await fetch("/api/billing/portal", { method: "POST" });
-    if (res.ok) {
-      const { url } = await res.json();
-      if (url) window.location.href = url;
-    }
-    setPortalLoading(false);
-  }
-
-  const monthlyTotal = seats * 5;
-
-  return (
-    <div className="space-y-6 max-w-lg">
-
-        {/* ── Complimentary ─────────────────────────────────────────── */}
-        {isComplimentary && (
-          <div className="rounded-xl border border-emerald-700/40 bg-emerald-950/10 p-5 space-y-4">
-            <div className="flex items-start justify-between">
-              <div>
-                <div className="flex items-center gap-2">
-                  <Gift size={16} className="text-emerald-400" />
-                  <span className="text-sm font-semibold text-emerald-300">Complimentary</span>
-                </div>
-                <p className="text-xs text-zinc-500 mt-1">
-                  {isTeam ? "Team Pro" : "Personal Pro"} access — no payment needed.
-                </p>
-              </div>
-              <span className="text-xs text-emerald-400 font-medium bg-emerald-950/40 border border-emerald-800/40 px-2 py-0.5 rounded-full">
-                Active
-              </span>
-            </div>
-            <ul className="space-y-2">
-              {PRO_FEATURES.map((f) => (
-                <li key={f} className="flex items-start gap-2 text-sm text-zinc-400">
-                  <CheckCircle size={13} className="text-emerald-400 mt-0.5 shrink-0" /> {f}
-                </li>
-              ))}
-            </ul>
-            <p className="text-xs text-zinc-600">
-              This workspace has been granted complimentary access. Enjoy!
-            </p>
-          </div>
-        )}
-
-        {/* ── Active paid subscription ───────────────────────────────── */}
-        {!isComplimentary && isPro && (
-          <div className="rounded-xl border border-blue-700/40 bg-blue-950/10 p-5 space-y-4">
-            <div className="flex items-start justify-between">
-              <div>
-                <div className="flex items-center gap-2">
-                  <Zap size={16} className="text-blue-400" />
-                  <span className="text-sm font-semibold text-blue-300">
-                    {planType === "TEAM_PRO" ? "Team Pro" : "Personal Pro"}
-                  </span>
-                </div>
-                <p className="text-xs text-zinc-500 mt-1">
-                  Cloud sync & backup, {isTeam ? "team seats" : "personal cloud"} active.
-                </p>
-              </div>
-              <span className="text-xs text-blue-400 font-medium bg-blue-950/40 border border-blue-800/40 px-2 py-0.5 rounded-full">
-                Active
-              </span>
-            </div>
-            <ul className="space-y-2">
-              {PRO_FEATURES.map((f) => (
-                <li key={f} className="flex items-start gap-2 text-sm text-zinc-400">
-                  <CheckCircle size={13} className="text-emerald-400 mt-0.5 shrink-0" /> {f}
-                </li>
-              ))}
-            </ul>
-
-            {/* Seat summary for team plans */}
-            {isTeam && (
-              <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 space-y-1">
-                <div className="flex justify-between text-sm">
-                  <span className="text-zinc-400">Active seats</span>
-                  <span className="text-zinc-300 font-medium">{seatCount}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-zinc-400">Rate</span>
-                  <span className="text-zinc-300">$5 / seat / mo</span>
-                </div>
-                <div className="border-t border-zinc-800 mt-2 pt-2 flex justify-between text-sm font-semibold">
-                  <span className="text-zinc-300">Total</span>
-                  <span className="text-zinc-100">${seatCount * 5} / mo</span>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* ── Free plan ─────────────────────────────────────────────── */}
-        {!isComplimentary && !isPro && (
-          <div className="rounded-xl border border-zinc-800 bg-zinc-900/30 p-5 space-y-4">
-            <div>
-              <span className="text-sm font-semibold text-zinc-300">Knotpad Free</span>
-              <p className="text-xs text-zinc-500 mt-1">Full local features, no cloud sync.</p>
-            </div>
-            <ul className="space-y-2">
-              {FREE_FEATURES.map((f) => (
-                <li key={f} className="flex items-center gap-2 text-sm text-zinc-500">
-                  <CheckCircle size={13} className="text-zinc-600 shrink-0" /> {f}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-
-        {/* ── Upgrade section (free + owner only) ───────────────────── */}
-        {!isComplimentary && !isPro && isOwner && (
-          <div className="rounded-xl border border-zinc-700 bg-zinc-900/60 p-5 space-y-4">
-            <h3 className="text-sm font-semibold text-zinc-200">
-              Upgrade to {isTeam ? "Team Pro" : "Personal Pro"}
-            </h3>
-
-            {isTeam ? (
-              /* Team: seat calculator */
-              <div className="space-y-3">
-                <div className="flex items-center gap-3">
-                  <div className="flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2">
-                    <Users size={14} className="text-zinc-500" />
-                    <input
-                      type="number"
-                      min={minSeats}
-                      max={50}
-                      value={seats}
-                      onChange={(e) => setSeats(Math.max(minSeats, parseInt(e.target.value) || minSeats))}
-                      className="w-10 bg-transparent text-sm text-zinc-300 outline-none"
-                    />
-                    <span className="text-xs text-zinc-600">seats</span>
-                  </div>
-                  <span className="text-zinc-600 text-sm">×</span>
-                  <span className="text-sm text-zinc-400">$5</span>
-                  <span className="text-zinc-600 text-sm">=</span>
-                  <span className="text-sm font-semibold text-zinc-200">${monthlyTotal}<span className="text-xs font-normal text-zinc-600"> / mo</span></span>
-                </div>
-                <p className="text-xs text-zinc-600">
-                  Minimum 2 seats (${minSeats * 5}/mo). Members join free — you pay for all seats.
-                </p>
-              </div>
-            ) : (
-              /* Personal: flat $5 */
-              <div className="space-y-1">
-                <p className="text-2xl font-semibold text-zinc-100">$5<span className="text-base font-normal text-zinc-500"> / mo</span></p>
-                <p className="text-xs text-zinc-600">1 user · personal workspace cloud sync · cancel anytime.</p>
-              </div>
-            )}
-
-            {isGuest ? (
-              /* Guests must create a real account before paying (Pro is cloud).
-                 After claiming, router.refresh() flips isGuest=false and the
-                 normal card flow renders. */
-              <ClaimAccountForm onClaimed={() => setShowCardForm(true)} />
-            ) : showCardForm ? (
-              <CardForm
-                plan={isTeam ? "team" : "personal"}
-                seats={seats}
-                workspaceId={workspaceId}
-                onSuccess={() => {
-                  router.refresh();
-                }}
-              />
-            ) : (
-              <button
-                onClick={() => setShowCardForm(true)}
-                className="flex items-center gap-2 rounded-md bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-500 transition-colors"
-              >
-                Add card & activate →
-              </button>
-            )}
-          </div>
-        )}
-
-        {/* ── Manage subscription (paid + owner) ────────────────────── */}
-        {!isComplimentary && isPro && isOwner && stripeId && (
-          <div className="space-y-2">
-            <h3 className="text-sm font-semibold text-zinc-300">Manage subscription</h3>
-            <p className="text-xs text-zinc-600">
-              Change seats, update payment method, download invoices, or cancel via Stripe.
-            </p>
-            <button
-              onClick={handleManage}
-              disabled={portalLoading}
-              className="flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 disabled:opacity-50 transition-colors"
-            >
-              {portalLoading && <RefreshCw size={13} className="animate-spin" />}
-              Open billing portal ↗
-            </button>
-          </div>
-        )}
-
-        {!isOwner && (
-          <p className="text-xs text-zinc-600">Only the workspace owner can manage billing.</p>
-        )}
-    </div>
-  );
-}

package/components/billing/card-form.tsx

@@ -1,210 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { loadStripe } from "@stripe/stripe-js";
-import {
-  Elements,
-  PaymentElement,
-  useStripe,
-  useElements,
-} from "@stripe/react-stripe-js";
-import { RefreshCw, Lock } from "lucide-react";
-
-const stripePromise = loadStripe(
-  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY ?? ""
-);
-
-// Dark appearance matching the app's zinc-950 palette
-const STRIPE_APPEARANCE = {
-  theme: "night" as const,
-  variables: {
-    colorPrimary: "#3b82f6",
-    colorBackground: "#18181b",
-    colorText: "#f4f4f5",
-    colorTextSecondary: "#a1a1aa",
-    colorDanger: "#ef4444",
-    colorDangerText: "#fca5a5",
-    fontFamily: "inherit",
-    borderRadius: "6px",
-    spacingUnit: "4px",
-  },
-  rules: {
-    ".Input": {
-      border: "1px solid #3f3f46",
-      backgroundColor: "#18181b",
-      color: "#f4f4f5",
-      boxShadow: "none",
-    },
-    ".Input:focus": {
-      border: "1px solid #52525b",
-      boxShadow: "none",
-      outline: "none",
-    },
-    ".Label": {
-      color: "#a1a1aa",
-      fontSize: "12px",
-      fontWeight: "500",
-    },
-    ".Error": { color: "#fca5a5" },
-  },
-};
-
-// ── Inner form (must be inside <Elements>) ────────────────────────────────────
-
-function CheckoutForm({
-  plan,
-  seats,
-  workspaceId,
-  onSuccess,
-}: {
-  plan: "personal" | "team";
-  seats: number;
-  workspaceId: string;
-  onSuccess: () => void;
-}) {
-  const stripe = useStripe();
-  const elements = useElements();
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!stripe || !elements) return;
-
-    setLoading(true);
-    setError("");
-
-    // 1. Confirm the SetupIntent — saves the card on Stripe's side
-    const { error: stripeError, setupIntent } = await stripe.confirmSetup({
-      elements,
-      confirmParams: {
-        return_url: `${window.location.origin}/settings/billing?upgraded=1`,
-      },
-      redirect: "if_required", // no redirect for regular cards
-    });
-
-    if (stripeError) {
-      setError(stripeError.message ?? "Card confirmation failed");
-      setLoading(false);
-      return;
-    }
-
-    const paymentMethodId =
-      typeof setupIntent?.payment_method === "string"
-        ? setupIntent.payment_method
-        : setupIntent?.payment_method?.id;
-
-    if (!paymentMethodId) {
-      setError("Could not retrieve payment method. Please try again.");
-      setLoading(false);
-      return;
-    }
-
-    // 2. Create the subscription with the saved card
-    const res = await fetch("/api/billing/subscribe", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ paymentMethodId, plan, seats, workspaceId }),
-    });
-
-    if (!res.ok) {
-      const data = await res.json();
-      setError(data.error ?? "Subscription failed. Please try again.");
-      setLoading(false);
-      return;
-    }
-
-    onSuccess();
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <PaymentElement
-        options={{
-          layout: "tabs",
-          wallets: { applePay: "auto", googlePay: "auto" },
-        }}
-      />
-
-      {error && (
-        <p className="text-sm text-red-400">{error}</p>
-      )}
-
-      <button
-        type="submit"
-        disabled={!stripe || loading}
-        className="flex w-full items-center justify-center gap-2 rounded-md bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-50 transition-colors"
-      >
-        {loading ? (
-          <RefreshCw size={13} className="animate-spin" />
-        ) : (
-          <Lock size={13} />
-        )}
-        {loading ? "Activating…" : `Activate ${plan === "team" ? "Team" : "Personal"} Pro`}
-      </button>
-
-      <p className="text-center text-xs text-zinc-600 flex items-center justify-center gap-1">
-        <Lock size={10} /> Secured by Stripe. We never see your card number.
-      </p>
-
-      <p className="text-center text-[11px] text-zinc-700">
-        Knotpad is a product of Nexstrive Services · Registration: 202303272747 (TR0292898-P)
-      </p>
-    </form>
-  );
-}
-
-// ── Public wrapper — fetches clientSecret then mounts Elements ────────────────
-
-export function CardForm({
-  plan,
-  seats,
-  workspaceId,
-  onSuccess,
-}: {
-  plan: "personal" | "team";
-  seats: number;
-  workspaceId: string;
-  onSuccess: () => void;
-}) {
-  const [clientSecret, setClientSecret] = useState<string | null>(null);
-  const [fetchError, setFetchError] = useState("");
-
-  useEffect(() => {
-    fetch("/api/billing/setup-intent", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ workspaceId }),
-    })
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.clientSecret) setClientSecret(data.clientSecret);
-        else setFetchError("Could not initialise payment form.");
-      })
-      .catch(() => setFetchError("Network error. Please refresh and try again."));
-  }, [workspaceId]);
-
-  if (fetchError) return <p className="text-sm text-red-400">{fetchError}</p>;
-
-  if (!clientSecret) {
-    return (
-      <div className="flex items-center gap-2 text-sm text-zinc-500 py-4">
-        <RefreshCw size={13} className="animate-spin" /> Loading payment form…
-      </div>
-    );
-  }
-
-  return (
-    <Elements
-      stripe={stripePromise}
-      options={{ clientSecret, appearance: STRIPE_APPEARANCE }}
-    >
-      <CheckoutForm
-        plan={plan}
-        seats={seats}
-        workspaceId={workspaceId}
-        onSuccess={onSuccess}
-      />
-    </Elements>
-  );
-}

package/components/billing/claim-account-form.tsx

@@ -1,99 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { signIn } from "next-auth/react";
-import { useRouter } from "next/navigation";
-import { PasswordInput } from "@/components/auth/password-input";
-
-// Shown to a GUEST (local, no-account user) before they can pay. Converts the
-// guest into a real account via /api/account/claim — which keeps their existing
-// notes/workspace — then signs them in so the normal card flow can proceed.
-export function ClaimAccountForm({ onClaimed }: { onClaimed: () => void }) {
-  const router = useRouter();
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-
-    const form = e.currentTarget;
-    const name = (form.elements.namedItem("name") as HTMLInputElement).value;
-    const email = (form.elements.namedItem("email") as HTMLInputElement).value;
-    const password = (form.elements.namedItem("password") as HTMLInputElement).value;
-
-    try {
-      const res = await fetch("/api/account/claim", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, email, password }),
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        setError(data.error ?? "Couldn't create your account");
-        setLoading(false);
-        return;
-      }
-
-      // Re-establish the session under the new real credentials.
-      const result = await signIn("credentials", { email, password, redirect: false });
-      if (result?.error) {
-        setError("Account created but sign-in failed. Please sign in manually.");
-        setLoading(false);
-        return;
-      }
-
-      router.refresh();
-      onClaimed();
-    } catch {
-      setError("Something went wrong. Please try again.");
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div className="space-y-3">
-      <div>
-        <p className="text-sm font-medium text-zinc-200">Create your account</p>
-        <p className="text-xs text-zinc-500 mt-0.5">
-          Pro keeps your notes in the cloud, so you'll need an account. Your current
-          notes come with you.
-        </p>
-      </div>
-      <form onSubmit={handleSubmit} className="space-y-3">
-        <input
-          name="name"
-          type="text"
-          required
-          autoComplete="name"
-          placeholder="Your name"
-          className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-zinc-500 focus:outline-none"
-        />
-        <input
-          name="email"
-          type="email"
-          required
-          autoComplete="email"
-          placeholder="you@example.com"
-          className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-500 focus:border-zinc-500 focus:outline-none"
-        />
-        <PasswordInput
-          name="password"
-          required
-          minLength={8}
-          autoComplete="new-password"
-          placeholder="Password (min 8 characters)"
-        />
-        {error && <p className="text-sm text-red-400">{error}</p>}
-        <button
-          type="submit"
-          disabled={loading}
-          className="flex items-center gap-2 rounded-md bg-blue-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-50 transition-colors"
-        >
-          {loading ? "Creating account…" : "Create account & continue →"}
-        </button>
-      </form>
-    </div>
-  );
-}