137 lines
3.5 KiB
React
137 lines
3.5 KiB
React
|
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.post(
|
||
|
"http://localhost:4567/alumnoIniciado",
|
||
|
datosUsuario
|
||
|
);
|
||
|
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}`); // Suponiendo que la página objetivo es '/home'
|
||
|
} 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 (
|
||
|
<>
|
||
|
<div>
|
||
|
<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>Bienvenido</h1>
|
||
|
<form className='Formulario'>
|
||
|
<label id='usuario'>Matricula:</label>
|
||
|
<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 className="footerId"><a href=''>uniregistro@outlook.com</a></div>
|
||
|
<div className="footerId"><a href=''>uniBandeVer</a></div>
|
||
|
<div className="footerId"><a href=''>4582349234</a></div>
|
||
|
</footer>
|
||
|
</div>
|
||
|
</>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export default Login
|
||
|
|