create-stackr 0.2.0

package/templates/features/web/auth/app/(app)/dashboard/dashboard-client.tsx.ejs

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { useSession } from "@/hooks/use-session";
+import type { User } from "@/lib/auth/actions";
+
+interface DashboardClientProps {
+  user: User;
+}
+
+export function DashboardClient({ user }: DashboardClientProps) {
+  const router = useRouter();
+  const { signOut } = useSession();
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleSignOut = async () => {
+    setIsSigningOut(true);
+    try {
+      await signOut();
+      router.push("/login");
+      router.refresh();
+    } catch (error) {
+      console.error("Sign out error:", error);
+      setIsSigningOut(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* User Profile Card */}
+      <div className="rounded-xl border bg-card/50 dark:bg-transparent dark:border-border/50 p-6 shadow-sm dark:shadow-none">
+        <div className="flex items-start gap-4">
+          {/* Avatar */}
+          {user.image ? (
+            <img
+              src={user.image}
+              alt={user.name || "Profile"}
+              className="w-16 h-16 rounded-full object-cover ring-2 ring-border"
+            />
+          ) : (
+            <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center ring-2 ring-border">
+              <span className="text-xl font-semibold text-primary">
+                {(user.name || user.email).charAt(0).toUpperCase()}
+              </span>
+            </div>
+          )}
+
+          {/* User Details */}
+          <div className="flex-1 space-y-1.5">
+            {user.name && (
+              <h2 className="text-lg font-semibold tracking-tight">{user.name}</h2>
+            )}
+            <p className="text-muted-foreground">{user.email}</p>
+
+            {/* Email Verification Status */}
+            <div className="flex items-center gap-2 pt-1">
+              {user.emailVerified ? (
+                <span className="inline-flex items-center gap-1.5 text-sm text-green-600 dark:text-green-400">
+                  <svg
+                    className="w-4 h-4"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  Email verified
+                </span>
+              ) : (
+                <span className="inline-flex items-center gap-1.5 text-sm text-amber-600 dark:text-amber-400">
+                  <svg
+                    className="w-4 h-4"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  Email not verified
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+<% if (features.sessionManagement) { %>
+      {/* Quick Links Card */}
+      <div className="rounded-xl border bg-card/50 dark:bg-transparent dark:border-border/50 shadow-sm dark:shadow-none">
+        <div className="px-6 py-4 border-b dark:border-border/50">
+          <h3 className="text-base font-medium">Quick Links</h3>
+        </div>
+        <div className="p-2">
+          <Link
+            href="/settings/sessions"
+            className="flex items-center justify-between p-3 rounded-lg hover:bg-muted/50 transition-colors group"
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-lg bg-muted/50 dark:bg-muted/30 flex items-center justify-center group-hover:bg-muted transition-colors">
+                <svg
+                  className="w-5 h-5 text-muted-foreground"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <span className="font-medium">Active Sessions</span>
+                <p className="text-sm text-muted-foreground">Manage your devices</p>
+              </div>
+            </div>
+            <svg
+              className="w-5 h-5 text-muted-foreground group-hover:translate-x-0.5 transition-transform"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </Link>
+        </div>
+      </div>
+<% } %>
+
+      {/* Sign Out Section */}
+      <div className="rounded-xl border border-dashed bg-muted/30 dark:bg-transparent dark:border-border/50 p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="font-medium">Sign out</p>
+            <p className="text-sm text-muted-foreground">
+              End your current session
+            </p>
+          </div>
+          <Button
+            variant="destructive"
+            onClick={handleSignOut}
+            disabled={isSigningOut}
+          >
+            {isSigningOut ? "Signing out..." : "Sign out"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/features/web/auth/app/(app)/dashboard/page.tsx.ejs

@@ -0,0 +1,24 @@
+import { redirect } from "next/navigation";
+import { getSession } from "@/lib/auth/actions";
+import { DashboardClient } from "./dashboard-client";
+
+export default async function DashboardPage() {
+  const session = await getSession();
+  if (!session) {
+    redirect("/login?redirect=/dashboard");
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Page Header */}
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome back, {session.user.name || session.user.email}
+        </p>
+      </div>
+
+      <DashboardClient user={session.user} />
+    </div>
+  );
+}

package/templates/features/web/auth/app/(app)/layout.tsx.ejs

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen flex flex-col bg-background">
+      {/* App Header - matching landing page style */}
+      <header className="w-full border-b bg-background/80 backdrop-blur-sm sticky top-0 z-50">
+        <div className="max-w-4xl mx-auto px-6 h-16 flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            <Link href="/dashboard" className="text-xl font-semibold tracking-tight">
+              <%= projectName %>
+            </Link>
+            <nav className="hidden sm:flex items-center gap-6">
+              <Link
+                href="/dashboard"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Dashboard
+              </Link>
+<% if (features.sessionManagement) { %>
+              <Link
+                href="/settings/sessions"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Sessions
+              </Link>
+<% } %>
+            </nav>
+          </div>
+          <ThemeToggle />
+        </div>
+      </header>
+
+      {/* Main content area */}
+      <main className="flex-1">
+        <div className="max-w-4xl mx-auto px-6 py-8">
+          {children}
+        </div>
+      </main>
+    </div>
+  );
+}

package/templates/features/web/auth/app/(app)/settings/sessions/page.tsx.ejs

@@ -0,0 +1,29 @@
+import { redirect } from "next/navigation";
+import { getSession } from "@/lib/auth/actions";
+import { listSessions } from "@/lib/auth/sessions";
+import { SessionsClient } from "./sessions-client";
+
+export default async function SessionsPage() {
+  const authSession = await getSession();
+  if (!authSession) {
+    redirect("/login?redirect=/settings/sessions");
+  }
+
+  const { sessions } = await listSessions();
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold tracking-tight">Active Sessions</h1>
+        <p className="text-muted-foreground">
+          Manage your active sessions across devices. You can revoke access to any session except your current one.
+        </p>
+      </div>
+
+      <SessionsClient
+        sessions={sessions}
+        currentSessionId={authSession.session.id}
+      />
+    </div>
+  );
+}

package/templates/features/web/auth/app/(app)/settings/sessions/sessions-client.tsx.ejs

@@ -0,0 +1,77 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { SessionCard } from "@/components/settings/session-card";
+import { type SessionInfo } from "@/lib/auth/sessions";
+
+interface SessionsClientProps {
+  sessions: SessionInfo[];
+  currentSessionId?: string;
+}
+
+export function SessionsClient({ sessions, currentSessionId }: SessionsClientProps) {
+  const otherSessions = sessions.filter((s) => s.id !== currentSessionId);
+  const currentSession = sessions.find((s) => s.id === currentSessionId);
+
+  const handleRevokeAll = () => {
+    // Session revocation requires WebSocket support for proper real-time notification
+    // Without it, the revoked devices would experience broken states (401 errors, failed forms)
+    alert("Session revocation will be available after WebSocket support is implemented.");
+  };
+
+  if (sessions.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        No active sessions found.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Revoke All Button */}
+      {otherSessions.length > 0 && (
+        <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
+          <div>
+            <p className="font-medium">Sign out of other sessions</p>
+            <p className="text-sm text-muted-foreground">
+              This will revoke access from {otherSessions.length} other{" "}
+              {otherSessions.length === 1 ? "session" : "sessions"}.
+            </p>
+          </div>
+          <Button
+            variant="destructive"
+            onClick={handleRevokeAll}
+          >
+            Revoke all
+          </Button>
+        </div>
+      )}
+
+      {/* Session List */}
+      <div className="space-y-3">
+        {/* Current Session First */}
+        {currentSession && (
+          <SessionCard
+            session={currentSession}
+            isCurrentSession={true}
+          />
+        )}
+
+        {/* Other Sessions */}
+        {otherSessions.map((session) => (
+          <SessionCard
+            key={session.id}
+            session={session}
+            isCurrentSession={false}
+          />
+        ))}
+      </div>
+
+      {/* Session Count */}
+      <p className="text-sm text-muted-foreground text-center">
+        {sessions.length} active {sessions.length === 1 ? "session" : "sessions"}
+      </p>
+    </div>
+  );
+}

package/templates/features/web/auth/app/(auth)/forgot-password/page.tsx.ejs

@@ -0,0 +1,127 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { requestPasswordReset } from "@/lib/auth/actions";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      const result = await requestPasswordReset(email);
+
+      if (!result.success) {
+        setError(result.error || "Failed to send reset email");
+        return;
+      }
+
+      setIsSuccess(true);
+    } catch (err) {
+      setError("An unexpected error occurred");
+      console.error("Password reset request error:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isSuccess) {
+    return (
+      <div className="space-y-6">
+        <div className="space-y-2 text-center">
+          <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-950/20 rounded-full flex items-center justify-center">
+            <svg
+              className="w-6 h-6 text-green-600 dark:text-green-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          </div>
+          <h2 className="text-2xl font-bold">Check your email</h2>
+          <p className="text-muted-foreground">
+            We&apos;ve sent a password reset link to <strong>{email}</strong>
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <p className="text-sm text-muted-foreground text-center">
+            Didn&apos;t receive the email? Check your spam folder or{" "}
+            <button
+              onClick={() => setIsSuccess(false)}
+              className="text-primary hover:underline"
+            >
+              try again
+            </button>
+          </p>
+
+          <Link href="/login">
+            <Button variant="outline" className="w-full">
+              Back to sign in
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2 text-center">
+        <h2 className="text-2xl font-bold">Forgot password?</h2>
+        <p className="text-muted-foreground">
+          Enter your email and we&apos;ll send you a reset link
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <label htmlFor="email" className="text-sm font-medium">
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@example.com"
+            required
+            disabled={isLoading}
+            className="w-full px-3 py-2 border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
+          />
+        </div>
+
+        {error && (
+          <div className="p-3 text-sm text-red-500 bg-red-50 dark:bg-red-950/20 rounded-md">
+            {error}
+          </div>
+        )}
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? "Sending..." : "Send reset link"}
+        </Button>
+      </form>
+
+      <p className="text-center text-sm text-muted-foreground">
+        Remember your password?{" "}
+        <Link href="/login" className="text-primary hover:underline">
+          Sign in
+        </Link>
+      </p>
+    </div>
+  );
+}

