create-nextjs-cms 0.8.10 → 0.9.0

package/templates/default/app/(auth)/auth/login/LoginPage.tsx

@@ -1,192 +1,192 @@
-'use client'
-
-import React, { useEffect, useRef, useState } from 'react'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { useI18n } from 'nextjs-cms/translations/client'
-import InfoCard from '@/components/InfoCard'
-import Link from 'next/link'
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
-import { Button } from '@/components/ui/button'
-import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { useTheme } from 'next-themes'
-import { login, useSession } from 'nextjs-cms/auth/react'
-import { wasLocaleChangedOnLogin } from 'nextjs-cms/translations'
-import LoginLocaleDropdown from '@/components/login-locale-dropdown'
-import { useAuthLocale } from '../../auth-locale-provider'
-
-type fromErrors = {
-    username?: string | null
-    password?: string | null
-    general?: string | null
-    [key: string]: any
-}
-
-export default function LoginPage() {
-    const { supportedLanguages, fallbackLanguage, initialLocale } = useAuthLocale()
-    const t = useI18n()
-    const session = useSession()
-    const searchParams = useSearchParams()
-    const router = useRouter()
-    const loginButtonRef = useRef<HTMLButtonElement>(null)
-    const formRef = useRef<HTMLFormElement>(null)
-    const { theme, setTheme } = useTheme()
-
-    const handleSubmit = async (event: React.FormEvent<HTMLButtonElement>) => {
-        event.preventDefault()
-        if (loginButtonRef.current) {
-            loginButtonRef.current.disabled = true
-            loginButtonRef.current.innerHTML = t('loading')
-        }
-        try {
-            // Only send locale if user explicitly changed it on login page
-            // Otherwise, server will use admin's stored DB preference
-            const localeChanged = wasLocaleChangedOnLogin()
-            await login({
-                username: formRef.current?.username.value,
-                password: formRef.current?.password.value,
-                locale: localeChanged ? initialLocale : undefined,
-            })
-        } catch (error: any) {
-            if (loginButtonRef.current) {
-                loginButtonRef.current.disabled = false
-                loginButtonRef.current.innerHTML = t('login')
-            }
-
-            if (!error.message) {
-                setFormErrors({
-                    general: t('serverError'),
-                })
-            } else {
-                setFormErrors({ general: error.message })
-            }
-        }
-    }
-
-    const [formErrors, setFormErrors] = useState<fromErrors>({ username: null, password: null, general: null })
-
-    useEffect(() => {
-        if (session?.status === 'authenticated') {
-            const from = searchParams.get('callbackUrl')
-            /**
-             * Prevent redirect to the same page to prevent infinite loop
-             */
-            if (from && !from.includes('auth/login')) {
-                router.push(from)
-            } else {
-                router.push('/')
-            }
-        }
-    }, [session])
-
-    return (
-        <>
-            <div className='bg-background text-foreground fixed top-0 left-0 h-full w-full flex-1 flex-col justify-center overflow-auto px-6 py-12 lg:px-8'>
-                <div className='flex w-full items-center justify-end gap-2 absolute end-10 top-10'>
-                    <LoginLocaleDropdown
-                        supportedLanguages={supportedLanguages}
-                        fallbackLanguage={fallbackLanguage}
-                        initialLocale={initialLocale}
-                    />
-                    <Button
-                        variant='default'
-                        onClick={() => {
-                            setTheme(theme === 'dark' ? 'light' : 'dark')
-                        }}
-                        type='button'
-                        className='rounded-full p-3 focus:outline-hidden'
-                    >
-                        <span className='sr-only'>Theme</span>
-                        <SunIcon className='hidden transition-all dark:block' aria-hidden='true' />
-                        <MoonIcon className='transition-all dark:hidden' aria-hidden='true' />
-                    </Button>
-                </div>
-                <div className='text-center sm:mx-auto sm:w-full sm:max-w-sm'>
-                    <span className='hover:text-foreground bg-gray-800 px-2 font-bold tracking-tighter text-amber-200 ring-1 ring-sky-500 transition-all duration-150 hover:bg-transparent hover:font-normal hover:tracking-[1em] hover:ring-0'>
-                        nextjs-cms
-                    </span>
-                    <h2 className='mt-10 text-center text-2xl leading-9 font-bold tracking-tight'>
-                        {t('loginToYourAccount')}
-                    </h2>
-                </div>
-
-                <div className='mx-auto mt-10 w-full max-w-md rounded-lg bg-linear-to-bl from-sky-50 to-green-50 p-12 shadow-lg ring-2 ring-sky-400 ring-inset dark:from-neutral-950 dark:to-neutral-800'>
-                    <form ref={formRef} className='space-y-6'>
-                        <div>
-                            <label htmlFor='username' className='block text-sm leading-6 font-medium'>
-                                {t('username')}
-                            </label>
-                            <div>
-                                <input
-                                    id='username'
-                                    name='username'
-                                    type='text'
-                                    placeholder={t('username')}
-                                    required
-                                    className='bg-background text-foreground block w-full rounded-md border-0 p-3 shadow-xs ring-1 ring-gray-300 outline-0 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6'
-                                />
-                            </div>
-                        </div>
-
-                        <div>
-                            <label htmlFor='password' className='block text-sm leading-6 font-medium'>
-                                {t('password')}
-                            </label>
-                            <div>
-                                <input
-                                    id='password'
-                                    name='password'
-                                    type='password'
-                                    placeholder={t('password')}
-                                    required
-                                    className='bg-background text-foreground block w-full rounded-md border-0 p-3 shadow-xs ring-1 ring-sky-300 outline-0 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6'
-                                />
-                            </div>
-                            <div className='mt-2 text-end'>
-                                <div className='text-sm'>
-                                    <Link href='#' className='font-semibold text-indigo-600 hover:text-indigo-500'>
-                                        {t('forgotPassword')}
-                                    </Link>
-                                </div>
-                            </div>
-                        </div>
-                        <div>
-                            <div className='flex items-center justify-between'>
-                                <div className='flex gap-2'>
-                                    <div className='flex items-center space-x-2'>
-                                        <Switch id='remember_me_check' name='rm' />
-                                        <Label htmlFor='remember_me_check'>{t('rememberMe')}</Label>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className='mt-2'></div>
-                        </div>
-
-                        <div>
-                            <Button
-                                ref={loginButtonRef}
-                                onClick={handleSubmit}
-                                type='submit'
-                                className='flex w-full justify-center rounded-md bg-linear-to-r from-green-400 to-blue-500 font-extrabold hover:to-sky-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 focus-visible:outline-solid'
-                            >
-                                {t('login')}
-                            </Button>
-                        </div>
-                    </form>
-                    {Object.keys(formErrors).map((key, index) => {
-                        if (formErrors[key]) {
-                            return (
-                                <div className='pt-3' key={index}>
-                                    <InfoCard
-                                        key={index}
-                                        result={{ key: 'danger', status: false, title: formErrors[key] }}
-                                    />
-                                </div>
-                            )
-                        }
-                    })}
-                </div>
-            </div>
-        </>
-    )
-}
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useI18n } from 'nextjs-cms/translations/client'
+import InfoCard from '@/components/InfoCard'
+import Link from 'next/link'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { useTheme } from 'next-themes'
+import { login, useSession } from 'nextjs-cms/auth/react'
+import { wasLanguageChangedOnLogin } from 'nextjs-cms/translations'
+import LoginLanguageDropdown from '@/components/login-language-dropdown'
+import { useAuthLanguage } from '../../auth-language-provider'
+
+type fromErrors = {
+    username?: string | null
+    password?: string | null
+    general?: string | null
+    [key: string]: any
+}
+
+export default function LoginPage() {
+    const { supportedLanguages, fallbackLanguage, initialLanguage } = useAuthLanguage()
+    const t = useI18n()
+    const session = useSession()
+    const searchParams = useSearchParams()
+    const router = useRouter()
+    const loginButtonRef = useRef<HTMLButtonElement>(null)
+    const formRef = useRef<HTMLFormElement>(null)
+    const { theme, setTheme } = useTheme()
+
+    const handleSubmit = async (event: React.FormEvent<HTMLButtonElement>) => {
+        event.preventDefault()
+        if (loginButtonRef.current) {
+            loginButtonRef.current.disabled = true
+            loginButtonRef.current.innerHTML = t('loading')
+        }
+        try {
+            // Only send language if user explicitly changed it on login page
+            // Otherwise, server will use admin's stored DB preference
+            const languageChanged = wasLanguageChangedOnLogin()
+            await login({
+                username: formRef.current?.username.value,
+                password: formRef.current?.password.value,
+                language: languageChanged ? initialLanguage : undefined,
+            })
+        } catch (error: any) {
+            if (loginButtonRef.current) {
+                loginButtonRef.current.disabled = false
+                loginButtonRef.current.innerHTML = t('login')
+            }
+
+            if (!error.message) {
+                setFormErrors({
+                    general: t('serverError'),
+                })
+            } else {
+                setFormErrors({ general: error.message })
+            }
+        }
+    }
+
+    const [formErrors, setFormErrors] = useState<fromErrors>({ username: null, password: null, general: null })
+
+    useEffect(() => {
+        if (session?.status === 'authenticated') {
+            const from = searchParams.get('callbackUrl')
+            /**
+             * Prevent redirect to the same page to prevent infinite loop
+             */
+            if (from && !from.includes('auth/login')) {
+                router.push(from)
+            } else {
+                router.push('/')
+            }
+        }
+    }, [session])
+
+    return (
+        <>
+            <div className='bg-background text-foreground fixed top-0 left-0 h-full w-full flex-1 flex-col justify-center overflow-auto px-6 py-12 lg:px-8'>
+                <div className='flex w-full items-center justify-end gap-2 absolute end-10 top-10'>
+                    <LoginLanguageDropdown
+                        supportedLanguages={supportedLanguages}
+                        fallbackLanguage={fallbackLanguage}
+                        initialLanguage={initialLanguage}
+                    />
+                    <Button
+                        variant='default'
+                        onClick={() => {
+                            setTheme(theme === 'dark' ? 'light' : 'dark')
+                        }}
+                        type='button'
+                        className='rounded-full p-3 focus:outline-hidden'
+                    >
+                        <span className='sr-only'>Theme</span>
+                        <SunIcon className='hidden transition-all dark:block' aria-hidden='true' />
+                        <MoonIcon className='transition-all dark:hidden' aria-hidden='true' />
+                    </Button>
+                </div>
+                <div className='text-center sm:mx-auto sm:w-full sm:max-w-sm'>
+                    <span className='hover:text-foreground bg-gray-800 px-2 font-bold tracking-tighter text-amber-200 ring-1 ring-sky-500 transition-all duration-150 hover:bg-transparent hover:font-normal hover:tracking-[1em] hover:ring-0'>
+                        nextjs-cms
+                    </span>
+                    <h2 className='mt-10 text-center text-2xl leading-9 font-bold tracking-tight'>
+                        {t('loginToYourAccount')}
+                    </h2>
+                </div>
+
+                <div className='mx-auto mt-10 w-full max-w-md rounded-lg bg-linear-to-bl from-sky-50 to-green-50 p-12 shadow-lg ring-2 ring-sky-400 ring-inset dark:from-neutral-950 dark:to-neutral-800'>
+                    <form ref={formRef} className='space-y-6'>
+                        <div>
+                            <label htmlFor='username' className='block text-sm leading-6 font-medium'>
+                                {t('username')}
+                            </label>
+                            <div>
+                                <input
+                                    id='username'
+                                    name='username'
+                                    type='text'
+                                    placeholder={t('username')}
+                                    required
+                                    className='bg-background text-foreground block w-full rounded-md border-0 p-3 shadow-xs ring-1 ring-gray-300 outline-0 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6'
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label htmlFor='password' className='block text-sm leading-6 font-medium'>
+                                {t('password')}
+                            </label>
+                            <div>
+                                <input
+                                    id='password'
+                                    name='password'
+                                    type='password'
+                                    placeholder={t('password')}
+                                    required
+                                    className='bg-background text-foreground block w-full rounded-md border-0 p-3 shadow-xs ring-1 ring-sky-300 outline-0 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6'
+                                />
+                            </div>
+                            <div className='mt-2 text-end'>
+                                <div className='text-sm'>
+                                    <Link href='#' className='font-semibold text-indigo-600 hover:text-indigo-500'>
+                                        {t('forgotPassword')}
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <div className='flex items-center justify-between'>
+                                <div className='flex gap-2'>
+                                    <div className='flex items-center space-x-2'>
+                                        <Switch id='remember_me_check' name='rm' />
+                                        <Label htmlFor='remember_me_check'>{t('rememberMe')}</Label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='mt-2'></div>
+                        </div>
+
+                        <div>
+                            <Button
+                                ref={loginButtonRef}
+                                onClick={handleSubmit}
+                                type='submit'
+                                className='flex w-full justify-center rounded-md bg-linear-to-r from-green-400 to-blue-500 font-extrabold hover:to-sky-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 focus-visible:outline-solid'
+                            >
+                                {t('login')}
+                            </Button>
+                        </div>
+                    </form>
+                    {Object.keys(formErrors).map((key, index) => {
+                        if (formErrors[key]) {
+                            return (
+                                <div className='pt-3' key={index}>
+                                    <InfoCard
+                                        key={index}
+                                        result={{ key: 'danger', status: false, title: formErrors[key] }}
+                                    />
+                                </div>
+                            )
+                        }
+                    })}
+                </div>
+            </div>
+        </>
+    )
+}

