@knotpad/app 0.1.4 → 0.1.6

package/app/(auth)/forgot-password/page.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [resetUrl, setResetUrl] = useState(""); // dev/local mode only
+  const [error, setError] = useState("");
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch("/api/auth/forgot-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setSent(true);
+        // In local/dev mode the API returns the URL directly (no email configured).
+        if (data.resetUrl) setResetUrl(data.resetUrl);
+      } else {
+        const d = await res.json();
+        setError(d.error ?? "Something went wrong");
+      }
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (sent) {
+    return (
+      <div className="w-full max-w-sm space-y-4 text-center">
+        <h1 className="text-2xl font-semibold tracking-tight">Check your email</h1>
+        <p className="text-sm text-zinc-400">
+          If an account exists for <span className="text-zinc-300">{email}</span>, we've sent a
+          reset link. It expires in 1 hour.
+        </p>
+        {resetUrl && (
+          <div className="rounded-md border border-amber-800/40 bg-amber-950/20 px-4 py-3 text-left space-y-1">
+            <p className="text-xs text-amber-400 font-medium">Dev mode — no email configured</p>
+            <p className="text-xs text-zinc-400 break-all">
+              <a href={resetUrl} className="underline hover:text-zinc-200">{resetUrl}</a>
+            </p>
+          </div>
+        )}
+        <Link href="/login" className="block text-sm text-zinc-500 hover:text-zinc-300 transition-colors">
+          Back to sign in
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Forgot password?</h1>
+        <p className="mt-1 text-sm text-zinc-400">
+          Enter your email and we'll send you a reset link.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1">
+          <label htmlFor="email" className="text-sm font-medium text-zinc-300">
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            autoComplete="email"
+            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"
+            placeholder="you@example.com"
+          />
+        </div>
+
+        {error && <p className="text-sm text-red-400">{error}</p>}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50"
+        >
+          {loading ? "Sending…" : "Send reset link"}
+        </button>
+      </form>
+
+      <p className="text-center text-sm text-zinc-500">
+        <Link href="/login" className="text-zinc-300 underline underline-offset-2 hover:text-white">
+          Back to sign in
+        </Link>
+      </p>
+    </div>
+  );
+}

package/app/(auth)/guest/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+
+export default function GuestPage() {
+  const router = useRouter();
+  const [status, setStatus] = useState<"creating" | "error">("creating");
+  // Guard against React Strict Mode double-invocation — only create one guest account.
+  const started = useRef(false);
+
+  useEffect(() => {
+    if (started.current) return;
+    started.current = true;
+
+    async function createGuest() {
+      try {
+        const res = await fetch("/api/guest", { method: "POST" });
+        if (!res.ok) throw new Error("Failed to create guest");
+        const { email } = await res.json();
+
+        const result = await signIn("credentials", {
+          email,
+          password: "", // guest: no password
+          redirect: false,
+        });
+
+        if (result?.error) throw new Error(result.error);
+        router.push("/notes");
+        router.refresh();
+      } catch {
+        setStatus("error");
+      }
+    }
+    createGuest();
+  }, [router]);
+
+  if (status === "error") {
+    return (
+      <div className="text-center space-y-3">
+        <p className="text-zinc-300">Something went wrong starting guest mode.</p>
+        <a href="/login" className="text-sm text-zinc-500 underline">
+          Back to sign in
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-3 text-center">
+      <div className="h-6 w-6 rounded-full border-2 border-zinc-600 border-t-zinc-300 animate-spin" />
+      <p className="text-sm text-zinc-500">Setting up your local workspace…</p>
+    </div>
+  );
+}

package/app/(auth)/layout.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  robots: "noindex, nofollow",
+};
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-full items-center justify-center">
+      {children}
+    </div>
+  );
+}