package/templates/features/web/auth/app/(auth)/layout.tsx.ejs

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen flex flex-col bg-background">
+      {/* Header matching landing page style */}
+      <header className="w-full border-b bg-background/80 backdrop-blur-sm sticky top-0 z-50">
+        <div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+          <Link href="/" className="text-xl font-semibold tracking-tight">
+            <%= projectName %>
+          </Link>
+          <ThemeToggle />
+        </div>
+      </header>
+
+      {/* Centered auth card */}
+      <main className="flex-1 flex items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md space-y-6">
+          {/* Custom auth card - clean in both modes */}
+          <div className="rounded-xl border bg-card/50 dark:bg-transparent dark:border-border/50 p-6 shadow-sm dark:shadow-none">
+            {children}
+          </div>
+
+          <p className="text-center text-sm text-muted-foreground">
+            &copy; {new Date().getFullYear()} <%= projectName %>. All rights reserved.
+          </p>
+        </div>
+      </main>
+    </div>
+  );
+}

package/templates/features/web/auth/app/(auth)/login/page.tsx.ejs

@@ -0,0 +1,35 @@
+import { LoginForm } from "@/components/auth/login-form";
+import { OAuthButtons } from "@/components/auth/oauth-buttons";
+
+interface LoginPageProps {
+  searchParams: Promise<{
+    redirect?: string;
+    error?: string;
+  }>;
+}
+
+export default async function LoginPage({ searchParams }: LoginPageProps) {
+  const params = await searchParams;
+  const { redirect, error } = params;
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2 text-center">
+        <h2 className="text-2xl font-bold">Welcome back</h2>
+        <p className="text-muted-foreground">
+          Sign in to your account to continue
+        </p>
+      </div>
+
+      {error && (
+        <div className="p-3 text-sm text-red-500 bg-red-50 dark:bg-red-950/20 rounded-md">
+          {decodeURIComponent(error)}
+        </div>
+      )}
+
+      <LoginForm redirectTo={redirect || "/dashboard"} />
+
+      <OAuthButtons mode="login" />
+    </div>
+  );
+}

