From ea660dec5701f53f3b868abeee37559d0a019c4d Mon Sep 17 00:00:00 2001
From: SamuDev <samudev01@gmail.com>
Date: Wed, 11 Dec 2024 09:26:04 -0300
Subject: [PATCH] login #36

---
 .../(auth)/login/components/LoginModal.tsx    | 28 ++++++++++---
 .../app/(auth)/login/services/authService.ts  | 41 +++++++++++++++++++
 2 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/(auth)/login/components/LoginModal.tsx b/frontend/src/app/(auth)/login/components/LoginModal.tsx
index f5bd7b1..5074ff9 100644
--- a/frontend/src/app/(auth)/login/components/LoginModal.tsx
+++ b/frontend/src/app/(auth)/login/components/LoginModal.tsx
@@ -8,7 +8,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { Eye, EyeOff } from "lucide-react";
+import { Eye, EyeOff } from 'lucide-react';
+import { loginUser } from '../services/authService';
+import { LoginRequestDto } from "../services/authService";
 
 const loginSchema = z.object({
     email: z.string().email("Ingresa un correo válido"),
@@ -32,9 +34,24 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose }) => {
         resolver: zodResolver(loginSchema),
     });
 
-    const onSubmit = (data: LoginFormValues) => {
-        console.log("Datos del formulario:", data);
-        onClose();
+    const onSubmit = async (data: LoginFormValues) => {
+        console.log("Iniciando proceso de inicio de sesión con:", data);
+        try {
+            const apiResponse = await loginUser(data as LoginRequestDto);
+            console.log("Respuesta del servicio de inicio de sesión:", apiResponse);
+            if (apiResponse) {
+                console.log('Inicio de sesión exitoso:', apiResponse);
+                localStorage.setItem("authToken", apiResponse.token);
+                alert('¡Inicio de sesión exitoso! Bienvenido/a a Soundbit.');
+                onClose();
+            } else {
+                alert('Ocurrió un error al iniciar sesión. Verifica tus credenciales e intenta nuevamente.');
+            }
+        } catch (error) {
+            console.log("Error detallado:", error);
+            alert('Error inesperado. Por favor, intenta más tarde.');
+            console.error('Error al iniciar sesión:', error);
+        }
     };
 
     return (
@@ -52,7 +69,6 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose }) => {
                     </DialogTitle>
                 </DialogHeader>
                 <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-                    {/* Campo de correo */}
                     <div className="space-y-1">
                         <Label htmlFor="email" className="text-primary text-xl">
                             Mail:
@@ -68,7 +84,6 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose }) => {
                         )}
                     </div>
 
-                    {/* Campo de contraseña */}
                     <div className="space-y-1 relative">
                         <Label htmlFor="password" className="text-primary text-xl">
                             Contraseña:
@@ -104,3 +119,4 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose }) => {
 };
 
 export default LoginModal;
+
diff --git a/frontend/src/app/(auth)/login/services/authService.ts b/frontend/src/app/(auth)/login/services/authService.ts
index e69de29..60dc3b0 100644
--- a/frontend/src/app/(auth)/login/services/authService.ts
+++ b/frontend/src/app/(auth)/login/services/authService.ts
@@ -0,0 +1,41 @@
+export interface LoginRequestDto {
+    email: string;
+    password: string;
+  }
+  
+  export interface AuthResponseDto {
+    id: number;
+    username: string;
+    token: string;
+  }  
+
+export const loginUser = async (credentials: LoginRequestDto): Promise<AuthResponseDto | null> => {
+  try {
+    console.log("Iniciando solicitud de inicio de sesión con:", credentials);
+    console.log("Datos enviados al backend:", credentials);
+
+    const response = await fetch("http://144.33.15.219:8080/auth/login", {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(credentials),
+    });
+
+    console.log("Respuesta completa:", response);
+    console.log("Estado de la respuesta:", response.status);
+    if (!response.ok) {
+      const errorData = await response.json();
+      console.error("Error en la respuesta:", errorData);
+      throw new Error(errorData.message || "Error al iniciar sesión");
+    }
+
+    const result: AuthResponseDto = await response.json();
+    console.log("Datos de la respuesta procesada:", result);
+    return result;
+  } catch (error: any) {
+    console.error("Error al iniciar sesión:", error.message);
+    return null;
+  }
+};
+