package/templates/default/app/(auth)/auth/login/page.tsx

@@ -1,11 +1,11 @@
-import LoginPage from './LoginPage'
-import auth from 'nextjs-cms/auth'
-import { redirect } from 'next/navigation'
-
-export default async function Page() {
-    const session = await auth()
-    if (session) {
-        redirect('/')
-    }
-    return <LoginPage />
-}
+import LoginPage from './LoginPage'
+import auth from 'nextjs-cms/auth'
+import { redirect } from 'next/navigation'
+
+export default async function Page() {
+    const session = await auth()
+    if (session) {
+        redirect('/')
+    }
+    return <LoginPage />
+}

package/templates/default/app/(auth)/auth-language-provider.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { createContext, useContext, type ReactNode } from 'react'
+
+export interface AuthLanguageValue {
+    supportedLanguages: readonly string[]
+    fallbackLanguage: string
+    initialLanguage: string
+}
+
+const AuthLanguageContext = createContext<AuthLanguageValue | null>(null)
+
+export function AuthLanguageProvider({
+    supportedLanguages,
+    fallbackLanguage,
+    initialLanguage,
+    children,
+}: AuthLanguageValue & { children: ReactNode }) {
+    return (
+        <AuthLanguageContext.Provider
+            value={{ supportedLanguages, fallbackLanguage, initialLanguage }}
+        >
+            {children}
+        </AuthLanguageContext.Provider>
+    )
+}
+
+export function useAuthLanguage(): AuthLanguageValue {
+    const ctx = useContext(AuthLanguageContext)
+    if (!ctx) {
+        throw new Error('useAuthLanguage must be used within AuthLanguageProvider')
+    }
+    return ctx
+}

