Commit Login con popup
This commit is contained in:
parent
1a4f02b7d9
commit
e1a3409090
|
@ -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
|
|
@ -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
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue