@digilogiclabs/create-saas-app 1.5.1 → 1.5.3

package/src/templates/web/ui-auth-payments-audio/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-audio/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-audio/template/src/app/login/page.tsx

@@ -1,109 +1,6 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-import { useAuth } from '@digilogiclabs/saas-factory-auth';
-import { useRouter } from 'next/navigation';
+import { LoginForm } from '@/components/client/login-form'
 
 export default function LoginPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const { signIn, signInWithOAuth, loading, error, user } = useAuth();
-  const router = useRouter();
-
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/');
-    }
-  }, [user, router]);
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      await signIn(email, password);
-      router.push('/');
-    } catch (err) {
-      console.error('Login error:', err);
-    }
-  };
-
-  const handleGoogleLogin = async () => {
-    try {
-      await signInWithOAuth('google', window.location.origin);
-    } catch (err) {
-      console.error('Google login error:', err);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-100">
-        <div>Loading...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <Card className="w-full max-w-md p-8">
-        <h1 className="text-2xl font-bold text-center mb-6">Sign In</h1>
-        
-        {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
-          </div>
-        )}
-
-        <form onSubmit={handleLogin} className="space-y-4">
-          <div>
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter your email"
-              required
-              disabled={loading}
-            />
-          </div>
-          <div>
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Enter your password"
-              required
-              disabled={loading}
-            />
-          </div>
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing In...' : 'Sign In'}
-          </Button>
-          <Button 
-            type="button" 
-            variant="outline" 
-            className="w-full"
-            onClick={handleGoogleLogin}
-            disabled={loading}
-          >
-            Sign in with Google
-          </Button>
-        </form>
-
-        <div className="mt-4 text-center">
-          <p className="text-sm text-gray-600">
-            Don&apos;t have an account?{' '}
-            <a href="/signup" className="text-blue-600 hover:underline">
-              Sign up
-            </a>
-          </p>
-        </div>
-      </Card>
-    </div>
-  );
+  return <LoginForm />
 }
 

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

@@ -1,128 +1,6 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui';
-import { useAuth } from '@digilogiclabs/saas-factory-auth';
-import { useRouter } from 'next/navigation';
+import { SignupForm } from '@/components/client/signup-form'
 
 export default function SignupPage() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const { signUp, signInWithOAuth, loading, error, user } = useAuth();
-  const router = useRouter();
-
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/');
-    }
-  }, [user, router]);
-
-  const handleSignup = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (password !== confirmPassword) {
-      alert('Passwords do not match');
-      return;
-    }
-
-    try {
-      await signUp(email, password);
-      router.push('/');
-    } catch (err) {
-      console.error('Signup error:', err);
-    }
-  };
-
-  const handleGoogleSignup = async () => {
-    try {
-      await signInWithOAuth('google', window.location.origin);
-    } catch (err) {
-      console.error('Google signup error:', err);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-100">
-        <div>Loading...</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <Card className="w-full max-w-md p-8">
-        <h1 className="text-2xl font-bold text-center mb-6">Sign Up</h1>
-        
-        {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
-          </div>
-        )}
-
-        <form onSubmit={handleSignup} className="space-y-4">
-          <div>
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter your email"
-              required
-              disabled={loading}
-            />
-          </div>
-          <div>
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Enter your password"
-              required
-              disabled={loading}
-            />
-          </div>
-          <div>
-            <Label htmlFor="confirmPassword">Confirm Password</Label>
-            <Input
-              id="confirmPassword"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              placeholder="Confirm your password"
-              required
-              disabled={loading}
-            />
-          </div>
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing Up...' : 'Sign Up'}
-          </Button>
-          <Button 
-            type="button" 
-            variant="outline" 
-            className="w-full"
-            onClick={handleGoogleSignup}
-            disabled={loading}
-          >
-            Sign up with Google
-          </Button>
-        </form>
-
-        <div className="mt-4 text-center">
-          <p className="text-sm text-gray-600">
-            Already have an account?{' '}
-            <a href="/login" className="text-blue-600 hover:underline">
-              Sign in
-            </a>
-          </p>
-        </div>
-      </Card>
-    </div>
-  );
+  return <SignupForm />
 }
 

package/src/templates/web/ui-auth-payments-audio/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>
+  )
+}

package/src/templates/web/ui-auth-payments-audio/template/src/components/client/login-form.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import React, { useState, useActionState } from 'react'
+import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useRouter } from 'next/navigation'
+import { signInAction } from '@/lib/actions/auth'
+
+export function LoginForm() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const { signIn, signInWithOAuth, loading, error, user } = useAuth()
+  const [actionState, formAction] = useActionState(signInAction, { success: false })
+  const router = useRouter()
+
+  // Redirect if already logged in
+  React.useEffect(() => {
+    if (user) {
+      router.push('/')
+    }
+  }, [user, router])
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    try {
+      await signIn(email, password)
+      router.push('/')
+    } catch (err) {
+      console.error('Login error:', err)
+    }
+  }
+
+  const handleGoogleLogin = async () => {
+    try {
+      await signInWithOAuth('google', window.location.origin)
+    } catch (err) {
+      console.error('Google login error:', err)
+    }
+  }
+
+  // Enhanced form action that uses both server action validation and client auth
+  const handleServerAction = async (formData: FormData) => {
+    const result = await formAction(formData)
+    
+    if (result?.success) {
+      // If server validation passes, proceed with client auth
+      const emailValue = formData.get('email') as string
+      const passwordValue = formData.get('password') as string
+      
+      try {
+        await signIn(emailValue, passwordValue)
+        router.push('/')
+      } catch (err) {
+        console.error('Login error:', err)
+      }
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+        <div>Loading...</div>
+      </div>
+    )
+  }
+
+  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">
+        <h1 className="text-2xl font-bold text-center mb-6">Sign In</h1>
+        
+        {/* Server action errors */}
+        {actionState?.error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {actionState.error}
+          </div>
+        )}
+        
+        {/* Client auth errors */}
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error.message}
+          </div>
+        )}
+
+        <form action={handleServerAction} className="space-y-4">
+          <div>
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.email && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+              disabled={loading}
+            />
+            {actionState?.fieldErrors?.password && (
+              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.password[0]}</p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing In...' : 'Sign In'}
+          </Button>
+          <Button 
+            type="button" 
+            variant="outline" 
+            className="w-full"
+            onClick={handleGoogleLogin}
+            disabled={loading}
+          >
+            Sign in with Google
+          </Button>
+        </form>
+
+        <div className="mt-4 text-center">
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            Don&apos;t have an account?{' '}
+            <a href="/signup" className="text-blue-600 hover:underline dark:text-blue-400">
+              Sign up
+            </a>
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}