@m2-ai/lattice-cli 0.0.0-stage → 0.8.7

package/bundles/nextjs-saas/app/(auth)/login/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { createClient } from "@/lib/supabase/client";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    const supabase = createClient();
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+
+    if (error) {
+      setError(error.message);
+      setLoading(false);
+      return;
+    }
+
+    router.push("/dashboard");
+    router.refresh();
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+            Sign in to your account
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Or{" "}
+            <Link href="/signup" className="font-medium text-blue-600 hover:text-blue-500">
+              create a new account
+            </Link>
+          </p>
+        </div>
+        <form method="post" className="mt-8 space-y-6" onSubmit={handleLogin}>
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="text-sm">
+              <Link href="/forgot-password" className="font-medium text-blue-600 hover:text-blue-500">
+                Forgot your password?
+              </Link>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? "Signing in..." : "Sign in"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { createClient } from "@/lib/supabase/client";
+import {
+  hasPasswordRecoveryCallbackError,
+  hasValidPasswordRecoverySession,
+  updateRecoveredPassword,
+} from "@/lib/auth/password-recovery";
+
+export default function ResetPasswordPage() {
+  const [password, setPassword] = useState("");
+  const [confirmation, setConfirmation] = useState("");
+  const [status, setStatus] = useState<"checking" | "ready" | "invalid" | "success">("checking");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+    const sessionCheck = hasPasswordRecoveryCallbackError(window.location.search)
+      ? Promise.resolve(false)
+      : hasValidPasswordRecoverySession(createClient().auth);
+    void sessionCheck.then((valid) => {
+      if (active) setStatus(valid ? "ready" : "invalid");
+    });
+    return () => { active = false; };
+  }, []);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError("");
+    setLoading(true);
+    const supabase = createClient();
+    const result = await updateRecoveredPassword(supabase.auth, password, confirmation);
+    setLoading(false);
+    if (!result.ok) {
+      setError(result.message);
+      if (result.reason === "invalid-session") setStatus("invalid");
+      return;
+    }
+    setStatus("success");
+  };
+
+  if (status === "checking") {
+    return (
+      <main className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+        <p className="text-sm text-gray-600" role="status">Checking your reset link...</p>
+      </main>
+    );
+  }
+
+  if (status === "invalid") {
+    return (
+      <main className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+        <div className="max-w-md w-full rounded-lg border border-red-200 bg-red-50 p-6 text-center">
+          <h1 className="text-xl font-bold text-red-800">Reset link unavailable</h1>
+          <p className="mt-2 text-sm text-red-700">This password reset link is invalid or expired. Request a new one.</p>
+          <Link href="/forgot-password" className="mt-4 inline-block font-medium text-blue-600 hover:text-blue-500">
+            Request another reset link
+          </Link>
+        </div>
+      </main>
+    );
+  }
+
+  if (status === "success") {
+    return (
+      <main className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+        <div className="max-w-md w-full rounded-lg border border-green-200 bg-green-50 p-6 text-center">
+          <h1 className="text-xl font-bold text-green-800">Password updated</h1>
+          <p className="mt-2 text-sm text-green-700">Your new password is ready to use.</p>
+          <Link href="/dashboard" className="mt-4 inline-block font-medium text-blue-600 hover:text-blue-500">
+            Continue to your dashboard
+          </Link>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h1 className="text-center text-3xl font-bold tracking-tight text-gray-900">Choose a new password</h1>
+          <p className="mt-2 text-center text-sm text-gray-600">Use at least 8 characters.</p>
+        </div>
+        <form className="space-y-6" onSubmit={handleSubmit}>
+          {error && (
+            <div role="alert" className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
+              {error}
+            </div>
+          )}
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">New password</label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={8}
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500"
+              />
+            </div>
+            <div>
+              <label htmlFor="password-confirmation" className="block text-sm font-medium text-gray-700">Confirm new password</label>
+              <input
+                id="password-confirmation"
+                name="password-confirmation"
+                type="password"
+                autoComplete="new-password"
+                required
+                minLength={8}
+                value={confirmation}
+                onChange={(event) => setConfirmation(event.target.value)}
+                className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500"
+              />
+            </div>
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            className="flex w-full justify-center rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {loading ? "Updating..." : "Update password"}
+          </button>
+        </form>
+      </div>
+    </main>
+  );
+}

