Añade renderizado de errores

1 files changed, 34 insertions, 13 deletions

diff --git a/src/components/forms/login_form.tsx b/src/components/forms/login_form.tsx
index bd1d01e..a126d03 100644
--- a/src/components/forms/login_form.tsx
+++ b/src/components/forms/login_form.tsx
@@ -1,10 +1,20 @@
 import { Modal } from "flowbite";
-import { PersonCircle } from "react-bootstrap-icons";
 import LoginButton from "../login_button";
-import "../stylesheets/shared.css"
 import { useEffect, useState } from "react";
+import { ApiClient } from "../../clients/api_client";
+import Token from "../../lib/token";
+import "../stylesheets/shared.css"
 
 export function LoginForm() {
+  const [error_message, setErrorMessage] = useState('');
+  // const [modal, setModal] = useState(new Modal());
+
+  // Error rendering useEffecT
+  useEffect(() => {
+    document.getElementById("errorMessage").innerHTML = error_message;
+  }, [error_message]);
+
+  // Modal useEffect
   useEffect(() => {
     const target = document.getElementById("loginModal");
     const options = {
@@ -20,12 +30,20 @@ export function LoginForm() {
     });
   }, []);
 
-  function handleLogin(event) {
+  async function handleLogin(event) {
     event.preventDefault();
+    const client = new ApiClient();
     const form = event.target;
     const formData = new FormData(form);
-    const formJson = Object.fromEntries(formData.entries());
-    console.log(formJson);
+
+    try {
+      const response = await client.post("/login", formData);
+      const token = new Token();
+      token.set(response.data.token);
+      token.setRefresh(response.data.refresh);
+    } catch(error) {
+      setErrorMessage(error.response.data.errors.auth);
+    }
   }
 
   return(
@@ -46,14 +64,17 @@ export function LoginForm() {
             </div>
             <form method="post" id="login-form" onSubmit={handleLogin}>
               <div className="p-6 space-y-6">
-                  <div className="mb-6">
-                    <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Correo electrónico</label>
-                    <input name="email" type="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="tu_correo@gmail.com" required/>
-                  </div>
-                  <div className="mb-6">
-                    <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Contraseña</label>
-                    <input name="password" type="password" id="password" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required/>
-                  </div>
+                <div className="mb-6">
+                  <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Correo electrónico</label>
+                  <input name="email" type="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="tu_correo@gmail.com" required/>
+                </div>
+                <div className="mb-6">
+                  <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Contraseña</label>
+                  <input name="password" type="password" id="password" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required/>
+                </div>
+                <span id="errorMessage" className=" mb-6 my-4 text-red-600">
+                  { /* Render error message in case of errors */}
+                </span>
                 <div className="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                   <button type="submit" className="text-white button hover:bg-blue-800 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">
                     Iniciar sesión