RecuperarContraCorreo
This commit is contained in:
parent
27257a10d6
commit
c2259b28d0
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue