Commit modificaciones sesiones

This commit is contained in:
NataliaCancinoV 2024-05-11 13:26:44 -06:00
parent e4ae8523b7
commit 1a4f02b7d9
10 changed files with 441 additions and 77 deletions

View File

@ -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

View File

@ -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

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 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

View File

@ -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

View File

@ -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

View File

@ -1,29 +1,122 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import './LoginForm.css'; 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 [loginVisible, setLoginVisible] = useState(true);
const [registerVisible, setRegisterVisible] = useState(false); const [registerVisible, setRegisterVisible] = useState(false);
const [passwordVisible, setPasswordVisible] = useState(false); const [passwordVisible, setPasswordVisible] = useState(false);
const toggleLogin = () => { const redirectToRegister = () => {
setLoginVisible(true); navigate("/Registro");
setRegisterVisible(false);
setPasswordVisible(false);
}; };
const toggleRegister = () => { const redirectToRecuperarContra = () => {
setRegisterVisible(true); navigate("/RecuperarContraseña");
setLoginVisible(false);
setPasswordVisible(false);
}; };
const toggleRecuperar = () => { const mostrarAlertaLoginExitoso=(nomb)=>{
setPasswordVisible(true); swal({
setLoginVisible(false); title: "Inicio de sesion Exitoso",
setRegisterVisible(false); 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 ( return (
<> <>
<body className='body-login'> <body className='body-login'>
@ -32,7 +125,7 @@ function LoginForm() {
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}> <div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
<form> <form>
<div className="top"> <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> <header className='header-login'>Inicia Sesión</header>
</div> </div>
<div className="input-box"> <div className="input-box">
@ -53,74 +146,13 @@ function LoginForm() {
<label htmlFor="login-check"> Recuerdame</label> <label htmlFor="login-check"> Recuerdame</label>
</div> </div>
<div className="two"> <div className="two">
<span><a href="#" onClick={toggleRecuperar}>Olvidaste la contraseña?</a></span> <span><a href="" onClick={redirectToRecuperarContra}>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>
</div> </div>
</div> </div>
</form> </form>
</div> </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>
</div> </div>
</body> </body>
</> </>
); );

View File

@ -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;

View File

@ -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;

View File

@ -6,6 +6,8 @@ import PersPastel1 from './PersPastel1.jsx'
import Pedidos from './Pedidos.jsx' import Pedidos from './Pedidos.jsx'
import Pasteles from './Pasteles.jsx' import Pasteles from './Pasteles.jsx'
import LoginForm from './Sesion/LoginForm.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 ChocolateBlanco from './Pasteles/ChocolateBlanco.jsx';
import PastelMoka from './Pasteles/PastelMoka.jsx'; import PastelMoka from './Pasteles/PastelMoka.jsx';
import PastelChocolate from './Pasteles/PastelChocolate.jsx'; import PastelChocolate from './Pasteles/PastelChocolate.jsx';
@ -22,6 +24,8 @@ createRoot(document.getElementById('root')).render(
<Route path = "/Pedidos" element = {<Pedidos/>}/> <Route path = "/Pedidos" element = {<Pedidos/>}/>
<Route path = "/Pasteles" element = {<Pasteles/>}/> <Route path = "/Pasteles" element = {<Pasteles/>}/>
<Route path = "/Login" element = {<LoginForm/>}/> <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/ChocolateBlanco" element = {<ChocolateBlanco/>}/>
<Route path = "/Pasteles/PastelMoka" element = {<PastelMoka/>}/> <Route path = "/Pasteles/PastelMoka" element = {<PastelMoka/>}/>
<Route path = "/Pasteles/PastelChocolate" element = {<PastelChocolate/>}/> <Route path = "/Pasteles/PastelChocolate" element = {<PastelChocolate/>}/>