From ce97a1096e615e0837fa9e8c3bae372e73b1ec58 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Wed, 10 Sep 2025 20:47:40 -0300
Subject: [PATCH] feat: add auth layout component with shared sign-in/sign-up
 forms

---
 apps/web/src/components/auth-layout.tsx  |  69 ++++++++
 apps/web/src/components/sign-in-form.tsx | 152 ++++++++----------
 apps/web/src/components/sign-up-form.tsx | 191 ++++++++++-------------
 apps/web/src/routes/login.tsx            |  58 ++++++-
 4 files changed, 272 insertions(+), 198 deletions(-)
 create mode 100644 apps/web/src/components/auth-layout.tsx

diff --git a/apps/web/src/components/auth-layout.tsx b/apps/web/src/components/auth-layout.tsx
new file mode 100644
index 0000000..fe9ccae
--- /dev/null
+++ b/apps/web/src/components/auth-layout.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { Link } from "@tanstack/react-router";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
+
+export default function AuthLayout({
+  title,
+  subtitle,
+  children,
+  footer,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  return (
+    <div className="relative min-h-[100svh] w-full overflow-hidden">
+      {/* Background aesthetics */}
+      <div className="pointer-events-none absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(1200px_600px_at_50%_-10%,hsl(262_84%_60%/.25),transparent_60%),radial-gradient(800px_400px_at_110%_10%,hsl(292_84%_60%/.15),transparent_60%),radial-gradient(800px_400px_at_-10%_10%,hsl(202_84%_60%/.12),transparent_60%)]" />
+        <div className="absolute inset-0 bg-grid-white/5 [mask-image:radial-gradient(1000px_600px_at_center,black,transparent)]" />
+      </div>
+
+      <div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-0 px-4 py-10 lg:min-h-[100svh] lg:grid-cols-2 lg:gap-8 lg:px-8 lg:py-16">
+        {/* Marketing / Brand panel */}
+        <aside className="relative hidden flex-col justify-between lg:flex">
+          <div>
+            <Link className="inline-flex items-center gap-2" to="/">
+              <span
+                aria-hidden
+                className="inline-block h-7 w-7 rounded bg-gradient-to-br from-purple-500 to-fuchsia-500 shadow-md shadow-fuchsia-500/20"
+              />
+              <span className="text-lg font-semibold tracking-tight">Reflecto</span>
+            </Link>
+
+            <div className="mt-16 max-w-lg">
+              <h1 className="text-balance text-4xl font-semibold leading-tight tracking-tight">
+                {title}
+              </h1>
+              {subtitle ? (
+                <p className="mt-4 text-muted-foreground text-base">{subtitle}</p>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="mt-16 select-none text-sm text-muted-foreground">
+            <p>© {new Date().getFullYear()} Reflecto. All rights reserved.</p>
+          </div>
+        </aside>
+
+        {/* Form panel */}
+        <main className="flex items-center justify-center">
+          <div className="w-full max-w-md">
+            <Card className="bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:bg-zinc-900/80">
+              <CardHeader>
+                <CardTitle className="text-2xl">{title}</CardTitle>
+                {subtitle ? (
+                  <CardDescription>{subtitle}</CardDescription>
+                ) : null}
+              </CardHeader>
+              <CardContent>{children}</CardContent>
+            </Card>
+            {footer ? <div className="mt-4">{footer}</div> : null}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/sign-in-form.tsx b/apps/web/src/components/sign-in-form.tsx
index 2b59c81..8a8fbdd 100644
--- a/apps/web/src/components/sign-in-form.tsx
+++ b/apps/web/src/components/sign-in-form.tsx
@@ -64,95 +64,71 @@ export default function SignInForm({
   }
 
   return (
-    <div className="mx-auto mt-10 w-full max-w-md p-6">
-      <h1 className="mb-6 text-center font-bold text-3xl">Welcome Back</h1>
-
-      <form
-        className="space-y-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          form.handleSubmit();
-        }}
-      >
-        <div>
-          <form.Field name="email">
-            {(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Email</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  type="email"
-                  value={field.state.value}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p className="text-red-500" key={error?.message}>
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          </form.Field>
-        </div>
-
-        <div>
-          <form.Field name="password">
-            {(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Password</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  type="password"
-                  value={field.state.value}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p className="text-red-500" key={error?.message}>
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          </form.Field>
-        </div>
-
-        <form.Subscribe>
-          {(state) => (
-            <Button
-              className="w-full"
-              disabled={!state.canSubmit || state.isSubmitting}
-              type="submit"
-            >
-              {state.isSubmitting ? "Submitting..." : "Sign In"}
-            </Button>
+    <form
+      className="space-y-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        form.handleSubmit();
+      }}
+    >
+      <div>
+        <form.Field name="email">
+          {(field) => (
+            <div className="space-y-2">
+              <Label htmlFor={field.name}>Email</Label>
+              <Input
+                id={field.name}
+                name={field.name}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                type="email"
+                value={field.state.value}
+              />
+              {field.state.meta.errors.map((error) => (
+                <p className="text-red-500" key={error?.message}>
+                  {error?.message}
+                </p>
+              ))}
+            </div>
           )}
-        </form.Subscribe>
-      </form>
-
-      <div className="mt-4 space-y-2 text-center">
-        <div className="flex items-center justify-between">
-          <Button asChild className="px-0" variant="link">
-            <Link search={{ mode: "recover" }} to="/password">
-              Forgot password?
-            </Link>
-          </Button>
-          <Button asChild className="px-0" variant="link">
-            <Link to="/verify-email">Verify your email</Link>
-          </Button>
-        </div>
-        <Button
-          className="text-indigo-600 hover:text-indigo-800"
-          onClick={onSwitchToSignUp}
-          variant="link"
-        >
-          Need an account? Sign Up
-        </Button>
+        </form.Field>
       </div>
-    </div>
+
+      <div>
+        <form.Field name="password">
+          {(field) => (
+            <div className="space-y-2">
+              <Label htmlFor={field.name}>Password</Label>
+              <Input
+                id={field.name}
+                name={field.name}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                type="password"
+                value={field.state.value}
+              />
+              {field.state.meta.errors.map((error) => (
+                <p className="text-red-500" key={error?.message}>
+                  {error?.message}
+                </p>
+              ))}
+            </div>
+          )}
+        </form.Field>
+      </div>
+
+      <form.Subscribe>
+        {(state) => (
+          <Button
+            className="w-full"
+            disabled={!state.canSubmit || state.isSubmitting}
+            type="submit"
+          >
+            {state.isSubmitting ? "Submitting..." : "Sign In"}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
   );
 }
diff --git a/apps/web/src/components/sign-up-form.tsx b/apps/web/src/components/sign-up-form.tsx
index 7965289..bec60cf 100644
--- a/apps/web/src/components/sign-up-form.tsx
+++ b/apps/web/src/components/sign-up-form.tsx
@@ -66,112 +66,93 @@ export default function SignUpForm({
   }
 
   return (
-    <div className="mx-auto mt-10 w-full max-w-md p-6">
-      <h1 className="mb-6 text-center font-bold text-3xl">Create Account</h1>
-
-      <form
-        className="space-y-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          form.handleSubmit();
-        }}
-      >
-        <div>
-          <form.Field name="name">
-            {(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Name</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  value={field.state.value}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p className="text-red-500" key={error?.message}>
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          </form.Field>
-        </div>
-
-        <div>
-          <form.Field name="email">
-            {(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Email</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  type="email"
-                  value={field.state.value}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p className="text-red-500" key={error?.message}>
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          </form.Field>
-        </div>
-
-        <div>
-          <form.Field name="password">
-            {(field) => (
-              <div className="space-y-2">
-                <Label htmlFor={field.name}>Password</Label>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  type="password"
-                  value={field.state.value}
-                />
-                {field.state.meta.errors.map((error) => (
-                  <p className="text-red-500" key={error?.message}>
-                    {error?.message}
-                  </p>
-                ))}
-              </div>
-            )}
-          </form.Field>
-        </div>
-
-        <form.Subscribe>
-          {(state) => (
-            <Button
-              className="w-full"
-              disabled={!state.canSubmit || state.isSubmitting}
-              type="submit"
-            >
-              {state.isSubmitting ? "Submitting..." : "Sign Up"}
-            </Button>
+    <form
+      className="space-y-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        form.handleSubmit();
+      }}
+    >
+      <div>
+        <form.Field name="name">
+          {(field) => (
+            <div className="space-y-2">
+              <Label htmlFor={field.name}>Name</Label>
+              <Input
+                id={field.name}
+                name={field.name}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                value={field.state.value}
+              />
+              {field.state.meta.errors.map((error) => (
+                <p className="text-red-500" key={error?.message}>
+                  {error?.message}
+                </p>
+              ))}
+            </div>
           )}
-        </form.Subscribe>
-      </form>
-
-      <div className="mt-4 space-y-2 text-center">
-        <div className="flex items-center justify-between">
-          <Button asChild className="px-0" variant="link">
-            <Link to="/verify-email">Verify your email</Link>
-          </Button>
-          <Button
-            className="text-indigo-600 hover:text-indigo-800"
-            onClick={onSwitchToSignIn}
-            variant="link"
-          >
-            Already have an account? Sign In
-          </Button>
-        </div>
+        </form.Field>
       </div>
-    </div>
+
+      <div>
+        <form.Field name="email">
+          {(field) => (
+            <div className="space-y-2">
+              <Label htmlFor={field.name}>Email</Label>
+              <Input
+                id={field.name}
+                name={field.name}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                type="email"
+                value={field.state.value}
+              />
+              {field.state.meta.errors.map((error) => (
+                <p className="text-red-500" key={error?.message}>
+                  {error?.message}
+                </p>
+              ))}
+            </div>
+          )}
+        </form.Field>
+      </div>
+
+      <div>
+        <form.Field name="password">
+          {(field) => (
+            <div className="space-y-2">
+              <Label htmlFor={field.name}>Password</Label>
+              <Input
+                id={field.name}
+                name={field.name}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                type="password"
+                value={field.state.value}
+              />
+              {field.state.meta.errors.map((error) => (
+                <p className="text-red-500" key={error?.message}>
+                  {error?.message}
+                </p>
+              ))}
+            </div>
+          )}
+        </form.Field>
+      </div>
+
+      <form.Subscribe>
+        {(state) => (
+          <Button
+            className="w-full"
+            disabled={!state.canSubmit || state.isSubmitting}
+            type="submit"
+          >
+            {state.isSubmitting ? "Submitting..." : "Sign Up"}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
   );
 }
diff --git a/apps/web/src/routes/login.tsx b/apps/web/src/routes/login.tsx
index ac54a64..a3d172d 100644
--- a/apps/web/src/routes/login.tsx
+++ b/apps/web/src/routes/login.tsx
@@ -1,7 +1,9 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute, Link, redirect } from "@tanstack/react-router";
 import { useState } from "react";
 import SignInForm from "@/components/sign-in-form";
 import SignUpForm from "@/components/sign-up-form";
+import AuthLayout from "@/components/auth-layout";
+import { Button } from "@/components/ui/button";
 import { account } from "@/lib/auth-client";
 
 export const Route = createFileRoute("/login")({
@@ -27,9 +29,55 @@ export const Route = createFileRoute("/login")({
 function RouteComponent() {
   const [showSignIn, setShowSignIn] = useState(false);
 
-  return showSignIn ? (
-    <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
-  ) : (
-    <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+  const title = showSignIn ? "Welcome back" : "Create your account";
+  const subtitle = showSignIn
+    ? "Sign in to access your dashboard and keep creating."
+    : "Join Reflecto to capture ideas and collaborate seamlessly.";
+
+  return (
+    <AuthLayout
+      footer={
+        <div className="flex flex-col items-center gap-2 text-center sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <Button asChild className="px-0" variant="link">
+              <Link search={{ mode: "recover" }} to="/password">
+                Forgot password?
+              </Link>
+            </Button>
+            <Button asChild className="px-0" variant="link">
+              <Link to="/verify-email">Verify your email</Link>
+            </Button>
+          </div>
+
+          <div>
+            {showSignIn ? (
+              <Button
+                className="px-0 text-primary"
+                onClick={() => setShowSignIn(false)}
+                variant="link"
+              >
+                Need an account? Sign Up
+              </Button>
+            ) : (
+              <Button
+                className="px-0 text-primary"
+                onClick={() => setShowSignIn(true)}
+                variant="link"
+              >
+                Already have an account? Sign In
+              </Button>
+            )}
+          </div>
+        </div>
+      }
+      subtitle={subtitle}
+      title={title}
+    >
+      {showSignIn ? (
+        <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+      ) : (
+        <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+      )}
+    </AuthLayout>
   );
 }