natalia.cancino
/
FrontPastel
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Commit Login con popup

This commit is contained in:
NataliaCancinoV 2024-05-11 15:54:21 -06:00
parent 1a4f02b7d9
commit e1a3409090
3 changed files with 54 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/Popups/PopupRegistro → frontend/src/Popups/PopupRegistro.jsx
View File

@ -2,7 +2,7 @@ import { Button } from "@mui/base"
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material" import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"
import { useState } from "react" import { useState } from "react"
function Popup (){ function PopupRegistro (){
const[open,setOpen] = useState(true); const[open,setOpen] = useState(true);
@ -14,7 +14,6 @@ function Popup (){
const eventoCerrar = () => { const eventoCerrar = () => {
setOpen(false) setOpen(false)
} }
return( return(
<> <>
<div> <div>
@ -34,4 +33,4 @@ function Popup (){
) )
} }
export default Popup export default PopupRegistro

35
frontend/src/Popups/PopupRsindatos.jsx Normal file
View File

@ -0,0 +1,35 @@
import { Button } from "@mui/base"
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"
import { useState } from "react"
function Popup (){
const[open,setOpen] = useState(true);
const eventoAbrir = () => {
setOpen(true)
}
const eventoCerrar = () => {
setOpen(false)
}
return(
<>
<div>
<Dialog open={open} onClose={eventoCerrar}>
<DialogTitle>Registro Fallido</DialogTitle>
<DialogContent>
<DialogContentText>
Porfavor introduzca los datos correspondientes.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button className="cerrar" onClick={eventoCerrar}>Cerrar</Button>
</DialogActions>
</Dialog>
</div>
</>
)
}
export default Popup

26
frontend/src/Sesion/LoginForm.jsx
View File

@ -3,6 +3,8 @@ import './LoginForm.css';
import { redirect } from 'react-router-dom'; import { redirect } from 'react-router-dom';
import axios from "axios"; import axios from "axios";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
//import PopupV from "/src/Popups/PopupLoginValido.jsx";
//import PopupIv from "./Popups/PopupLoginInvalido.jsx";
function LoginForm(props) { function LoginForm(props) {
const navigate = useNavigate(); const navigate = useNavigate();
@ -46,7 +48,6 @@ function LoginForm(props) {
text: "Usuario o Contraseña Incorrecta.", text: "Usuario o Contraseña Incorrecta.",
icon: "error", icon: "error",
button: "Aceptar" button: "Aceptar"
}); });
} }
@ -56,14 +57,13 @@ function LoginForm(props) {
text: "Introduzca los datos que se le piden.", text: "Introduzca los datos que se le piden.",
icon: "error", icon: "error",
button: "Aceptar" button: "Aceptar"
}); });
} }
const loginUsuario = async (evento) => { const loginUsuario = async (evento) => {
evento.preventDefault(); evento.preventDefault();
try{ try{
const response = await axios.post('http://localhost:4567/frontend/login',{datosFormulario}) const response = await axios.post('http://localhost/Login',{datosFormulario})
console.log(response.data) console.log(response.data)
console.log("c = " +datosFormulario.correo+" p = "+datosFormulario.password) console.log("c = " +datosFormulario.correo+" p = "+datosFormulario.password)
if(datosFormulario.correo && datosFormulario.password){ if(datosFormulario.correo && datosFormulario.password){
@ -84,10 +84,7 @@ const loginUsuario = async (evento) => {
//abrirPopupV() //abrirPopupV()
} }
}else{ }else{
mostrarAlertaLoginSinDatos(); mostrarAlertaLoginSinDatos();
} }
@ -117,6 +114,10 @@ const cambiosFormulario = (evento) => {
setMostrarPopupIv(false); setMostrarPopupIv(false);
} }
const redirectToHome = () => {
navigate("/");
};
return ( return (
<> <>
<body className='body-login'> <body className='body-login'>
@ -129,16 +130,15 @@ const cambiosFormulario = (evento) => {
<header className='header-login'>Inicia Sesión</header> <header className='header-login'>Inicia Sesión</header>
</div> </div>
<div className="input-box"> <div className="input-box">
<input type="text" className="input-field" placeholder="Correo" /> <input type="text" className="input-field" placeholder="Correo" onChange={cambiosFormulario} name="correo" value={datosFormulario.correo}/>
<i className="bx bx-user"></i> <i className="bx bx-user"></i>
</div> </div>
<div className="input-box"> <div className="input-box">
<input type="password" className="input-field" placeholder="Contraseña" /> <input type="password" className="input-field" placeholder="Contraseña" onChange={cambiosFormulario} name="password" value={datosFormulario.password}/>
<i className="bx bx-lock-alt"></i> <i className="bx bx-lock-alt"></i>
</div> </div>
<div className="input-box"> <div className="input-box">
{/*<input type="submit" className="submit" value="Entrar" />*/} <button type="button" className="submit" onClick={loginUsuario} disabled={Cargando}>Entrar</button>
<button type="button" className="submit">Entrar</button>
</div> </div>
<div className="two-col"> <div className="two-col">
<div className="one"> <div className="one">
@ -149,6 +149,12 @@ const cambiosFormulario = (evento) => {
<span><a href="" onClick={redirectToRecuperarContra}>Olvidaste la contraseña?</a></span> <span><a href="" onClick={redirectToRecuperarContra}>Olvidaste la contraseña?</a></span>
</div> </div>
</div> </div>
<Box m={5}>
{mostrarPopupV && <PopupV nombre ={nombre} onClose={() => setMostrarPopupV(false)} />}
</Box>
<Box m={5}>
{mostrarPopupIv && <PopupIv nombre ={nombre} onClose={() => setMostrarPopupIv(false)} />}
</Box>
</form> </form>
</div> </div>
</div> </div>