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/clients/api_client.ts           | 15 ++++++++----
 src/components/forms/login_form.tsx | 47 +++++++++++++++++++++++++++----------
 src/lib/token.ts                    | 17 ++++++++++++++
 src/main.tsx                        |  2 +-
 src/models/field_error.ts           |  4 ++++
 5 files changed, 67 insertions(+), 18 deletions(-)
 create mode 100644 src/lib/token.ts
 create mode 100644 src/models/field_error.ts

(limited to 'src')

diff --git a/src/clients/api_client.ts b/src/clients/api_client.ts
index 9a0d3f5..c55a365 100644
--- a/src/clients/api_client.ts
+++ b/src/clients/api_client.ts
@@ -5,7 +5,14 @@ export class ApiClient {
 
   async get(path: string, params?: URLSearchParams) {
     const request_url = `${ this.url }${ path }`;
-    const response = await this.makeRequest(request_url);
+    const response = await this.makeGetRequest(request_url);
+
+    return response;
+  }
+
+  async post(path: string, data: FormData) {
+    const request_url = `${ this.url }${ path }`;
+    const response = await axios.post(request_url, data, { headers: { "Content-Type": "multipart/form-data"} });
 
     return response;
   }
@@ -13,14 +20,14 @@ export class ApiClient {
   async getProduct(id: string) {
     const request_url = `${ this.url }/products/${ id }`;
     const [product_response, product_reviews] = await Promise.all([
-      this.makeRequest(request_url),
-      this.makeRequest(`${ request_url }/reviews`)
+      this.makeGetRequest(request_url),
+      this.makeGetRequest(`${ request_url }/reviews`)
     ]);
 
     return [product_response, product_reviews];
   }
 
-  private async makeRequest(request_url: string) {
+  private async makeGetRequest(request_url: string) {
     try {
       const response = await axios.get(request_url);
 
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
diff --git a/src/lib/token.ts b/src/lib/token.ts
new file mode 100644
index 0000000..113e76d
--- /dev/null
+++ b/src/lib/token.ts
@@ -0,0 +1,17 @@
+export default class Token {
+  get() {
+    return sessionStorage.getItem("token");
+  }
+
+  set(token: string) {
+    sessionStorage.setItem("token", token);
+  }
+
+  getRefresh() {
+    sessionStorage.getItem("refresh");
+  }
+
+  setRefresh(refresh_token: string) {
+    sessionStorage.setItem("refresh", refresh_token);
+  }
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 7b21b2a..6e36c31 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
+import { BrowserRouter, createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
 import Products from "./routes/products/products";
 import Product from "./routes/products/product";
 import Companies from "./routes/companies/companies";
diff --git a/src/models/field_error.ts b/src/models/field_error.ts
new file mode 100644
index 0000000..ff746e7
--- /dev/null
+++ b/src/models/field_error.ts
@@ -0,0 +1,4 @@
+export default interface FieldError {
+  field_id: string;
+  error_message: string;
+}
\ No newline at end of file
-- 
cgit v1.2.3