@digilogiclabs/create-saas-app 1.5.2 → 1.5.4

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

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
+

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.',
+    }
+  }
+}

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

@@ -0,0 +1,340 @@
+'use server'
+
+import { after } from 'next/server'
+import { revalidateTag, revalidatePath } from 'next/cache'
+import { getCurrentUser } from '@/lib/auth-server'
+import { z } from 'zod'
+
+// Common response type
+export type ActionResponse<T = any> = {
+  success: boolean
+  data?: T
+  error?: string
+  fieldErrors?: Record<string, string[]>
+}
+
+/**
+ * Example server action for contact form
+ */
+export async function submitContactForm(prevState: any, formData: FormData): Promise<ActionResponse> {
+  try {
+    const contactSchema = z.object({
+      name: z.string().min(2, 'Name must be at least 2 characters'),
+      email: z.string().email('Invalid email address'),
+      subject: z.string().min(5, 'Subject must be at least 5 characters'),
+      message: z.string().min(10, 'Message must be at least 10 characters'),
+    })
+
+    const rawData = {
+      name: formData.get('name') as string,
+      email: formData.get('email') as string,
+      subject: formData.get('subject') as string,
+      message: formData.get('message') as string,
+    }
+
+    const validationResult = contactSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const { name, email, subject, message } = validationResult.data
+
+    // Process contact form submission
+    // This could involve:
+    // - Sending email to admin
+    // - Saving to database
+    // - Sending auto-reply to user
+
+    // Use after() for non-blocking operations (Next.js 15.3 feature)
+    after(async () => {
+      // Send notification email to admin (non-blocking)
+      console.log('Sending notification email for contact form submission')
+      
+      // Log analytics event (non-blocking)
+      console.log('Logging contact form submission analytics')
+      
+      // Update dashboard statistics (non-blocking)
+      console.log('Updating contact form statistics')
+    })
+
+    return {
+      success: true,
+      data: { message: 'Thank you for your message. We\'ll get back to you soon!' }
+    }
+  } catch (error) {
+    console.error('Contact form error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Example server action for newsletter signup
+ */
+export async function subscribeToNewsletter(prevState: any, formData: FormData): Promise<ActionResponse> {
+  try {
+    const email = formData.get('email') as string
+
+    const emailSchema = z.string().email('Invalid email address')
+    const validationResult = emailSchema.safeParse(email)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please enter a valid email address',
+      }
+    }
+
+    // Add to newsletter list
+    // This could involve:
+    // - Adding to email service provider (Mailchimp, ConvertKit, etc.)
+    // - Saving to database
+    // - Sending welcome email
+
+    after(async () => {
+      // Send welcome email (non-blocking)
+      console.log(`Sending welcome email to ${email}`)
+      
+      // Add to email marketing platform (non-blocking)
+      console.log(`Adding ${email} to newsletter list`)
+      
+      // Track conversion (non-blocking)
+      console.log('Tracking newsletter signup conversion')
+    })
+
+    return {
+      success: true,
+      data: { message: 'Successfully subscribed to newsletter!' }
+    }
+  } catch (error) {
+    console.error('Newsletter subscription error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Example authenticated server action
+ */
+export async function createPost(prevState: any, formData: FormData): Promise<ActionResponse> {
+  try {
+    // Require authentication
+    const user = await getCurrentUser()
+    if (!user) {
+      return {
+        success: false,
+        error: 'Authentication required',
+      }
+    }
+
+    const postSchema = z.object({
+      title: z.string().min(3, 'Title must be at least 3 characters'),
+      content: z.string().min(10, 'Content must be at least 10 characters'),
+      published: z.boolean().default(false),
+    })
+
+    const rawData = {
+      title: formData.get('title') as string,
+      content: formData.get('content') as string,
+      published: formData.get('published') === 'true',
+    }
+
+    const validationResult = postSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const { title, content, published } = validationResult.data
+
+    // Create post in database
+    const post = {
+      id: Math.random().toString(36).substr(2, 9),
+      title,
+      content,
+      published,
+      authorId: user.id,
+      createdAt: new Date().toISOString(),
+    }
+
+    // Revalidate relevant paths and tags
+    revalidateTag('posts')
+    revalidatePath('/posts')
+    if (published) {
+      revalidatePath('/')
+    }
+
+    // Non-blocking operations
+    after(async () => {
+      // Send notifications to subscribers (non-blocking)
+      if (published) {
+        console.log('Notifying subscribers of new post')
+      }
+      
+      // Update search index (non-blocking)
+      console.log('Updating search index')
+      
+      // Track content creation analytics (non-blocking)
+      console.log('Tracking post creation analytics')
+    })
+
+    return {
+      success: true,
+      data: { post, message: published ? 'Post published successfully!' : 'Post saved as draft!' }
+    }
+  } catch (error) {
+    console.error('Create post error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Example action for updating user preferences
+ */
+export async function updatePreferences(prevState: any, formData: FormData): Promise<ActionResponse> {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return {
+        success: false,
+        error: 'Authentication required',
+      }
+    }
+
+    const preferencesSchema = z.object({
+      emailNotifications: z.boolean().default(true),
+      pushNotifications: z.boolean().default(false),
+      marketingEmails: z.boolean().default(false),
+      theme: z.enum(['light', 'dark', 'system']).default('system'),
+    })
+
+    const rawData = {
+      emailNotifications: formData.get('emailNotifications') === 'true',
+      pushNotifications: formData.get('pushNotifications') === 'true',
+      marketingEmails: formData.get('marketingEmails') === 'true',
+      theme: formData.get('theme') as 'light' | 'dark' | 'system' | null || 'system',
+    }
+
+    const validationResult = preferencesSchema.safeParse(rawData)
+    
+    if (!validationResult.success) {
+      return {
+        success: false,
+        error: 'Please check your input',
+        fieldErrors: validationResult.error.formErrors.fieldErrors,
+      }
+    }
+
+    const preferences = validationResult.data
+
+    // Update user preferences in database
+    // This would typically involve a database update
+
+    after(async () => {
+      // Update notification service settings (non-blocking)
+      console.log('Updating notification service settings')
+      
+      // Log preference changes for analytics (non-blocking)
+      console.log('Logging preference changes')
+    })
+
+    return {
+      success: true,
+      data: { preferences, message: 'Preferences updated successfully!' }
+    }
+  } catch (error) {
+    console.error('Update preferences error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}
+
+/**
+ * Example action with file upload
+ */
+export async function uploadAvatar(prevState: any, formData: FormData): Promise<ActionResponse> {
+  try {
+    const user = await getCurrentUser()
+    if (!user) {
+      return {
+        success: false,
+        error: 'Authentication required',
+      }
+    }
+
+    const file = formData.get('avatar') as File
+    
+    if (!file || file.size === 0) {
+      return {
+        success: false,
+        error: 'Please select a file to upload',
+      }
+    }
+
+    // Validate file type and size
+    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
+    const maxSize = 5 * 1024 * 1024 // 5MB
+
+    if (!allowedTypes.includes(file.type)) {
+      return {
+        success: false,
+        error: 'Please upload a valid image file (JPEG, PNG, GIF, or WebP)',
+      }
+    }
+
+    if (file.size > maxSize) {
+      return {
+        success: false,
+        error: 'File size must be less than 5MB',
+      }
+    }
+
+    // Process file upload
+    // This would typically involve:
+    // - Uploading to cloud storage (AWS S3, Cloudinary, etc.)
+    // - Resizing/optimizing the image
+    // - Updating user record in database
+
+    const avatarUrl = `https://example.com/avatars/${user.id}-${Date.now()}.${file.type.split('/')[1]}`
+
+    after(async () => {
+      // Generate different image sizes (non-blocking)
+      console.log('Generating avatar thumbnails')
+      
+      // Update CDN cache (non-blocking)
+      console.log('Updating CDN cache')
+      
+      // Log upload event (non-blocking)
+      console.log('Logging avatar upload event')
+    })
+
+    return {
+      success: true,
+      data: { avatarUrl, message: 'Avatar uploaded successfully!' }
+    }
+  } catch (error) {
+    console.error('Upload avatar error:', error)
+    return {
+      success: false,
+      error: 'An unexpected error occurred. Please try again.',
+    }
+  }
+}