create-ej-app 25.0.0 → 27.0.0

package/template/nextjs/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/nextjs/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,21 +13,41 @@ 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
 })
 
-export const EmailLoginForm = () => {
+/**
+ * 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
+}: {
+  callbackUrl?: string | null
+}) => {
   const form = useForm<z.infer<typeof emailLoginFormSchema>>({
     resolver: zodResolver(emailLoginFormSchema),
     defaultValues: {
@@ -40,11 +67,12 @@ export const EmailLoginForm = () => {
     try {
       const res = await signIn.magicLink({
         email,
-        name: ''
+        name: '',
+        callbackURL: callbackUrl || '/login'
       })
       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 (
@@ -53,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)
     }
@@ -64,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>
@@ -79,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/nextjs/src/app/(auth)/login/page.tsx

@@ -1,6 +1,21 @@
-import { ShoppingBag } 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,22 +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'
 
-export default async function LoginPage() {
+/**
+ * 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 authSession = await getAuthSession()
+  const resolvedParams = (await searchParams) ?? {}
+  const callbackUrl = sanitizeCallbackUrl(resolvedParams.callbackUrl)
 
-  if (authSession) redirect('/')
+  if (authSession?.isAdmin) {
+    return redirect(callbackUrl ?? '/admin')
+  } else if (authSession) {
+    return redirect(callbackUrl ?? '/app')
+  }
 
   return (
     <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">
-            <ShoppingBag 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>
@@ -35,12 +69,11 @@ 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>
 
-          <EmailLoginForm />
+          <EmailLoginForm callbackUrl={callbackUrl} />
 
           <div className="relative">
             <div className="absolute inset-0 flex items-center">
@@ -53,7 +86,7 @@ export default async function LoginPage() {
             </div>
           </div>
 
-          <SocialLoginButtons />
+          <SocialLoginButtons callbackUrl={callbackUrl} />
         </CardContent>
         <CardFooter className="flex flex-col space-y-4">
           <Separator className="my-2" />
@@ -62,7 +95,7 @@ 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>

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

@@ -1,26 +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
+}) => {
+  // 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
 
-export const SocialLoginButtons = () => {
-  const lastUsedLoginMethod = getLastUsedLoginMethod()
+    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'
-          })
-        }}
+        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
@@ -41,28 +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'
-          })
-        }}
+        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/nextjs/src/app/(marketing)/layout.tsx

@@ -1,14 +1,45 @@
+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 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>
   )
 }