@digilogiclabs/create-saas-app 1.4.0 → 1.5.0

package/src/templates/web/ui-auth-payments/template/middleware.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { env } from './src/lib/env'
+
+export async function middleware(request: NextRequest) {
+  // Get auth token from cookies
+  const authToken = request.cookies.get('saas-factory-auth-token')?.value
+  const user = request.cookies.get('saas-factory-auth-user')?.value
+  
+  const isAuthenticated = !!(authToken && user)
+  const { pathname } = request.nextUrl
+
+  // Define protected routes
+  const protectedRoutes = ['/dashboard', '/profile', '/settings']
+  const authRoutes = ['/login', '/signup']
+  
+  // Check if the current path is protected
+  const isProtectedRoute = protectedRoutes.some(route => 
+    pathname.startsWith(route)
+  )
+  
+  // Check if the current path is an auth route
+  const isAuthRoute = authRoutes.some(route => 
+    pathname.startsWith(route)
+  )
+
+  // Redirect unauthenticated users from protected routes
+  if (isProtectedRoute && !isAuthenticated) {
+    const loginUrl = new URL('/login', request.url)
+    loginUrl.searchParams.set('from', pathname)
+    return NextResponse.redirect(loginUrl)
+  }
+
+  // Redirect authenticated users from auth routes
+  if (isAuthRoute && isAuthenticated) {
+    const redirectUrl = request.nextUrl.searchParams.get('from') || '/'
+    return NextResponse.redirect(new URL(redirectUrl, request.url))
+  }
+
+  // Add security headers
+  const response = NextResponse.next()
+  
+  // Add CSRF protection headers
+  response.headers.set('X-Frame-Options', 'DENY')
+  response.headers.set('X-Content-Type-Options', 'nosniff')
+  response.headers.set('Referrer-Policy', 'origin-when-cross-origin')
+  
+  // Add CSP header for additional security
+  if (env.NODE_ENV === 'production') {
+    response.headers.set(
+      'Content-Security-Policy',
+      "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://js.stripe.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://api.stripe.com"
+    )
+  }
+  
+  return response
+}
+
+export const config = {
+  matcher: [
+    // Match all request paths except for the ones starting with:
+    // - api (API routes)
+    // - _next/static (static files)
+    // - _next/image (image optimization files)
+    // - favicon.ico (favicon file)
+    // - public folder files
+    '/((?!api|_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+  ],
+}

package/src/templates/web/ui-auth-payments/template/package.json

@@ -4,11 +4,14 @@
   "description": "{{description}} (with UI Package v0.11.1 + Auth v1.0.0 + Payments)",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   },
   "dependencies": {
     "next": "^15.0.0",
@@ -25,7 +28,8 @@
     "class-variance-authority": "^0.7.0",
     "tailwind-merge": "^2.0.0",
     "next-themes": "^0.2.1",
-    "lucide-react": "^0.542.0"
+    "lucide-react": "^0.542.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
@@ -34,7 +38,13 @@
     "@types/react-dom": "^19.0.0",
     "eslint": "^8.0.0",
     "eslint-config-next": "^15.0.0",
-    "prettier": "^3.0.0"
+    "prettier": "^3.0.0",
+    "vitest": "^1.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "jsdom": "^24.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

package/src/templates/web/ui-auth-payments/template/src/app/dashboard/layout.tsx

@@ -0,0 +1,22 @@
+import { requireAuth } from '@/lib/auth-server'
+import { redirect } from 'next/navigation'
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // Ensure user is authenticated at the layout level
+  try {
+    await requireAuth()
+  } catch (error) {
+    // This will happen if requireAuth redirects, but just in case
+    redirect('/login')
+  }
+
+  return (
+    <div className="dashboard-layout">
+      {children}
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/app/dashboard/page.tsx

@@ -0,0 +1,183 @@
+import { Suspense } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { User, Settings, CreditCard, Activity } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+import Link from 'next/link'
+
+// Example of server component data fetching
+async function getUserStats(userId: string) {
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 100))
+  
+  return {
+    totalPosts: 42,
+    totalViews: 1337,
+    totalLikes: 256,
+    joinedDate: '2024-01-15'
+  }
+}
+
+function StatsCard({ title, value, icon: Icon, href }: {
+  title: string
+  value: string | number
+  icon: React.ComponentType<any>
+  href?: string
+}) {
+  const content = (
+    <Card className="p-6 hover:shadow-lg transition-shadow">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
+          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+        </div>
+        <Icon className="h-8 w-8 text-blue-600 dark:text-blue-400" />
+      </div>
+    </Card>
+  )
+
+  if (href) {
+    return <Link href={href}>{content}</Link>
+  }
+
+  return content
+}
+
+async function UserStats({ userId }: { userId: string }) {
+  const stats = await getUserStats(userId)
+  
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      <StatsCard
+        title="Total Posts"
+        value={stats.totalPosts}
+        icon={Activity}
+      />
+      <StatsCard
+        title="Total Views"
+        value={stats.totalViews.toLocaleString()}
+        icon={Activity}
+      />
+      <StatsCard
+        title="Total Likes"
+        value={stats.totalLikes}
+        icon={Activity}
+      />
+      <StatsCard
+        title="Member Since"
+        value={new Date(stats.joinedDate).getFullYear()}
+        icon={User}
+      />
+    </div>
+  )
+}
+
+function UserStatsSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+      {[...Array(4)].map((_, i) => (
+        <Card key={i} className="p-6">
+          <div className="animate-pulse">
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2"></div>
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
+          </div>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export default async function DashboardPage() {
+  // Server-side authentication requirement
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            Welcome back, {user.name || user.email}!
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300 mt-2">
+            Here's what's happening with your account today.
+          </p>
+        </div>
+
+        {/* Stats - Streaming with Suspense */}
+        <Suspense fallback={<UserStatsSkeleton />}>
+          <UserStats userId={user.id} />
+        </Suspense>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <User className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Profile</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              Update your personal information and preferences
+            </p>
+            <Link href="/profile">
+              <Button className="w-full">Manage Profile</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <Settings className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Settings</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              Configure your account settings and security options
+            </p>
+            <Link href="/settings">
+              <Button variant="outline" className="w-full">Open Settings</Button>
+            </Link>
+          </Card>
+
+          <Card className="p-6">
+            <div className="flex items-center mb-4">
+              <CreditCard className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Billing</h3>
+            </div>
+            <p className="text-gray-600 dark:text-gray-300 mb-4">
+              View your subscription and payment information
+            </p>
+            <Link href="/billing">
+              <Button variant="outline" className="w-full">View Billing</Button>
+            </Link>
+          </Card>
+        </div>
+
+        {/* Recent Activity */}
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Recent Activity</h3>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
+              <div className="flex items-center">
+                <div className="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
+                <span className="text-gray-900 dark:text-white">Account created</span>
+              </div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
+            </div>
+            <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
+              <div className="flex items-center">
+                <div className="w-2 h-2 bg-blue-500 rounded-full mr-3"></div>
+                <span className="text-gray-900 dark:text-white">Profile updated</span>
+              </div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">1 week ago</span>
+            </div>
+            <div className="flex items-center justify-between py-3">
+              <div className="flex items-center">
+                <div className="w-2 h-2 bg-purple-500 rounded-full mr-3"></div>
+                <span className="text-gray-900 dark:text-white">Subscription started</span>
+              </div>
+              <span className="text-sm text-gray-500 dark:text-gray-400">2 weeks ago</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/app/error.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { RefreshCw, Home, AlertCircle } from 'lucide-react'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md p-8 text-center">
+        <div className="mb-6">
+          <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
+            <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            Something went wrong
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300 mb-6">
+            We apologize for the inconvenience. Please try again or return to the home page.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <Button
+            onClick={reset}
+            className="w-full"
+            variant="default"
+          >
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Try Again
+          </Button>
+          
+          <Button
+            onClick={() => window.location.href = '/'}
+            variant="outline"
+            className="w-full"
+          >
+            <Home className="w-4 h-4 mr-2" />
+            Go Home
+          </Button>
+        </div>
+
+        {process.env.NODE_ENV === 'development' && (
+          <details className="mt-6 text-left">
+            <summary className="text-sm font-medium text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
+              Error Details (Development)
+            </summary>
+            <pre className="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded-md overflow-auto">
+              {error.message}
+              {error.stack}
+            </pre>
+          </details>
+        )}
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google'
 import './globals.css'
 import { AppProviders } from '@/components/providers/app-providers'
 import { Header } from '@/components/shared/header'
+import { Footer } from '@/components/shared/footer'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -18,10 +19,13 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={`${inter.className} min-h-screen flex flex-col`}>
         <AppProviders>
           <Header />
-          {children}
+          <main className="flex-1">
+            {children}
+          </main>
+          <Footer />
         </AppProviders>
       </body>
     </html>

package/src/templates/web/ui-auth-payments/template/src/app/loading.tsx

@@ -0,0 +1,20 @@
+import { Card } from '@digilogiclabs/saas-factory-ui'
+import { Loader2 } from 'lucide-react'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md p-8 text-center">
+        <div className="flex flex-col items-center">
+          <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
+          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+            Loading
+          </h2>
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            Please wait while we load your content...
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/app/login/loading.tsx

@@ -0,0 +1,38 @@
+import { Card } from '@digilogiclabs/saas-factory-ui'
+
+export default function LoginLoading() {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+      <Card className="w-full max-w-md p-8">
+        <div className="animate-pulse space-y-6">
+          {/* Title skeleton */}
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded-md mx-auto w-32"></div>
+          
+          {/* Form skeleton */}
+          <div className="space-y-4">
+            {/* Email field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            
+            {/* Password field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            
+            {/* Sign in button */}
+            <div className="h-10 bg-blue-200 dark:bg-blue-800 rounded"></div>
+            
+            {/* OAuth button */}
+            <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+          </div>
+          
+          {/* Sign up link */}
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-48 mx-auto"></div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/app/signup/loading.tsx

@@ -0,0 +1,50 @@
+import { Card } from '@digilogiclabs/saas-factory-ui'
+
+export default function SignupLoading() {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+      <Card className="w-full max-w-md p-8">
+        <div className="animate-pulse space-y-6">
+          {/* Title skeleton */}
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded-md mx-auto w-32"></div>
+          
+          {/* Form skeleton */}
+          <div className="space-y-4">
+            {/* Name field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-12 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            
+            {/* Email field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            
+            {/* Password field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            
+            {/* Confirm password field */}
+            <div>
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32 mb-2"></div>
+              <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+            </div>
+            
+            {/* Sign up button */}
+            <div className="h-10 bg-blue-200 dark:bg-blue-800 rounded"></div>
+            
+            {/* OAuth button */}
+            <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
+          </div>
+          
+          {/* Sign in link */}
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-44 mx-auto"></div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/src/templates/web/ui-auth-payments/template/src/components/__tests__/example.test.tsx

@@ -0,0 +1,49 @@
+/**
+ * Example test file demonstrating testing patterns for SaaS Factory components
+ * 
+ * This is optional and serves as a reference for testing your components.
+ * You can delete this file if you don't need example tests.
+ */
+
+import { render, screen } from '@testing-library/react'
+import { Button } from '@digilogiclabs/saas-factory-ui'
+
+// Example: Testing UI components
+describe('UI Components', () => {
+  it('renders button with correct text', () => {
+    render(<Button>Click me</Button>)
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument()
+  })
+
+  it('button can be disabled', () => {
+    render(<Button disabled>Disabled button</Button>)
+    expect(screen.getByRole('button')).toBeDisabled()
+  })
+})
+
+// Example: Testing custom components
+function MockComponent({ title }: { title: string }) {
+  return <h1>{title}</h1>
+}
+
+describe('Custom Components', () => {
+  it('renders with correct title', () => {
+    render(<MockComponent title="Test Title" />)
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Title')
+  })
+})
+
+// Example: Testing utilities
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(amount)
+}
+
+describe('Utilities', () => {
+  it('formats currency correctly', () => {
+    expect(formatCurrency(1000)).toBe('$1,000.00')
+    expect(formatCurrency(0)).toBe('$0.00')
+  })
+})

package/src/templates/web/ui-auth-payments/template/src/components/client/auth-status.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { Button } from '@digilogiclabs/saas-factory-ui'
+import { LogOut, User } from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import Link from 'next/link'
+
+export function AuthStatus() {
+  const { user, signOut, loading } = useAuth()
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="text-sm text-gray-600 dark:text-gray-300">
+        Loading...
+      </div>
+    )
+  }
+
+  if (user) {
+    return (
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+          <User className="w-4 h-4" />
+          Welcome, {user.email}
+        </div>
+        <Button variant="outline" size="sm" onClick={handleSignOut}>
+          <LogOut className="w-4 h-4 mr-2" />
+          Sign Out
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex gap-2">
+      <Link href="/login">
+        <Button variant="outline" size="sm">Sign In</Button>
+      </Link>
+      <Link href="/signup">
+        <Button size="sm">Sign Up</Button>
+      </Link>
+    </div>
+  )
+}