@digilogiclabs/create-saas-app 2.10.0 → 2.12.0

package/src/templates/web/iot-dashboard/template/src/app/login/page.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card, CardContent } from '@digilogiclabs/saas-factory-ui'
+import { Cpu } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      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)
+    }
+  }
+
+  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">
+            <Cpu className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">IoT Dashboard</span>
+        </Link>
+
+        <Card className="border border-border">
+          <CardContent className="p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-2xl font-bold">Welcome back</h1>
+              <p className="text-muted-foreground mt-2">Sign in to your IoT dashboard</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="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 ? 'Signing in...' : 'Sign In'}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Don&apos;t have an account?{' '}
+                <Link href="/signup" className="text-primary hover:underline font-medium">
+                  Create an account
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/iot-dashboard/template/src/app/settings/page.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { Save, RefreshCw, Eye, EyeOff } from 'lucide-react'
+
+function generateApiKey(): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  let result = 'iot_'
+  for (let i = 0; i < 32; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length))
+  }
+  return result
+}
+
+export default function SettingsPage() {
+  const [name, setName] = useState('Admin User')
+  const [email] = useState('admin@example.com')
+  const [emailAlerts, setEmailAlerts] = useState(true)
+  const [smsAlerts, setSmsAlerts] = useState(false)
+  const [pushNotifications, setPushNotifications] = useState(true)
+  const [apiKey, setApiKey] = useState(generateApiKey)
+  const [showApiKey, setShowApiKey] = useState(false)
+
+  const maskedKey = apiKey.slice(0, 8) + '••••••••••••••••••••••••••••'
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
+        <h1 className="text-2xl font-bold text-foreground mb-8">Settings</h1>
+
+        <div className="max-w-2xl space-y-6">
+          {/* Profile */}
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-foreground mb-4">Profile</h2>
+            <div className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1.5">
+                  Name
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="w-full px-3 py-2 rounded-md border border-input bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                />
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  readOnly
+                  className="w-full px-3 py-2 rounded-md border border-input bg-muted text-muted-foreground text-sm cursor-not-allowed"
+                />
+                <p className="text-xs text-muted-foreground mt-1">Contact support to change your email address.</p>
+              </div>
+            </div>
+          </Card>
+
+          {/* Notification Preferences */}
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-foreground mb-4">Notification Preferences</h2>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-foreground">Email Alerts</p>
+                  <p className="text-xs text-muted-foreground">Receive alert notifications via email</p>
+                </div>
+                <button
+                  role="switch"
+                  aria-checked={emailAlerts}
+                  onClick={() => setEmailAlerts(!emailAlerts)}
+                  className={`relative w-11 h-6 rounded-full transition-colors cursor-pointer ${
+                    emailAlerts ? 'bg-primary' : 'bg-muted'
+                  }`}
+                >
+                  <span
+                    className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-background shadow transition-transform ${
+                      emailAlerts ? 'translate-x-5' : 'translate-x-0'
+                    }`}
+                  />
+                </button>
+              </div>
+              <div className="border-t border-border" />
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-foreground">SMS Alerts</p>
+                  <p className="text-xs text-muted-foreground">Receive critical alerts via SMS</p>
+                </div>
+                <button
+                  role="switch"
+                  aria-checked={smsAlerts}
+                  onClick={() => setSmsAlerts(!smsAlerts)}
+                  className={`relative w-11 h-6 rounded-full transition-colors cursor-pointer ${
+                    smsAlerts ? 'bg-primary' : 'bg-muted'
+                  }`}
+                >
+                  <span
+                    className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-background shadow transition-transform ${
+                      smsAlerts ? 'translate-x-5' : 'translate-x-0'
+                    }`}
+                  />
+                </button>
+              </div>
+              <div className="border-t border-border" />
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-foreground">Push Notifications</p>
+                  <p className="text-xs text-muted-foreground">Browser push notifications for real-time alerts</p>
+                </div>
+                <button
+                  role="switch"
+                  aria-checked={pushNotifications}
+                  onClick={() => setPushNotifications(!pushNotifications)}
+                  className={`relative w-11 h-6 rounded-full transition-colors cursor-pointer ${
+                    pushNotifications ? 'bg-primary' : 'bg-muted'
+                  }`}
+                >
+                  <span
+                    className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-background shadow transition-transform ${
+                      pushNotifications ? 'translate-x-5' : 'translate-x-0'
+                    }`}
+                  />
+                </button>
+              </div>
+            </div>
+          </Card>
+
+          {/* API Key */}
+          <Card className="p-6">
+            <h2 className="text-lg font-semibold text-foreground mb-4">API</h2>
+            <div>
+              <label htmlFor="api-key" className="block text-sm font-medium text-foreground mb-1.5">
+                API Key
+              </label>
+              <div className="flex items-center gap-2">
+                <input
+                  id="api-key"
+                  type="text"
+                  value={showApiKey ? apiKey : maskedKey}
+                  readOnly
+                  className="flex-1 px-3 py-2 rounded-md border border-input bg-muted text-foreground text-sm font-mono cursor-default"
+                />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowApiKey(!showApiKey)}
+                  aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
+                >
+                  {showApiKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </Button>
+              </div>
+              <div className="mt-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setApiKey(generateApiKey())
+                    setShowApiKey(false)
+                  }}
+                >
+                  <RefreshCw className="w-4 h-4 mr-1" />
+                  Regenerate
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground mt-2">
+                Use this key to authenticate API requests from your devices.
+              </p>
+            </div>
+          </Card>
+
+          {/* Save */}
+          <Button>
+            <Save className="w-4 h-4 mr-2" />
+            Save Changes
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/templates/web/iot-dashboard/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 { Cpu } 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">
+            <Cpu className="w-5 h-5 text-white" />
+          </div>
+          <span className="font-bold text-xl">IoT Dashboard</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 monitoring your devices</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/iot-dashboard/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/marketplace/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/marketplace/template/src/app/login/page.tsx

@@ -0,0 +1,112 @@
+'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 LoginPage() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      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)
+    }
+  }
+
+  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">Welcome back</h1>
+              <p className="text-muted-foreground mt-2">Sign in to your marketplace account</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="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 ? 'Signing in...' : 'Sign In'}
+              </Button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-muted-foreground text-sm">
+                Don&apos;t have an account?{' '}
+                <Link href="/signup" className="text-primary hover:underline font-medium">
+                  Create a seller account
+                </Link>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}