@digilogiclabs/create-saas-app 2.0.0 → 2.2.0

package/dist/templates/shared/contact/web/app/api/contact/route.ts

@@ -0,0 +1,113 @@
+/**
+ * Contact Form API
+ *
+ * POST — Submit a contact form message.
+ * Public endpoint with rate limiting. Sends email via Resend.
+ */
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { withPublicApi, escapeHtml } from '@/lib/api-security';
+import { sendEmail } from '@/lib/email/client';
+
+export const dynamic = 'force-dynamic';
+
+const CATEGORY_LABELS: Record<string, string> = {
+  general: 'General Inquiry',
+  support: 'Technical Support',
+  business: 'Business Inquiry',
+  feedback: 'Feedback',
+  other: 'Other',
+};
+
+const ContactSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters').max(100, 'Name is too long'),
+  email: z.string().email('Please enter a valid email address').max(255),
+  category: z.enum(['general', 'support', 'business', 'feedback', 'other'], {
+    errorMap: () => ({ message: 'Please select a category' }),
+  }),
+  message: z
+    .string()
+    .min(10, 'Message must be at least 10 characters')
+    .max(2000, 'Message is too long')
+    .refine((v) => !/<[^>]*>/.test(v), 'HTML tags are not allowed')
+    .refine(
+      (v) => !/(https?:\/\/|ftp:\/\/|www\.)\S+/i.test(v),
+      'Links are not allowed for security reasons'
+    ),
+});
+
+export const POST = withPublicApi(
+  {
+    operation: 'contact/post',
+    rateLimit: { limit: 5, windowSeconds: 300 }, // 5 per 5 min — strict
+  },
+  async (request: NextRequest) => {
+    const body = await request.json();
+    const parsed = ContactSchema.safeParse(body);
+
+    if (!parsed.success) {
+      const errors: Record<string, string> = {};
+      for (const issue of parsed.error.issues) {
+        const field = String(issue.path[0] ?? 'input');
+        if (!errors[field]) errors[field] = issue.message;
+      }
+      return NextResponse.json({ error: 'Validation failed', errors }, { status: 400 });
+    }
+
+    const { name, email, category, message } = parsed.data;
+    const categoryLabel = CATEGORY_LABELS[category] ?? category;
+
+    // Build plain-text email
+    const text = [
+      `New Contact Form Submission`,
+      ``,
+      `Name: ${name}`,
+      `Email: ${email}`,
+      `Category: ${categoryLabel}`,
+      ``,
+      `Message:`,
+      message,
+    ].join('\n');
+
+    // Build HTML email (escape all user input)
+    const html = `
+      <div style="font-family:sans-serif;max-width:600px;margin:0 auto">
+        <h2 style="border-bottom:2px solid #2563eb;padding-bottom:8px">New Contact Form Submission</h2>
+        <table style="width:100%;border-collapse:collapse">
+          <tr><td style="padding:8px 0;font-weight:bold;width:100px">Name:</td><td style="padding:8px 0">${escapeHtml(name)}</td></tr>
+          <tr><td style="padding:8px 0;font-weight:bold">Email:</td><td style="padding:8px 0">${escapeHtml(email)}</td></tr>
+          <tr><td style="padding:8px 0;font-weight:bold">Category:</td><td style="padding:8px 0">${escapeHtml(categoryLabel)}</td></tr>
+        </table>
+        <div style="background:#f3f4f6;padding:16px;border-radius:8px;margin-top:16px">
+          <strong>Message:</strong>
+          <p style="white-space:pre-wrap;margin:8px 0 0">${escapeHtml(message)}</p>
+        </div>
+        <p style="font-size:12px;color:#6b7280;margin-top:24px">
+          Sent from the contact form. Reply directly to respond to ${escapeHtml(name)}.
+        </p>
+      </div>`;
+
+    const adminEmail = process.env.ADMIN_EMAIL || process.env.EMAIL_FROM;
+    if (!adminEmail) {
+      console.error('[Contact] Neither ADMIN_EMAIL nor EMAIL_FROM is configured');
+      return NextResponse.json({ error: 'Server configuration error' }, { status: 500 });
+    }
+
+    const sent = await sendEmail({
+      to: adminEmail,
+      subject: `Contact: ${categoryLabel} — ${name}`,
+      html,
+      text,
+      replyTo: email,
+    });
+
+    if (!sent) {
+      return NextResponse.json(
+        { error: 'Failed to send message. Please try again later.' },
+        { status: 502 }
+      );
+    }
+
+    return NextResponse.json({ success: true });
+  }
+);

