@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

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

@@ -1,128 +1,9 @@
-'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 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');
-    } 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>
-  );
-}
-
+import { SignupForm } from '@/components/client/signup-form'
+
+export default function SignupPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+      <SignupForm />
+    </div>
+  )
+}

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

@@ -0,0 +1,90 @@
+'use client'
+
+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 [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      })
+
+      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 (
+    <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={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+            />
+          </div>
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Signing in...' : 'Sign In'}
+          </Button>
+        </form>
+
+        <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-video/template/src/components/client/signup-form.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+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 [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [success, setSuccess] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    try {
+      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)
+    }
+  }
+
+  if (success) {
+    return (
+      <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 (
+    <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 rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+              minLength={8}
+            />
+          </div>
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? 'Creating account...' : 'Sign Up'}
+          </Button>
+        </form>
+
+        <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-video/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>
   )
 }