From f86cd3d1b248436f911dc2e1c9e71910a5302108 Mon Sep 17 00:00:00 2001
From: HombreLaser <sebastian-440@live.com>
Date: Thu, 4 May 2023 21:38:28 -0600
Subject: Añade renderizado de errores
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/forms/login_form.tsx | 47 +++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 13 deletions(-)

(limited to 'src/components/forms/login_form.tsx')

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
-- 
cgit v1.2.3

