Redesign marketing pages and isolate public routes from app auth.

Give the landing, legal, and sign-in flows a consistent product shell while keeping marketing pages free of tRPC/session calls, fixing dev auth URL handling, and refreshing env and deploy docs. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-26 02:00:06 -04:00
parent 82977b6dd8
commit 6ec26a4a0d
36 changed files with 1743 additions and 819 deletions
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";

+import { MarketingProviders } from "~/components/providers/marketing-providers";
 import { brand } from "~/lib/branding";

 export const metadata: Metadata = {
@@ -14,5 +15,5 @@ export default function LegalLayout({
 }: {
  children: React.ReactNode;
 }) {
-  return children;
+  return <MarketingProviders>{children}</MarketingProviders>;
 }
@@ -0,0 +1,9 @@
+import { MarketingProviders } from "~/components/providers/marketing-providers";
+
+export default function MarketingLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <MarketingProviders>{children}</MarketingProviders>;
+}
@@ -0,0 +1,14 @@
+import { LandingPage } from "~/components/marketing/landing-page";
+import { env } from "~/env";
+
+export const dynamic = "force-dynamic";
+
+export default function HomePage() {
+  const allowRegistration = env.DISABLE_SIGNUPS !== true;
+
+  return (
+    <main className="min-h-screen">
+      <LandingPage allowRegistration={allowRegistration} />
+    </main>
+  );
+}
@@ -0,0 +1,9 @@
+import { MarketingProviders } from "~/components/providers/marketing-providers";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <MarketingProviders>{children}</MarketingProviders>;
+}
@@ -4,7 +4,13 @@ import { SignInForm } from "./signin-form";

 export default function SignInPage() {
  return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense
+      fallback={
+        <div className="bg-dashboard text-muted-foreground flex min-h-screen items-center justify-center text-sm">
+          Loading…
+        </div>
+      }
+    >
      <SignInForm allowRegistration={env.DISABLE_SIGNUPS !== true} />
    </Suspense>
  );
@@ -1,17 +1,21 @@
 "use client";

-import { useState, Suspense } from "react";
+import { useState } from "react";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
-import { authClient } from "~/lib/auth-client";
-import { Card, CardContent } from "~/components/ui/card";
-import { Input } from "~/components/ui/input";
-import { Button } from "~/components/ui/button";
-import { Label } from "~/components/ui/label";
-import { toast } from "sonner";
-import { Logo } from "~/components/branding/logo";
+import { ArrowRight, Lock, Mail, Shield } from "lucide-react";
+import {
+  AuthCard,
+  AuthCardHeader,
+  AuthPageShell,
+} from "~/components/auth/auth-page-shell";
 import { LegalAgreementNotice } from "~/components/legal/legal-links";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
 import { env } from "~/env";
-import { Mail, Lock, ArrowRight, Shield } from "lucide-react";
+import { authClient } from "~/lib/auth-client";
+import { toast } from "sonner";

 interface SignInFormProps {
  allowRegistration: boolean;
@@ -41,11 +45,12 @@ export function SignInForm({ allowRegistration }: SignInFormProps) {
          ? error.message
          : "Invalid email or password",
      );
-    } else {
-      toast.success("Signed in successfully!");
-      router.push(callbackUrl);
-      router.refresh();
+      return;
    }
