From bd640b7c39c3a17a8f2cc37d6b02a59fb1c19c15 Mon Sep 17 00:00:00 2001
From: Elliot Axel Noriega <elliotnoriega@gmail.com>
Date: Thu, 11 Jul 2024 18:41:26 -0600
Subject: [PATCH] =?UTF-8?q?Implementaci=C3=B3n=20de=20PageLoader=20y=20cor?=
 =?UTF-8?q?reccion=20de=20error=20en=20atributo=20onChange=20en=20FormInpu?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cosiap_frontend/src/App.jsx                            | 10 +++++++++-
 .../src/components/common/base/FormInput.jsx           |  2 +-
 .../common/layouts/LayoutBaseAuthenticator.jsx         |  8 ++++++--
 .../src/components/common/ui/PageLoader.jsx            |  8 ++++++++
 cosiap_frontend/src/components/users/AuthPage.jsx      |  9 ++++++---
 cosiap_frontend/src/components/users/Login/Login.jsx   |  4 ++--
 .../src/components/users/Login/LoginForm.jsx           |  4 +++-
 .../src/components/users/Register/Register.jsx         |  4 ++--
 .../src/components/users/Register/RegisterForm.jsx     |  4 +++-
 9 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 cosiap_frontend/src/components/common/ui/PageLoader.jsx

diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index adbdd3f..0ad6f47 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -3,12 +3,16 @@ import {PaginaHead} from "@/components/common/utility/PaginaHead";
 import {Autenticador} from "@/components/common/utility/Autenticador";
 import {LoginRequiredRoutes} from "@/components/common/utility/LoginRequiredRoutes"
 import "./App.css";
+import PageLoader from '@/components/common/ui/PageLoader';
 
 import { AuthPage } from "./components/users/AuthPage";
 import Inicio from "./components/users/Inicio";
