From 1a4f02b7d9d87150b995dc315f9493652b56ba75 Mon Sep 17 00:00:00 2001 From: NataliaCancinoV Date: Sat, 11 May 2024 13:26:44 -0600 Subject: [PATCH] Commit modificaciones sesiones --- frontend/src/Popups/PopupActualizar.jsx | 43 +++++ frontend/src/Popups/PopupActualizarInv.jsx | 34 ++++ frontend/src/Popups/PopupLoginInvalido.jsx | 35 ++++ frontend/src/Popups/PopupLoginValido.jsx | 43 +++++ frontend/src/Popups/PopupRegistro | 37 ++++ frontend/src/Sesion/LoginForm.jsx | 186 ++++++++++++-------- frontend/src/Sesion/RecuperarContraForm.jsx | 59 +++++++ frontend/src/Sesion/RecuperarContrasena.jsx | 0 frontend/src/Sesion/RegisterForm.jsx | 77 ++++++++ frontend/src/main.jsx | 4 + 10 files changed, 441 insertions(+), 77 deletions(-) create mode 100644 frontend/src/Popups/PopupActualizar.jsx create mode 100644 frontend/src/Popups/PopupActualizarInv.jsx create mode 100644 frontend/src/Popups/PopupLoginInvalido.jsx create mode 100644 frontend/src/Popups/PopupLoginValido.jsx create mode 100644 frontend/src/Popups/PopupRegistro create mode 100644 frontend/src/Sesion/RecuperarContraForm.jsx delete mode 100644 frontend/src/Sesion/RecuperarContrasena.jsx diff --git a/frontend/src/Popups/PopupActualizar.jsx b/frontend/src/Popups/PopupActualizar.jsx new file mode 100644 index 0000000..f696bf3 --- /dev/null +++ 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( + <> +
+ + Actualizacion + + + Credenciales actualizadas correctamenete + + + + + + +
+ + ) +} + +export default PopupActualizar \ No newline at end of file diff --git a/frontend/src/Popups/PopupActualizarInv.jsx b/frontend/src/Popups/PopupActualizarInv.jsx new file mode 100644 index 0000000..b422951 --- /dev/null +++ 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( + <> +
+ + Correo no encontrado + + + El correo que introdujo no existe o no se encuentra. + + + + + + +
+ + ) +} + +export default PopupActualizarInv \ No newline at end of file diff --git a/frontend/src/Popups/PopupLoginInvalido.jsx b/frontend/src/Popups/PopupLoginInvalido.jsx new file mode 100644 index 0000000..571170a --- /dev/null +++ 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( + <> + +
+ + Error al Iniciar Sesion + + + Correo o contraseña incorrecta. + + + + + + +
+ + ) +} + +export default PopupLoginInvalido \ No newline at end of file diff --git a/frontend/src/Popups/PopupLoginValido.jsx b/frontend/src/Popups/PopupLoginValido.jsx new file mode 100644 index 0000000..27f2599 --- /dev/null +++ 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( + <> + +
+ + Inicio de Sesion Exitoso + + + Bienvenido: {nombre} + + + + + + +
+ + ) +} + +export default PopupLoginValido \ No newline at end of file diff --git a/frontend/src/Popups/PopupRegistro b/frontend/src/Popups/PopupRegistro new file mode 100644 index 0000000..6b30745 --- /dev/null +++ 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( + <> +
+ + Registro Exitoso + + + Cuenta Registrada con exito + + + + + + +
+ + ) +} + +export default Popup \ No newline at end of file diff --git a/frontend/src/Sesion/LoginForm.jsx b/frontend/src/Sesion/LoginForm.jsx index bd8ee2f..43c37b2 100644 --- a/frontend/src/Sesion/LoginForm.jsx +++ b/frontend/src/Sesion/LoginForm.jsx @@ -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() {
- No tienes cuenta? Registrate + No tienes cuenta? Registrate
Inicia Sesión
@@ -53,74 +146,13 @@ function LoginForm() {
- Olvidaste la contraseña? -
-
- - - - -
-
-
- Ya tienes cuenta? Inicia Sesión -
Registrarse
-
-
-
- - -
-
- - -
-
-
- - -
-
- - -
-
- {/**/} - -
-
-
- - + Olvidaste la contraseña?
- -
-
-
- Ya tienes cuenta? Inicia Sesión -
Recuperar Contraseña
-
-
- - -
-
- - -
-
- {/**/} - -
-
-
- - ); diff --git a/frontend/src/Sesion/RecuperarContraForm.jsx b/frontend/src/Sesion/RecuperarContraForm.jsx new file mode 100644 index 0000000..b627495 --- /dev/null +++ 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 ( + <> + +
+
+ +
+
+
+ Ya tienes cuenta? Inicia Sesión +
Recuperar Contraseña
+
+
+ + +
+
+ + +
+
+ {/**/} + +
+
+
+ +
+
+ + + + ); +} + +export default RecuperarContraForm; \ No newline at end of file diff --git a/frontend/src/Sesion/RecuperarContrasena.jsx b/frontend/src/Sesion/RecuperarContrasena.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/Sesion/RegisterForm.jsx b/frontend/src/Sesion/RegisterForm.jsx index e69de29..367ab79 100644 --- 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 ( + <> + +
+
+ +
+
+
+ Ya tienes cuenta? Inicia Sesión +
Registrarse
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ {/**/} + +
+
+
+ + +
+
+
+
+ +
+
+ + + + ); +} + +export default RegisterForm; \ No newline at end of file diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 9f4c112..9a2c3a3 100644 --- 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( }/> }/> }/> + }/> + }/> }/> }/> }/>