46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import ForgotPasswordForm from "@organisms/Auth/ForgotPasswordForm";
|
|
import LoginForm from "@organisms/Auth/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">
|
|
{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;
|