RecuperarContraCorreo

This commit is contained in:
Cesar.Gomez 2024-05-25 11:47:09 -06:00
parent 27257a10d6
commit c2259b28d0
3 changed files with 106 additions and 36 deletions

View File

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

View File

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

View File

@ -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);
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();
}
})
}
});
};
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 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 [mostrarContraseña, setMostrarContraseña] = useState(false);
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,11 +107,19 @@ function RecuperarContra(props) {
} catch (error) {
throw error;
}
} 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) {
throw error;
@ -84,7 +129,6 @@ function RecuperarContra(props) {
const [nombre, setNombre] = useState('');
const [mostrarPopupActualizarInv, setMostrarPopupActualizarInv] = useState(false);
const abrirPopupActualizarInv = () => {
setMostrarPopupActualizarInv(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"