package/dist/templates/shared/contact/web/app/contact/page.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+
+const CATEGORIES = [
+  { value: 'general', label: 'General Inquiry' },
+  { value: 'support', label: 'Technical Support' },
+  { value: 'business', label: 'Business Inquiry' },
+  { value: 'feedback', label: 'Feedback' },
+  { value: 'other', label: 'Other' },
+] as const;
+
+type Status = 'idle' | 'submitting' | 'success' | 'error';
+
+export default function ContactPage() {
+  const [status, setStatus] = useState<Status>('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setStatus('submitting');
+    setErrorMessage('');
+    setFieldErrors({});
+
+    const formData = new FormData(e.currentTarget);
+    const body = {
+      name: formData.get('name') as string,
+      email: formData.get('email') as string,
+      category: formData.get('category') as string,
+      message: formData.get('message') as string,
+    };
+
+    try {
+      const res = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        if (data.errors) {
+          setFieldErrors(data.errors);
+        }
+        setErrorMessage(data.error || 'Something went wrong. Please try again.');
+        setStatus('error');
+        return;
+      }
+
+      setStatus('success');
+      (e.target as HTMLFormElement).reset();
+    } catch {
+      setErrorMessage('Network error. Please check your connection and try again.');
+      setStatus('error');
+    }
+  }
+
+  if (status === 'success') {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-24 text-center">
+        <div className="rounded-2xl border border-green-200 bg-green-50 p-8 dark:border-green-800 dark:bg-green-950">
+          <h1 className="mb-4 text-2xl font-bold text-green-800 dark:text-green-200">
+            Message Sent
+          </h1>
+          <p className="text-green-700 dark:text-green-300">
+            Thank you for reaching out. We&apos;ll get back to you as soon as possible.
+          </p>
+          <button
+            onClick={() => setStatus('idle')}
+            className="mt-6 rounded-lg bg-green-600 px-6 py-2 text-sm font-medium text-white hover:bg-green-700"
+          >
+            Send Another Message
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-16 sm:py-24">
+      <div className="mb-10 text-center">
+        <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Contact Us</h1>
+        <p className="mt-3 text-muted-foreground">
+          Have a question or need help? Fill out the form below and we&apos;ll get back to you.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Name */}
+        <div>
+          <label htmlFor="name" className="mb-1.5 block text-sm font-medium">
+            Name
+          </label>
+          <input
+            id="name"
+            name="name"
+            type="text"
+            required
+            minLength={2}
+            maxLength={100}
+            className="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            placeholder="Your name"
+          />
+          {fieldErrors.name && (
+            <p className="mt-1 text-sm text-red-500">{fieldErrors.name}</p>
+          )}
+        </div>
+
+        {/* Email */}
+        <div>
+          <label htmlFor="email" className="mb-1.5 block text-sm font-medium">
+            Email
+          </label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            required
+            maxLength={255}
+            className="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            placeholder="you@example.com"
+          />
+          {fieldErrors.email && (
+            <p className="mt-1 text-sm text-red-500">{fieldErrors.email}</p>
+          )}
+        </div>
+
+        {/* Category */}
+        <div>
+          <label htmlFor="category" className="mb-1.5 block text-sm font-medium">
+            Category
+          </label>
+          <select
+            id="category"
+            name="category"
+            required
+            defaultValue=""
+            className="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            <option value="" disabled>
+              Select a category
+            </option>
+            {CATEGORIES.map((cat) => (
+              <option key={cat.value} value={cat.value}>
+                {cat.label}
+              </option>
+            ))}
+          </select>
+          {fieldErrors.category && (
+            <p className="mt-1 text-sm text-red-500">{fieldErrors.category}</p>
+          )}
+        </div>
+
+        {/* Message */}
+        <div>
+          <label htmlFor="message" className="mb-1.5 block text-sm font-medium">
+            Message
+          </label>
+          <textarea
+            id="message"
+            name="message"
+            required
+            minLength={10}
+            maxLength={2000}
+            rows={5}
+            className="w-full rounded-lg border border-input bg-background px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            placeholder="How can we help?"
+          />
+          {fieldErrors.message && (
+            <p className="mt-1 text-sm text-red-500">{fieldErrors.message}</p>
+          )}
+        </div>
+
+        {/* Error banner */}
+        {status === 'error' && errorMessage && (
+          <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
+            {errorMessage}
+          </div>
+        )}
+
+        {/* Submit */}
+        <button
+          type="submit"
+          disabled={status === 'submitting'}
+          className="w-full rounded-lg bg-primary px-6 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+        >
+          {status === 'submitting' ? 'Sending...' : 'Send Message'}
+        </button>
+      </form>
+    </div>
+  );
+}