+
+    toast.success("Signed in successfully!");
+    router.push(callbackUrl);
+    router.refresh();
  }

  async function handleSocialSignIn() {
@@ -62,127 +67,108 @@ export function SignInForm({ allowRegistration }: SignInFormProps) {
  }

  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden">
-      <div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
-        <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/30 blur-3xl dark:bg-neutral-500/20"></div>
-      </div>
+    <AuthPageShell>
+      <AuthCard>
+        <AuthCardHeader
+          title="Welcome back"
+          description="Sign in to your workspace"
+        />

-      <Card className="mx-auto w-full max-w-md border-border/50 bg-background/80 backdrop-blur-xl">
-        <CardContent className="p-8">
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <Logo size="lg" />
-              <div>
-                <h1 className="font-heading text-2xl font-bold">Welcome back</h1>
-                <p className="text-muted-foreground text-sm">Sign in to your account</p>
+        {signupDisabled && (
+          <p className="bg-muted/50 text-muted-foreground mb-5 rounded-xl border px-3 py-2.5 text-sm">
+            New account registration is currently disabled.
+          </p>
+        )}
+
+        {authentikEnabled && (
+          <div className="mb-5 space-y-4">
+            <Button
+              variant="outline"
+              type="button"
+              className="h-11 w-full"
+              onClick={handleSocialSignIn}
+              disabled={loading}
+            >
+              <Shield className="mr-2 h-4 w-4" />
+              Sign in with Authentik
+            </Button>
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <span className="border-border/50 w-full border-t" />
+              </div>
+              <div className="relative flex justify-center text-xs uppercase">
+                <span className="bg-background/80 text-muted-foreground px-2">
+                  or
+                </span>
              </div>
            </div>
-
-            {signupDisabled && (
-              <div className="border-border bg-muted/50 text-muted-foreground rounded-lg border px-3 py-2 text-sm">
-                New account registration is currently disabled.
-              </div>
-            )}
-
-            {authentikEnabled && (
-              <div className="space-y-4">
-                <Button
-                  variant="outline"
-                  type="button"
-                  className="h-10 w-full"
-                  onClick={handleSocialSignIn}
-                  disabled={loading}
-                >
-                  <Shield className="mr-2 h-4 w-4" />
-                  Sign in with Authentik
-                </Button>
-                <div className="relative">
-                  <div className="absolute inset-0 flex items-center">
-                    <span className="border-border/50 w-full border-t" />
-                  </div>
-                  <div className="relative flex justify-center text-xs uppercase">
-                    <span className="bg-background text-muted-foreground px-2">or</span>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            <form onSubmit={handleSignIn} className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="email">Email</Label>
-                <div className="relative">
-                  <Mail className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2" />
-                  <Input
-                    id="email"
-                    type="email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    autoFocus
-                    className="h-10 pl-10"
-                    placeholder="you@example.com"
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="password">Password</Label>
-                  <a href="/auth/forgot-password" className="text-muted-foreground text-xs hover:underline">
-                    Forgot password?
-                  </a>
-                </div>
-                <div className="relative">
-                  <Lock className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2" />
-                  <Input
-                    id="password"
-                    type="password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                    className="h-10 pl-10"
-                    placeholder="••••••••"
-                  />
-                </div>
-              </div>
-
-              <Button type="submit" className="h-10 w-full" disabled={loading}>
-                {loading ? (
-                  <div className="flex items-center space-x-2">
-                    <div className="border-primary-foreground/30 border-t-primary-foreground h-4 w-4 animate-spin rounded-full border-2" />
-                    <span>Signing in…</span>
-                  </div>
-                ) : (
-                  <div className="flex items-center space-x-2">
-                    <span>Sign In</span>
-                    <ArrowRight className="h-4 w-4" />
-                  </div>
-                )}
-              </Button>
-            </form>
-
-            {allowRegistration && (
-              <p className="text-muted-foreground text-center text-sm">
-                Don&apos;t have an account?{" "}
-                <a href="/auth/register" className="text-foreground font-medium hover:underline">
-                  Sign up
-                </a>
-              </p>
-            )}
-
-            <LegalAgreementNotice action="signing in" />
          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
+        )}

-export default function SignInPageClient() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <SignInForm allowRegistration />
-    </Suspense>
+        <form onSubmit={handleSignIn} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <div className="relative">
+              <Mail className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoFocus
+                autoComplete="email"
+                className="h-11 pl-10"
+                placeholder="you@example.com"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between gap-2">
+              <Label htmlFor="password">Password</Label>
+              <Link
+                href="/auth/forgot-password"
+                className="text-muted-foreground text-xs hover:text-foreground hover:underline"
+              >
+                Forgot password?
+              </Link>
+            </div>
+            <div className="relative">
+              <Lock className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                autoComplete="current-password"
+                className="h-11 pl-10"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <Button type="submit" className="h-11 w-full" disabled={loading}>
+            {loading ? "Signing in…" : "Sign in"}
+            {!loading && <ArrowRight className="ml-2 h-4 w-4" />}
+          </Button>
+        </form>
+
+        {allowRegistration && !signupDisabled && (
+          <p className="text-muted-foreground mt-6 text-center text-sm">
+            Don&apos;t have an account?{" "}
+            <Link
+              href="/auth/register"
+              className="text-foreground font-medium hover:underline"
+            >
+              Create account
+            </Link>
+          </p>
+        )}
+
+        <LegalAgreementNotice action="signing in" className="mt-5" />
+      </AuthCard>
+    </AuthPageShell>
  );
 }
@@ -1,11 +1,24 @@
+import { redirect } from "next/navigation";
+import { AppProviders } from "~/components/providers/app-providers";
 import { DashboardShell } from "~/components/layout/dashboard-shell";
+import { getOptionalServerSessionFromHeaders } from "~/lib/auth-server";

 export const dynamic = "force-dynamic";

-export default function DashboardLayout({
+export default async function DashboardLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
-  return <DashboardShell>{children}</DashboardShell>;
+  const session = await getOptionalServerSessionFromHeaders();
+
+  if (!session?.user) {
+    redirect("/auth/signin?callbackUrl=/dashboard");
+  }
+
+  return (
+    <AppProviders>
+      <DashboardShell>{children}</DashboardShell>
+    </AppProviders>
+  );
 }
@@ -16,8 +16,7 @@ import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Skeleton } from "~/components/ui/skeleton";
 import { getEffectiveInvoiceStatus } from "~/lib/invoice-status";
-import { auth } from "~/lib/auth";
-import { headers } from "next/headers";
+import { getOptionalServerSessionFromHeaders } from "~/lib/auth-server";
 import { HydrateClient, api } from "~/trpc/server";
 import type { StoredInvoiceStatus } from "~/types/invoice";
 import { RevenueChart, InvoiceStatusChart, MonthlyMetricsChart } from "~/app/dashboard/_components/charts-client";
@@ -494,9 +493,7 @@ import { DashboardPageHeader } from "~/components/layout/page-header";
 // ... imports

 export default async function DashboardPage() {
-  const session = await auth.api.getSession({
-    headers: await headers(),
-  });
+  const session = await getOptionalServerSessionFromHeaders();
  const firstName = session?.user?.name?.split(" ")[0] ?? "User";

  // Fetch stats centrally
@@ -0,0 +1,17 @@
+"use client";
+
+import { MarketingProviders } from "~/components/providers/marketing-providers";
+import { TRPCReactProvider } from "~/trpc/react";
+
+/** Public invoice links need tRPC but not authenticated settings sync. */
+export default function PublicInvoiceLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <TRPCReactProvider>
+      <MarketingProviders>{children}</MarketingProviders>
+    </TRPCReactProvider>
+  );
+}
@@ -3,10 +3,7 @@ import "~/styles/globals.css";
 import { type Metadata } from "next";
 import localFont from "next/font/local";

