@digilogiclabs/create-saas-app 2.10.0 → 2.11.0

package/src/templates/web/marketplace/template/src/app/settings/page.tsx

@@ -0,0 +1,150 @@
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { User, Bell, CreditCard } from 'lucide-react'
+import { requireAuth } from '@/lib/auth-server'
+
+function ToggleSwitch({ defaultChecked = false }: { defaultChecked?: boolean }) {
+  return (
+    <label className="relative inline-flex items-center cursor-pointer">
+      <input type="checkbox" className="sr-only peer" defaultChecked={defaultChecked} />
+      <div className="w-11 h-6 bg-muted rounded-full peer peer-checked:bg-primary peer-focus:ring-2 peer-focus:ring-ring after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-background after:border after:border-border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full" />
+    </label>
+  )
+}
+
+export default async function SettingsPage() {
+  const user = await requireAuth()
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-3xl mx-auto px-4 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-foreground">Settings</h1>
+          <p className="text-muted-foreground mt-1">
+            Manage your account preferences
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* Profile Section */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <User className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Profile</h2>
+            </div>
+
+            <div className="space-y-4">
+              {/* Avatar */}
+              <div className="flex items-center gap-4 mb-6">
+                <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center border border-border">
+                  <User className="w-8 h-8 text-muted-foreground" />
+                </div>
+                <Button variant="outline" size="sm">Change Avatar</Button>
+              </div>
+
+              {/* Name */}
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1.5">
+                  Display Name
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  defaultValue={user.name || ''}
+                  placeholder="Your name"
+                  className="w-full px-4 py-2 border border-input rounded-lg focus:ring-2 focus:ring-ring bg-background text-foreground"
+                />
+              </div>
+
+              {/* Email (read-only) */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
+                  Email Address
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={user.email || ''}
+                  readOnly
+                  className="w-full px-4 py-2 border border-input rounded-lg bg-muted text-muted-foreground cursor-not-allowed"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Email cannot be changed. Contact support if you need to update it.
+                </p>
+              </div>
+            </div>
+          </Card>
+
+          {/* Notification Preferences */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <Bell className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Notifications</h2>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Order Updates</p>
+                  <p className="text-sm text-muted-foreground">
+                    Get notified when your order status changes
+                  </p>
+                </div>
+                <ToggleSwitch defaultChecked />
+              </div>
+
+              <div className="border-t border-border" />
+
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Marketing Emails</p>
+                  <p className="text-sm text-muted-foreground">
+                    Receive deals, promotions, and product recommendations
+                  </p>
+                </div>
+                <ToggleSwitch />
+              </div>
+
+              <div className="border-t border-border" />
+
+              <div className="flex items-center justify-between py-2">
+                <div>
+                  <p className="font-medium text-foreground">Vendor Messages</p>
+                  <p className="text-sm text-muted-foreground">
+                    Get notified when a vendor replies to your message
+                  </p>
+                </div>
+                <ToggleSwitch defaultChecked />
+              </div>
+            </div>
+          </Card>
+
+          {/* Payment Methods */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <CreditCard className="w-5 h-5 text-primary" />
+              <h2 className="text-lg font-semibold text-foreground">Payment Methods</h2>
+            </div>
+
+            <div className="text-center py-6">
+              <CreditCard className="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" />
+              <p className="text-muted-foreground mb-4">
+                No payment methods saved yet
+              </p>
+              <Button variant="outline">
+                Add Payment Method
+              </Button>
+            </div>
+          </Card>
+
+          {/* Save Button */}
+          <div className="flex justify-end">
+            <Button size="lg">
+              Save Changes
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/app/signup/page.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { ShoppingBag } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function SignupPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+    setLoading(true)
+    try {
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'signup' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to create account')
+      }
+      router.push('/dashboard')
+      router.refresh()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create account')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <Link href="/" className="flex items-center justify-center gap-2 mb-8 hover:opacity-80 transition-opacity">
+          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to flex items-center justify-center">
+            <ShoppingBag className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">Marketplace</span>
+        </Link>
+
+        <Card className="border border-border">
+          <CardContent className="p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold">Create your account</h1>
+              <p className="text-muted-foreground mt-2">Start buying and selling today</p>
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive p-3 rounded-lg mb-6 text-sm" role="alert">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium mb-1.5">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="you@example.com"
+                  required
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium mb-1.5">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Minimum 8 characters"
+                  required
+                  minLength={8}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1.5">
+                  Confirm Password
+                </label>
+                <input
+                  id="confirmPassword"
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="w-full px-3 py-2.5 rounded-lg border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-shadow"
+                  placeholder="Re-enter your password"
+                  required
+                />
+              </div>
+
+              <Button type="submit" className="w-full h-11 text-base cursor-pointer hover:brightness-110 active:scale-[0.98] transition-all duration-200" disabled={loading}>
+                {loading ? 'Creating account...' : 'Create Account'}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Already have an account?{' '}
+                <Link href="/login" className="text-primary hover:underline font-medium">
+                  Sign in
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/marketplace/template/src/lib/auth-session.ts

@@ -0,0 +1,52 @@
+/**
+ * Auth session adapter — demo implementation.
+ *
+ * Replace this file with a real provider when configuring your app:
+ *   - Keycloak:  import { auth } from '@/auth' (Auth.js)
+ *   - Supabase:  import { createClient } from '@/lib/supabase/server'
+ *   - Firebase:  import { getServerSession } from 'next-auth'
+ *
+ * The getSession() and getUser() exports are consumed by auth-server.ts
+ * and must return the same shape regardless of provider.
+ */
+import 'server-only'
+import { cookies } from 'next/headers'
+
+type SessionUser = {
+  id?: string
+  email?: string | null
+  name?: string | null
+  roles?: string[]
+}
+
+type Session = {
+  user?: SessionUser
+}
+
+/**
+ * Get the current session from cookies.
+ * Demo: reads a JSON cookie set at login. Replace with your auth provider.
+ */
+export async function getSession(): Promise<Session | null> {
+  const cookieStore = await cookies()
+  const sessionCookie = cookieStore.get('session')
+
+  if (!sessionCookie?.value) {
+    return null
+  }
+
+  try {
+    const session = JSON.parse(sessionCookie.value) as Session
+    return session
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Get the current authenticated user, or null.
+ */
+export async function getUser(): Promise<SessionUser | null> {
+  const session = await getSession()
+  return session?.user ?? null
+}

package/src/templates/web/micro-saas/template/src/app/api/auth/route.ts

@@ -0,0 +1,57 @@
+/**
+ * Demo auth API routes.
+ *
+ * POST /api/auth — Login or Signup
+ * DELETE /api/auth — Logout
+ *
+ * Replace with your real auth provider (Auth.js, Supabase Auth, etc.)
+ * when configuring your app for production.
+ */
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { email, password, action } = body
+
+    if (!email || !password) {
+      return NextResponse.json(
+        { error: 'Email and password are required' },
+        { status: 400 }
+      )
+    }
+
+    // Demo: accept any email/password combination.
+    // Replace with real authentication (database lookup, bcrypt compare, etc.)
+    const user = {
+      id: crypto.randomUUID(),
+      email,
+      name: email.split('@')[0],
+    }
+
+    const session = JSON.stringify({ user })
+    const cookieStore = await cookies()
+
+    cookieStore.set('session', session, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      path: '/',
+      maxAge: 60 * 60 * 24 * 7, // 7 days
+    })
+
+    return NextResponse.json({ user })
+  } catch {
+    return NextResponse.json(
+      { error: 'Authentication failed' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE() {
+  const cookieStore = await cookies()
+  cookieStore.delete('session')
+  return NextResponse.json({ success: true })
+}

package/src/templates/web/micro-saas/template/src/app/login/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useState } from 'react'
-import { useAuth } from '@digilogiclabs/app-sdk'
 import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
 import { Zap } from 'lucide-react'
 import { useRouter } from 'next/navigation'
@@ -11,17 +10,29 @@ export default function LoginPage() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
-  const { signIn, loading } = useAuth()
+  const [loading, setLoading] = useState(false)
   const router = useRouter()
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
+    setLoading(true)
     try {
-      await signIn(email, password)
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'login' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to sign in')
+      }
       router.push('/dashboard')
+      router.refresh()
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to sign in')
+    } finally {
+      setLoading(false)
     }
   }
 

package/src/templates/web/micro-saas/template/src/app/signup/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useState } from 'react'
-import { useAuth } from '@digilogiclabs/app-sdk'
 import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
 import { Zap } from 'lucide-react'
 import { useRouter } from 'next/navigation'
@@ -12,7 +11,7 @@ export default function SignupPage() {
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
   const [error, setError] = useState('')
-  const { signUp, loading } = useAuth()
+  const [loading, setLoading] = useState(false)
   const router = useRouter()
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -22,11 +21,23 @@ export default function SignupPage() {
       setError('Passwords do not match')
       return
     }
+    setLoading(true)
     try {
-      await signUp(email, password)
+      const res = await fetch('/api/auth', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password, action: 'signup' }),
+      })
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || 'Failed to create account')
+      }
       router.push('/dashboard')