package/templates/features/web/auth/app/(auth)/register/page.tsx.ejs

@@ -0,0 +1,19 @@
+import { RegisterForm } from "@/components/auth/register-form";
+import { OAuthButtons } from "@/components/auth/oauth-buttons";
+
+export default function RegisterPage() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2 text-center">
+        <h2 className="text-2xl font-bold">Create an account</h2>
+        <p className="text-muted-foreground">
+          Enter your details to get started
+        </p>
+      </div>
+
+      <RegisterForm />
+
+      <OAuthButtons mode="register" />
+    </div>
+  );
+}

package/templates/features/web/auth/app/(auth)/reset-password/page.tsx.ejs

@@ -0,0 +1,40 @@
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { PasswordResetForm } from "@/components/auth/password-reset-form";
+
+interface ResetPasswordPageProps {
+  searchParams: Promise<{
+    token?: string;
+  }>;
+}
+
+export default async function ResetPasswordPage({ searchParams }: ResetPasswordPageProps) {
+  const params = await searchParams;
+  const { token } = params;
+
+  // Redirect if no token provided
+  if (!token) {
+    redirect("/forgot-password");
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2 text-center">
+        <h2 className="text-2xl font-bold">Reset your password</h2>
+        <p className="text-muted-foreground">
+          Enter your new password below
+        </p>
+      </div>
+
+      <PasswordResetForm token={token} />
+
+      <p className="text-center text-sm text-muted-foreground">
+        Remember your password?{" "}
+        <Link href="/login" className="text-primary hover:underline">
+          Sign in
+        </Link>
+      </p>
+    </div>
+  );
+}