Fix Login frontend page
This commit is contained in:
@@ -2,6 +2,11 @@ import React, { useState } from 'react';
|
|||||||
import { Eye, EyeOff, Loader2 } from 'lucide-react';
|
import { Eye, EyeOff, Loader2 } from 'lucide-react';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
import {
|
||||||
|
useAuth,
|
||||||
|
LoginRequest
|
||||||
|
} from '../../api';
|
||||||
|
|
||||||
interface LoginPageProps {
|
interface LoginPageProps {
|
||||||
onLogin: (user: any, token: string) => void;
|
onLogin: (user: any, token: string) => void;
|
||||||
onNavigateToRegister: () => void;
|
onNavigateToRegister: () => void;
|
||||||
@@ -13,13 +18,16 @@ interface LoginForm {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const LoginPage: React.FC<LoginPageProps> = ({ onLogin, onNavigateToRegister }) => {
|
const LoginPage: React.FC<LoginPageProps> = ({ onLogin, onNavigateToRegister }) => {
|
||||||
|
|
||||||
|
|
||||||
|
const { login, isLoading, isAuthenticated } = useAuth();
|
||||||
|
|
||||||
const [formData, setFormData] = useState<LoginForm>({
|
const [formData, setFormData] = useState<LoginForm>({
|
||||||
email: '',
|
email: '',
|
||||||
password: ''
|
password: ''
|
||||||
});
|
});
|
||||||
|
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
const [errors, setErrors] = useState<Partial<LoginForm>>({});
|
const [errors, setErrors] = useState<Partial<LoginForm>>({});
|
||||||
|
|
||||||
const validateForm = (): boolean => {
|
const validateForm = (): boolean => {
|
||||||
@@ -46,31 +54,28 @@ const LoginPage: React.FC<LoginPageProps> = ({ onLogin, onNavigateToRegister })
|
|||||||
|
|
||||||
if (!validateForm()) return;
|
if (!validateForm()) return;
|
||||||
|
|
||||||
setIsLoading(true);
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/v1/auth/login', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(formData),
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = await response.json();
|
const loginData: LoginRequest = {
|
||||||
|
email: formData.email,
|
||||||
if (!response.ok) {
|
password: formData.password,
|
||||||
throw new Error(data.message || 'Error al iniciar sesión');
|
};
|
||||||
}
|
|
||||||
|
await login(loginData);
|
||||||
|
|
||||||
toast.success('¡Bienvenido a PanIA!');
|
toast.success('¡Bienvenido a PanIA!');
|
||||||
onLogin(data.user, data.access_token);
|
|
||||||
|
const userData = localStorage.getItem('user_data');
|
||||||
|
const token = localStorage.getItem('auth_token');
|
||||||
|
|
||||||
|
if (userData && token) {
|
||||||
|
onLogin(JSON.parse(userData), token);
|
||||||
|
}
|
||||||
|
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.error('Login error:', error);
|
console.error('Login error:', error);
|
||||||
toast.error(error.message || 'Error al iniciar sesión');
|
toast.error(error.message || 'Error al iniciar sesión');
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user