+      router.refresh()
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to sign up')
+      setError(err instanceof Error ? err.message : 'Failed to create account')
+    } finally {
+      setLoading(false)
     }
   }
 

package/src/templates/web/micro-saas/template/src/lib/auth-session.ts

@@ -0,0 +1,52 @@
+/**
+ * Auth session adapter — demo implementation.
+ *
+ * Replace this file with a real provider when configuring your app:
+ *   - Keycloak:  import { auth } from '@/auth' (Auth.js)
+ *   - Supabase:  import { createClient } from '@/lib/supabase/server'
+ *   - Firebase:  import { getServerSession } from 'next-auth'
+ *
+ * The getSession() and getUser() exports are consumed by auth-server.ts
+ * and must return the same shape regardless of provider.
+ */
+import 'server-only'
+import { cookies } from 'next/headers'
+
+type SessionUser = {
+  id?: string
+  email?: string | null
+  name?: string | null
+  roles?: string[]
+}
+
+type Session = {
+  user?: SessionUser
+}
+
+/**
+ * Get the current session from cookies.
+ * Demo: reads a JSON cookie set at login. Replace with your auth provider.
+ */
+export async function getSession(): Promise<Session | null> {
+  const cookieStore = await cookies()
+  const sessionCookie = cookieStore.get('session')
+
+  if (!sessionCookie?.value) {
+    return null
+  }
+
+  try {
+    const session = JSON.parse(sessionCookie.value) as Session
+    return session
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Get the current authenticated user, or null.
+ */
+export async function getUser(): Promise<SessionUser | null> {
+  const session = await getSession()
+  return session?.user ?? null
+}