From c2259b28d024a0c555841d0025c147bb1d0c4f86 Mon Sep 17 00:00:00 2001 From: "Cesar.Gomez" Date: Sat, 25 May 2024 11:47:09 -0600 Subject: [PATCH] RecuperarContraCorreo --- frontend/package-lock.json | 12 +- frontend/package.json | 3 +- frontend/src/Sesion/RecuperarContraForm.jsx | 127 ++++++++++++++------ 3 files changed, 106 insertions(+), 36 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d5ee536..f72e08d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,13 +12,14 @@ "@emotion/styled": "^11.11.5", "@mui/material": "^5.15.18", "axios": "^1.7.2", + "emailjs-com": "^3.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^5.1.0", "react-router-dom": "^6.23.0", "react-star-ratings": "^2.3.0", "sweetalert": "^2.1.2", - "sweetalert2": "^11.11.0" + "sweetalert2": "^11.6.13" }, "devDependencies": { "@types/react": "^18.2.66", @@ -2254,6 +2255,15 @@ "integrity": "sha512-lwKft2CLFztD+vEIpesrOtCrko/TFnEJlHFdRhazU7Y/jx5qc4cqsocfVrBg4So4gGe9lvxnbLIoev47WMpg+A==", "dev": true }, + "node_modules/emailjs-com": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz", + "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==", + "deprecated": "The SDK name changed to @emailjs/browser", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index aa8c5c7..94090f9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,13 +14,14 @@ "@emotion/styled": "^11.11.5", "@mui/material": "^5.15.18", "axios": "^1.7.2", + "emailjs-com": "^3.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^5.1.0", "react-router-dom": "^6.23.0", "react-star-ratings": "^2.3.0", "sweetalert": "^2.1.2", - "sweetalert2": "^11.11.0" + "sweetalert2": "^11.6.13" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/frontend/src/Sesion/RecuperarContraForm.jsx b/frontend/src/Sesion/RecuperarContraForm.jsx index fe48c43..4681f56 100644 --- a/frontend/src/Sesion/RecuperarContraForm.jsx +++ b/frontend/src/Sesion/RecuperarContraForm.jsx @@ -1,53 +1,89 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import './Recuperar.css'; import { FaUser, FaLock, FaHome } from "react-icons/fa"; import { TextField, Button, Box } from "@mui/material"; import axios from "axios"; import { useNavigate } from "react-router-dom"; - +import emailjs from 'emailjs-com'; import PopupActualizar from "/src/Popups/PopupActualizar"; import PopupActualizarInv from "/src/Popups/PopupActualizarInv.jsx"; import PopupV from "/src/Popups/PopupLoginValido.jsx"; import PopupIv from "/src/Popups/PopupLoginInvalido.jsx"; -import Swal from 'sweetalert2' +import Swal from 'sweetalert2'; function RecuperarContra(props) { const navigate = useNavigate(); const [Cargando, setCargando] = useState(false); const [datosFormulario, setDatosFormulario] = useState({ correo: '', - password: '' + password: '', + codigo: '' }); + const [codigoAleatorio, setCodigoAleatorio] = useState(null); + const [mostrarCodigo, setMostrarCodigo] = useState(false); + const [codigoVerificado, setCodigoVerificado] = useState(false); - const mostrarAlertaCambioContraExitoso=()=>{ + useEffect(() => { + const codigo = Math.floor(100000 + Math.random() * 900000); + setCodigoAleatorio(codigo); + console.log("Código aleatorio:", codigo); + }, []); + + const mostrarAlertaCambioContraExitoso = () => { Swal.fire({ title: "Cambio de contraseña", - text: "Credenciales actualizadas correctamenete", + text: "Credenciales actualizadas correctamente", icon: "success", button: "Aceptar" + }).then(respuesta => { + if (respuesta) { + redirectToLogin(); + } + }); + }; - }).then(respuesta=>{ - if(respuesta){ - redirectToLogin(); - } - - }) - } - - const mostrarAlertaCambioContraFallido=()=>{ + const mostrarAlertaCambioContraFallido = () => { Swal.fire({ title: "Correo no encontrado", - text: "El correo que introdujo no existe o se escribio incorrectamente.", + text: "El correo que introdujo no existe o se escribió incorrectamente.", icon: "error", button: "Aceptar" - }); - } + }; - const [mostrarContraseña, setMostrarContraseña] = useState(false); - const [desactivarCorreo, setDesactivarCorreo] = useState(false); + const mostrarAlertaCodigoInvalido = () => { + Swal.fire({ + title: "Código incorrecto", + text: "El código ingresado no es válido. Inténtelo de nuevo.", + icon: "error", + button: "Aceptar" + }); + }; + + const [desactivarCorreo, setDesactivarCorreo] = useState(false); const [cambio, setCambio] = useState(0); + const enviarCorreo = (correo, codigo) => { + const serviceID = "service_bx84r3q"; + const templateID = "template_11jpkjs"; + const userID = "AOcEsViQIfZLeg0HL"; + + const templateParams = { + to: correo, + subject: "Recuperación de contraseña", + replyto: "no-reply@example.com", + message: `Su código de verificación es: ${codigo}` + }; + + emailjs.send(serviceID, templateID, templateParams, userID) + .then((response) => { + console.log('Correo enviado', response.status, response.text); + }) + .catch((err) => { + console.error('Error al enviar el correo', err); + }); + }; + const loginUsuario = async (evento) => { evento.preventDefault(); @@ -57,8 +93,9 @@ function RecuperarContra(props) { console.log(response.data); if (response.data === 'Usuario encontrado') { - console.log("Si se encontró"); - setMostrarContraseña(true); + console.log("Sí se encontró"); + enviarCorreo(datosFormulario.correo, codigoAleatorio); // Enviar correo con el código aleatorio + setMostrarCodigo(true); setDesactivarCorreo(true); setCambio(1); } else { @@ -70,13 +107,21 @@ function RecuperarContra(props) { } catch (error) { throw error; } - } else { - try{ + } else if (cambio === 1) { + if (parseInt(datosFormulario.codigo) === codigoAleatorio) { + setCodigoVerificado(true); + setCambio(2); + } else { + mostrarAlertaCodigoInvalido(); + } + } else if (cambio === 2) { + try { const response = await axios.post('http://localhost:4567/frontend/ColocarContra2', { datosFormulario }); console.log(response.data); console.log(datosFormulario); + enviarCorreo(datosFormulario.correo, codigoAleatorio); // Enviar correo confirmando el cambio de contraseña mostrarAlertaCambioContraExitoso(); - }catch(error){ + } catch (error) { throw error; } } @@ -84,14 +129,13 @@ function RecuperarContra(props) { const [nombre, setNombre] = useState(''); - - const [mostrarPopupActualizarInv, setMostrarPopupActualizarInv]= useState(false); - const abrirPopupActualizarInv = () =>{ + const [mostrarPopupActualizarInv, setMostrarPopupActualizarInv] = useState(false); + const abrirPopupActualizarInv = () => { setMostrarPopupActualizarInv(true); }; - const [mostrarPopupVeri, setMostrarPopupVeri]= useState(false); - const abrirPopupVeri = () =>{ + const [mostrarPopupVeri, setMostrarPopupVeri] = useState(false); + const abrirPopupVeri = () => { setMostrarPopupVeri(true); }; @@ -116,7 +160,6 @@ function RecuperarContra(props) { }; const redirectToLogin = () => { - // Redirige a la página del hotel cuando se hace clic en el botón navigate("/Login"); }; @@ -147,9 +190,25 @@ function RecuperarContra(props) { - {mostrarContraseña && ( + {mostrarCodigo && (
- + +
+ + +
+
+ )} + + {codigoVerificado && ( +
+