@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

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

@@ -1,119 +1,90 @@
 'use client'
 
 import React, { useState } from 'react'
-import {
-  Button,
-  Card,
-  Input,
-  Label
-} from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { useRouter } from 'next/navigation'
+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 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 }),
+      })
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
-        <div>Loading...</div>
-      </div>
-    )
+      if (!res.ok) {
+        const data = await res.json()
+        setError(data.error || 'Sign in failed')
+        return
+      }
+
+      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>
+    <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 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+            {error}
+          </div>
+        )}
 
-        <form onSubmit={handleLogin} 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}
             />
           </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}
             />
           </div>
 
           <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing In...' : 'Sign In'}
+            {loading ? 'Signing in...' : 'Sign In'}
           </Button>
         </form>
 
-        {/* Social Auth */}
-        <Button
-          type="button"
-          variant="outline"
-          className="w-full mt-4"
-          onClick={handleGoogleLogin}
-          disabled={loading}
-        >
-          Sign in with Google
-        </Button>
-
-        {error && (
-          <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
-          </div>
-        )}
-
-        <div className="mt-6 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/dist/templates/web/ui-auth-payments-ai/template/src/components/client/signup-form.tsx

@@ -1,158 +1,105 @@
 'use client'
 
 import React, { useState } from 'react'
-import {
-  Button,
-  Card,
-  Input,
-  Label
-} from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { useRouter } from 'next/navigation'
+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 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
-    }
+    setLoading(true)
+    setError('')
 
     try {
-      await signUp(email, password)
-      router.push('/')
-    } catch (err) {
-      console.error('Sign up error:', err)
+      const res = await fetch('/api/auth/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      })
+
+      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)
     }
   }
 
-  const handleGoogleSignUp = async () => {
-    try {
-      await signInWithOAuth('google')
-    } catch (err) {
-      console.error('Google sign up error:', err)
-    }
-  }
-
-  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>
-
+    <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 onSubmit={handleSignUp} 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 full name"
-              required
-              disabled={loading}
-            />
-          </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}
             />
           </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}
-            />
-            <p className="text-xs text-gray-500 mt-1">
-              Password must be at least 8 characters with uppercase, lowercase, and number
-            </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}
             />
           </div>
 
           <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing Up...' : 'Sign Up'}
+            {loading ? 'Creating account...' : 'Sign Up'}
           </Button>
         </form>
 
-        {/* Social Auth */}
-        <Button
-          type="button"
-          variant="outline"
-          className="w-full mt-4"
-          onClick={handleGoogleSignUp}
-          disabled={loading}
-        >
-          Sign up with Google
-        </Button>
-
-        <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/dist/templates/web/ui-auth-payments-ai/template/src/components/providers/app-providers.tsx

@@ -2,7 +2,12 @@
 
 import { ThemeProvider } from 'next-themes'
 import { Toaster } from '@digilogiclabs/saas-factory-ui'
-import { DLLProvider } from '@digilogiclabs/app-sdk'
+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
@@ -11,10 +16,10 @@ interface AppProvidersProps {
 export function AppProviders({ children }: AppProvidersProps) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      <DLLProvider>
+      <MockAuthProvider>
         {children}
         <Toaster />
-      </DLLProvider>
+      </MockAuthProvider>
     </ThemeProvider>
   )
 }