package/bundles/nextjs-saas/app/(auth)/signup/page.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { createClient } from "@/lib/supabase/client";
+
+export default function SignupPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+
+    setLoading(true);
+
+    const supabase = createClient();
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        emailRedirectTo: `${window.location.origin}/auth/callback`,
+      },
+    });
+
+    if (error) {
+      setError(error.message);
+      setLoading(false);
+      return;
+    }
+
+    setSuccess(true);
+    setLoading(false);
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
+        <div className="max-w-md w-full text-center">
+          <div className="bg-green-50 border border-green-200 rounded-lg p-6">
+            <h2 className="text-xl font-bold text-green-800 mb-2">Check your email</h2>
+            <p className="text-green-700">
+              We&apos;ve sent you a confirmation link. Please check your email to complete signup.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+            Create your account
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Already have an account?{" "}
+            <Link href="/login" className="font-medium text-blue-600 hover:text-blue-500">
+              Sign in
+            </Link>
+          </p>
+        </div>
+        <form method="post" className="mt-8 space-y-6" onSubmit={handleSignup}>
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
+                Confirm password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                autoComplete="new-password"
+                required
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? "Creating account..." : "Create account"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/bundles/nextjs-saas/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,80 @@
+import { createClient } from "@/lib/supabase/server";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+
+export default async function DashboardPage() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold text-gray-900">Welcome back!</h1>
+        <p className="text-gray-600 mt-1">Here&apos;s what&apos;s happening with your account.</p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle>Getting Started</CardTitle>
+            <CardDescription>Complete your setup</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-2 text-sm">
+              <li className="flex items-center gap-2">
+                <span className="text-green-500">✓</span>
+                <span>Account created</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="text-gray-300">○</span>
+                <span>Complete your profile</span>
+              </li>
+              <li className="flex items-center gap-2">
+                <span className="text-gray-300">○</span>
+                <span>Create your first project</span>
+              </li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Quick Actions</CardTitle>
+            <CardDescription>Common tasks</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <button className="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-sm">
+                → Create new item
+              </button>
+              <button className="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-sm">
+                → View all items
+              </button>
+              <button className="w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-sm">
+                → Account settings
+              </button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Account</CardTitle>
+            <CardDescription>Your details</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <dl className="space-y-2 text-sm">
+              <div>
+                <dt className="text-gray-500">Email</dt>
+                <dd className="font-medium">{user?.email}</dd>
+              </div>
+              <div>
+                <dt className="text-gray-500">User ID</dt>
+                <dd className="font-mono text-xs">{user?.id.slice(0, 8)}...</dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/bundles/nextjs-saas/app/(dashboard)/layout.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+import { createClient } from "@/lib/supabase/server";
+import { redirect } from "next/navigation";
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect("/login");
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Top nav */}
+      <header className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16">
+            <div className="flex items-center">
+              <Link href="/dashboard" className="text-xl font-bold text-gray-900">
+                Dashboard
+              </Link>
+            </div>
+            <div className="flex items-center gap-4">
+              <span className="text-sm text-gray-600">{user.email}</span>
+              <form action="/auth/signout" method="post">
+                <button
+                  type="submit"
+                  className="text-sm text-gray-600 hover:text-gray-900"
+                >
+                  Sign out
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {children}
+      </main>
+    </div>
+  );
+}

package/bundles/nextjs-saas/app/api/billing/checkout/route.ts

@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import { getStripe } from "@/lib/stripe";
+import { createClient } from "@/lib/supabase/server";
+import { getSupabaseAdmin } from "@/lib/supabase/admin";
+
+export async function POST() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user?.email) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const priceId = process.env.STRIPE_PRICE_ID;
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL;
+  if (!priceId || !appUrl) {
+    return NextResponse.json({ error: "Billing is not configured" }, { status: 503 });
+  }
+
+  const stripe = getStripe();
+  const supabaseAdmin = getSupabaseAdmin();
+
+  const { data: profile } = await supabaseAdmin
+    .from("profiles")
+    .select("stripe_customer_id")
+    .eq("id", user.id)
+    .maybeSingle();
+
+  let customerId = profile?.stripe_customer_id as string | undefined;
+  if (!customerId) {
+    const customer = await stripe.customers.create({
+      email: user.email,
+      metadata: { user_id: user.id },
+    });
+    customerId = customer.id;
+    await supabaseAdmin.from("profiles").update({ stripe_customer_id: customerId }).eq("id", user.id);
+  }
+
+  const session = await stripe.checkout.sessions.create({
+    mode: "subscription",
+    customer: customerId,
+    line_items: [{ price: priceId, quantity: 1 }],
+    success_url: `${appUrl}/dashboard?checkout=success`,
+    cancel_url: `${appUrl}/dashboard?checkout=cancelled`,
+    subscription_data: { metadata: { user_id: user.id } },
+    allow_promotion_codes: true,
+  });
+
+  return NextResponse.json({ url: session.url });
+}

package/bundles/nextjs-saas/app/api/billing/portal/route.ts

@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server";
+import { getStripe } from "@/lib/stripe";
+import { createClient } from "@/lib/supabase/server";
+import { getSupabaseAdmin } from "@/lib/supabase/admin";
+
+export async function POST() {
+  const supabase = await createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const stripe = getStripe();
+  const supabaseAdmin = getSupabaseAdmin();
+
+  const { data: profile } = await supabaseAdmin
+    .from("profiles")
+    .select("stripe_customer_id")
+    .eq("id", user.id)
+    .maybeSingle();
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL;
+  if (!profile?.stripe_customer_id || !appUrl) {
+    return NextResponse.json({ error: "Billing profile is not configured" }, { status: 404 });
+  }
+
+  const session = await stripe.billingPortal.sessions.create({
+    customer: profile.stripe_customer_id,
+    return_url: `${appUrl}/dashboard`,
+  });
+  return NextResponse.json({ url: session.url });
+}