ref: change auth setting in Login Screen

app/account/login/page.tsx

@@ -1,26 +1,46 @@
-"use client"
-import LoginForm from "@organisms/LoginForm"
-import React from "react"
+"use client";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import ForgotPasswordForm from "@organisms/ForgotPasswordForm";
+import LoginForm from "@organisms/LoginForm";
 
 const LoginPage: React.FC = () => {
+  const { t } = useTranslation();
+  const [showForgotPassword, setShowForgotPassword] = useState(false); // Nuevo estado para alternar entre Login y Recuperación de contraseña
+
   return (
     <div className="flex min-h-screen items-center justify-center bg-gradient-to-r from-blue-900 to-blue-700">
       <div className="w-full max-w-md rounded-lg bg-white p-10 shadow-lg">
-        <h2 className="mb-8 text-center text-4xl font-bold text-blue-900">Iniciar Sesión</h2>
-
-        <LoginForm />
-
-        <div className="mt-4 text-center">
-          <button
-            onClick={() => alert("Recuperación de contraseña")} //TODO: Implement password recovery
-            className="text-sm text-blue-600 hover:underline"
-          >
-            ¿Olvidaste tu contraseña?
-          </button>
-        </div>
+        {showForgotPassword ? (
+          <>
+            <h2 className="mb-8 text-center text-4xl font-bold text-blue-900">{t("lbl_reset_password")}</h2>
+            <ForgotPasswordForm />
+            <div className="mt-4 text-center">
+              <button
+                onClick={() => setShowForgotPassword(false)} // Permitir volver al formulario de Login
+                className="text-sm text-blue-600 hover:underline"
+              >
+                {t("msj_back_to_login")}
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <h2 className="mb-8 text-center text-4xl font-bold text-blue-900">{t("lbl_login")}</h2>
+            <LoginForm />
+            <div className="mt-4 text-center">
+              <button
+                onClick={() => setShowForgotPassword(true)} // Mostrar el formulario de recuperación de contraseña
+                className="text-sm text-blue-600 hover:underline"
+              >
+                {t("msj_forgot_password")}
+              </button>
+            </div>
+          </>
+        )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default LoginPage
+export default LoginPage;

app/home/page.tsx

@@ -1,12 +1,10 @@
-import CheckoutScreen from "@app/selfcheckout/CheckoutScreen"
-import LoyaltyProgramScreen from "@app/selfcheckout/LoyaltyProgramScreen"
-import PreCheckoutScreen from "@app/selfcheckout/PreCheckoutScreen"
 import React from "react"
+import PreCheckoutScreen from "@app/selfcheckout/precheckout/page"
 
 const HomeAfterLogin: React.FC = () => {
   return (
     <div className="min-h-screen bg-gray-100 p-6">
-      <LoyaltyProgramScreen />
+      <PreCheckoutScreen />
     </div>
   )
 }

app/layout.tsx

@@ -1,6 +1,6 @@
+import React from "react";
 import "@package/styles/tailwind.css";
 import Navbar from "@organisms/Navbar";
-import React from "react";
 
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

app/page.tsx

@@ -2,10 +2,13 @@
 import Grid from "@mui/material/Grid2"
 import Image from "next/image"
 import { useRouter } from "next/navigation"
+import { useTranslation } from "react-i18next"
 import Button from "@package/components/atoms/Button"
 
 const HomePage: React.FC = () => {
-  const router = useRouter()
+
+  const { t }   = useTranslation()
+  const router  = useRouter()
 
   const handleLoginClick = () => {
     router.push("/account/login")
@@ -40,23 +43,24 @@ const HomePage: React.FC = () => {
       </Grid>
 
       <Grid size={{ xs: 12, md: 6 }} textAlign={{ xs: "center", md: "left" }} padding={{ md: "0 24px" }}>
-        <h1 className="mb-4 text-5xl font-bold text-white md:text-6xl">SELF CHECKOUT</h1>
+        <h1 className="mb-4 text-5xl font-bold text-white md:text-6xl">{t('tle_self_checkout')}</h1>
 
-        <p className="mb-6 text-xl text-gray-200 md:text-2xl">Mejorando la experiencia en tienda</p>
+        <p className="mb-6 text-xl text-gray-200 md:text-2xl">{t('msj_improving_in_store_experience')}</p>
 
         <Grid container justifyContent={{ xs: "center", md: "flex-start" }} spacing={2}>
-          <Grid size={{ xs: 6, md: 6 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <Button
-              label="Iniciar Sesión"
+              label={t("lbl_login")}
               onClick={handleLoginClick}
-              className="rounded-lg bg-blue-600 px-6 py-3 text-lg text-white transition hover:bg-blue-700"
+              className="rounded-lg bg-blue-600 px-6 py-3 text-lg text-white transition hover:bg-blue-700 h-16 w-full"
             />
           </Grid>
-          <Grid size={{ xs: 6, md: 6 }}>
+          <Grid size={{ xs: 12, md: 6 }}>
             <Button
-              label="Ver Funcionalidades"
+              label={t("lbl_features")}
               onClick={handleFeaturesClick}
-              className="rounded-lg bg-gray-200 px-6 py-3 text-lg text-blue-600 transition hover:bg-gray-300"
+              className="rounded-lg bg-gray-200 px-6 py-3 text-lg text-blue-600 transition hover:bg-gray-300 h-16 w-full"
+              
             />
           </Grid>
         </Grid>