2024-04-22 04:41:09 +00:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import './LoginForm.css';
|
2024-05-11 19:26:44 +00:00
|
|
|
import { redirect } from 'react-router-dom';
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
|
|
|
|
|
|
function LoginForm(props) {
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
|
|
|
|
|
const [Cargando, setCargando] = useState(false)
|
|
|
|
|
const [datosFormulario, setDatosFormulario] = useState({
|
|
|
|
|
correo: '',
|
|
|
|
|
password: ''
|
|
|
|
|
})
|
2024-04-22 04:41:09 +00:00
|
|
|
|
|
|
|
|
const [loginVisible, setLoginVisible] = useState(true);
|
2024-04-26 19:49:27 +00:00
|
|
|
const [registerVisible, setRegisterVisible] = useState(false);
|
|
|
|
|
const [passwordVisible, setPasswordVisible] = useState(false);
|
2024-04-29 00:02:31 +00:00
|
|
|
|
2024-05-11 19:26:44 +00:00
|
|
|
const redirectToRegister = () => {
|
|
|
|
|
navigate("/Registro");
|
2024-04-22 04:41:09 +00:00
|
|
|
};
|
|
|
|
|
|
2024-05-11 19:26:44 +00:00
|
|
|
const redirectToRecuperarContra = () => {
|
|
|
|
|
navigate("/RecuperarContraseña");
|
2024-04-26 19:49:27 +00:00
|
|
|
};
|
|
|
|
|
|
2024-05-11 19:26:44 +00:00
|
|
|
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:4567/frontend/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);
|
|
|
|
|
}
|
2024-05-06 22:53:21 +00:00
|
|
|
|
2024-04-22 04:41:09 +00:00
|
|
|
return (
|
|
|
|
|
<>
|
2024-05-06 22:53:21 +00:00
|
|
|
<body className='body-login'>
|
|
|
|
|
<div className="wrapper">
|
|
|
|
|
<div className="form-box">
|
|
|
|
|
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
|
|
|
|
|
<form>
|
|
|
|
|
<div className="top">
|
2024-05-11 19:26:44 +00:00
|
|
|
<span>No tienes cuenta? <a href="" onClick={redirectToRegister}>Registrate</a></span>
|
2024-05-06 22:53:21 +00:00
|
|
|
<header className='header-login'>Inicia Sesión</header>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
<input type="text" className="input-field" placeholder="Correo" />
|
|
|
|
|
<i className="bx bx-user"></i>
|
2024-04-29 00:02:31 +00:00
|
|
|
</div>
|
2024-05-06 22:53:21 +00:00
|
|
|
<div className="input-box">
|
|
|
|
|
<input type="password" className="input-field" placeholder="Contraseña" />
|
|
|
|
|
<i className="bx bx-lock-alt"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="input-box">
|
|
|
|
|
{/*<input type="submit" className="submit" value="Entrar" />*/}
|
|
|
|
|
<button type="button" className="submit">Entrar</button>
|
2024-04-29 00:02:31 +00:00
|
|
|
</div>
|
2024-05-06 22:53:21 +00:00
|
|
|
<div className="two-col">
|
|
|
|
|
<div className="one">
|
|
|
|
|
<input type="checkbox" id="login-check" />
|
|
|
|
|
<label htmlFor="login-check"> Recuerdame</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="two">
|
2024-05-11 19:26:44 +00:00
|
|
|
<span><a href="" onClick={redirectToRecuperarContra}>Olvidaste la contraseña?</a></span>
|
2024-05-06 22:53:21 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2024-04-26 19:49:27 +00:00
|
|
|
</div>
|
2024-04-22 04:41:09 +00:00
|
|
|
</div>
|
2024-05-06 22:53:21 +00:00
|
|
|
</body>
|
2024-04-22 04:41:09 +00:00
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-06 22:53:21 +00:00
|
|
|
export default LoginForm;
|
