Commit modificaciones sesiones
This commit is contained in:
parent
e4ae8523b7
commit
1a4f02b7d9
|
@ -0,0 +1,43 @@
|
|||
import { Button } from "@mui/base"
|
||||
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"
|
||||
import { useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
|
||||
function PopupActualizar ({nombre}){
|
||||
const navigate = useNavigate();
|
||||
const[open,setOpen] = useState(true);
|
||||
|
||||
const redirectToLogin = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/Login");
|
||||
};
|
||||
|
||||
const eventoAbrir = () => {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const eventoCerrar = () => {
|
||||
setOpen(false)
|
||||
redirectToLogin();
|
||||
}
|
||||
|
||||
return(
|
||||
<>
|
||||
<div>
|
||||
<Dialog open={open} onClose={eventoCerrar}>
|
||||
<DialogTitle>Actualizacion</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Credenciales actualizadas correctamenete
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button className="cerrar" onClick={eventoCerrar}>Cerrar</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PopupActualizar
|
|
@ -0,0 +1,34 @@
|
|||
import { Button } from "@mui/base"
|
||||
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"
|
||||
import { useState } from "react"
|
||||
|
||||
function PopupActualizarInv ({nombre}){
|
||||
const[open,setOpen] = useState(true);
|
||||
|
||||
const eventoAbrir = () => {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const eventoCerrar = () => {
|
||||
setOpen(false)
|
||||
}
|
||||
return(
|
||||
<>
|
||||
<div>
|
||||
<Dialog open={open} onClose={eventoCerrar}>
|
||||
<DialogTitle>Correo no encontrado</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
El correo que introdujo no existe o no se encuentra.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button className="cerrar" onClick={eventoCerrar}>Cerrar</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PopupActualizarInv
|
|
@ -0,0 +1,35 @@
|
|||
import { Button } from "@mui/base"
|
||||
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"
|
||||
import { useState } from "react"
|
||||
|
||||
function PopupLoginInvalido ({nombre}){
|
||||
const[open,setOpen] = useState(true);
|
||||
|
||||
const eventoAbrir = () => {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const eventoCerrar = () => {
|
||||
setOpen(false)
|
||||
}
|
||||
return(
|
||||
<>
|
||||
|
||||
<div>
|
||||
<Dialog open={open} onClose={eventoCerrar}>
|
||||
<DialogTitle>Error al Iniciar Sesion</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Correo o contraseña incorrecta.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button className="cerrar" onClick={eventoCerrar}>Cerrar</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PopupLoginInvalido
|
|
@ -0,0 +1,43 @@
|
|||
import { Button } from "@mui/base"
|
||||
import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"
|
||||
import { useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
|
||||
function PopupLoginValido ({nombre}){
|
||||
const navigate = useNavigate();
|
||||
const[open,setOpen] = useState(true);
|
||||
|
||||
const redirectToHome = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
const eventoAbrir = () => {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const eventoCerrar = () => {
|
||||
setOpen(false)
|
||||
redirectToHome();
|
||||
}
|
||||
return(
|
||||
<>
|
||||
|
||||
<div>
|
||||
<Dialog open={open} onClose={eventoCerrar}>
|
||||
<DialogTitle>Inicio de Sesion Exitoso</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Bienvenido: {nombre}
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button className="cerrar" onClick={eventoCerrar}>Cerrar</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PopupLoginValido
|
|
@ -0,0 +1,37 @@
|
|||
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 Exitoso</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Cuenta Registrada con exito
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button className="cerrar" onClick={eventoCerrar}>Cerrar</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Popup
|
|
@ -1,28 +1,121 @@
|
|||
import React, { useState } from 'react';
|
||||
import './LoginForm.css';
|
||||
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: ''
|
||||
})
|
||||
|
||||
function LoginForm() {
|
||||
const [loginVisible, setLoginVisible] = useState(true);
|
||||
const [registerVisible, setRegisterVisible] = useState(false);
|
||||
const [passwordVisible, setPasswordVisible] = useState(false);
|
||||
|
||||
const toggleLogin = () => {
|
||||
setLoginVisible(true);
|
||||
setRegisterVisible(false);
|
||||
setPasswordVisible(false);
|
||||
const redirectToRegister = () => {
|
||||
navigate("/Registro");
|
||||
};
|
||||
|
||||
const toggleRegister = () => {
|
||||
setRegisterVisible(true);
|
||||
setLoginVisible(false);
|
||||
setPasswordVisible(false);
|
||||
const redirectToRecuperarContra = () => {
|
||||
navigate("/RecuperarContraseña");
|
||||
};
|
||||
|
||||
const toggleRecuperar = () => {
|
||||
setPasswordVisible(true);
|
||||
setLoginVisible(false);
|
||||
setRegisterVisible(false);
|
||||
};
|
||||
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);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -32,7 +125,7 @@ function LoginForm() {
|
|||
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
|
||||
<form>
|
||||
<div className="top">
|
||||
<span>No tienes cuenta? <a href="#" onClick={toggleRegister}>Registrate</a></span>
|
||||
<span>No tienes cuenta? <a href="" onClick={redirectToRegister}>Registrate</a></span>
|
||||
<header className='header-login'>Inicia Sesión</header>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
|
@ -53,74 +146,13 @@ function LoginForm() {
|
|||
<label htmlFor="login-check"> Recuerdame</label>
|
||||
</div>
|
||||
<div className="two">
|
||||
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
|
||||
<form>
|
||||
<div className="top">
|
||||
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
||||
<header className='header-login'>Registrarse</header>
|
||||
</div>
|
||||
<div className="two-forms">
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Nombre" />
|
||||
<i className="bx bx-user"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Apellido" />
|
||||
<i className="bx bx-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-envelope"></i>
|
||||
</div>
|
||||
<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="Registrarse"/>*/}
|
||||
<button type="button" className="submit">Registrarse</button>
|
||||
</div>
|
||||
<div className="two-col">
|
||||
<div className="one">
|
||||
<input type="checkbox" id="register-check" />
|
||||
<label htmlFor="register-check"> Recuerdame</label>
|
||||
<span><a href="" onClick={redirectToRecuperarContra}>Olvidaste la contraseña?</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
|
||||
<form>
|
||||
<div className="top2">
|
||||
<span>Ya tienes cuenta? <a href="#" onClick={toggleLogin}>Inicia Sesión</a></span>
|
||||
<header className='header-login'>Recuperar Contraseña</header>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-envelope"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="password" className="input-field" placeholder="Nueva contraseña" />
|
||||
<i className="bx bx-lock-alt"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
{/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
|
||||
<button type="button" className="submit">Cambiar contraseña</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,59 @@
|
|||
import React, { useState } from 'react';
|
||||
import './LoginForm.css';
|
||||
import { redirect } from 'react-router-dom';
|
||||
import axios from "axios";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
function RecuperarContraForm(props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [Cargando, setCargando] = useState(false)
|
||||
const [datosFormulario, setDatosFormulario] = useState({
|
||||
correo: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const [loginVisible, setLoginVisible] = useState(false);
|
||||
const [registerVisible, setRegisterVisible] = useState(false);
|
||||
const [passwordVisible, setPasswordVisible] = useState(true);
|
||||
|
||||
const redirectToLogin = () => {
|
||||
navigate("/Login");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<body className='body-login'>
|
||||
<div className="wrapper">
|
||||
<div className="form-box">
|
||||
|
||||
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
|
||||
<form>
|
||||
<div className="top2">
|
||||
<span>Ya tienes cuenta? <a href="" onClick={redirectToLogin}>Inicia Sesión</a></span>
|
||||
<header className='header-login'>Recuperar Contraseña</header>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-envelope"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="password" className="input-field" placeholder="Nueva contraseña" />
|
||||
<i className="bx bx-lock-alt"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
{/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
|
||||
<button type="button" className="submit">Cambiar contraseña</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default RecuperarContraForm;
|
|
@ -0,0 +1,77 @@
|
|||
import React, { useState } from 'react';
|
||||
import './LoginForm.css';
|
||||
import { redirect } from 'react-router-dom';
|
||||
import axios from "axios";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
function RegisterForm(props) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [Cargando, setCargando] = useState(false)
|
||||
const [datosFormulario, setDatosFormulario] = useState({
|
||||
nombre: '',
|
||||
apellido: '',
|
||||
correo: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const [loginVisible, setLoginVisible] = useState(false);
|
||||
const [registerVisible, setRegisterVisible] = useState(true);
|
||||
const [passwordVisible, setPasswordVisible] = useState(false);
|
||||
|
||||
const redirectToLogin = () => {
|
||||
navigate("/Login");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<body className='body-login'>
|
||||
<div className="wrapper">
|
||||
<div className="form-box">
|
||||
|
||||
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
|
||||
<form>
|
||||
<div className="top">
|
||||
<span>Ya tienes cuenta? <a href="" onClick={redirectToLogin}>Inicia Sesión</a></span>
|
||||
<header className='header-login'>Registrarse</header>
|
||||
</div>
|
||||
<div className="two-forms">
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Nombre" />
|
||||
<i className="bx bx-user"></i>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Apellido" />
|
||||
<i className="bx bx-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-box">
|
||||
<input type="text" className="input-field" placeholder="Correo" />
|
||||
<i className="bx bx-envelope"></i>
|
||||
</div>
|
||||
<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="Registrarse"/>*/}
|
||||
<button type="button" className="submit">Registrarse</button>
|
||||
</div>
|
||||
<div className="two-col">
|
||||
<div className="one">
|
||||
<input type="checkbox" id="register-check" />
|
||||
<label htmlFor="register-check"> Recuerdame</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default RegisterForm;
|
|
@ -6,6 +6,8 @@ import PersPastel1 from './PersPastel1.jsx'
|
|||
import Pedidos from './Pedidos.jsx'
|
||||
import Pasteles from './Pasteles.jsx'
|
||||
import LoginForm from './Sesion/LoginForm.jsx';
|
||||
import RegisterForm from './Sesion/RegisterForm.jsx';
|
||||
import RecuperarContraForm from './Sesion/RecuperarContraForm.jsx';
|
||||
import ChocolateBlanco from './Pasteles/ChocolateBlanco.jsx';
|
||||
import PastelMoka from './Pasteles/PastelMoka.jsx';
|
||||
import PastelChocolate from './Pasteles/PastelChocolate.jsx';
|
||||
|
@ -22,6 +24,8 @@ createRoot(document.getElementById('root')).render(
|
|||
<Route path = "/Pedidos" element = {<Pedidos/>}/>
|
||||
<Route path = "/Pasteles" element = {<Pasteles/>}/>
|
||||
<Route path = "/Login" element = {<LoginForm/>}/>
|
||||
<Route path = "/Registro" element = {<RegisterForm/>}/>
|
||||
<Route path = "/RecuperarContraseña" element = {<RecuperarContraForm/>}/>
|
||||
<Route path = "/Pasteles/ChocolateBlanco" element = {<ChocolateBlanco/>}/>
|
||||
<Route path = "/Pasteles/PastelMoka" element = {<PastelMoka/>}/>
|
||||
<Route path = "/Pasteles/PastelChocolate" element = {<PastelChocolate/>}/>
|
||||
|
|
Loading…
Reference in New Issue