create-ej-app 26.0.0 → 28.0.0

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

@@ -1,31 +1,93 @@
+/**
+ * Social authentication button components
+ *
+ * Provides OAuth sign-in buttons for Google and GitHub.
+ */
+
 'use client'
 
+import { useState, useSyncExternalStore } from 'react'
 import { Button } from '~/components/ui/button'
 import { getLastUsedLoginMethod, signIn } from '~/lib/auth-client'
+import { toastActionError, toastErrorMessage } from '~/lib/toast-message'
+
+type OAuthProvider = 'google' | 'github'
+
+const PROVIDER_LABELS: Record<OAuthProvider, string> = {
+  google: 'Google',
+  github: 'GitHub'
+}
+
+const emptySubscribe = () => () => {}
 
+/**
+ * Social Login Buttons Component
+ *
+ * Renders OAuth provider buttons (Google, GitHub).
+ * Highlights the last-used login method if available.
+ *
+ * @returns {JSX.Element} Flex container with OAuth provider buttons
+ */
 export const SocialLoginButtons = ({
   callbackUrl
 }: {
   callbackUrl?: string | null
 }) => {
-  const lastUsedLoginMethod = getLastUsedLoginMethod()
+  // Cookie/local storage is only available on the client; server snapshot is null.
+  const lastUsedLoginMethod = useSyncExternalStore(
+    emptySubscribe,
+    () => getLastUsedLoginMethod() ?? null,
+    () => null
+  )
+  const [pendingProvider, setPendingProvider] = useState<OAuthProvider | null>(
+    null
+  )
+
+  const target = callbackUrl || '/login'
+  const isPending = pendingProvider !== null
+
+  async function startOAuth(provider: OAuthProvider) {
+    if (pendingProvider) return
+
+    setPendingProvider(provider)
+    try {
+      const res = await signIn.social({
+        provider,
+        callbackURL: target
+      })
+      if (res?.error) throw res.error
+    } catch (err) {
+      console.error(`Error starting ${provider} sign-in:`, err)
+      if (
+        typeof err === 'object' &&
+        err &&
+        'message' in err &&
+        typeof err.message === 'string'
+      ) {
+        toastActionError(err)
+      } else {
+        toastErrorMessage(
+          `Sign-in with ${PROVIDER_LABELS[provider]} did not start. Try again.`
+        )
+      }
+      setPendingProvider(null)
+    }
+  }
 
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col gap-2">
       <Button
+        type="button"
         variant="outline"
-        onClick={async () => {
-          await signIn.social({
-            provider: 'google',
-            callbackURL: callbackUrl || '/login'
-          })
-        }}
+        disabled={isPending}
+        onClick={() => startOAuth('google')}
       >
         <svg
           viewBox="0 0 24 24"
           width="16"
           height="16"
           xmlns="http://www.w3.org/2000/svg"
+          aria-hidden
         >
           <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
             <path
@@ -46,29 +108,29 @@ export const SocialLoginButtons = ({
             />
           </g>
         </svg>
-        Continue with Google
-        {lastUsedLoginMethod === 'google' ? ' (last used)' : ''}
+        {pendingProvider === 'google'
+          ? 'Continuing with Google…'
+          : `Continue with Google${lastUsedLoginMethod === 'google' ? ' (last used)' : ''}`}
       </Button>
 
       <Button
+        type="button"
         variant="outline"
-        onClick={async () => {
-          await signIn.social({
-            provider: 'github',
-            callbackURL: callbackUrl || '/login'
-          })
-        }}
+        disabled={isPending}
+        onClick={() => startOAuth('github')}
       >
         <svg
           viewBox="0 0 24 24"
           width="16"
           height="16"
           xmlns="http://www.w3.org/2000/svg"
+          aria-hidden
         >
           <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
         </svg>
-        Continue with GitHub
-        {lastUsedLoginMethod === 'github' ? ' (last used)' : ''}
+        {pendingProvider === 'github'
+          ? 'Continuing with GitHub…'
+          : `Continue with GitHub${lastUsedLoginMethod === 'github' ? ' (last used)' : ''}`}
       </Button>
     </div>
   )

package/template/saas-starter/src/app/(invitation)/accept-invitation/[id]/accept-invitation-form.tsx

@@ -3,9 +3,13 @@
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import { toast } from 'sonner'
 import { Button } from '~/components/ui/button'
 import { organization, signOut } from '~/lib/auth-client'
+import {
+  toastActionError,
+  toastInfoMessage,
+  toastSuccessMessage
+} from '~/lib/toast-message'
 
 export function AcceptInvitationForm({
   invitationId,
@@ -22,11 +26,11 @@ export function AcceptInvitationForm({
     setAccepting(true)
     const { error } = await organization.acceptInvitation({ invitationId })
     if (error) {
-      toast.error(error.message ?? 'Failed to accept invitation')
+      toastActionError(error, 'The invitation was not accepted. Try again.')
       setAccepting(false)
       return
     }
-    toast.success(`You've joined ${organizationName}`)
+    toastSuccessMessage(`You joined ${organizationName}`)
     router.push('/app')
   }
 
@@ -34,11 +38,11 @@ export function AcceptInvitationForm({
     setDeclining(true)
     const { error } = await organization.rejectInvitation({ invitationId })
     if (error) {
-      toast.error(error.message ?? 'Failed to decline invitation')
+      toastActionError(error, 'The invitation was not declined. Try again.')
       setDeclining(false)
       return
     }
-    toast('Invitation declined')
+    toastInfoMessage('Invitation declined')
     router.push('/')
   }
 
@@ -47,7 +51,7 @@ export function AcceptInvitationForm({
   return (
     <div className="flex flex-col gap-3">
       <Button onClick={handleAccept} disabled={disabled} className="w-full">
-        {accepting ? 'Accepting...' : 'Accept invitation'}
+        {accepting ? 'Accepting…' : 'Accept Invitation'}
       </Button>
       <Button
         onClick={handleDecline}
@@ -55,7 +59,7 @@ export function AcceptInvitationForm({
         variant="outline"
         className="w-full"
       >
-        {declining ? 'Declining...' : 'Decline'}
+        {declining ? 'Declining…' : 'Decline'}
       </Button>
     </div>
   )
@@ -72,16 +76,18 @@ export function WrongAccountActions({
   async function handleSwitch() {
     setLoading(true)
     await signOut()
-    router.push(`/login?callbackUrl=/accept-invitation/${invitationId}`)
+    router.push(
+      `/login?callbackUrl=${encodeURIComponent(`/accept-invitation/${invitationId}`)}`
+    )
   }
 
   return (
     <div className="flex justify-center gap-3">
       <Button asChild variant="outline">
-        <Link href="/">Return home</Link>
+        <Link href="/">Go Home</Link>
       </Button>
       <Button onClick={handleSwitch} disabled={loading}>
-        {loading ? 'Signing out...' : 'Switch account'}
+        {loading ? 'Signing out…' : 'Switch Account'}
       </Button>
     </div>
   )

package/template/saas-starter/src/app/(invitation)/accept-invitation/[id]/page.tsx

@@ -1,5 +1,5 @@
-import { eq } from 'drizzle-orm'
 import { Building2 } from 'lucide-react'
+import type { Metadata } from 'next'
 import Link from 'next/link'
 import { Button } from '~/components/ui/button'
 import {
@@ -10,14 +10,20 @@ import {
   CardHeader,
   CardTitle
 } from '~/components/ui/card'
-import { db } from '~/db'
-import { invitationsTable } from '~/db/schema'
 import { getAuthSession } from '~/lib/auth'
+import { roleArticle } from '~/lib/rbac'
+import { privatePageRobots } from '~/lib/seo'
+import { getInvitation } from '../../actions/invitations'
 import {
   AcceptInvitationForm,
   WrongAccountActions
 } from './accept-invitation-form'
 
+export const metadata: Metadata = {
+  title: 'Accept Invitation',
+  robots: privatePageRobots
+}
+
 export default async function AcceptInvitationPage({
   params
 }: {
@@ -25,44 +31,22 @@ export default async function AcceptInvitationPage({
 }) {
   const { id } = await params
 
-  const invitation = await db.query.invitationsTable.findFirst({
-    where: eq(invitationsTable.id, id),
-    with: {
-      organization: {
-        columns: {
-          id: true,
-          name: true
-        }
-      },
-      user: {
-        columns: {
-          id: true,
-          name: true
-        }
-      }
-    },
-    columns: {
-      id: true,
-      status: true,
-      expiresAt: true,
-      email: true,
-      role: true
-    }
-  })
+  const invitation = (await getInvitation(id))?.data
 
   if (!invitation || invitation.status !== 'pending') {
     return (
       <main className="flex min-h-screen items-center justify-center px-4 py-12">
         <Card className="w-full max-w-md text-center">
           <CardHeader>
-            <CardTitle>Invitation not found</CardTitle>
+            <CardTitle>Invitation Not Found</CardTitle>
             <CardDescription>
-              This invitation link is invalid or has already been used.
+              This invitation link is invalid or was already used. Ask the
+              organization admin to send a new one.
             </CardDescription>
           </CardHeader>
           <CardFooter className="justify-center">
             <Button asChild variant="outline">
-              <Link href="/">Return home</Link>
+              <Link href="/">Go Home</Link>
             </Button>
           </CardFooter>
         </Card>
@@ -75,15 +59,15 @@ export default async function AcceptInvitationPage({
       <main className="flex min-h-screen items-center justify-center px-4 py-12">
         <Card className="w-full max-w-md text-center">
           <CardHeader>
-            <CardTitle>Invitation expired</CardTitle>
+            <CardTitle>Invitation Expired</CardTitle>
             <CardDescription>
               This invitation to <strong>{invitation.organization.name}</strong>{' '}
-              has expired. Ask your organization admin for a new one.
+              expired. Ask the organization admin to send a new one.
             </CardDescription>
           </CardHeader>
           <CardFooter className="justify-center">
             <Button asChild variant="outline">
-              <Link href="/">Return home</Link>
+              <Link href="/">Go Home</Link>
             </Button>
           </CardFooter>
         </Card>
@@ -101,17 +85,19 @@ export default async function AcceptInvitationPage({
             <div className="bg-primary/10 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
               <Building2 className="text-primary size-6" />
             </div>
-            <CardTitle>You&apos;ve been invited</CardTitle>
+            <CardTitle>You&apos;re Invited</CardTitle>
             <CardDescription>
-              <strong>{invitation.user.name}</strong> invited you to join{' '}
+              <strong>{invitation.inviter.name}</strong> invited you to join{' '}
               <strong>{invitation.organization.name}</strong>. Sign in to
               accept.
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Button asChild className="w-full">
-              <Link href={`/login?callbackUrl=/accept-invitation/${id}`}>
-                Sign in to accept
+              <Link
+                href={`/login?callbackUrl=${encodeURIComponent(`/accept-invitation/${id}`)}`}
+              >
+                Sign In to Accept
               </Link>
             </Button>
           </CardContent>
@@ -125,12 +111,12 @@ export default async function AcceptInvitationPage({
       <main className="flex min-h-screen items-center justify-center px-4 py-12">
         <Card className="w-full max-w-md text-center">
           <CardHeader>
-            <CardTitle>Wrong account</CardTitle>
+            <CardTitle>Wrong Account</CardTitle>
             <CardDescription>
               This invitation was sent to <strong>{invitation.email}</strong>{' '}
               but you&apos;re signed in as{' '}
-              <strong>{authSession.user.email}</strong>. Sign in with the
-              correct account to accept.
+              <strong>{authSession.user.email}</strong>. Switch accounts to
+              accept it.
             </CardDescription>
           </CardHeader>
           <CardFooter className="justify-center">
@@ -150,9 +136,9 @@ export default async function AcceptInvitationPage({
           </div>
           <CardTitle>Join {invitation.organization.name}</CardTitle>
           <CardDescription>
-            <strong>{invitation.user.name}</strong> has invited you to join{' '}
+            <strong>{invitation.inviter.name}</strong> invited you to join{' '}
             <strong>{invitation.organization.name}</strong>
-            {invitation.role ? ` as ${invitation.role}` : ''}.
+            {invitation.role ? ` as ${roleArticle(invitation.role)}` : ''}.
           </CardDescription>
         </CardHeader>
         <CardContent>

package/template/saas-starter/src/app/(invitation)/actions/invitations.ts

@@ -0,0 +1,32 @@
+'use server'
+
+import { eq } from 'drizzle-orm'
+import { db } from '~/db'
+import { invitationsTable } from '~/db/schema'
+import { actionClient, withWideEvent } from '~/lib/safe-action'
+import { stringValidation } from '~/lib/validations'
+
+/**
+ * Public view of an invitation for the accept page. Invitation IDs are
+ * unguessable, and accepting still requires signing in as the invited email.
+ */
+export const getInvitation = actionClient.inputSchema(stringValidation).action(
+  withWideEvent('getInvitation', async ({ parsedInput: invitationId }) => {
+    const invitation = await db.query.invitationsTable.findFirst({
+      where: eq(invitationsTable.id, invitationId),
+      columns: {
+        id: true,
+        status: true,
+        expiresAt: true,
+        email: true,
+        role: true
+      },
+      with: {
+        organization: { columns: { name: true } },
+        inviter: { columns: { name: true } }
+      }
+    })
+
+    return invitation ?? null
+  })
+)

package/template/saas-starter/src/app/(marketing)/contact-us/actions.ts

@@ -0,0 +1,23 @@
+'use server'
+
+import { db } from '~/db'
+import { contactLeadsTable } from '~/db/schema'
+import { actionClient, withWideEvent } from '~/lib/safe-action'
+import { contactFormSchema } from './validation'
+
+/** Public contact form. Submissions appear under Contact Leads in the admin panel. */
+export const submitContactForm = actionClient
+  .inputSchema(contactFormSchema)
+  .action(
+    withWideEvent('submitContactForm', async ({ parsedInput }) => {
+      await db.insert(contactLeadsTable).values({
+        name: parsedInput.name,
+        email: parsedInput.email,
+        phone: parsedInput.phone || null,
+        subject: parsedInput.subject,
+        message: parsedInput.message
+      })
+
+      return true
+    })
+  )

package/template/saas-starter/src/app/(marketing)/contact-us/contact-form.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2, Send } from 'lucide-react'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import { Field, FieldError, FieldLabel } from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import { Textarea } from '~/components/ui/textarea'
+import { useSafeActionMutation } from '~/lib/safe-action-client'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import { submitContactForm } from './actions'
+import { contactFormSchema } from './validation'
+
+type ContactFormValues = z.infer<typeof contactFormSchema>
+
+const FIELDS = [
+  { name: 'name', label: 'Full name', autoComplete: 'name', type: 'text' },
+  {
+    name: 'email',
+    label: 'Email address',
+    autoComplete: 'email',
+    type: 'email'
+  },
+  {
+    name: 'phone',
+    label: 'Phone number (optional)',
+    autoComplete: 'tel',
+    type: 'tel'
+  },
+  { name: 'subject', label: 'Subject', autoComplete: 'off', type: 'text' }
+] as const
+
+export function ContactForm() {
+  const form = useForm<ContactFormValues>({
+    resolver: zodResolver(contactFormSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      phone: '',
+      subject: '',
+      message: ''
+    }
+  })
+
+  const { mutate, isPending } = useSafeActionMutation(submitContactForm, {
+    onSuccess: () => {
+      toastSuccessMessage("We received your message. We'll reply by email.")
+      form.reset()
+    },
+    onError: error =>
+      toastActionError(
+        error,
+        "Your message wasn't sent. Check your connection and try again."
+      )
+  })
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(values => mutate(values))}
+      className="mt-8 space-y-5"
+      aria-busy={isPending}
+    >
+      {FIELDS.map(item => (
+        <Controller
+          key={item.name}
+          control={form.control}
+          name={item.name}
+          render={({ field, fieldState }) => (
+            <Field data-invalid={fieldState.invalid}>
+              <FieldLabel htmlFor={field.name}>{item.label}</FieldLabel>
+              <Input
+                id={field.name}
+                type={item.type}
+                autoComplete={item.autoComplete}
+                aria-invalid={fieldState.invalid}
+                {...field}
+              />
+              <FieldError
+                errors={fieldState.error ? [fieldState.error] : undefined}
+              />
+            </Field>
+          )}
+        />
+      ))}
+
+      <Controller
+        control={form.control}
+        name="message"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Message</FieldLabel>
+            <Textarea
+              id={field.name}
+              className="min-h-32"
+              placeholder="How can we help…"
+              aria-invalid={fieldState.invalid}
+              {...field}
+            />
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
+
+      <Button type="submit" className="w-full" disabled={isPending}>
+        {isPending ? (
+          <Loader2 className="animate-spin" aria-hidden="true" />
+        ) : (
+          <Send aria-hidden="true" />
+        )}
+        {isPending ? 'Sending…' : 'Send Message'}
+      </Button>
+    </form>
+  )
+}

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

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import { siteConfig } from '~/lib/siteConfig'
+import { ContactForm } from './contact-form'
+
+export const metadata: Metadata = {
+  title: 'Contact Us',
+  description: `Send the ${siteConfig.name} team a message.`
+}
+
+export default function ContactUsPage() {
+  return (
+    <div className="container max-w-xl py-12">
+      <h1 className="text-3xl font-bold tracking-tight">Contact Us</h1>
+      <p className="text-muted-foreground mt-2">
+        Send us a message and we&apos;ll reply by email within one business day.
+      </p>
+      <ContactForm />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(marketing)/contact-us/validation.ts

@@ -0,0 +1,22 @@
+import { z } from 'zod'
+import { MAX_MESSAGE_LENGTH, MIN_CONTACT_MESSAGE_LENGTH } from '~/lib/constants'
+import {
+  emailValidation,
+  phoneValidation,
+  stringValidation
+} from '~/lib/validations'
+
+export const contactFormSchema = z.object({
+  name: stringValidation,
+  email: emailValidation,
+  phone: phoneValidation.or(z.literal('')).optional(),
+  subject: stringValidation,
+  message: z
+    .string()
+    .trim()
+    .min(
+      MIN_CONTACT_MESSAGE_LENGTH,
+      `Write at least ${MIN_CONTACT_MESSAGE_LENGTH} characters.`
+    )
+    .max(MAX_MESSAGE_LENGTH)
+})

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

@@ -1,14 +1,48 @@
+import Link from 'next/link'
+import { Logo } from '~/components/logo'
 import { SiteFooter } from '~/components/site-footer'
+import { Button } from '~/components/ui/button'
+import { siteConfig } from '~/lib/siteConfig'
 
-export default async function Layout({
+export default function Layout({
   children
 }: Readonly<{
   children: React.ReactNode
 }>) {
   return (
-    <div className="flex min-h-screen flex-col space-y-4">
-      <main className="flex-1">{children}</main>
-      <SiteFooter />
+    <div className="bg-background text-foreground flex min-h-screen flex-col">
+      <a
+        href="#main-content"
+        className="bg-background text-foreground focus:ring-ring/50 sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-200 focus:rounded-md focus:px-4 focus:py-2 focus:ring-3"
+      >
+        Skip to content
+      </a>
+      <header className="bg-background/80 sticky top-0 z-50 border-b backdrop-blur">
+        <nav
+          aria-label="Primary"
+          className="container flex h-14 items-center justify-between gap-4"
+        >
+          <Link href="/" className="flex items-center">
+            <Logo size={28} priority className="text-lg" />
+          </Link>
+          <div className="flex items-center gap-2">
+            <Button asChild variant="ghost" size="sm">
+              <Link href="/contact-us">Contact</Link>
+            </Button>
+            <Button asChild size="sm">
+              <Link href="/login">Log In</Link>
+            </Button>
+          </div>
+        </nav>
+      </header>
+      <main
+        id="main-content"
+        tabIndex={-1}
+        className="focus-visible:outline-primary flex-1 focus-visible:outline-2 focus-visible:-outline-offset-2"
+      >
+        {children}
+      </main>
+      <SiteFooter name={siteConfig.name} />
     </div>
   )
 }