package/app/(auth)/login/page.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+import { LoginForm } from "@/components/auth/login-form";
+
+export const metadata: Metadata = {
+  title: "Sign In",
+  robots: "noindex, nofollow",
+};
+
+// Server component so it can read the runtime IS_CLOUD flag (set per-runtime by
+// the desktop/NPX launcher vs the cloud deploy) and pass it to the client form.
+export default function LoginPage() {
+  const isCloud = process.env.IS_CLOUD === "true";
+  return <LoginForm isCloud={isCloud} />;
+}

package/app/(auth)/register/page.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { useState, Suspense } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { AppLogo } from "@/components/branding/app-logo";
+import { PasswordInput } from "@/components/auth/password-input";
+import { PasswordChecklist } from "@/components/auth/password-checklist";
+
+export default function RegisterPage() {
+  return (
+    <Suspense fallback={<RegisterSkeleton />}>
+      <RegisterForm />
+    </Suspense>
+  );
+}
+
+function RegisterSkeleton() {
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div className="h-8 w-48 animate-pulse rounded bg-zinc-800" />
+      <div className="h-4 w-64 animate-pulse rounded bg-zinc-800" />
+      <div className="space-y-4 pt-4">
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+      </div>
+    </div>
+  );
+}
+
+function RegisterForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+
+  const rawNext = searchParams.get("next") ?? "";
+  const redirectTo =
+    rawNext.startsWith("/") && !rawNext.startsWith("//") ? rawNext : "/notes";
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    if (password !== confirm) {
+      setError("Passwords don't match");
+      return;
+    }
+
+    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;
+
+    try {
+      const res = await fetch("/api/register", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, email, password }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error ?? "Registration failed");
+        setLoading(false);
+        return;
+      }
+
+      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.push(redirectTo);
+      router.refresh();
+    } catch {
+      setError("Something went wrong. Please try again.");
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div className="flex justify-end">
+        <Link href="/" className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">
+          back to home
+        </Link>
+      </div>
+      <div>
+        <AppLogo className="mb-4 h-8 w-auto" />
+        <h1 className="text-2xl font-semibold tracking-tight">Create your account</h1>
+        <p className="mt-1 text-sm text-zinc-400">Start writing. Tasks will follow.</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1">
+          <label htmlFor="name" className="text-sm font-medium text-zinc-300">
+            Name
+          </label>
+          <input
+            id="name"
+            name="name"
+            type="text"
+            required
+            autoComplete="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"
+            placeholder="Your name"
+          />
+        </div>
+
+        <div className="space-y-1">
+          <label htmlFor="email" className="text-sm font-medium text-zinc-300">
+            Email
+          </label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            required
+            autoComplete="email"
+            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"
+            placeholder="you@example.com"
+          />
+        </div>
+
+        <div className="space-y-1">
+          <label htmlFor="password" className="text-sm font-medium text-zinc-300">
+            Password
+          </label>
+          <PasswordInput
+            id="password"
+            name="password"
+            required
+            minLength={8}
+            autoComplete="new-password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••"
+          />
+          {password.length > 0 && (
+            <div className="pt-2">
+              <PasswordChecklist password={password} />
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-1">
+          <label htmlFor="confirm" className="text-sm font-medium text-zinc-300">
+            Confirm password
+          </label>
+          <PasswordInput
+            id="confirm"
+            name="confirm"
+            required
+            minLength={8}
+            autoComplete="new-password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            placeholder="••••••••"
+          />
+          {confirm.length > 0 && password !== confirm && (
+            <p className="text-xs text-red-400 pt-1">Passwords don't match</p>
+          )}
+        </div>
+
+        {error && <p className="text-sm text-red-400">{error}</p>}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50"
+        >
+          {loading ? "Creating account…" : "Create account"}
+        </button>
+      </form>
+
+      <p className="text-center text-sm text-zinc-500">
+        Already have an account?{" "}
+        <Link href="/login" className="text-zinc-300 underline underline-offset-2 hover:text-white">
+          Sign in
+        </Link>
+      </p>
+    </div>
+  );
+}

package/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { PasswordInput } from "@/components/auth/password-input";
+import { PasswordChecklist } from "@/components/auth/password-checklist";
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<ResetSkeleton />}>
+      <ResetForm />
+    </Suspense>
+  );
+}
+
+function ResetSkeleton() {
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div className="h-8 w-48 animate-pulse rounded bg-zinc-800" />
+      <div className="h-4 w-64 animate-pulse rounded bg-zinc-800" />
+      <div className="space-y-4 pt-4">
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+        <div className="h-10 animate-pulse rounded bg-zinc-800" />
+      </div>
+    </div>
+  );
+}
+
+function ResetForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") ?? "";
+
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  if (!token) {
+    return (
+      <div className="w-full max-w-sm text-center space-y-3">
+        <h1 className="text-2xl font-semibold tracking-tight">Invalid link</h1>
+        <p className="text-sm text-zinc-400">This reset link is missing a token.</p>
+        <Link href="/forgot-password" className="text-sm text-zinc-300 underline">
+          Request a new one
+        </Link>
+      </div>
+    );
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (password !== confirm) {
+      setError("Passwords don't match");
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      const res = await fetch("/api/auth/reset-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, password }),
+      });
+      if (res.ok) {
+        router.push("/login?reset=1");
+      } else {
+        const d = await res.json();
+        setError(d.error ?? "Reset failed. The link may have expired.");
+      }
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Set new password</h1>
+        <p className="mt-1 text-sm text-zinc-400">Choose a password with at least 8 characters.</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1">
+          <label htmlFor="password" className="text-sm font-medium text-zinc-300">
+            New password
+          </label>
+          <PasswordInput
+            id="password"
+            required
+            minLength={8}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="new-password"
+            placeholder="••••••••"
+          />
+          {password.length > 0 && (
+            <div className="pt-2">
+              <PasswordChecklist password={password} />
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-1">
+          <label htmlFor="confirm" className="text-sm font-medium text-zinc-300">
+            Confirm password
+          </label>
+          <PasswordInput
+            id="confirm"
+            required
+            minLength={8}
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            autoComplete="new-password"
+            placeholder="••••••••"
+          />
+          {confirm.length > 0 && password !== confirm && (
+            <p className="text-xs text-red-400 pt-1">Passwords don't match</p>
+          )}
+        </div>
+
+        {error && <p className="text-sm text-red-400">{error}</p>}
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50"
+        >
+          {loading ? "Saving…" : "Set new password"}
+        </button>
+      </form>
+    </div>
+  );
+}

package/app/api/account/claim/route.tsx

@@ -0,0 +1,135 @@
+import { NextRequest, NextResponse } from "next/server";
+import bcrypt from "bcryptjs";
+import { auth } from "@/auth";
+import { prisma, getCloudPrisma } from "@/lib/prisma";
+import { rateLimit, getClientIp } from "@/lib/rate-limit";
+
+/**
+ * POST /api/account/claim
+ * Body: { name, email, password }
+ *
+ * Converts the current GUEST (local, no-password `*@local.brief`) into a real
+ * account WITHOUT orphaning their notes:
+ *   1. Attach real name/email/passwordHash to the existing local user (same id,
+ *      same workspace → their notes stay put).
+ *   2. Mirror the identity (User + each Workspace + WorkspaceMember + that
+ *      workspace's KanbanStatuses) into Neon BY ID, because identity is
+ *      cloud-scoped (PrismaAdapter(cloud)) and `/api/billing/migrate` is keyed by
+ *      workspaceId — both need the records to exist in cloud.
+ *
+ * After this, the client signs in with the new credentials and proceeds to
+ * billing (setup-intent → subscribe); the Stripe webhook flips the plan flags
+ * and triggers the data migration. This route does NOT touch Stripe or plan
+ * flags — it only establishes the real, cloud-resolvable identity.
+ */
+
+const AUTH_MAX = 10;
+const AUTH_WINDOW_MS = 60 * 60_000;
+
+export async function POST(req: NextRequest) {
+  const ip = getClientIp(req);
+  const rl = rateLimit(`claim:${ip}`, AUTH_MAX, AUTH_WINDOW_MS);
+  if (rl.limited) {
+    return NextResponse.json(
+      { error: "Too many attempts. Try again later." },
+      { status: 429, headers: { "Retry-After": String(rl.retryAfter) } }
+    );
+  }
+
+  const session = await auth();
+  if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const cloud = getCloudPrisma();
+  if (!cloud) {
+    return NextResponse.json(
+      { error: "Cloud is not configured — upgrading requires a cloud connection." },
+      { status: 503 }
+    );
+  }
+
+  // The signed-in user must be an unclaimed guest.
+  const me = await prisma.user.findUnique({ where: { id: session.user.id } });
+  if (!me || !me.email?.endsWith("@local.brief") || me.passwordHash) {
+    return NextResponse.json(
+      { error: "This account can't be upgraded (already a real account)." },
+      { status: 400 }
+    );
+  }
+
+  const { name, email, password } = await req.json().catch(() => ({}));
+  if (!name || !email || !password) {
+    return NextResponse.json({ error: "Missing fields" }, { status: 400 });
+  }
+  if (typeof password !== "string" || password.length < 8) {
+    return NextResponse.json({ error: "Password must be at least 8 characters" }, { status: 400 });
+  }
+  if (typeof email !== "string" || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return NextResponse.json({ error: "Invalid email address" }, { status: 400 });
+  }
+
+  // Email must be free in BOTH databases (auth checks cloud-first, but the local
+  // DB also holds users in fully-local mode).
+  for (const db of [prisma, cloud]) {
+    const taken = await db.user.findUnique({ where: { email } });
+    if (taken) return NextResponse.json({ error: "Email already in use" }, { status: 409 });
+  }
+
+  const passwordHash = await bcrypt.hash(password, 12);
+
+  // 1) Promote the local user in place (keeps id + workspace + notes).
+  await prisma.user.update({
+    where: { id: me.id },
+    data: { name, email, passwordHash },
+  });
+
+  // 2) Mirror identity into Neon by id so cloud login + migrate resolve.
+  const memberships = await prisma.workspaceMember.findMany({
+    where: { userId: me.id, revokedAt: null },
+    include: { workspace: true },
+  });
+
+  await cloud.user.upsert({
+    where: { id: me.id },
+    create: { id: me.id, name, email, passwordHash, role: me.role, createdAt: me.createdAt },
+    update: { name, email, passwordHash },
+  });
+
+  for (const m of memberships) {
+    const ws = m.workspace;
+    await cloud.workspace.upsert({
+      where: { id: ws.id },
+      create: {
+        id: ws.id,
+        name: ws.name,
+        slug: ws.slug,
+        type: ws.type,
+        planType: ws.planType,
+        licenseType: ws.licenseType,
+        isCloud: ws.isCloud,
+        isPro: ws.isPro,
+        seatCount: ws.seatCount,
+        encryptionSalt: ws.encryptionSalt,
+        createdAt: ws.createdAt,
+      },
+      update: { name: ws.name, slug: ws.slug, encryptionSalt: ws.encryptionSalt },
+    });
+
+    await cloud.workspaceMember.upsert({
+      where: { userId_workspaceId: { userId: me.id, workspaceId: ws.id } },
+      create: { id: m.id, userId: me.id, workspaceId: ws.id, role: m.role, joinedAt: m.joinedAt },
+      update: { role: m.role },
+    });
+
+    // Mirror the workspace's kanban statuses so the board looks identical in cloud.
+    const statuses = await prisma.kanbanStatus.findMany({ where: { workspaceId: ws.id } });
+    for (const s of statuses) {
+      await cloud.kanbanStatus.upsert({
+        where: { workspaceId_key: { workspaceId: ws.id, key: s.key } },
+        create: { workspaceId: ws.id, key: s.key, label: s.label, color: s.color, order: s.order, isVisible: s.isVisible },
+        update: { label: s.label, color: s.color, order: s.order, isVisible: s.isVisible },
+      });
+    }
+  }
+
+  return NextResponse.json({ ok: true, email });
+}