@getjack/jack 0.1.19 → 0.1.22

package/templates/saas/src/client/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,153 @@
+import { useState } from "react";
+import { authClient } from "../lib/auth-client";
+import { toast } from "sonner";
+import { ThemeToggle } from "../components/ThemeToggle";
+import { Button } from "../components/ui/button";
+
+interface ForgotPasswordPageProps {
+	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+}
+
+export default function ForgotPasswordPage({ navigate }: ForgotPasswordPageProps) {
+	const [email, setEmail] = useState("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [submitted, setSubmitted] = useState(false);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setIsLoading(true);
+
+		try {
+			const result = await authClient.requestPasswordReset({
+				email,
+				redirectTo: `${window.location.origin}/#/reset-password`,
+			});
+
+			if (result.error) {
+				toast.error("Failed to send reset email", {
+					description: result.error.message || "Please try again.",
+				});
+				setIsLoading(false);
+				return;
+			}
+
+			setSubmitted(true);
+			toast.success("Reset email sent", {
+				description: "Check your inbox for the reset link.",
+			});
+		} catch (err) {
+			toast.error("An unexpected error occurred");
+		}
+
+		setIsLoading(false);
+	};
+
+	return (
+		<div className="min-h-screen bg-background flex flex-col">
+			{/* Navigation */}
+			<nav className="border-b border-border">
+				<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="flex justify-between items-center h-16">
+						<button
+							type="button"
+							onClick={() => navigate("/")}
+							className="text-xl font-bold hover:opacity-80 transition-opacity"
+						>
+							jack-template
+						</button>
+						<ThemeToggle />
+					</div>
+				</div>
+			</nav>
+
+			{/* Form */}
+			<div className="flex-1 flex items-center justify-center px-4 py-12">
+				<div className="w-full max-w-md">
+					<div className="text-center mb-8">
+						<h1 className="text-2xl font-bold mb-2">Reset your password</h1>
+						<p className="text-muted-foreground">
+							{submitted
+								? "Check your email for a reset link"
+								: "Enter your email and we'll send you a reset link"}
+						</p>
+					</div>
+
+					{submitted ? (
+						<div className="space-y-4">
+							<div className="p-4 bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800 rounded-lg text-center">
+								<p className="text-green-800 dark:text-green-200">
+									If an account exists for {email}, you'll receive an email with instructions.
+								</p>
+							</div>
+							<Button
+								type="button"
+								variant="outline"
+								className="w-full"
+								onClick={() => navigate("/login")}
+							>
+								Back to login
+							</Button>
+						</div>
+					) : (
+						<form onSubmit={handleSubmit} className="space-y-4">
+							<div>
+								<label htmlFor="email" className="block text-sm font-medium mb-2">
+									Email
+								</label>
+								<input
+									id="email"
+									type="email"
+									value={email}
+									onChange={(e) => setEmail(e.target.value)}
+									placeholder="you@example.com"
+									required
+									className="w-full px-3 py-2 border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+								/>
+							</div>
+
+							<Button type="submit" className="w-full" disabled={isLoading}>
+								{isLoading ? (
+									<>
+										<svg
+											className="animate-spin -ml-1 mr-2 h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+										>
+											<circle
+												className="opacity-25"
+												cx="12"
+												cy="12"
+												r="10"
+												stroke="currentColor"
+												strokeWidth="4"
+											/>
+											<path
+												className="opacity-75"
+												fill="currentColor"
+												d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+											/>
+										</svg>
+										Sending...
+									</>
+								) : (
+									"Send reset link"
+								)}
+							</Button>
+
+							<p className="text-center text-sm text-muted-foreground">
+								Remember your password?{" "}
+								<button
+									type="button"
+									onClick={() => navigate("/login")}
+									className="text-primary hover:underline"
+								>
+									Sign in
+								</button>
+							</p>
+						</form>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}

package/templates/saas/src/client/pages/HomePage.tsx

@@ -0,0 +1,285 @@
+import { useEffect, useState } from "react";
+import { authClient } from "../lib/auth-client";
+import { ThemeToggle } from "../components/ThemeToggle";
+
+interface HomePageProps {
+	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+}
+
+export default function HomePage({ navigate }: HomePageProps) {
+	const [isLoggedIn, setIsLoggedIn] = useState(false);
+	const [isLoading, setIsLoading] = useState(true);
+
+	useEffect(() => {
+		authClient.getSession().then((result) => {
+			setIsLoggedIn(!!result.data?.user);
+			setIsLoading(false);
+		});
+	}, []);
+
+	return (
+		<div className="min-h-screen bg-background">
+			{/* Navigation */}
+			<nav className="border-b border-border">
+				<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="flex justify-between items-center h-16">
+						<div className="flex items-center">
+							<span className="text-xl font-bold">jack-template</span>
+						</div>
+						<div className="flex items-center gap-4">
+							<button
+								type="button"
+								onClick={() => navigate("/pricing")}
+								className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+							>
+								Pricing
+							</button>
+							<ThemeToggle />
+							{!isLoading && !isLoggedIn && (
+								<button
+									type="button"
+									onClick={() => navigate("/login")}
+									className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+								>
+									Log in
+								</button>
+							)}
+							<button
+								type="button"
+								onClick={() => navigate(isLoggedIn ? "/dashboard" : "/signup")}
+								className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:opacity-90 transition-opacity text-sm font-medium min-w-[100px]"
+							>
+								{isLoggedIn ? "Dashboard" : "Get started"}
+							</button>
+						</div>
+					</div>
+				</div>
+			</nav>
+
+			{/* Hero Section */}
+			<section className="py-20 px-4 sm:px-6 lg:px-8">
+				<div className="max-w-4xl mx-auto text-center">
+					<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6">
+						Build your SaaS faster than ever
+					</h1>
+					<p className="text-lg sm:text-xl text-muted-foreground mb-10 max-w-2xl mx-auto">
+						A production-ready template with authentication, payments, and everything you need to
+						launch your next project in minutes, not months.
+					</p>
+					<div className="flex flex-col sm:flex-row gap-4 justify-center">
+						<button
+							type="button"
+							onClick={() => navigate(isLoggedIn ? "/dashboard" : "/signup")}
+							className="px-8 py-3 bg-primary text-primary-foreground rounded-md hover:opacity-90 transition-opacity text-base font-medium min-w-[160px]"
+						>
+							{isLoggedIn ? "Go to Dashboard" : "Start for free"}
+						</button>
+						<button
+							type="button"
+							onClick={() => navigate("/pricing")}
+							className="px-8 py-3 border border-border rounded-md hover:bg-accent transition-colors text-base font-medium"
+						>
+							View pricing
+						</button>
+					</div>
+				</div>
+			</section>
+
+			{/* Features Section */}
+			<section className="py-20 px-4 sm:px-6 lg:px-8 bg-muted/50">
+				<div className="max-w-6xl mx-auto">
+					<div className="text-center mb-16">
+						<h2 className="text-3xl font-bold mb-4">Everything you need to ship</h2>
+						<p className="text-muted-foreground max-w-2xl mx-auto">
+							Focus on building your product, not reinventing authentication, payments, or
+							infrastructure.
+						</p>
+					</div>
+					<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+						{/* Feature 1 */}
+						<div className="p-6 bg-card rounded-lg border border-border">
+							<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+								<svg
+									className="w-6 h-6 text-primary"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+									/>
+								</svg>
+							</div>
+							<h3 className="font-semibold mb-2">Authentication</h3>
+							<p className="text-sm text-muted-foreground">
+								Secure email/password auth with sessions, powered by Better Auth.
+							</p>
+						</div>
+
+						{/* Feature 2 */}
+						<div className="p-6 bg-card rounded-lg border border-border">
+							<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+								<svg
+									className="w-6 h-6 text-primary"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+									/>
+								</svg>
+							</div>
+							<h3 className="font-semibold mb-2">Payments</h3>
+							<p className="text-sm text-muted-foreground">
+								Stripe integration for subscriptions, one-time payments, and billing.
+							</p>
+						</div>
+
+						{/* Feature 3 */}
+						<div className="p-6 bg-card rounded-lg border border-border">
+							<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+								<svg
+									className="w-6 h-6 text-primary"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"
+									/>
+								</svg>
+							</div>
+							<h3 className="font-semibold mb-2">Database</h3>
+							<p className="text-sm text-muted-foreground">
+								Cloudflare D1 database with Drizzle ORM for type-safe queries.
+							</p>
+						</div>
+
+						{/* Feature 4 */}
+						<div className="p-6 bg-card rounded-lg border border-border">
+							<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
+								<svg
+									className="w-6 h-6 text-primary"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth={2}
+										d="M13 10V3L4 14h7v7l9-11h-7z"
+									/>
+								</svg>
+							</div>
+							<h3 className="font-semibold mb-2">Edge Deployment</h3>
+							<p className="text-sm text-muted-foreground">
+								Deploy globally on Cloudflare Workers for blazing fast performance.
+							</p>
+						</div>
+					</div>
+				</div>
+			</section>
+
+			{/* Pricing Preview Section */}
+			<section className="py-20 px-4 sm:px-6 lg:px-8">
+				<div className="max-w-4xl mx-auto text-center">
+					<h2 className="text-3xl font-bold mb-4">Simple, transparent pricing</h2>
+					<p className="text-muted-foreground mb-10">
+						Start free and upgrade as you grow. No hidden fees, no surprises.
+					</p>
+					<div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
+						<div className="p-6 bg-card rounded-lg border border-border text-left w-full sm:w-64">
+							<h3 className="font-semibold mb-1">Free</h3>
+							<p className="text-2xl font-bold mb-2">
+								$0<span className="text-sm font-normal text-muted-foreground">/mo</span>
+							</p>
+							<p className="text-sm text-muted-foreground">Perfect for getting started</p>
+						</div>
+						<div className="p-6 bg-card rounded-lg border-2 border-primary text-left w-full sm:w-64">
+							<h3 className="font-semibold mb-1">Pro</h3>
+							<p className="text-2xl font-bold mb-2">
+								$19<span className="text-sm font-normal text-muted-foreground">/mo</span>
+							</p>
+							<p className="text-sm text-muted-foreground">For growing businesses</p>
+						</div>
+						<div className="p-6 bg-card rounded-lg border border-border text-left w-full sm:w-64">
+							<h3 className="font-semibold mb-1">Enterprise</h3>
+							<p className="text-2xl font-bold mb-2">
+								$99<span className="text-sm font-normal text-muted-foreground">/mo</span>
+							</p>
+							<p className="text-sm text-muted-foreground">For large scale operations</p>
+						</div>
+					</div>
+					<button
+						type="button"
+						onClick={() => navigate("/pricing")}
+						className="mt-8 text-sm text-primary hover:underline"
+					>
+						See full pricing details
+					</button>
+				</div>
+			</section>
+
+			{/* Footer */}
+			<footer className="border-t border-border py-12 px-4 sm:px-6 lg:px-8">
+				<div className="max-w-6xl mx-auto">
+					<div className="flex flex-col md:flex-row justify-between items-center gap-6">
+						<div className="flex items-center gap-2">
+							<span className="font-bold">jack-template</span>
+							<span className="text-muted-foreground text-sm">Built with Jack</span>
+						</div>
+						<div className="flex gap-6">
+							<button
+								type="button"
+								onClick={() => navigate("/pricing")}
+								className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+							>
+								Pricing
+							</button>
+							{isLoggedIn ? (
+								<button
+									type="button"
+									onClick={() => navigate("/dashboard")}
+									className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+								>
+									Dashboard
+								</button>
+							) : (
+								<>
+									<button
+										type="button"
+										onClick={() => navigate("/login")}
+										className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+									>
+										Log in
+									</button>
+									<button
+										type="button"
+										onClick={() => navigate("/signup")}
+										className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+									>
+										Sign up
+									</button>
+								</>
+							)}
+						</div>
+					</div>
+					<div className="mt-8 pt-8 border-t border-border text-center text-sm text-muted-foreground">
+						&copy; {new Date().getFullYear()} jack-template. All rights reserved.
+					</div>
+				</div>
+			</footer>
+		</div>
+	);
+}

package/templates/saas/src/client/pages/LoginPage.tsx

@@ -0,0 +1,169 @@
+import { useState } from "react";
+import { authClient } from "../lib/auth-client";
+import { ThemeToggle } from "../components/ThemeToggle";
+
+interface LoginPageProps {
+	navigate: (route: "/" | "/login" | "/signup" | "/pricing" | "/dashboard" | "/forgot-password" | "/reset-password") => void;
+}
+
+export default function LoginPage({ navigate }: LoginPageProps) {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setError(null);
+		setIsLoading(true);
+
+		try {
+			const result = await authClient.signIn.email({
+				email,
+				password,
+			});
+
+			if (result.error) {
+				setError(result.error.message || "Failed to sign in. Please check your credentials.");
+				setIsLoading(false);
+				return;
+			}
+
+			navigate("/dashboard");
+		} catch (err) {
+			setError("An unexpected error occurred. Please try again.");
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<div className="min-h-screen bg-background flex flex-col">
+			{/* Navigation */}
+			<nav className="border-b border-border">
+				<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+					<div className="flex justify-between items-center h-16">
+						<button
+							type="button"
+							onClick={() => navigate("/")}
+							className="text-xl font-bold hover:opacity-80 transition-opacity"
+						>
+							jack-template
+						</button>
+						<ThemeToggle />
+					</div>
+				</div>
+			</nav>
+
+			{/* Login Form */}
+			<div className="flex-1 flex items-center justify-center px-4 py-12">
+				<div className="w-full max-w-md">
+					<div className="text-center mb-8">
+						<h1 className="text-2xl font-bold mb-2">Welcome back</h1>
+						<p className="text-muted-foreground">Sign in to your account to continue</p>
+					</div>
+
+					<form onSubmit={handleSubmit} className="space-y-4">
+						{error && (
+							<div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+								<p className="text-sm text-destructive">{error}</p>
+							</div>
+						)}
+
+						<div>
+							<label htmlFor="email" className="block text-sm font-medium mb-2">
+								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 border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+							/>
+						</div>
+
+						<div>
+							<div className="flex items-center justify-between mb-2">
+								<label htmlFor="password" className="text-sm font-medium">
+									Password
+								</label>
+								<button
+									type="button"
+									onClick={() => navigate("/forgot-password")}
+									className="text-sm text-primary hover:underline"
+								>
+									Forgot password?
+								</button>
+							</div>
+							<input
+								id="password"
+								type="password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								placeholder="Enter your password"
+								required
+								disabled={isLoading}
+								className="w-full px-3 py-2 border border-input rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed"
+							/>
+						</div>
+
+						<button
+							type="submit"
+							disabled={isLoading}
+							className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md hover:opacity-90 transition-opacity font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+						>
+							{isLoading ? (
+								<>
+									<svg className="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+										<circle
+											className="opacity-25"
+											cx="12"
+											cy="12"
+											r="10"
+											stroke="currentColor"
+											strokeWidth="4"
+										/>
+										<path
+											className="opacity-75"
+											fill="currentColor"
+											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+										/>
+									</svg>
+									Signing in...
+								</>
+							) : (
+								"Sign in"
+							)}
+						</button>
+					</form>
+
+					<div className="mt-6 text-center">
+						<p className="text-sm text-muted-foreground">
+							Don't have an account?{" "}
+							<button
+								type="button"
+								onClick={() => navigate("/signup")}
+								className="text-primary hover:underline font-medium"
+							>
+								Sign up
+							</button>
+						</p>
+					</div>
+
+					<div className="mt-4 text-center">
+						<button
+							type="button"
+							onClick={() => navigate("/")}
+							className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+						>
+							Back to home
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}