-
+
+
+
+
+ )
+ );
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Password/ResetPassword.jsx b/cosiap_frontend/src/components/users/Password/ResetPassword.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..951c8a5154b1638c70a79f90634cb7d0b2c00593
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Password/ResetPassword.jsx
@@ -0,0 +1,77 @@
+import LayoutBaseAuthenticator from "@/components/common/layouts/LayoutBaseAuthenticator";
+import ResetPasswordForm from "./ResetPasswordForm";
+import { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import NewPasswordForm from "./NewPasswordForm";
+
+export default function ResetPassword({ setViewPageLoader }){
+ // false se mantiene en el formulario de envio de correo
+ // true se establece al formulario de creacion de nueva contraseña
+ const [viewChangePasswordForm, setChangePasswordForm] = useState(false);
+ // Definimos las variables necesarios en el componente de NewPassword
+ const [uid, setUid] = useState('');
+ const [token, setToken] = useState('');
+ // Para cambiar de url
+ const navigate = useNavigate();
+ // Informacion de la url
+ const location = useLocation();
+
+
+ useEffect (() => {
+ //Parametros mandados de la url, con clave - valor
+ const queryParams = new URLSearchParams(location.search);
+ // isEmpty será true si queryParams no tiene ningún parámetro y false si tiene al menos uno.
+ const isEmpty = ![...queryParams].length;
+
+ if (!isEmpty){
+ if (queryParams.has('uid') && queryParams.has('token')) { // Si la url contiene esos dos parametros
+ handleParamsChangePassword(queryParams)
+ }
+ // Limpia los parámetros de la URL
+ // Redirige a la misma página sin parámetros
+ navigate(location.pathname, { replace: true });
+ }
+
+ },[location]); // Se ejecutara si location cambia
+
+ // Funcion para procesar los parametros para cambiar la contraseña en la api
+ const handleParamsChangePassword = (queryParams) => {
+ // Obtenemos y establecemos los valores de los parametros
+ setUid(queryParams.get('uid'));
+ setToken(queryParams.get('token'));
+
+ //Declaramos a true para confirmar que la url que se ingreso es para realizar un cambio de contraseña
+ setChangePasswordForm(true);
+ }
+
+ return (
+
+
+ );
+
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx b/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..cc3f253b3ffe911c776024912aabde812360e944
--- /dev/null
+++ b/cosiap_frontend/src/components/users/Password/ResetPasswordForm.jsx
@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { ResetPasswordValidationSchema } from "@/components/FormsValidations";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { RegisterInput } from "@/components/users/Register/RegisterInput";
+import { useNavigate } from "react-router-dom";
+import api from "@/api";
+
+export default function ResetPasswordForm({ setViewPageLoader }){
+ const navigate = useNavigate();
+
+ const [emailSent, setEmailSent] = useState(false);
+ const [formError, setFormError] = useState('');
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ resolver: yupResolver(ResetPasswordValidationSchema),
+ });
+
+ const handleFormSubmission = async (data) => {
+ setViewPageLoader(true);
+
+ try {
+ const response = await api.usuarios.restablecerPassword(data);
+ console.log('Password reset succesfuly: ', response.data);
+ setEmailSent(true);
+ } catch (error) {
+ console.error('Password reset failed: ', error);
+ console.log(error.response.data);
+ setFormError(error.response.data);
+ }
+ setViewPageLoader(false);
+ }
+ return (
+ emailSent ? (
+ <>
+
¿Haz olvidado tu contraseña?
+navigate('reset_password')}> + Reestablecer contraseña +
¿Aun no tienes cuenta?
-+
navigate('register')}> Registrate
diff --git a/cosiap_frontend/src/components/users/Password/NewPasswordForm.jsx b/cosiap_frontend/src/components/users/Password/NewPasswordForm.jsx new file mode 100644 index 0000000000000000000000000000000000000000..9a3b294ed737bf88292706dbcd0f4218f298ae9c --- /dev/null +++ b/cosiap_frontend/src/components/users/Password/NewPasswordForm.jsx @@ -0,0 +1,96 @@ +import { useState } from "react"; +import { useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import { NewPasswordValidationSchema } from "@/components/FormsValidations"; +import { RegisterInputPassword } from "@/components/users/Register/RegisterInputPassword"; +import ErrorDisplay from "@/components/common/ui/ErrorDisplay"; +import { useNavigate } from "react-router-dom"; +import api from "@/api"; + +export default function NewPasswordForm ({uid, token, setViewPageLoader}){ + // Para cambiar de url + const navigate = useNavigate(); + + // Para cambiar de componente si la creación de la nueva contraseña fue exitosa + const [successChangePassword, setSuccessChangePassword] = useState(false); + // Error de la creacion de contraseña desde back + const [errorNewPassword, setErrorNewPassword] = useState(''); + const { + register, + handleSubmit, + formState: { errors, isSubmitting }, + } = useForm({ + resolver: yupResolver(NewPasswordValidationSchema), + }); + + const handleFormSubmission = async (data) => { + setViewPageLoader(true); + try { + const response = await api.usuarios.nuevaPassword(uid, token, data) + console.log('Password change successful', response.data); + setSuccessChangePassword(true); + } catch (error) { + console.error('Password change failed', error); + setErrorNewPassword(error.response.data.messages.error); + } + setViewPageLoader(false); + } + + return ( + successChangePassword ? + ( + <> +
+
+
+ )
+ :
+ (
+ <>
+
+
+ ¡CAMBIO DE CONTRASEÑA REALIZADO CON EXITO!
+
+
+ SE HA REESTABLECIDO TU CONTRASEÑA, INICIA SESIÓN CON TUS CREDENCIALES
+
+
+
+
+ {
+ viewChangePasswordForm ? (
+ <>
+
+
+
+
+ + Se le enviara un correo para restablecer la contraseña +
+
+
+
+ ¡Correo enviado con exito!
Revisa tu bandeja para seguir con el proceso de restablecimiento
+
+
+
+
+ ) : (
+ <>
+
+ navigate('/authentication')}> + Iniciar sesión +
+ + ) + + ); +} \ No newline at end of file