@digilogiclabs/create-saas-app 1.4.0 → 1.5.0

package/dist/templates/web/ui-auth-payments/template/src/components/providers/theme-provider.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import React, { createContext, useContext, useEffect } from 'react'
+
+interface ThemeContextType {
+  themeColor: string
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+interface AppThemeProviderProps {
+  children: React.ReactNode
+  themeColor: string
+}
+
+const THEME_COLORS = {
+  blue: {
+    primary: '221.2 83.2% 53.3%',
+    primaryForeground: '210 40% 98%',
+    secondary: '210 40% 96%',
+    accent: '210 40% 96%',
+    ring: '221.2 83.2% 53.3%',
+  },
+  green: {
+    primary: '142.1 76.2% 36.3%',
+    primaryForeground: '355.7 100% 97.3%',
+    secondary: '138.5 76.2% 96.7%',
+    accent: '138.5 76.2% 96.7%',
+    ring: '142.1 76.2% 36.3%',
+  },
+  purple: {
+    primary: '262.1 83.3% 57.8%',
+    primaryForeground: '210 40% 98%',
+    secondary: '270 3.18% 96.5%',
+    accent: '270 3.18% 96.5%',
+    ring: '262.1 83.3% 57.8%',
+  },
+  orange: {
+    primary: '24.6 95% 53.1%',
+    primaryForeground: '60 9.1% 97.8%',
+    secondary: '60 4.8% 95.9%',
+    accent: '60 4.8% 95.9%',
+    ring: '24.6 95% 53.1%',
+  },
+  red: {
+    primary: '0 72.2% 50.6%',
+    primaryForeground: '0 85.7% 97.3%',
+    secondary: '0 0% 96.3%',
+    accent: '0 0% 96.3%',
+    ring: '0 72.2% 50.6%',
+  },
+  slate: {
+    primary: '215 27.9% 16.9%',
+    primaryForeground: '0 0% 98%',
+    secondary: '210 40% 96%',
+    accent: '210 40% 96%',
+    ring: '215 27.9% 16.9%',
+  },
+}
+
+export function AppThemeProvider({ children, themeColor }: AppThemeProviderProps) {
+  useEffect(() => {
+    const colorScheme = THEME_COLORS[themeColor as keyof typeof THEME_COLORS] || THEME_COLORS.blue
+    
+    // Apply theme colors to CSS custom properties
+    const root = document.documentElement
+    root.style.setProperty('--primary', colorScheme.primary)
+    root.style.setProperty('--primary-foreground', colorScheme.primaryForeground)
+    root.style.setProperty('--secondary', colorScheme.secondary)
+    root.style.setProperty('--accent', colorScheme.accent)
+    root.style.setProperty('--ring', colorScheme.ring)
+    
+    // Store theme color preference
+    localStorage.setItem('{{packageName}}-theme-color', themeColor)
+  }, [themeColor])
+
+  const contextValue: ThemeContextType = {
+    themeColor,
+  }
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useAppTheme() {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useAppTheme must be used within a AppThemeProvider')
+  }
+  return context
+}

package/dist/templates/web/ui-auth-payments/template/src/components/shared/footer.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react'
+
+interface FooterProps {
+  className?: string
+}
+
+export function Footer({ className = '' }: FooterProps) {
+  return (
+    <footer className={`border-t bg-background py-4 ${className}`}>
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span>&copy; {new Date().getFullYear()} {{titleCaseName}}</span>
+          </div>
+          
+          <div className="flex items-center gap-2 text-xs">
+            <span>Generated with</span>
+            <a 
+              href="https://docs.digilogiclabs.com" 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className="hover:text-foreground transition-colors"
+            >
+              Digi Logic Labs
+            </a>
+            <span className="text-muted-foreground/60">
+              • UI v{{uiVersion}} • Auth v{{authVersion}} • Payments v{{paymentsVersion}} • {{generatedDate}}
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/dist/templates/web/ui-auth-payments/template/src/components/shared/header.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import Link from 'next/link';
 import { LogOut, CreditCard } from 'lucide-react';
 import { useAuth } from '@digilogiclabs/saas-factory-auth';
+import { ThemeToggle } from '../ui/theme-toggle';
 
 export function Header() {
   const { user, signOut } = useAuth();
@@ -23,6 +24,7 @@ export function Header() {
           {{titleCaseName}}
         </Link>
         <nav className="flex items-center gap-4">
+          <ThemeToggle />
           {user ? (
             <>
               <Link href="/dashboard" className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">

package/dist/templates/web/ui-auth-payments/template/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@digilogiclabs/saas-factory-ui"
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    if (theme === 'light') {
+      setTheme('dark')
+    } else if (theme === 'dark') {
+      setTheme('system')
+    } else {
+      setTheme('light')
+    }
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={toggleTheme}
+      className="h-9 w-9"
+    >
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/dist/templates/web/ui-auth-payments/template/src/lib/actions/auth.ts

@@ -0,0 +1,246 @@
+'use server'
+
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { z } from 'zod'
+
+// Schema for form validation
+const signInSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+})
+
+const signUpSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters'),
+  confirmPassword: z.string(),
+  name: z.string().min(2, 'Name must be at least 2 characters').optional(),
+}).refine((data) => data.password === data.confirmPassword, {
+  message: "Passwords don't match",
+  path: ["confirmPassword"],
+})
+
+// Response types
+type ActionResult = {
+  success: boolean
+  error?: string
+  fieldErrors?: Record<string, string[]>
+}
+
+/**
+ * Server action for signing in
+ * This works alongside the client-side @digilogiclabs/saas-factory-auth
+ */
+export async function signInAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const rawData = {
+      email: formData.get('email') as string,
+      password: formData.get('password') as string,
+    }
+
+    // Validate form data
+    const validationResult = signInSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const { email, password } = validationResult.data
+
+    // Note: The actual authentication is handled by the client-side library
+    // This server action is mainly for form validation and server-side processing
+    // You might want to add additional server-side logic here like:
+    // - Rate limiting
+    // - Logging
+    // - Analytics
+    
+    // For now, we'll return success and let the client handle the actual auth
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Sign in error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for signing up
+ */
+export async function signUpAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const rawData = {
+      email: formData.get('email') as string,
+      password: formData.get('password') as string,
+      confirmPassword: formData.get('confirmPassword') as string,
+      name: formData.get('name') as string,
+    }
+
+    // Validate form data
+    const validationResult = signUpSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const { email, password, name } = validationResult.data
+
+    // Additional server-side processing can go here
+    // - User existence check
+    // - Welcome email preparation
+    // - User analytics setup
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Sign up error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for signing out
+ */
+export async function signOutAction(): Promise<void> {
+  try {
+    const cookieStore = await cookies()
+    
+    // Clear auth cookies (adjust cookie names based on the auth library)
+    cookieStore.delete('saas-factory-auth-token')
+    cookieStore.delete('saas-factory-auth-user')
+    
+    // Additional cleanup can go here
+    // - Clear session data
+    // - Log sign out event
+    // - Clear cache
+    
+  } catch (error) {
+    console.error('Sign out error:', error)
+  }
+  
+  redirect('/')
+}
+
+/**
+ * Server action for OAuth redirect handling
+ */
+export async function handleOAuthCallback(provider: string, code: string): Promise<ActionResult> {
+  try {
+    // This would handle OAuth callback processing
+    // For now, we'll delegate to the client-side library
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('OAuth callback error:', error)
+    return {
+      success: false,
+      error: 'Authentication failed. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for password reset request
+ */
+export async function requestPasswordReset(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    const email = formData.get('email') as string
+    
+    if (!email) {
+      return {
+        success: false,
+        error: 'Email is required',
+      }
+    }
+
+    const emailSchema = z.string().email()
+    const validationResult = emailSchema.safeParse(email)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please enter a valid email address',
+      }
+    }
+
+    // Password reset logic would go here
+    // - Generate reset token
+    // - Send reset email
+    // - Log reset request
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Password reset error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Server action for updating user profile
+ */
+export async function updateProfileAction(prevState: any, formData: FormData): Promise<ActionResult> {
+  try {
+    // This would require authentication check
+    const cookieStore = await cookies()
+    const authToken = cookieStore.get('saas-factory-auth-token')?.value
+    
+    if (!authToken) {
+      redirect('/login')
+    }
+
+    const name = formData.get('name') as string
+    const email = formData.get('email') as string
+    
+    const updateSchema = z.object({
+      name: z.string().min(2, 'Name must be at least 2 characters').optional(),
+      email: z.string().email('Invalid email address').optional(),
+    })
+    
+    const validationResult = updateSchema.safeParse({ name, email })
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    // Profile update logic would go here
+    // - Update user in database
+    // - Update auth cookies
+    // - Send confirmation email if email changed
+    
+    return {
+      success: true,
+    }
+  } catch (error) {
+    console.error('Profile update error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}