@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

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

@@ -1,144 +1,90 @@
 'use client'
 
-import React, { useState, useActionState } from 'react'
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { useRouter } from 'next/navigation'
-import { signInAction } from '@/lib/actions/auth'
+import React, { useState } from 'react'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import Link from 'next/link'
 
 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()
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
 
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/')
-    }
-  }, [user, router])
-
-  const handleLogin = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    try {
-      await signIn(email, password)
-      router.push('/')
-    } catch (err) {
-      console.error('Login error:', err)
-    }
-  }
+    setLoading(true)
+    setError('')
 
-  const handleGoogleLogin = async () => {
     try {
-      await signInWithOAuth('google')
-    } catch (err) {
-      console.error('Google login error:', err)
-    }
-  }
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      })
 
-  // 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 (!res.ok) {
+        const data = await res.json()
+        setError(data.error || 'Sign in failed')
+        return
       }
-    }
-  }
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
-        <div>Loading...</div>
-      </div>
-    )
+      window.location.href = '/dashboard'
+    } catch {
+      setError('An unexpected error occurred')
+    } finally {
+      setLoading(false)
+    }
   }
 
   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 */}
+    <Card className="w-full max-w-sm mx-auto">
+      <CardHeader>
+        <CardTitle className="text-2xl text-center">Sign In</CardTitle>
+      </CardHeader>
+      <CardContent>
         {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
+          <div className="mb-4 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+            {error}
           </div>
         )}
 
-        <form action={handleServerAction} className="space-y-4">
-          <div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
             <Input
               id="email"
-              name="email"
               type="email"
               value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter your email"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+              placeholder="you@example.com"
               required
-              disabled={loading}
             />
-            {actionState?.fieldErrors?.email && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
-            )}
           </div>
-          <div>
+
+          <div className="space-y-2">
             <Label htmlFor="password">Password</Label>
             <Input
               id="password"
-              name="password"
               type="password"
               value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Enter your password"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+              placeholder="••••••••"
               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
+            {loading ? 'Signing in...' : 'Sign In'}
           </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>
+        <p className="mt-4 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>
+      </CardContent>
+    </Card>
   )
-}
+}

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

@@ -16,9 +16,9 @@ export function NewsletterSignup() {
   }
 
   return (
-    <div className="bg-blue-600 dark:bg-blue-800 rounded-lg p-6 text-white">
+    <div className="bg-primary rounded-lg p-6 text-primary-foreground">
       <h3 className="text-lg font-semibold mb-2">Stay Updated</h3>
-      <p className="text-blue-100 dark:text-blue-200 mb-4 text-sm">
+      <p className="text-primary-foreground/80 mb-4 text-sm">
         Get the latest updates and features delivered to your inbox
       </p>
       
@@ -48,7 +48,7 @@ export function NewsletterSignup() {
             placeholder="Enter your email"
             required
             disabled={isPending}
-            className="bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+            className="bg-background text-foreground"
           />
         </div>
         <Button 
@@ -60,7 +60,7 @@ export function NewsletterSignup() {
         </Button>
       </form>
       
-      <p className="text-xs text-blue-200 dark:text-blue-300 mt-2">
+      <p className="text-xs text-primary-foreground/70 mt-2">
         We respect your privacy. Unsubscribe at any time.
       </p>
     </div>

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

@@ -1,185 +1,105 @@
 'use client'
 
-import React, { useState, useActionState } from 'react'
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { useRouter } from 'next/navigation'
-import { signUpAction } from '@/lib/actions/auth'
+import React, { useState } from 'react'
+import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import Link from 'next/link'
 
 export function SignupForm() {
-  const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const { signUp, signInWithOAuth, loading, error, user } = useAuth()
-  const [actionState, formAction] = useActionState(signUpAction, { success: false })
-  const router = useRouter()
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [success, setSuccess] = useState(false)
 
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/')
-    }
-  }, [user, router])
-
-  const handleSignUp = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    
-    if (password !== confirmPassword) {
-      console.error('Passwords do not match')
-      return
-    }
-
-    try {
-      await signUp(email, password)
-      router.push('/')
-    } catch (err) {
-      console.error('Sign up error:', err)
-    }
-  }
+    setLoading(true)
+    setError('')
 