package/dist/templates/shared/cookie-consent/web/components/cookie-consent.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+
+/**
+ * GDPR cookie consent banner.
+ *
+ * Stores consent status in localStorage. Shows a fixed bottom banner
+ * until the user accepts or declines. Customize the text and styling
+ * to match your app's branding.
+ */
+export function CookieConsent() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const consent = localStorage.getItem('cookie-consent');
+    if (!consent) setVisible(true);
+  }, []);
+
+  if (!visible) return null;
+
+  const handleChoice = (choice: 'accepted' | 'declined') => {
+    localStorage.setItem('cookie-consent', choice);
+    setVisible(false);
+  };
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white p-4 shadow-lg dark:border-gray-800 dark:bg-gray-950">
+      <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 sm:flex-row sm:justify-between">
+        <p className="text-sm text-gray-600 dark:text-gray-400">
+          We use cookies to improve your experience.{' '}
+          <Link href="/privacy" className="underline hover:text-gray-900 dark:hover:text-gray-200">
+            Learn more
+          </Link>
+        </p>
+        <div className="flex gap-3">
+          <button
+            onClick={() => handleChoice('declined')}
+            className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+          >
+            Decline
+          </button>
+          <button
+            onClick={() => handleChoice('accepted')}
+            className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+          >
+            Accept
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/shared/database/postgresql/web/drizzle.config.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'drizzle-kit';
+import 'dotenv/config';
+
+if (!process.env.DATABASE_URL) {
+  throw new Error('DATABASE_URL is not set in .env file');
+}
+
+export default {
+  schema: './lib/db/schema.ts',
+  out: './lib/db/migrations',
+  dialect: 'postgresql',
+  dbCredentials: {
+    url: process.env.DATABASE_URL,
+  },
+  breakpoints: true,
+} satisfies Config;

package/dist/templates/shared/database/postgresql/web/lib/db/drizzle.ts

@@ -0,0 +1,39 @@
+import { drizzle, PostgresJsDatabase } from 'drizzle-orm/postgres-js';
+import postgres, { Sql } from 'postgres';
+import * as schema from './schema';
+import { config } from '@/lib/config';
+
+let _client: Sql | null = null;
+let _db: PostgresJsDatabase<typeof schema> | null = null;
+
+export function isDatabaseConfigured(): boolean {
+  return !!process.env.DATABASE_URL;
+}
+
+function getClient(): Sql {
+  if (!_client) {
+    _client = postgres(config.db.url);
+  }
+  return _client;
+}
+
+function getDatabase(): PostgresJsDatabase<typeof schema> {
+  if (!_db) {
+    _db = drizzle(getClient(), { schema });
+  }
+  return _db;
+}
+
+/** Lazy-initialized postgres-js client (defers connection until first use). */
+export const client = new Proxy({} as Sql, {
+  get(_target, prop) {
+    return (getClient() as any)[prop];
+  },
+});
+
+/** Lazy-initialized Drizzle ORM instance with typed schema. */
+export const db = new Proxy({} as PostgresJsDatabase<typeof schema>, {
+  get(_target, prop) {
+    return (getDatabase() as any)[prop];
+  },
+});

package/dist/templates/shared/database/postgresql/web/lib/db/schema.ts

@@ -0,0 +1,33 @@
+/**
+ * Drizzle ORM Schema
+ *
+ * Define your database tables here. Each app uses its own schema namespace
+ * for isolation when sharing a PostgreSQL instance.
+ *
+ * Usage:
+ *   import { db } from '@/lib/db/drizzle';
+ *   import { users } from '@/lib/db/schema';
+ *   const allUsers = await db.select().from(users);
+ *
+ * Generate migrations:
+ *   npx drizzle-kit generate
+ *
+ * Apply migrations:
+ *   npx drizzle-kit push
+ */
+import { pgTable, text, timestamp, boolean } from 'drizzle-orm/pg-core';
+// import { pgSchema } from 'drizzle-orm/pg-core'; // Uncomment for schema isolation
+
+// Use a schema namespace for isolation (recommended for multi-app databases)
+// export const appSchema = pgSchema('myapp');
+// export const users = appSchema.table('users', { ... });
+
+// Or use public schema (simpler for single-app databases)
+export const users = pgTable('users', {
+  id: text('id').primaryKey(),
+  email: text('email').notNull().unique(),
+  name: text('name'),
+  emailVerified: boolean('email_verified').default(false),
+  createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
+  updatedAt: timestamp('updated_at', { withTimezone: true }).defaultNow().notNull(),
+});

package/dist/templates/shared/database/supabase/web/lib/supabase/client.ts

@@ -0,0 +1,12 @@
+import { createBrowserClient } from '@supabase/ssr';
+
+/**
+ * Supabase client for use in Client Components.
+ * Uses browser-side auth (reads cookies automatically).
+ */
+export function createClient() {
+  return createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+}

