Merge pull request #8 from tomihq/feature/translate-to-spanish

Translate to spanish

Author: tomihq

app/admin/email/page.tsx app/[locale]/admin/email/page.tsxapp/admin/email/page.tsx renamed to app/[locale]/admin/email/page.tsx

@@ -0,0 +1,56 @@
+import "../globals.css";
+
+import { disableUser, saveProfileData } from "@/services/user";
+
+import { ClientProviders } from "@/components/provider/client-providers";
+import Script from "next/script";
+import WithSessionLayout from "@/components/provider/with-session-layout";
+import { cookies } from "next/headers";
+import { getNotificationsByUserId } from "@/services/notifications";
+import { logout } from "@/services/auth";
+
+type Locale = "en" | "es";
+
+export default async function LocaleLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const cookieStore = await cookies();
+	const localeCookie = cookieStore.get("NEXT_LOCALE")?.value as
+		| Locale
+		| undefined;
+	const locale: Locale = localeCookie === "es" ? "es" : "en";
+
+	const messages = (await import(`@/messages/${locale}.json`)).default;
+
+	return (
+		<>
+			<Script
+				id='clarity-script'
+				strategy='afterInteractive'
+				dangerouslySetInnerHTML={{
+					__html: `
+    (function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "sk0lq3aio2");
+          `,
+				}}
+			/>
+			<WithSessionLayout>
+				<ClientProviders
+					disableUser={disableUser}
+					saveProfileData={saveProfileData}
+					getNotificationsByUserId={getNotificationsByUserId}
+					onLogout={logout}
+					locale={locale}
+					messages={messages}
+				>
+					{children}
+				</ClientProviders>
+			</WithSessionLayout>
+		</>
+	);
+}

app/admin/notifications/[id]/page.tsx …ocale]/admin/notifications/[id]/page.tsxapp/admin/notifications/[id]/page.tsx renamed to app/[locale]/admin/notifications/[id]/page.tsx app/admin/notifications/[id]/page.tsx renamed to app/[locale]/admin/notifications/[id]/page.tsx

@@ -2,8 +2,7 @@
 
 import { useState } from 'react'
 import { motion } from 'framer-motion'
-import { useRouter } from 'next/navigation'
-import Link from 'next/link'
+import { useRouter } from '@/i18n/routing'
 import { Formik, Form, Field } from 'formik'
 import * as Yup from 'yup'
 import { Button } from '@/components/ui/button'
@@ -14,26 +13,28 @@ import ThirdPartyLogin from '@/components/auth/third-party-login'
 import { useTheme } from 'next-themes'
 import { cn } from '@/lib/utils'
 import { BLACK_BACKGROUND, BLACK_BACKGROUND_CONTAINERS } from '@/lib/colors'
-import { ModeToggle } from '../../components/theme-switcher';
-
-const LoginSchema = Yup.object().shape({
-    email: Yup.string().email('Invalid email').required('Email is required'),
-    password: Yup.string().required('Password is required'),
-})
+import { ModeToggle } from '@/components/theme-switcher';
+import { useTranslations } from 'next-intl';
 
 const taskEmojis = ['✅', '📝', '🏋️‍♀️', '📚', '🧘‍♀️', '💧', '🥗', '😴']
 
 
 const LoginForm = () => {
+    const t = useTranslations('auth.login');
     const [isLoading, setIsLoading] = useState(false)
     const router = useRouter()
     const { theme } = useTheme()
 
+    const LoginSchema = Yup.object().shape({
+        email: Yup.string().email(t('validation.emailInvalid')).required(t('validation.emailRequired')),
+        password: Yup.string().required(t('validation.passwordRequired')),
+    })
+
     const handleLogin = async (values, { setSubmitting, setErrors }) => {
         setIsLoading(true)
 
         if (values.email !== 'test@example.com' || values.password !== 'password123') {
-            setErrors({ email: 'Invalid email or password' })
+            setErrors({ email: t('validation.invalidCredentials') })
         } else {
             localStorage.setItem('userName', values.email.split('@')[0])
             router.push('/onboarding')
@@ -51,20 +52,20 @@ const LoginForm = () => {
         </div>
           <div className="mx-auto w-full max-w-sm lg:w-[450px] ">
             <div className="text-center">
-              <motion.div 
+              <motion.div
                 className="text-4xl mb-2"
                 initial={{ scale: 0 }}
                 animate={{ scale: 1 }}
                 transition={{ type: "spring", stiffness: 260, damping: 20 }}
               >
                 🚀
               </motion.div>
-              <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">Welcome back</h2>
+              <h2 className="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">{t('title')}</h2>
               <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
-                Sign in to continue your journey
+                {t('subtitle')}
               </p>
             </div>
-  
+
             <div className="mt-8">
               <Formik
                 initialValues={{ email: '', password: '' }}
@@ -75,7 +76,7 @@ const LoginForm = () => {
                   <Form className="space-y-6">
                     <div>
                       <Label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-white">
-                        Email address
+                        {t('email')}
                       </Label>
                       <div className="mt-1">
                         <Field
@@ -92,10 +93,10 @@ const LoginForm = () => {
                         )}
                       </div>
                     </div>
-  
+
                     <div>
                       <Label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-white">
-                        Password
+                        {t('password')}
                       </Label>
                       <div className="mt-1">
                         <Field
@@ -112,7 +113,7 @@ const LoginForm = () => {
                         )}
                       </div>
                     </div>
-  
+
                     <div>
                       <Button
                         type="submit"
@@ -123,7 +124,7 @@ const LoginForm = () => {
                           <Loader2 className="w-5 h-5 animate-spin" />
                         ) : (
                           <>
-                            Sign in
+                            {t('signInButton')}
                             <ArrowRight className="ml-2 -mr-1 w-5 h-5" />
                           </>
                         )}
@@ -132,23 +133,23 @@ const LoginForm = () => {
                   </Form>
                 )}
               </Formik>
-  
+
               <div className="mt-6">
                 <div className="relative">
                   <div className="absolute inset-0 flex items-center">
                     <div className="w-full border-t border-gray-300 dark:border-slate-700" />
                   </div>
                   <div className="relative flex justify-center text-sm">
-                    <span className="px-2 bg-gray-50 text-gray-500 dark:text-white dark:bg-slate-900">Or continue with</span>
+                    <span className="px-2 bg-gray-50 text-gray-500 dark:text-white dark:bg-slate-900">{t('orContinueWith')}</span>
                   </div>
                 </div>
-  
+
                 <div className="mt-6">
                   <ThirdPartyLogin/>
                 </div>
               </div>
-  
-            
+
+
             </div>
           </div>
         </div>
@@ -173,4 +174,4 @@ const LoginForm = () => {
     )
 }
 
-export default LoginForm
+export default LoginForm

app/admin/notifications/page.tsx app/[locale]/admin/notifications/page.tsxapp/admin/notifications/page.tsx renamed to app/[locale]/admin/notifications/page.tsx

@@ -0,0 +1,24 @@
+import { config } from '@/config/environment'
+import LoginForm from './login-form'
+import { routing } from '@/i18n/routing'
+
+export const dynamic = "force-static"
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export const metadata ={
+  title: `Login | ${config.brandName}`
+}
+
+export default async function LoginPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  return (
+    <LoginForm/>
+  )
+}
+