import React, { useState } from 'react'; import './LoginForm.css'; import { redirect } from 'react-router-dom'; import axios from "axios"; import { useNavigate } from "react-router-dom"; //import PopupV from "/src/Popups/PopupLoginValido.jsx"; //import PopupIv from "./Popups/PopupLoginInvalido.jsx"; function LoginForm(props) { const navigate = useNavigate(); const [Cargando, setCargando] = useState(false) const [datosFormulario, setDatosFormulario] = useState({ correo: '', password: '' }) const [loginVisible, setLoginVisible] = useState(true); const [registerVisible, setRegisterVisible] = useState(false); const [passwordVisible, setPasswordVisible] = useState(false); const redirectToRegister = () => { navigate("/Registro"); }; const redirectToRecuperarContra = () => { navigate("/RecuperarContraseña"); }; const mostrarAlertaLoginExitoso=(nomb)=>{ swal({ title: "Inicio de sesion Exitoso", text: "Bienvenido "+nomb+".", icon: "success", button: "Aceptar" }).then(respuesta=>{ if(respuesta){ redirectToHome(); } }) } const mostrarAlertaLoginFallido=()=>{ swal({ title: "Inicio de sesion fallido", text: "Usuario o Contraseña Incorrecta.", icon: "error", button: "Aceptar" }); } const mostrarAlertaLoginSinDatos=()=>{ swal({ title: "Inicio de sesion fallido", text: "Introduzca los datos que se le piden.", icon: "error", button: "Aceptar" }); } const loginUsuario = async (evento) => { evento.preventDefault(); try{ const response = await axios.post('http://localhost/Login',{datosFormulario}) console.log(response.data) console.log("c = " +datosFormulario.correo+" p = "+datosFormulario.password) if(datosFormulario.correo && datosFormulario.password){ if (response.data === 'Invalido') { // Si la respuesta es 'Invalido', limpiar los campos del formulario mostrarAlertaLoginFallido(); setDatosFormulario({ correo: '', password: '' }); } else { // Si la respuesta es 'Valido', puedes realizar las acciones deseadas setNombre(response.data.nombre); console.log(response.data.nombre); mostrarAlertaLoginExitoso(response.data.nombre); //abrirPopupV() } }else{ mostrarAlertaLoginSinDatos(); } return response.data } catch(error){ throw error } } const [nombre,setNombre]=useState('') const [mostrarPopupV, setMostrarPopupV] = useState(false); const abrirPopupV = () => { setMostrarPopupV(true); }; const [mostrarPopupIv, setMostrarPopupIv] = useState(false); const abrirPopupIv = () => { setMostrarPopupIv(true); }; const cambiosFormulario = (evento) => { //console.log(evento.target) const {name,value} = evento.target setDatosFormulario ({...datosFormulario, [name]: value}) setMostrarPopupIv(false); } const redirectToHome = () => { navigate("/"); }; return ( <>
No tienes cuenta? Registrate
Inicia Sesión
{mostrarPopupV && setMostrarPopupV(false)} />} {mostrarPopupIv && setMostrarPopupIv(false)} />}
); } export default LoginForm;