-  const handleGoogleSignUp = async () => {
     try {
-      await signInWithOAuth('google')
-    } catch (err) {
-      console.error('Google sign up error:', err)
-    }
-  }
+      const res = await fetch('/api/auth/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      })
 
-  // 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
-      const nameValue = formData.get('name') as string
-      
-      try {
-        await signUp(emailValue, passwordValue)
-        router.push('/')
-      } catch (err) {
-        console.error('Sign up error:', err)
+      if (!res.ok) {
+        const data = await res.json()
+        setError(data.error || 'Sign up failed')
+        return
       }
+
+      setSuccess(true)
+    } catch {
+      setError('An unexpected error occurred')
+    } finally {
+      setLoading(false)
     }
   }
 
-  if (loading) {
+  if (success) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
-        <div>Loading...</div>
-      </div>
+      <Card className="w-full max-w-sm mx-auto">
+        <CardContent className="pt-6 text-center">
+          <h2 className="text-2xl font-bold text-card-foreground mb-2">Check your email</h2>
+          <p className="text-muted-foreground">
+            We sent a confirmation link to <strong className="text-foreground">{email}</strong>.
+          </p>
+        </CardContent>
+      </Card>
     )
   }
 
   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 Up</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 */}
+    <Card className="w-full max-w-sm mx-auto">
+      <CardHeader>
+        <CardTitle className="text-2xl text-center">Create Account</CardTitle>
+      </CardHeader>
+      <CardContent>
         {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
+          <div className="mb-4 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+            {error}
           </div>
         )}
 
-        <form action={handleServerAction} className="space-y-4">
-          <div>
-            <Label htmlFor="name">Name</Label>
-            <Input
-              id="name"
-              name="name"
-              type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Enter your name"
-              required
-              disabled={loading}
-            />
-            {actionState?.fieldErrors?.name && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.name[0]}</p>
-            )}
-          </div>
-          <div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
             <Input
               id="email"
-              name="email"
               type="email"
               value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter your email"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+              placeholder="you@example.com"
               required
-              disabled={loading}
             />
-            {actionState?.fieldErrors?.email && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
-            )}
           </div>
-          <div>
+
+          <div className="space-y-2">
             <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>
-          <div>
-            <Label htmlFor="confirmPassword">Confirm Password</Label>
-            <Input
-              id="confirmPassword"
-              name="confirmPassword"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              placeholder="Confirm your password"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+              placeholder="••••••••"
               required
-              disabled={loading}
+              minLength={8}
             />
-            {actionState?.fieldErrors?.confirmPassword && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.confirmPassword[0]}</p>
-            )}
           </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
+            {loading ? 'Creating account...' : 'Sign Up'}
           </Button>
         </form>
 
-        <div className="mt-4 text-center">
-          <p className="text-sm text-gray-600 dark:text-gray-300">
-            Already have an account?{' '}
-            <a href="/login" className="text-blue-600 hover:underline dark:text-blue-400">
-              Sign in
-            </a>
-          </p>
-        </div>
-      </Card>
-    </div>
+        <p className="mt-4 text-center text-sm text-muted-foreground">
+          Already have an account?{' '}
+          <Link href="/login" className="text-primary hover:underline">
+            Sign in
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
   )
-}
+}

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

@@ -1,28 +1,25 @@
-'use client'
-
-import React from 'react'
-import { ThemeProvider } from 'next-themes'
-import { Toaster } from '@digilogiclabs/saas-factory-ui'
-import { AppThemeProvider } from './theme-provider'
-
-interface AppProvidersProps {
-  children: React.ReactNode
-}
-
-export function AppProviders({ children }: AppProvidersProps) {
-  return (
-    <ThemeProvider
-      attribute="class"
-      defaultTheme="{{defaultTheme}}"
-      enableSystem
-      disableTransitionOnChange
-      storageKey="{{packageName}}-theme"
-    >
-      <AppThemeProvider themeColor="{{themeColor}}">
-        {children}
-        <Toaster />
-      </AppThemeProvider>
-    </ThemeProvider>
-  )
-}
-
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import { Toaster } from '@digilogiclabs/saas-factory-ui'
+import { MockAuthProvider } from '@/components/mock-auth-provider'
+
+// TODO: [REAL_DATA] Replace MockAuthProvider with your auth provider:
+//   Supabase:  import { AuthProvider } from '@/providers/auth-provider'
+//   NextAuth:  import { SessionProvider } from 'next-auth/react'
+//   Keycloak:  import { KeycloakProvider } from '@/providers/keycloak'
+
+interface AppProvidersProps {
+  children: React.ReactNode
+}
+
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      <MockAuthProvider>
+        {children}
+        <Toaster />
+      </MockAuthProvider>
+    </ThemeProvider>
+  )
+}