140 lines
3.5 KiB
JavaScript
140 lines
3.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import '../styles/login.css';
|
|
import { NavLink, useNavigate } from 'react-router-dom';
|
|
import axios from 'axios';
|
|
|
|
function Login() {
|
|
const [cargando, setCargando] = useState(false);
|
|
const [datosUsuario, setDatosUsuario] = useState({
|
|
matricula: "",
|
|
contrasena: "",
|
|
});
|
|
const [usuario, setUsuario] = useState({
|
|
id: 0,
|
|
nombre: "",
|
|
contrasena: "",
|
|
correo: "",
|
|
});
|
|
|
|
const navigate = useNavigate(); // Usa el hook useNavigate para la navegación programática
|
|
|
|
const limpiar = () => {
|
|
setDatosUsuario({
|
|
matricula: "",
|
|
contrasena: "",
|
|
});
|
|
};
|
|
|
|
const hacerPeticion = async () => {
|
|
try {
|
|
const res = await axios.post(
|
|
"http://localhost:4567/usuarioValido",
|
|
datosUsuario
|
|
);
|
|
return res.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const obtenerUsuario = async () => {
|
|
try {
|
|
const res = await axios.get(
|
|
`http://localhost:4567/alumnoIniciado?matricula=${datosUsuario.matricula}&contrasena=${datosUsuario.contrasena}`
|
|
);
|
|
return res.data;
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const procesarFormulario = async (e) => {
|
|
e.preventDefault();
|
|
setCargando(true);
|
|
|
|
try {
|
|
const res = await hacerPeticion();
|
|
setCargando(false);
|
|
|
|
if (res.existe) {
|
|
const aux = await obtenerUsuario();
|
|
setUsuario({
|
|
id: aux.id,
|
|
nombre: aux.nombre,
|
|
contrasena: aux.contrasena,
|
|
correo: aux.correo,
|
|
});
|
|
alert("¡Bienvenido! " + aux.nombre);
|
|
limpiar();
|
|
|
|
// Navega a la página objetivo después del inicio de sesión exitoso, pasando parámetros si es necesario
|
|
navigate(`/home/${aux.id}/${aux.nombre}`);
|
|
} else {
|
|
alert("Usuario No encontrado");
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
setCargando(false);
|
|
}
|
|
};
|
|
|
|
const cambiosUsuario = (e) => {
|
|
const { name, value } = e.target;
|
|
setDatosUsuario({
|
|
...datosUsuario,
|
|
[name]: value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<body>
|
|
<header className='encabezado'>La universidad que esta para ti, ¡UNETE!</header>
|
|
<div className='gridContainer'>
|
|
<div className='imgColum'>
|
|
<img src="imagen.jpg" alt='Imagen'/>
|
|
</div>
|
|
<div className='loginColum'>
|
|
<h1 className='bienvenida'>Bienvenido</h1>
|
|
<form className='Formulario'>
|
|
<input
|
|
type="text"
|
|
id="usuario"
|
|
onChange={cambiosUsuario}
|
|
value={datosUsuario.matricula}
|
|
name="matricula"
|
|
/>
|
|
<label>Contraseña:</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
onChange={cambiosUsuario}
|
|
value={datosUsuario.contrasena}
|
|
name="contrasena"
|
|
/>
|
|
<NavLink to="/registro">¿Aún no te has registrado?</NavLink>
|
|
<button
|
|
id="button"
|
|
type="submit"
|
|
disabled={cargando}
|
|
onClick={procesarFormulario}
|
|
>
|
|
Iniciar sesión
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div id="footerId"><a id="pie" href=''>uniregistro@outlook.com</a></div>
|
|
<div id="footerId"><a id="pie" href=''>uniBandeVer</a></div>
|
|
<div id="footerId"><a id ="pie" href=''>4582349234</a></div>
|
|
</footer>
|
|
</body>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Login
|
|
|