RecuperarContraCorreo

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

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

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) {
               <FaUser className="icon" />
             </div>
 
-            {mostrarContraseña && (
+            {mostrarCodigo && (
               <div>
-                <label htmlFor="contraseña" className="label-correo">Nueva contraseña:</label>
+                <label htmlFor="codigo" className="label-correo">Ingrese el código enviado a su correo:</label>
+                <div className="input-box">
+                  <input
+                    type="text"
+                    placeholder="Código"
+                    onChange={cambiosFormulario}
+                    name="codigo"
+                    value={datosFormulario.codigo}
+                  />
+                  <FaLock className="icon" />
+                </div>
+              </div>
+            )}
+
+            {codigoVerificado && (
+              <div>
+                <label htmlFor="password" className="label-correo">Nueva contraseña:</label>
                 <div className="input-box">
                   <input
                     type="password"
@@ -190,4 +249,4 @@ function RecuperarContra(props) {
   );
 }
 
-export default RecuperarContra;
+export default RecuperarContra;