create-ej-app 26.0.0 → 28.0.0

package/template/saas-starter/src/app/(app)/app/page.tsx

@@ -2,30 +2,25 @@ import { Building2, Plus } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { redirect } from 'next/navigation'
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle
-} from '~/components/ui/card'
-import { getUserOrganizationsCached } from '~/lib/organization-access'
+import { Card, CardHeader, CardTitle } from '~/components/ui/card'
 import { siteConfig } from '~/lib/siteConfig'
+import { getOrganizationsCached } from '../actions/organizations'
 
-export default async function Page() {
-  const organizations = await getUserOrganizationsCached()
+export default async function AppPage() {
+  const organizations = (await getOrganizationsCached())?.data ?? []
 
   if (organizations.length === 0) {
     return redirect('/app/onboarding')
   }
 
   return (
-    <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-2 py-8">
+    <div className="mx-auto flex w-full max-w-4xl flex-col gap-8 px-4 py-12">
       <div className="flex flex-col gap-2">
-        <h1 className="text-3xl font-bold tracking-tight">
+        <h1 className="text-4xl font-bold tracking-tight">
           Welcome to {siteConfig.name}
         </h1>
-        <p className="text-muted-foreground">
-          Select an organization to manage, or create a new one.
+        <p className="text-muted-foreground text-lg">
+          Choose an organization to open, or create a new one.
         </p>
       </div>
 
@@ -38,15 +33,15 @@ export default async function Page() {
           >
             <Card className="hover:border-primary h-full cursor-pointer transition-all duration-200 hover:shadow-md">
               <CardHeader className="flex flex-row items-center gap-4">
-                {org.logo ? (
+                {org.logoUrl ? (
                   <div className="relative size-10 shrink-0 overflow-hidden rounded-lg">
                     <Image
-                      src={org.logo}
+                      src={org.logoUrl}
                       alt={org.name}
                       fill
                       sizes="40px"
                       className="object-cover"
-                      unoptimized={org.logo.startsWith('data:')}
+                      unoptimized={org.logoUrl.startsWith('data:')}
                     />
                   </div>
                 ) : (
@@ -56,22 +51,22 @@ export default async function Page() {
                 )}
                 <div className="min-w-0 flex-1">
                   <CardTitle className="truncate text-lg">{org.name}</CardTitle>
-                  <CardDescription className="truncate text-xs capitalize">
+                  <p className="text-muted-foreground truncate text-xs capitalize">
                     {org.role}
-                  </CardDescription>
+                  </p>
                 </div>
               </CardHeader>
             </Card>
           </Link>
         ))}
 
-        <Link href="/app/onboarding" className="group">
-          <Card className="hover:border-primary hover:bg-muted/50 flex h-full min-h-28 cursor-pointer flex-col items-center justify-center border-dashed transition-all">
+        <Link href="/app/onboarding">
+          <Card className="hover:border-primary hover:bg-muted/50 flex h-full cursor-pointer flex-col items-center justify-center border-dashed py-8 transition-all">
             <div className="bg-muted mb-2 flex size-10 items-center justify-center rounded-full">
               <Plus className="size-5" />
             </div>
             <div className="text-muted-foreground font-semibold">
-              Create organization
+              Create Organization
             </div>
           </Card>
         </Link>

package/template/saas-starter/src/app/(auth)/(account)/layout.tsx

@@ -0,0 +1,64 @@
+import { ArrowLeft } from 'lucide-react'
+import type { Metadata } from 'next'
+import { headers } from 'next/headers'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { Logo } from '~/components/logo'
+import { SiteFooter } from '~/components/site-footer'
+import { Button } from '~/components/ui/button'
+import { UserMenu } from '~/components/user-menu'
+import { getAuthSession } from '~/lib/auth'
+import { sanitizeCallbackUrl } from '~/lib/callback-url'
+import { privatePageRobots } from '~/lib/seo'
+import { siteConfig } from '~/lib/siteConfig'
+
+export const metadata: Metadata = {
+  robots: privatePageRobots
+}
+
+export default async function AccountLayout({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const authSession = await getAuthSession()
+
+  if (!authSession) {
+    const headerStore = await headers()
+    const callbackUrl =
+      sanitizeCallbackUrl(headerStore.get('x-pathname') ?? undefined) ??
+      '/profile'
+    redirect(`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`)
+  }
+
+  return (
+    <NuqsAdapter>
+      <div className="flex min-h-screen flex-col">
+        <header className="bg-background sticky top-0 z-50 flex h-14 shrink-0 items-center gap-2 border-b px-4">
+          <Link href="/" className="flex shrink-0 items-center">
+            <Logo size={32} priority className="text-lg" />
+          </Link>
+
+          <div className="flex flex-1 items-center justify-end gap-2">
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/app">
+                <ArrowLeft className="size-4" />
+                Back to App
+              </Link>
+            </Button>
+            <UserMenu
+              user={authSession.user}
+              isSuperAdmin={authSession.isSuperAdmin}
+              isImpersonating={!!authSession.session.impersonatedBy}
+            />
+          </div>
+        </header>
+
+        <main className="flex-1">{children}</main>
+
+        <SiteFooter name={siteConfig.name} />
+      </div>
+    </NuqsAdapter>
+  )
+}

package/template/saas-starter/src/app/(auth)/(account)/profile/page.tsx

@@ -0,0 +1,16 @@
+import { UserCog } from 'lucide-react'
+import { PageHeading } from '~/components/page-heading'
+import { ProfileForm } from './profile-form'
+
+export default function ProfilePage() {
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-6 p-4 sm:p-6">
+      <PageHeading
+        title="Your Profile"
+        description="Update your name and review your account details."
+        icon={UserCog}
+      />
+      <ProfileForm />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/(account)/profile/profile-form.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Mail, ShieldCheck } from 'lucide-react'
+import Link from 'next/link'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
+import { Badge } from '~/components/ui/badge'
+import { Button } from '~/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { Field, FieldError, FieldLabel } from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { Skeleton } from '~/components/ui/skeleton'
+import { updateUser, useSession } from '~/lib/auth-client'
+import {
+  toastActionError,
+  toastErrorMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
+import { stringValidation } from '~/lib/validations'
+
+const profileFormSchema = z.object({
+  name: stringValidation
+})
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>
+
+export function ProfileForm() {
+  const { data: session, isPending, refetch } = useSession()
+
+  if (isPending) {
+    return <ProfileFormSkeleton />
+  }
+
+  if (!session?.user) {
+    return (
+      <Card>
+        <CardContent className="py-8 text-center">
+          <p className="text-muted-foreground text-sm">
+            You are not signed in.
+          </p>
+          <Button asChild className="mt-4">
+            <Link href="/login?callbackUrl=/profile">Sign In</Link>
+          </Button>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return <ProfileFormInner user={session.user} onUpdated={refetch} />
+}
+
+function ProfileFormInner({
+  user,
+  onUpdated
+}: {
+  user: {
+    name: string
+    email: string
+    image?: string | null
+    emailVerified?: boolean
+    role?: string | null
+  }
+  onUpdated: () => Promise<void>
+}) {
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues: {
+      name: user.name ?? ''
+    }
+  })
+
+  const isSubmitting = form.formState.isSubmitting
+  const isDirty = form.formState.isDirty
+
+  const initials =
+    user.name
+      ?.split(' ')
+      .slice(0, 2)
+      .map(part => part[0])
+      .join('')
+      .toUpperCase() || 'NA'
+
+  async function onSubmit(values: ProfileFormValues) {
+    if (values.name.trim() === user.name) return
+
+    try {
+      const res = await updateUser({ name: values.name.trim() })
+      if (res?.error) throw res.error
+      await onUpdated()
+      form.reset({ name: values.name.trim() })
+      toastSuccessMessage('Profile updated')
+    } catch (err) {
+      console.error('Failed to update profile:', err)
+      if (
+        typeof err === 'object' &&
+        err &&
+        'message' in err &&
+        typeof err.message === 'string'
+      )
+        toastActionError(err)
+      else toastErrorMessage('Your profile was not saved. Try again.')
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Account</CardTitle>
+          <CardDescription>
+            Details from your account. Only your name can change here.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center gap-4">
+            <Avatar className="size-16">
+              <AvatarFallback className="text-foreground text-lg">
+                {initials}
+              </AvatarFallback>
+              {user.image ? (
+                <AvatarImage src={user.image} alt={user.name} />
+              ) : null}
+            </Avatar>
+            <div className="space-y-1">
+              <p className="text-base font-medium">{user.name}</p>
+              <div className="flex flex-wrap items-center gap-2">
+                {user.emailVerified ? (
+                  <Badge variant="success" className="gap-1">
+                    <ShieldCheck className="size-3" />
+                    Email verified
+                  </Badge>
+                ) : null}
+                {user.role ? (
+                  <Badge variant="outline" className="capitalize">
+                    {user.role}
+                  </Badge>
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          <DetailRow icon={Mail} label="Email" value={user.email} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Edit Profile</CardTitle>
+          <CardDescription>Update your display name.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <Controller
+              control={form.control}
+              name="name"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor={field.name}>Name</FieldLabel>
+                  <Input
+                    id={field.name}
+                    placeholder="Your full name"
+                    autoComplete="name"
+                    aria-invalid={fieldState.invalid}
+                    {...field}
+                  />
+                  <FieldError
+                    errors={fieldState.error ? [fieldState.error] : undefined}
+                  />
+                </Field>
+              )}
+            />
+
+            <div className="flex justify-end">
+              <Button type="submit" disabled={isSubmitting || !isDirty}>
+                {isSubmitting ? 'Saving…' : 'Save'}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function DetailRow({
+  icon: Icon,
+  label,
+  value
+}: {
+  icon: React.FC<{ className?: string }>
+  label: string
+  value: string
+}) {
+  return (
+    <div className="flex items-start gap-3 rounded-lg border p-3">
+      <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-md">
+        <Icon className="size-4" />
+      </div>
+      <div className="min-w-0 space-y-0.5">
+        <p className="text-muted-foreground text-xs tracking-wide uppercase">
+          {label}
+        </p>
+        <p className="text-sm wrap-break-word">{value}</p>
+      </div>
+    </div>
+  )
+}
+
+function ProfileFormSkeleton() {
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="mt-2 h-4 w-64" />
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center gap-4">
+            <Skeleton className="size-16 rounded-full" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          </div>
+          <Skeleton className="h-16 w-full" />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-32" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-32 self-end" />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/(account)/support/[ticketId]/page.tsx

@@ -0,0 +1,19 @@
+import { SupportTicketConversation } from '~/components/support/support-ticket-conversation'
+
+export default async function AccountSupportTicketPage({
+  params
+}: {
+  params: Promise<{ ticketId: string }>
+}) {
+  const { ticketId } = await params
+
+  return (
+    <div className="mx-auto w-full max-w-5xl p-4 sm:p-6">
+      <SupportTicketConversation
+        mode="app"
+        ticketId={ticketId}
+        backHref="/support"
+      />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/(account)/support/page.tsx

@@ -0,0 +1,9 @@
+import { SupportTicketsTable } from '~/components/support/support-tickets-table'
+
+export default function AccountSupportPage() {
+  return (
+    <div className="mx-auto w-full max-w-5xl p-4 sm:p-6">
+      <SupportTicketsTable mode="account" basePath="/support" />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(auth)/login/email-login-form.tsx

@@ -1,3 +1,10 @@
+/**
+ * Email-based login form with magic link
+ *
+ * Sends a passwordless authentication link to the user's email.
+ * Shows success message after link is sent.
+ */
+
 'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -6,20 +13,36 @@ import { useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { Button } from '~/components/ui/button'
-import {
-  Field,
-  FieldContent,
-  FieldError,
-  FieldLabel
-} from '~/components/ui/field'
+import { Field, FieldError, FieldLabel } from '~/components/ui/field'
 import { Input } from '~/components/ui/input'
 import { signIn } from '~/lib/auth-client'
-import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
+import {
+  toastActionError,
+  toastErrorMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
+import { emailValidation } from '~/lib/validations'
 
+/**
+ * Email login form schema
+ * Validates email format
+ */
 const emailLoginFormSchema = z.object({
-  email: z.email()
+  email: emailValidation
 })
 
+/**
+ * Email Login Form Component
+ *
+ * Allows users to sign in via magic link sent to their email.
+ * Shows confirmation message after sending the link.
+ *
+ * **States:**
+ * - Form: Ready for email input
+ * - Submitted: Shows confirmation after sending link
+ *
+ * @returns {JSX.Element} Email input form or confirmation message
+ */
 export const EmailLoginForm = ({
   callbackUrl
 }: {
@@ -49,7 +72,7 @@ export const EmailLoginForm = ({
       })
       if (res?.error) throw res.error
       setIsSent(email)
-      toastSuccessMessage('Magic link sent! Check your email.')
+      toastSuccessMessage('Magic link sent. Check your email.')
     } catch (err) {
       console.error('Error sending magic link:', err)
       if (
@@ -58,8 +81,8 @@ export const EmailLoginForm = ({
         'message' in err &&
         typeof err.message === 'string'
       )
-        toastErrorMessage(err.message)
-      else toastErrorMessage('Something went wrong. Please try again.')
+        toastActionError(err)
+      else toastErrorMessage('The magic link was not sent. Try again.')
     } finally {
       setIsLoading(false)
     }
@@ -69,7 +92,7 @@ export const EmailLoginForm = ({
     return (
       <div className="rounded-lg border p-4 text-center">
         <Mail className="text-primary mx-auto mb-2 size-6" />
-        <h3 className="mb-1 text-sm font-medium">Check your email</h3>
+        <h3 className="mb-1 text-sm font-medium">Check Your Email</h3>
         <p className="text-muted-foreground text-xs">
           We&apos;ve sent a magic link to <strong>{isSent}</strong>
         </p>
@@ -84,25 +107,24 @@ export const EmailLoginForm = ({
         name="email"
         render={({ field, fieldState }) => (
           <Field data-invalid={fieldState.invalid}>
-            <FieldLabel htmlFor="email">Email</FieldLabel>
-            <FieldContent>
-              <Input
-                id="email"
-                type="email"
-                placeholder="name@example.com"
-                autoCapitalize="off"
-                autoComplete="email"
-                autoFocus
-                aria-invalid={fieldState.invalid}
-                {...field}
-              />
-              <FieldError errors={[fieldState.error]} />
-            </FieldContent>
+            <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+            <Input
+              id={field.name}
+              placeholder="name@example.com"
+              autoCapitalize="off"
+              autoComplete="email"
+              autoFocus
+              aria-invalid={fieldState.invalid}
+              {...field}
+            />
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
           </Field>
         )}
       />
       <Button type="submit" className="w-full" disabled={isLoading}>
-        {isLoading ? 'Sending...' : 'Send Magic Link'}
+        {isLoading ? 'Sending…' : 'Send Magic Link'}
       </Button>
     </form>
   )

package/template/saas-starter/src/app/(auth)/login/page.tsx

@@ -1,6 +1,21 @@
-import { Terminal } from 'lucide-react'
+/**
+ * @fileoverview Login/Sign-in Page
+ *
+ * Authentication entry point supporting multiple sign-in methods:
+ * - Email with magic link (passwordless)
+ * - OAuth (Google, GitHub)
+ *
+ * **Behavior:**
+ * - Redirects to /admin for admin users
+ * - Redirects to /app for regular authenticated users
+ * - Shows login form for anonymous users
+ *
+ * @module app/(auth)/login/page
+ */
+
 import Link from 'next/link'
 import { redirect } from 'next/navigation'
+import { Logo } from '~/components/logo'
 import {
   Card,
   CardContent,
@@ -11,37 +26,41 @@ import {
 } from '~/components/ui/card'
 import { Separator } from '~/components/ui/separator'
 import { getAuthSession } from '~/lib/auth'
+import { sanitizeCallbackUrl } from '~/lib/callback-url'
 import { EmailLoginForm } from './email-login-form'
 import { SocialLoginButtons } from './social-login-buttons'
 
-function sanitizeCallback(value: string | string[] | undefined) {
-  if (typeof value !== 'string') return null
-  if (!value.startsWith('/') || value.startsWith('//')) return null
-  return value
-}
-
+/**
+ * Login Page Component
+ *
+ * Renders authentication page with multiple login options.
+ * Checks session and redirects already-authenticated users.
+ *
+ * @returns {JSX.Element} Login form with email and OAuth options
+ */
 export default async function LoginPage({
   searchParams
 }: {
   searchParams?: Promise<Record<string, string | string[] | undefined>>
 }) {
-  const resolvedParams = (await searchParams) ?? {}
-  const callbackUrl = sanitizeCallback(resolvedParams.callbackUrl)
-
   const authSession = await getAuthSession()
+  const resolvedParams = (await searchParams) ?? {}
+  const callbackUrl = sanitizeCallbackUrl(resolvedParams.callbackUrl)
 
-  if (authSession) {
-    return redirect(callbackUrl ?? (authSession.isAdmin ? '/admin' : '/app'))
+  if (authSession?.isAdmin) {
+    return redirect(callbackUrl ?? '/admin')
+  } else if (authSession) {
+    return redirect(callbackUrl ?? '/app')
   }
 
   return (
-    <main className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
       <Card className="w-full max-w-md">
         <CardHeader className="space-y-1 text-center">
-          <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
-            <Terminal className="text-primary size-6" />
-          </div>
-          <CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
+          <Link href="/" className="mx-auto mb-4 inline-flex">
+            <Logo size={40} priority className="text-xl" />
+          </Link>
+          <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
           <CardDescription className="text-muted-foreground text-sm">
             Sign in to your account to continue
           </CardDescription>
@@ -50,8 +69,7 @@ export default async function LoginPage({
           <div className="border-muted-foreground/50 bg-muted/50 rounded-lg border border-dashed p-4">
             <p className="text-muted-foreground text-sm">
               <strong>New to our site?</strong> No need to create a separate
-              account. Simply use one of the options below to both sign up and
-              log in.
+              account. Use either option below to sign up and log in.
             </p>
           </div>
 
@@ -77,11 +95,11 @@ export default async function LoginPage({
               href="/"
               className="text-primary underline-offset-4 hover:underline"
             >
-              Return to home page
+              Return to Home Page
             </Link>
           </div>
         </CardFooter>
       </Card>
-    </main>
+    </div>
   )
 }