package/templates/default/app/(auth)/layout.tsx

@@ -1,81 +1,81 @@
-import { Inter, Cairo } from 'next/font/google'
-import { cookies } from 'next/headers'
-import '../globals.css'
-import type { Metadata } from 'next'
-import { cn } from '@/lib/utils'
-import { ThemeProvider } from '@/components/ThemeProvider'
-import Providers from '@/app/providers'
-import auth from 'nextjs-cms/auth'
-import { getCMSConfig } from 'nextjs-cms/core'
-import { I18nProviderClient } from 'nextjs-cms/translations/client'
-import { resolveLocale, RTL_LOCALES, LOCALE_COOKIE_NAME } from 'nextjs-cms/translations'
-import { getClientDictionaries } from 'nextjs-cms/translations/server'
-import { redirect } from 'next/navigation'
-import { AuthLocaleProvider } from './auth-locale-provider'
-import { DirectionProvider } from "@/components/ui/direction"
-
-const inter = Inter({
-    subsets: ['latin'],
-    variable: '--font-sans',
-})
-
-const cairo = Cairo({
-    subsets: ['arabic', 'latin'],
-    variable: '--font-cairo',
-})
-
-export async function generateMetadata(): Promise<Metadata> {
-    const cmsConfig = await getCMSConfig()
-    return {
-        title: cmsConfig.ui.title,
-        description: 'nextjs-cms',
-    }
-}
-
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
-    const [session, cmsConfig] = await Promise.all([
-        auth(),
-        getCMSConfig(),
-    ])
-
-    if (session) {
-        redirect('/')
-    }
-
-    const { supportedLanguages, fallbackLanguage } = cmsConfig.i18n
-    const cookieStore = await cookies()
-    const cookieLocale = cookieStore.get(LOCALE_COOKIE_NAME)?.value
-    const locale = resolveLocale(cookieLocale, supportedLanguages, fallbackLanguage)
-    const isRTL = RTL_LOCALES.has(locale)
-    const dictionaries = getClientDictionaries(supportedLanguages)
-
-    return (
-        <html lang={locale} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
-            <body
-                className={cn(
-                    'bg-background min-h-screen font-sans antialiased',
-                    isRTL ? cairo.variable : inter.variable,
-                )}
-            >
-                <DirectionProvider dir={isRTL ? 'rtl' : 'ltr'} direction={isRTL ? 'rtl' : 'ltr'}>
-                <I18nProviderClient locale={locale} dictionaries={dictionaries}>
-                    <ThemeProvider
-                        attribute='class'
-                        defaultTheme={cmsConfig.ui.defaultTheme}
-                        enableSystem
-                        disableTransitionOnChange
-                    >
-                        <AuthLocaleProvider
-                            supportedLanguages={supportedLanguages}
-                            fallbackLanguage={fallbackLanguage}
-                            initialLocale={locale}
-                        >
-                            <Providers session={undefined}>{children}</Providers>
-                        </AuthLocaleProvider>
-                    </ThemeProvider>
-                </I18nProviderClient>
-                </DirectionProvider>
-            </body>
-        </html>
-    )
-}
+import { Inter, Cairo } from 'next/font/google'
+import { cookies } from 'next/headers'
+import '../globals.css'
+import type { Metadata } from 'next'
+import { cn } from '@/lib/utils'
+import { ThemeProvider } from '@/components/ThemeProvider'
+import Providers from '@/app/providers'
+import auth from 'nextjs-cms/auth'
+import { getCMSConfig } from 'nextjs-cms/core'
+import { I18nProviderClient } from 'nextjs-cms/translations/client'
+import { resolveLanguage, RTL_LANGUAGES, LANGUAGE_COOKIE_NAME } from 'nextjs-cms/translations'
+import { getClientDictionaries } from 'nextjs-cms/translations/server'
+import { redirect } from 'next/navigation'
+import { AuthLanguageProvider } from './auth-language-provider'
+import { DirectionProvider } from "@/components/ui/direction"
+
+const inter = Inter({
+    subsets: ['latin'],
+    variable: '--font-sans',
+})
+
+const cairo = Cairo({
+    subsets: ['arabic', 'latin'],
+    variable: '--font-cairo',
+})
+
+export async function generateMetadata(): Promise<Metadata> {
+    const cmsConfig = await getCMSConfig()
+    return {
+        title: cmsConfig.ui.title,
+        description: 'nextjs-cms',
+    }
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    const [session, cmsConfig] = await Promise.all([
+        auth(),
+        getCMSConfig(),
+    ])
+
+    if (session) {
+        redirect('/')
+    }
+
+    const { supportedLanguages, fallbackLanguage } = cmsConfig.i18n
+    const cookieStore = await cookies()
+    const cookieLanguage = cookieStore.get(LANGUAGE_COOKIE_NAME)?.value
+    const language = resolveLanguage(cookieLanguage, supportedLanguages, fallbackLanguage)
+    const isRTL = RTL_LANGUAGES.has(language)
+    const dictionaries = getClientDictionaries(supportedLanguages)
+
+    return (
+        <html lang={language} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
+            <body
+                className={cn(
+                    'bg-background min-h-screen font-sans antialiased',
+                    isRTL ? cairo.variable : inter.variable,
+                )}
+            >
+                <DirectionProvider dir={isRTL ? 'rtl' : 'ltr'} direction={isRTL ? 'rtl' : 'ltr'}>
+                <I18nProviderClient locale={language} dictionaries={dictionaries}>
+                    <ThemeProvider
+                        attribute='class'
+                        defaultTheme={cmsConfig.ui.defaultTheme}
+                        enableSystem
+                        disableTransitionOnChange
+                    >
+                        <AuthLanguageProvider
+                            supportedLanguages={supportedLanguages}
+                            fallbackLanguage={fallbackLanguage}
+                            initialLanguage={language}
+                        >
+                            <Providers session={undefined}>{children}</Providers>
+                        </AuthLanguageProvider>
+                    </ThemeProvider>
+                </I18nProviderClient>
+                </DirectionProvider>
+            </body>
+        </html>
+    )
+}