+import { useState } from 'react';
 
 
 function App() {
+  const [viewPageLoader, setViewPageLoader] = useState(false);
+
   return (    
     <BrowserRouter>
       <PaginaHead>
@@ -16,12 +20,16 @@ function App() {
         <link rel="icon" href="http://localhost:8000/static/images/cosiap_favicon.png" />
         <link rel="stylesheet" href="http://localhost:8000/static/css/colores.css" />
       </PaginaHead>
+
+      {
+        viewPageLoader && <PageLoader />
+      }
       
       <Autenticador>
         <Routes>
           {/* Rutas publicas */}
           <Route path="/" element={<Navigate to="/auth" />} />
-          <Route path="/auth" element={<AuthPage/>} />
+          <Route path="/auth" element={<AuthPage setViewPageLoader={setViewPageLoader}/>} />
 
           {/* Rutas protegidas */}
           <Route element={<LoginRequiredRoutes />}>
diff --git a/cosiap_frontend/src/components/common/base/FormInput.jsx b/cosiap_frontend/src/components/common/base/FormInput.jsx
index 00adf89..d0ad401 100644
--- a/cosiap_frontend/src/components/common/base/FormInput.jsx
+++ b/cosiap_frontend/src/components/common/base/FormInput.jsx
@@ -24,7 +24,7 @@ FormInput.propTypes = {
     type: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
     className: PropTypes.string,
-    onChange: PropTypes.string,
+    onChange: PropTypes.func,
     register: PropTypes.func.isRequired,
     errors: PropTypes.oneOfType([
         PropTypes.object,
diff --git a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
index 99c8343..8523ff4 100644
--- a/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
+++ b/cosiap_frontend/src/components/common/layouts/LayoutBaseAuthenticator.jsx
@@ -1,8 +1,10 @@
 
 export default function LayoutBaseAuthenticator({title, children}) {
     return (
+        <>
         <div className="min-h-screen bg-white relative flex items-center justify-center">
-            <div className="flex w-full min-h-screen">
+            
+            <div className="flex w-full min-h-screen ">
                 <div className="bg-[var(--principal-mf)] w-full sm:w-8/12 min-h-screen">
                 
                 </div>
@@ -14,6 +16,7 @@ export default function LayoutBaseAuthenticator({title, children}) {
                     
                 </div>
             </div>
+            
             {/* Contenido de authentication */}
             <div className="absolute inset-0 flex items-center justify-center">
             <div
@@ -34,11 +37,12 @@ export default function LayoutBaseAuthenticator({title, children}) {
                             {title}
                         </h1>
                     </div>
-
+                    
                     {children}
                 </div>
                 
             </div>
         </div>
+        </>
     );
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/common/ui/PageLoader.jsx b/cosiap_frontend/src/components/common/ui/PageLoader.jsx
new file mode 100644
index 0000000..62f2b86
--- /dev/null
+++ b/cosiap_frontend/src/components/common/ui/PageLoader.jsx
@@ -0,0 +1,8 @@
+
+export default function PageLoader() {
+    return (
+        <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-400 bg-opacity-55">
+            <div className="border-white h-20 w-20 animate-spin rounded-full border-8 border-t-[var(--principal-f)]"/>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/AuthPage.jsx b/cosiap_frontend/src/components/users/AuthPage.jsx
index 75bbf61..5a1913d 100644
--- a/cosiap_frontend/src/components/users/AuthPage.jsx
+++ b/cosiap_frontend/src/components/users/AuthPage.jsx
@@ -3,15 +3,15 @@ import { Login } from "./Login/Login";
 import Register from './Register/Register';
 import { useState } from 'react';
 
-export function AuthPage() {
+export function AuthPage( {setViewPageLoader} ) {
     const [component, setComponent] = useState('Login')
 
     const renderPage = () => {
         switch (component) {
             case 'Login':
-              return <Login setComponent={setComponent}/>;
+              return <Login setComponent={setComponent} setViewPageLoader={setViewPageLoader}/>;
             case 'Register':
-                return <Register setComponent={setComponent} />;
+                return <Register setComponent={setComponent} setViewPageLoader={setViewPageLoader}/>;
             // case 'resetPassword':
             //   return <ResetPassword setView={setView} />;
             default:
@@ -20,10 +20,13 @@ export function AuthPage() {
     }
 
     return (
+        <>
+
         <LayoutBaseAuthenticator
             title = {component === 'Login' ? "Inicio de sesión" : component ===  'Register' ? "Registrarse" : "Recuperar contraseña"}
         >
             {renderPage()}
         </LayoutBaseAuthenticator>
+        </>
     );
 }
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Login/Login.jsx b/cosiap_frontend/src/components/users/Login/Login.jsx
index da4d585..b59eea0 100644
--- a/cosiap_frontend/src/components/users/Login/Login.jsx
+++ b/cosiap_frontend/src/components/users/Login/Login.jsx
@@ -1,10 +1,10 @@
 
 import { LoginForm } from './LoginForm';
 
-export function Login( {setComponent} ) {
+export function Login( {setComponent, setViewPageLoader} ) {
     return (
         <>
-            <LoginForm />
+            <LoginForm setViewPageLoader={setViewPageLoader}/>
             <p className="uppercase mt-5 scroll-mt-10 text-center text-sm text-gray-500">
                 ¿Haz olvidado tu contraseña?
             </p>
diff --git a/cosiap_frontend/src/components/users/Login/LoginForm.jsx b/cosiap_frontend/src/components/users/Login/LoginForm.jsx
index a3344bb..d81f83c 100644
--- a/cosiap_frontend/src/components/users/Login/LoginForm.jsx
+++ b/cosiap_frontend/src/components/users/Login/LoginForm.jsx
@@ -18,7 +18,7 @@ const validationSchema = Yup.object({
     password: Yup.string().required("Requerido"),
 });
 
-export function LoginForm() {
+export function LoginForm( {setViewPageLoader} ) {
     const [loginError, setLoginError] = useState('')
     const navigate = useNavigate();
     const { setToken } = useAutenticacion();
@@ -32,6 +32,7 @@ export function LoginForm() {
     
     
     const onSubmit = async (data) => {
+        setViewPageLoader(true)
         try {
             const response = await api.usuarios.token.login(data);
             console.log("Login successful:", response.data);    
@@ -41,6 +42,7 @@ export function LoginForm() {
             console.error("Login failed:", error);
             setLoginError(error.response.data.detail)
         }
+        setViewPageLoader(false)
     };
 
     return (
diff --git a/cosiap_frontend/src/components/users/Register/Register.jsx b/cosiap_frontend/src/components/users/Register/Register.jsx
index 9b6b4cb..e343e9a 100644
--- a/cosiap_frontend/src/components/users/Register/Register.jsx
+++ b/cosiap_frontend/src/components/users/Register/Register.jsx
@@ -1,14 +1,14 @@
 import { useState } from "react";
 import RegisterForm from "./RegisterForm";
 
-export default function Register( {setComponent} ) {
+export default function Register( {setComponent, setViewPageLoader} ) {
     const [sentEmail, setSentEmail] = useState(false);
     return (
         <>
             {
                 !sentEmail ? (
                     <>
-                        <RegisterForm setSentEmail={setSentEmail} />
+                        <RegisterForm setSentEmail={setSentEmail} setViewPageLoader={setViewPageLoader}/>
                         <p className="uppercase cursor-pointer no-underline hover:underline mt-2 text-center text-sm text-principal_mf" onClick={() => setComponent('Login')}>
                             Iniciar sesión
                         </p>
diff --git a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
index 7cd781f..017fddf 100644
--- a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
+++ b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx
@@ -25,7 +25,7 @@ const validationSchema = Yup.object({
         .oneOf([Yup.ref('password'), null], 'Las contraseñas no coinciden')
 });
 
-export default function RegisterForm( {setSentEmail} ) {
+export default function RegisterForm( {setSentEmail, setViewPageLoader} ) {
     const [registerErrorMessage, setRegisterErrorMessage] = useState('');
     const {
         register,
@@ -36,6 +36,7 @@ export default function RegisterForm( {setSentEmail} ) {
     });
 
     const handleFormSubmission = async (data) => {
+        setViewPageLoader(true);
         try {
           const response = await api.usuarios.post(data);
           console.log("Registration successful:", response.data);
@@ -45,6 +46,7 @@ export default function RegisterForm( {setSentEmail} ) {
           console.log(error.response.data.detail);
           setRegisterErrorMessage(error.response.data);
         }
+        setViewPageLoader(false);
       };
 
     return (
-- 
GitLab