@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

package/dist/templates/web/base/template/src/app/login/page.tsx

@@ -1,66 +1,116 @@
-'use client';
-
-import { 
-  LoginForm,
-  PageTransition,
-  MobileContainer,
-  NetworkAwareContent,
-  OfflineWrapper
-} from '@digilogiclabs/saas-factory-ui';
-import { createBrowserClient } from '@supabase/ssr';
-import React from 'react';
-
-export default function LoginPage() {
-  const supabase = createBrowserClient(
-    process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
-  );
-
-  const handleLogin = async (values: any) => {
-    await supabase.auth.signInWithPassword({
-      email: values.email,
-      password: values.password,
-    });
-  };
-
-  const handleGoogleLogin = async () => {
-    await supabase.auth.signInWithOAuth({
-      provider: 'google',
-      options: {
-        redirectTo: `${location.origin}/auth/callback`,
-      },
-    });
-  };
-
-  return (
-    <PageTransition type="slide" direction="horizontal" duration={300}>
-      <OfflineWrapper
-        cacheStrategy="network-first"
-        showOfflineIndicator={true}
-      >
-        <NetworkAwareContent
-          showOnOffline={
-            <div className="flex items-center justify-center min-h-screen bg-gray-100">
-              <div className="text-center p-6">
-                <h2 className="text-xl font-semibold mb-2">You're offline</h2>
-                <p className="text-gray-600">Please check your connection to sign in.</p>
-              </div>
-            </div>
-          }
-        >
-          <div className="flex items-center justify-center min-h-screen bg-gray-100">
-            <MobileContainer className="w-full max-w-md">
-              <LoginForm
-                onSubmit={handleLogin}
-                onGoogleSignIn={handleGoogleLogin}
-                authProvider="supabase"
-                mobileOptimized={true}
-                touchFriendly={true}
-              />
-            </MobileContainer>
-          </div>
-        </NetworkAwareContent>
-      </OfflineWrapper>
-    </PageTransition>
-  );
-}
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { useMockAuth } from '@/components/mock-auth-provider';
+import { MOCK_MODE } from '@/lib/mock';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { signIn, isAuthenticated } = useMockAuth();
+  const router = useRouter();
+
+  // Redirect if already signed in
+  useEffect(() => {
+    if (isAuthenticated) router.push('/dashboard');
+  }, [isAuthenticated, router]);
+
+  if (isAuthenticated) return null;
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    if (MOCK_MODE) {
+      // Mock mode: sign in immediately with mock user
+      signIn(email, password);
+      router.push('/dashboard');
+      return;
+    }
+
+    // TODO: [REAL_DATA] Replace with your auth provider's sign in
+    // Example (Supabase):
+    //   const { error } = await supabase.auth.signInWithPassword({ email, password });
+    // Example (NextAuth):
+    //   const result = await signIn('credentials', { email, password, redirect: false });
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || 'Sign in failed');
+        return;
+      }
+      router.push('/dashboard');
+    } catch {
+      setError('An unexpected error occurred');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-background px-4">
+      <div className="w-full max-w-sm">
+        <div className="rounded-xl border border-border bg-card p-8 shadow-sm">
+          <h1 className="text-2xl font-bold text-card-foreground mb-1">Sign In</h1>
+          <p className="text-sm text-muted-foreground mb-6">Welcome back. Sign in to continue.</p>
+
+          {MOCK_MODE && (
+            <div className="mb-4 rounded-lg bg-primary/10 p-3 text-xs text-primary">
+              <strong>Mock Mode:</strong> Any email/password will work. Click Sign In to continue.
+            </div>
+          )}
+
+          {error && (
+            <div className="mb-4 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">{error}</div>
+          )}
+
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">Email</label>
+              <input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                placeholder="you@example.com"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">Password</label>
+              <input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                placeholder="••••••••"
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? 'Signing in...' : 'Sign In'}
+            </Button>
+          </form>
+
+          <p className="mt-6 text-center text-sm text-muted-foreground">
+            Don&apos;t have an account?{' '}
+            <Link href="/signup" className="text-primary hover:underline">Sign up</Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/web/base/template/src/app/page.tsx