-import { TRPCReactProvider } from "~/trpc/react";
 import { Toaster } from "~/components/ui/sonner";
-import { AnimationPreferencesProvider } from "~/components/providers/animation-preferences-provider";
-import { AppearanceProvider } from "~/components/providers/appearance-provider";
 import {
  brand,
  defaultBodyFontPreference,
@@ -17,6 +14,7 @@ import {
 } from "~/lib/branding";

 import { UmamiScript } from "~/components/analytics/umami-script";
+import { BrandBackground } from "~/components/layout/brand-background";

 export const metadata: Metadata = {
  title: `${brand.name} - Invoicing Made Simple`,
@@ -108,20 +106,11 @@ export default function RootLayout({
        />
      </head>
      <body className="bg-background text-foreground relative min-h-screen overflow-x-hidden font-sans antialiased">
-        <div className="brand-background pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
-          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
-          <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
-        </div>
+        <BrandBackground />

-        <TRPCReactProvider>
-          <AppearanceProvider>
-            <AnimationPreferencesProvider>
-              <div className="relative z-10">{children}</div>
-            </AnimationPreferencesProvider>
-          </AppearanceProvider>
-          <Toaster />
-          <UmamiScript />
-        </TRPCReactProvider>
+        <div className="relative z-10">{children}</div>
+        <Toaster />
+        <UmamiScript />
      </body>
    </html>
  );
@@ -1,110 +0,0 @@
-import Link from "next/link";
-import { ArrowRight, FileText, UserRound } from "lucide-react";
-import { AuthRedirect } from "~/components/AuthRedirect";
-import { Logo } from "~/components/branding/logo";
-import { Button } from "~/components/ui/button";
-import { env } from "~/env";
-import { brand } from "~/lib/branding";
-
-export const dynamic = "force-dynamic";
-
-export default function HomePage() {
-  const allowRegistration = env.DISABLE_SIGNUPS !== true;
-
-  return (
-    <main className="bg-background text-foreground min-h-screen">
-      <AuthRedirect />
-
-      <div className="mx-auto flex min-h-screen w-full max-w-5xl flex-col px-5 py-5 sm:px-6 lg:px-8">
-        <header className="flex items-center justify-between gap-4 border-b py-4">
-          <Logo animated={false} />
-          <nav className="flex items-center gap-2">
-            <Link href="/auth/signin">
-              <Button variant="ghost" size="sm">
-                Sign in
-              </Button>
-            </Link>
-            {allowRegistration && (
-              <Link href="/auth/register">
-                <Button size="sm">Create account</Button>
-              </Link>
-            )}
-          </nav>
-        </header>
-
-        <section className="grid flex-1 items-center gap-10 py-14 md:grid-cols-[1fr_320px] md:py-20">
-          <div className="max-w-2xl space-y-7">
-            <div className="space-y-4">
-              <p className="text-muted-foreground text-sm font-medium">
-                Personal invoicing
-              </p>
-              <h1 className="font-heading text-4xl leading-tight font-bold tracking-normal sm:text-5xl">
-                {brand.name} is a place to make and track invoices.
-              </h1>
-              <p className="text-muted-foreground max-w-xl text-base leading-7 sm:text-lg">
-                Built for one person managing real clients, real work, and the
-                small admin loop around getting paid.
-              </p>
-            </div>
-
-            <div className="flex flex-col gap-3 sm:flex-row">
-              <Link href="/auth/signin">
-                <Button size="lg" className="h-11 px-5">
-                  Open workspace
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Button>
-              </Link>
-              {allowRegistration && (
-                <Link href="/auth/register">
-                  <Button variant="outline" size="lg" className="h-11 px-5">
-                    Create account
-                  </Button>
-                </Link>
-              )}
-            </div>
-          </div>
-
-          <div className="border-border bg-card text-card-foreground rounded-xl border p-5 shadow-sm">
-            <div className="space-y-5">
-              <div className="flex items-start gap-3">
-                <div className="bg-primary/10 text-primary rounded-md p-2">
-                  <UserRound className="h-4 w-4" />
-                </div>
-                <div>
-                  <h2 className="text-sm font-semibold">Clients</h2>
-                  <p className="text-muted-foreground mt-1 text-sm leading-6">
-                    Keep the people and businesses you invoice in one place.
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-start gap-3 border-t pt-5">
-                <div className="bg-primary/10 text-primary rounded-md p-2">
-                  <FileText className="h-4 w-4" />
-                </div>
-                <div>
-                  <h2 className="text-sm font-semibold">Invoices</h2>
-                  <p className="text-muted-foreground mt-1 text-sm leading-6">
-                    Draft, send, mark paid, and export the PDF when you need it.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <footer className="text-muted-foreground flex flex-col gap-3 border-t py-5 text-sm sm:flex-row sm:items-center sm:justify-between">
-          <span>© 2026 {brand.name}</span>
-          <div className="flex gap-5">
-            <Link href="/privacy" className="hover:text-foreground">
-              Privacy Policy
-            </Link>
-            <Link href="/terms" className="hover:text-foreground">
-              Terms of Service
-            </Link>
-          </div>
-        </footer>
-      </div>
-    </main>
-  );
-}