Commit modificaciones sesiones

2024-05-11 13:26:44 -06:00 · 2024-05-11 13:26:44 -06:00 · 1a4f02b7d9
parent e4ae8523b7
commit 1a4f02b7d9
10 changed files with 441 additions and 77 deletions
--- a/frontend/src/Popups/PopupActualizar.jsx
+++ b/frontend/src/Popups/PopupActualizar.jsx
@ -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
--- a/frontend/src/Popups/PopupActualizarInv.jsx
+++ b/frontend/src/Popups/PopupActualizarInv.jsx
@ -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
--- a/frontend/src/Popups/PopupLoginInvalido.jsx
+++ b/frontend/src/Popups/PopupLoginInvalido.jsx
@ -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
--- a/frontend/src/Popups/PopupLoginValido.jsx
+++ b/frontend/src/Popups/PopupLoginValido.jsx
@ -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
--- a/frontend/src/Popups/PopupRegistro
+++ b/frontend/src/Popups/PopupRegistro
@ -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
--- a/frontend/src/Sesion/LoginForm.jsx
+++ b/frontend/src/Sesion/LoginForm.jsx
@ -1,29 +1,122 @@
 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 (
    <>
      <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 }}>
              <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>
    </>
  );
--- a/frontend/src/Sesion/RecuperarContraForm.jsx
+++ b/frontend/src/Sesion/RecuperarContraForm.jsx
@ -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;
--- a/frontend/src/Sesion/RecuperarContrasena.jsx
+++ b/frontend/src/Sesion/RecuperarContrasena.jsx
--- a/frontend/src/Sesion/RegisterForm.jsx
+++ b/frontend/src/Sesion/RegisterForm.jsx
@ -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;
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@ -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/>}/>