@@ -1,193 +1,97 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { ArrowRight, Zap, Shield, Rocket, LogOut } from 'lucide-react'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { 
-  MobileHero, 
-  LazyImage, 
-  ProgressiveImage, 
-  NetworkAwareContent,
-  PageTransition,
-  ResponsiveGrid,
-  MobileContainer 
-} from '@digilogiclabs/saas-factory-ui'
-import Link from 'next/link'
-
-export default function Home() {
-  const { user, signOut } = useAuth()
-  
-  const projectName = "{{titleCaseName}}"
-  const projectDescription = "{{description}}"
-  
-  const gridConfig = {
-    columns_1_2: { base: 1, md: 2 },
-    columns_1_3: { base: 1, md: 3 },
-    columns_1_sm2: { base: 1, sm: 2 },
-    columns_1_sm2_md3: { base: 1, sm: 2, md: 3 },
-    columns_1_sm2_md4: { base: 1, sm: 2, md: 4 },
-    columns_2: { base: 2 },
-    columns_2_md3: { base: 2, md: 3 },
-    columns_2_2: { base: 2 },
-    columns_2_md4: { base: 2, md: 4 }
-  }
-  
-  const heroConfig = {
-    badge: {
-      text: "Built with Digi Logic Labs",
-      variant: "secondary" as const
-    },
-    title: {
-      text: `Welcome to ${projectName}`,
-      highlight: projectName,
-      size: "xl" as const
-    },
-    description: `${projectDescription}. Get started by editing src/app/page.tsx`
-  }
-
-  return (
-    <PageTransition type="fade" duration={300}>
-      <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-        <MobileContainer className="py-16">
-        {/* Hero Section */}
-        <MobileHero
-          badge={heroConfig.badge}
-          title={heroConfig.title}
-          description={heroConfig.description}
-          actions={!user ? [
-            {
-              label: "Get Started",
-              href: "/signup",
-              icon: ArrowRight,
-              variant: "default",
-              size: "lg"
-            },
-            {
-              label: "Learn More", 
-              href: "/login",
-              variant: "outline",
-              size: "lg"
-            }
-          ] : [
-            {
-              label: "Go to Dashboard",
-              href: "/dashboard", 
-              icon: ArrowRight,
-              variant: "default",
-              size: "lg"
-            },
-            {
-              label: "Sign Out",
-              onClick: signOut,
-              icon: LogOut,
-              variant: "outline", 
-              size: "lg"
-            }
-          ]}
-          className="text-center mb-16"
-        />
-
-        {/* Features Grid */}
-        <NetworkAwareContent
-          showOnSlow={
-            <ResponsiveGrid columns={gridConfig.columns_1_2} gap={4} className="mb-16">
-              <Card className="text-center">
-                <CardHeader>
-                  <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
-                    <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-                  </div>
-                  <CardTitle>Lightning Fast</CardTitle>
-                  <CardDescription>
-                    Built with Next.js 15 and optimized for performance
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-              <Card className="text-center">
-                <CardHeader>
-                  <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
-                    <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
-                  </div>
-                  <CardTitle>Secure by Default</CardTitle>
-                  <CardDescription>
-                    {{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} authentication and security best practices
-                  </CardDescription>
-                </CardHeader>
-              </Card>
-            </ResponsiveGrid>
-          }
-        >
-          <ResponsiveGrid columns={gridConfig.columns_1_3} gap={6} className="mb-16">
-            <Card className="text-center">
-              <CardHeader>
-                <div className="mx-auto w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
-                  <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-                </div>
-                <CardTitle>Lightning Fast</CardTitle>
-                <CardDescription>
-                  Built with Next.js 15 and optimized for performance
-                </CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card className="text-center">
-              <CardHeader>
-                <div className="mx-auto w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
-                  <Shield className="h-6 w-6 text-green-600 dark:text-green-400" />
-                </div>
-                <CardTitle>Secure by Default</CardTitle>
-                <CardDescription>
-                  {{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}} authentication and security best practices
-                </CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card className="text-center">
-              <CardHeader>
-                <div className="mx-auto w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
-                  <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-                </div>
-                <CardTitle>Ready to Scale</CardTitle>
-                <CardDescription>
-                  Production-ready with TypeScript, Tailwind CSS, and modern tooling
-                </CardDescription>
-              </CardHeader>
-            </Card>
-          </ResponsiveGrid>
-        </NetworkAwareContent>
-
-        {/* Tech Stack */}
-        <Card className="max-w-4xl mx-auto">
-          <CardHeader className="text-center">
-            <CardTitle className="text-2xl">Built with Modern Technologies</CardTitle>
-            <CardDescription>
-              This template includes everything you need to build a modern SaaS application
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
-              <div className="p-4">
-                <div className="font-semibold">Next.js 15</div>
-                <div className="text-sm text-gray-600 dark:text-gray-400">React Framework</div>
-              </div>
-              <div className="p-4">
-                <div className="font-semibold">TypeScript</div>
-                <div className="text-sm text-gray-600 dark:text-gray-400">Type Safety</div>
-              </div>
-              <div className="p-4">
-                <div className="font-semibold">Tailwind CSS</div>
-                <div className="text-sm text-gray-600 dark:text-gray-400">Styling</div>
-              </div>
-              <div className="p-4">
-                <div className="font-semibold">{{#auth}}{{#firebase}}Firebase{{/firebase}}{{#supabase}}Supabase{{/supabase}}{{/auth}}</div>
-                <div className="text-sm text-gray-600 dark:text-gray-400">Authentication</div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        </MobileContainer>
-      </main>
-    </PageTransition>
-  )
-}
+import { Button } from '@/components/ui/button'
+import { ArrowRight, Zap, Shield, Rocket } from 'lucide-react'
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-background">
+      {/* Hero */}
+      <section className="mx-auto max-w-5xl px-4 py-24 text-center">
+        <div className="inline-flex items-center rounded-full border border-border bg-muted px-3 py-1 text-sm text-muted-foreground mb-6">
+          Built with Digi Logic Labs
+        </div>
+        <h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-6xl mb-4">
+          Build your SaaS,{' '}
+          <span className="text-primary">faster</span>
+        </h1>
+        <p className="mx-auto max-w-2xl text-lg text-muted-foreground mb-8">
+          A production-ready starter with authentication, payments, and everything
+          you need to ship your next project.
+        </p>
+        <div className="flex items-center justify-center gap-4">
+          <Button size="lg" asChild>
+            <Link href="/signup">
+              Get Started <ArrowRight className="ml-2 h-4 w-4" />
+            </Link>
+          </Button>
+          <Button variant="outline" size="lg" asChild>
+            <Link href="/login">Sign In</Link>
+          </Button>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="mx-auto max-w-5xl px-4 pb-24">
+        <div className="grid gap-6 md:grid-cols-3">
+          <div className="rounded-xl border border-border bg-card p-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/30">
+              <Zap className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-card-foreground mb-2">Lightning Fast</h3>
+            <p className="text-sm text-muted-foreground">
+              Built with Next.js 15 and optimized for performance out of the box.
+            </p>
+          </div>
+
+          <div className="rounded-xl border border-border bg-card p-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-100 dark:bg-emerald-900/30">
+              <Shield className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-card-foreground mb-2">Secure by Default</h3>
+            <p className="text-sm text-muted-foreground">
+              Authentication, security headers, and best practices baked in.
+            </p>
+          </div>
+
+          <div className="rounded-xl border border-border bg-card p-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100 dark:bg-purple-900/30">
+              <Rocket className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <h3 className="text-lg font-semibold text-card-foreground mb-2">Ready to Scale</h3>
+            <p className="text-sm text-muted-foreground">
+              TypeScript, Tailwind CSS, and modern tooling for production apps.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Tech Stack */}
+      <section className="mx-auto max-w-5xl px-4 pb-24">
+        <div className="rounded-xl border border-border bg-card p-8 text-center">
+          <h2 className="text-2xl font-bold text-card-foreground mb-2">Built with Modern Technologies</h2>
+          <p className="text-muted-foreground mb-6">
+            Everything you need to build a modern SaaS application.
+          </p>
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+            <div className="p-4">
+              <div className="font-semibold text-foreground">Next.js 15</div>
+              <div className="text-sm text-muted-foreground">React Framework</div>
+            </div>
+            <div className="p-4">
+              <div className="font-semibold text-foreground">TypeScript</div>
+              <div className="text-sm text-muted-foreground">Type Safety</div>
+            </div>
+            <div className="p-4">
+              <div className="font-semibold text-foreground">Tailwind CSS</div>
+              <div className="text-sm text-muted-foreground">Styling</div>
+            </div>
+            <div className="p-4">
+              <div className="font-semibold text-foreground">Supabase</div>
+              <div className="text-sm text-muted-foreground">Authentication</div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

package/dist/templates/web/base/template/src/app/settings/page.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { User, Bell, Shield, Palette, Save, LogIn } from 'lucide-react';
+import Link from 'next/link';
+import { MOCK_MODE } from '@/lib/mock';
+import { useMockAuth } from '@/components/mock-auth-provider';
+
+export default function SettingsPage() {
+  const [saved, setSaved] = useState(false);
+  const { user, isAuthenticated } = useMockAuth();
+
+  if (!isAuthenticated) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+        <LogIn className="h-12 w-12 text-muted-foreground mb-4" />
+        <h1 className="text-2xl font-bold text-foreground mb-2">Sign in required</h1>
+        <p className="text-muted-foreground mb-6">You need to be signed in to view settings.</p>
+        <Link href="/login" className="inline-flex items-center justify-center rounded-md bg-primary px-6 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors">
+          Sign In
+        </Link>
+      </div>
+    );
+  }
+
+  const handleSave = () => {
+    // TODO: [REAL_DATA] Save settings to your database
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8">
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Settings</h1>
+          <p className="text-muted-foreground mt-1">Manage your account and preferences.</p>
+        </div>
+        {MOCK_MODE && (
+          <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+            Mock Data
+          </span>
+        )}
+      </div>
+
+      <div className="space-y-6">
+        {/* Profile */}
+        <div className="rounded-xl border border-border bg-card p-6">
+          <h2 className="text-lg font-semibold text-card-foreground mb-4 flex items-center gap-2">
+            <User className="h-5 w-5" />
+            Profile
+          </h2>
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">Name</label>
+              <input
+                id="name"
+                type="text"
+                defaultValue={user?.name ?? ''}
+                className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">Email</label>
+              <input
+                id="email"
+                type="email"
+                defaultValue={user?.email ?? ''}
+                className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Notifications */}
+        <div className="rounded-xl border border-border bg-card p-6">
+          <h2 className="text-lg font-semibold text-card-foreground mb-4 flex items-center gap-2">
+            <Bell className="h-5 w-5" />
+            Notifications
+          </h2>
+          {/* TODO: [REAL_DATA] Fetch notification preferences from your database */}
+          <div className="space-y-3">
+            {[
+              { label: 'Email notifications', description: 'Receive updates via email', defaultChecked: true },
+              { label: 'Marketing emails', description: 'News, tips, and product updates', defaultChecked: false },
+              { label: 'Security alerts', description: 'Important account security notifications', defaultChecked: true },
+            ].map((pref) => (
+              <label key={pref.label} className="flex items-center justify-between py-2">
+                <div>
+                  <p className="text-sm font-medium text-foreground">{pref.label}</p>
+                  <p className="text-xs text-muted-foreground">{pref.description}</p>
+                </div>
+                <input
+                  type="checkbox"
+                  defaultChecked={pref.defaultChecked}
+                  className="h-4 w-4 rounded border-input text-primary focus:ring-ring"
+                />
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {/* Appearance */}
+        <div className="rounded-xl border border-border bg-card p-6">
+          <h2 className="text-lg font-semibold text-card-foreground mb-4 flex items-center gap-2">
+            <Palette className="h-5 w-5" />
+            Appearance
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Theme is controlled by the toggle in the header. Your preference is saved automatically.
+          </p>
+        </div>
+
+        {/* Security */}
+        <div className="rounded-xl border border-border bg-card p-6">
+          <h2 className="text-lg font-semibold text-card-foreground mb-4 flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            Security
+          </h2>
+          {/* TODO: [REAL_DATA] Wire up password change to your auth provider */}
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="current-password" className="block text-sm font-medium text-foreground mb-1">Current Password</label>
+              <input
+                id="current-password"
+                type="password"
+                placeholder="••••••••"
+                className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+            <div>
+              <label htmlFor="new-password" className="block text-sm font-medium text-foreground mb-1">New Password</label>
+              <input
+                id="new-password"
+                type="password"
+                placeholder="••••••••"
+                className="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Save */}
+        <div className="flex justify-end">
+          <Button onClick={handleSave}>
+            <Save className="mr-2 h-4 w-4" />
+            {saved ? 'Saved!' : 'Save Changes'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}