@digilogiclabs/create-saas-app 2.8.1 → 2.9.0

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

@@ -1,163 +1,119 @@
-'use client'
-
-import React, { useState, useActionState } from 'react'
-import { 
-  Button, 
-  Card, 
-  Input, 
-  Label,
-  SingleStepForm,
-  FormField,
-  FormProvider
-} from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-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>
-        
-        {/* Enhanced form with enterprise form system */}
-        <FormProvider>
-          <SingleStepForm
-            onSubmit={async (formData) => {
-              try {
-                const result = await formAction(formData)
-                if (result?.success) {
-                  const emailValue = formData.get('email') as string
-                  const passwordValue = formData.get('password') as string
-                  await signIn(emailValue, passwordValue)
-                  router.push('/')
-                }
-              } catch (err) {
-                console.error('Login error:', err)
-              }
-            }}
-            className="space-y-4"
-            submitButton={{
-              text: loading ? 'Signing In...' : 'Sign In',
-              disabled: loading,
-              className: 'w-full'
-            }}
-            realTimeValidation={true}
-            debounceMs={300}
-          >
-            <FormField
-              name="email"
-              type="email"
-              label="Email"
-              placeholder="Enter your email"
-              validation={['required', 'email']}
-              disabled={loading}
-              className="mb-4"
-            />
-            
-            <FormField
-              name="password"
-              type="password"
-              label="Password"
-              placeholder="Enter your password"
-              validation={['required', 'minLength:6']}
-              disabled={loading}
-              className="mb-6"
-              showPasswordStrength={false}
-            />
-          </SingleStepForm>
-        </FormProvider>
-
-        {/* Social Auth */}
-        <Button 
-          type="button" 
-          variant="outline" 
-          className="w-full mt-4"
-          onClick={handleGoogleLogin}
-          disabled={loading}
-        >
-          Sign in with Google
-        </Button>
-
-        {/* Legacy error display */}
-        {actionState?.error && (
-          <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {actionState.error}
-          </div>
-        )}
-        
-        {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>
-  )
-}
+'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'
+
+export function LoginForm() {
+  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')
+    } catch (err) {
+      console.error('Google 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>
+
+        <form onSubmit={handleLogin} 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}
+            />
+          </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}
+            />
+          </div>
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {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>
+  )
+}

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

@@ -1,201 +1,158 @@
-'use client'
-
-import React, { useState, useActionState } from 'react'
-import { 
-  Button, 
-  Card, 
-  Input, 
-  Label,
-  SingleStepForm,
-  FormField,
-  FormProvider
-} from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { useRouter } from 'next/navigation'
-import { signUpAction } from '@/lib/actions/auth'
-
-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()
-
-  // Redirect if already logged in
-  React.useEffect(() => {
-    if (user) {
-      router.push('/')
-    }
-  }, [user, router])
-
-  const handleSignUp = 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)
-    }
-  }
-
-  const handleGoogleSignUp = async () => {
-    try {
-      await signInWithOAuth('google', window.location.origin)
-    } catch (err) {
-      console.error('Google sign up 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
-      const nameValue = formData.get('name') as string
-      
-      try {
-        await signUp(emailValue, passwordValue)
-        router.push('/')
-      } catch (err) {
-        console.error('Sign up 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 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 */}
-        {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
-          </div>
-        )}
-
-        {/* Enhanced form with enterprise form system */}
-        <FormProvider>
-          <SingleStepForm
-            onSubmit={async (formData) => {
-              try {
-                const result = await formAction(formData)
-                if (result?.success) {
-                  const emailValue = formData.get('email') as string
-                  const passwordValue = formData.get('password') as string
-                  await signUp(emailValue, passwordValue)
-                  router.push('/')
-                }
-              } catch (err) {
-                console.error('Sign up error:', err)
-              }
-            }}
-            className="space-y-4"
-            submitButton={{
-              text: loading ? 'Signing Up...' : 'Sign Up',
-              disabled: loading,
-              className: 'w-full'
-            }}
-            realTimeValidation={true}
-            debounceMs={300}
-            crossFieldValidation={{
-              passwordMatch: {
-                fields: ['password', 'confirmPassword'],
-                validator: (values) => values.password === values.confirmPassword,
-                message: 'Passwords must match'
-              }
-            }}
-          >
-            <FormField
-              name="name"
-              type="text"
-              label="Name"
-              placeholder="Enter your full name"
-              validation={['required', 'minLength:2']}
-              disabled={loading}
-              className="mb-4"
-            />
-            
-            <FormField
-              name="email"
-              type="email"
-              label="Email"
-              placeholder="Enter your email"
-              validation={['required', 'email']}
-              disabled={loading}
-              className="mb-4"
-            />
-            
-            <FormField
-              name="password"
-              type="password"
-              label="Password"
-              placeholder="Enter your password"
-              validation={['required', 'minLength:8', 'hasUppercase', 'hasLowercase', 'hasNumber']}
-              disabled={loading}
-              className="mb-4"
-              showPasswordStrength={true}
-              helpText="Password must be at least 8 characters with uppercase, lowercase, and number"
-            />
-            
-            <FormField
-              name="confirmPassword"
-              type="password"
-              label="Confirm Password"
-              placeholder="Confirm your password"
-              validation={['required']}
-              disabled={loading}
-              className="mb-6"
-            />
-          </SingleStepForm>
-        </FormProvider>
-
-        {/* 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>
-  )
-}
+'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'
+
+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()
+
+  // Redirect if already logged in
+  React.useEffect(() => {
+    if (user) {
+      router.push('/')
+    }
+  }, [user, router])
+
+  const handleSignUp = 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)
+    }
+  }
+
+  const handleGoogleSignUp = async () => {
+    try {
+      await signInWithOAuth('google')
+    } catch (err) {
+      console.error('Google sign up 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 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="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>
+            <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}
+            />
+          </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}
+            />
+            <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"
+              required
+              disabled={loading}
+            />
+          </div>
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing Up...' : '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>
+  )
+}