package/dist/templates/shared/database/supabase/web/lib/supabase/server.ts

@@ -0,0 +1,31 @@
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+
+/**
+ * Supabase client for use in Server Components, Route Handlers, and Server Actions.
+ * Reads and writes auth cookies via Next.js cookies() API.
+ */
+export async function createClient() {
+  const cookieStore = await cookies();
+
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        getAll() {
+          return cookieStore.getAll();
+        },
+        setAll(cookiesToSet) {
+          try {
+            cookiesToSet.forEach(({ name, value, options }) =>
+              cookieStore.set(name, value, options)
+            );
+          } catch {
+            // Called from a Server Component — cookies are read-only
+          }
+        },
+      },
+    }
+  );
+}

package/dist/templates/shared/database/supabase/web/lib/supabase/service.ts

@@ -0,0 +1,15 @@
+import 'server-only';
+import { createClient } from '@supabase/supabase-js';
+
+/**
+ * Supabase admin client with service_role key.
+ * Bypasses Row Level Security — use only in trusted server-side code
+ * (webhooks, cron jobs, admin operations).
+ */
+export function createServiceClient() {
+  return createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.SUPABASE_SERVICE_ROLE_KEY!,
+    { auth: { persistSession: false } }
+  );
+}

package/dist/templates/shared/email/web/lib/email/branding.ts

@@ -0,0 +1,18 @@
+import type { EmailBranding } from '@digilogiclabs/platform-core/email-templates';
+
+/**
+ * App branding for shared email templates.
+ * Used by platform-core's email template functions (welcomeEmail, notificationEmail, etc.)
+ *
+ * Update these values to match your app's branding.
+ */
+export const APP_BRANDING: EmailBranding = {
+  appName: 'My App',
+  primaryColor: '#3b82f6',
+  gradientFrom: '#3b82f6',
+  gradientTo: '#8b5cf6',
+  fromEmail: 'noreply@example.com',
+  supportEmail: 'support@example.com',
+  baseUrl: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
+  footerText: 'Built with Digi Logic Labs platform',
+};

package/dist/templates/shared/email/web/lib/email/client.ts

@@ -0,0 +1,96 @@
+/**
+ * Email client singleton.
+ *
+ * Lazy-initializes a Resend client when first needed.
+ * Returns null gracefully if RESEND_API_KEY is not configured.
+ *
+ * Usage:
+ *   import { sendEmail } from '@/lib/email/client';
+ *   await sendEmail({ to: 'user@example.com', subject: 'Hello', html: '<p>Hi</p>' });
+ */
+
+let resendClient: Resend | null = null;
+let initialized = false;
+
+type Resend = {
+  emails: {
+    send: (params: {
+      from: string;
+      to: string | string[];
+      subject: string;
+      html: string;
+      text?: string;
+      replyTo?: string;
+    }) => Promise<{ data: { id: string } | null; error: { message: string } | null }>;
+  };
+};
+
+function getResend(): Resend | null {
+  if (initialized) return resendClient;
+  initialized = true;
+
+  const apiKey = process.env.RESEND_API_KEY;
+  if (!apiKey) {
+    console.warn('[Email] RESEND_API_KEY not configured — emails will be logged to console');
+    return null;
+  }
+
+  try {
+    // Dynamic import to avoid requiring resend in all environments
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { Resend } = require('resend');
+    resendClient = new Resend(apiKey);
+    return resendClient;
+  } catch {
+    console.warn('[Email] resend package not installed — emails will be logged to console');
+    return null;
+  }
+}
+
+const DEFAULT_FROM = process.env.EMAIL_FROM || 'noreply@example.com';
+
+interface EmailParams {
+  to: string | string[];
+  subject: string;
+  html: string;
+  text?: string;
+  from?: string;
+  replyTo?: string;
+}
+
+/**
+ * Send an email via Resend. Returns true on success, false on failure.
+ * Falls back to console logging in development or when Resend is not configured.
+ */
+export async function sendEmail(params: EmailParams): Promise<boolean> {
+  const from = params.from || DEFAULT_FROM;
+  const resend = getResend();
+
+  if (!resend) {
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Email] Would send:', { to: params.to, subject: params.subject, from });
+    }
+    return false;
+  }
+
+  try {
+    const { error } = await resend.emails.send({
+      from,
+      to: params.to,
+      subject: params.subject,
+      html: params.html,
+      text: params.text,
+      replyTo: params.replyTo,
+    });
+
+    if (error) {
+      console.error('[Email] Send failed:', error.message);
+      return false;
+    }
+
+    return true;
+  } catch (err) {
+    console.error('[Email] Send error:', err);
+    return false;
+  }
+}