diff --git a/cosiap_api/users/views.py b/cosiap_api/users/views.py index b70c089c8fc711b1564a4850e635682cc71235b2..09a19f838f7644af2dfbe579c8c82efac5dc39f2 100644 --- a/cosiap_api/users/views.py +++ b/cosiap_api/users/views.py @@ -260,6 +260,6 @@ class VerificarCorreo(APIView): if usuario is not None and account_activation_token.check_token(usuario, token): usuario.is_active = True usuario.save() - return redirect(f'http://localhost:5173/auth?status=success&message=Cuenta verificada exitosamente.') + return redirect(f'http://localhost:5173/authentication/register?status=success&message=Cuenta verificada exitosamente.') else: - return redirect(f'http://localhost:5173/auth?status=error&message=El token de verificación es inválido o ha expirado.') \ No newline at end of file + return redirect(f'http://localhost:5173/authentication/register?status=error&message=El token de verificación es inválido o ha expirado.') \ No newline at end of file diff --git a/cosiap_frontend/src/components/users/Register/Register.jsx b/cosiap_frontend/src/components/users/Register/Register.jsx index 14e6c93907b210b95dfdd793b44c4228335f84da..4ecbdae50432db44affbb7c41942d894e4582bef 100644 --- a/cosiap_frontend/src/components/users/Register/Register.jsx +++ b/cosiap_frontend/src/components/users/Register/Register.jsx @@ -1,36 +1,114 @@ import LayoutBaseAuthenticator from '@/components/common/layouts/LayoutBaseAuthenticator'; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useLocation } from "react-router-dom"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import RegisterForm from "./RegisterForm"; export default function Register({setViewPageLoader} ) { const [sentEmail, setSentEmail] = useState(false); + // Para cambiar de url const navigate = useNavigate(); + // Contiene la informacion de la url actual + const location = useLocation(); + + const [verifySuccess, setVerifySuccess] = useState(null); + + 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){//Contiene parametros + + handleAccountVerificatión(queryParams); + + + // Limpia los parámetros de la URL + // Redirige a la misma página sin parámetros + navigate(location.pathname, { replace: true }); + }//No contiene parametros + + }, [location.search]); // Si location cambia, se ejecutara el useEffect + + //Funcion para procesar los parametros de una verificación de la cuenta + const handleAccountVerificatión = (queryParams) => { + // Verificación de cuenta + if (queryParams.has('status') && queryParams.has('message')){ //Si fueron mandados los parametros de verificación + const status = queryParams.get('status'); + // true = verificacion exitosa, false = verificacion fallida + setVerifySuccess(status === 'success'); + } + } + function navigateLogin(){ navigate('/authentication'); } return ( - + + { - !sentEmail ? ( - <> - -

- Iniciar sesión -

- - ) : ( + verifySuccess === null ? ( + !sentEmail ? ( + <> + +

+ Iniciar sesión +

+ + ) : ( + <> +
+
+

¡Correo de confirmación
enviado!

+
+
+

Se ha enviado un correo
electrónico para confirmar la
creación de tu cuenta.

+
+
+
+ +
+ + ) + ) : + ( <>
-

¡Correo de confirmación
enviado!

+

+ {verifySuccess ? ( + <> + ¡Haz confirmado la + creación de tu cuenta! + + ) : ( + <> + Lo sentimos, tu token + de verificación ha expirado. + + )} +

-

Se ha enviado un correo
electrónico para confirmar la
creación de tu cuenta.

+

+ {verifySuccess ? ( + <> + Ahora puedes iniciar sesión con
+ tus credenciales + + ) : ( + <> + Realiza de nuevo tu registro para
+ un nuevo enlace de verificación + + )} +

diff --git a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx index bd51aa8e38ce7fef743fe2d79fb8fceaa9ec1cd0..153e0db2fc39c6d7e90d70f0ebf485b4a183be40 100644 --- a/cosiap_frontend/src/components/users/Register/RegisterForm.jsx +++ b/cosiap_frontend/src/components/users/Register/RegisterForm.jsx @@ -26,7 +26,7 @@ export default function RegisterForm( {setSentEmail, setViewPageLoader} ) { setSentEmail(true); } catch (error) { console.error("Registration failed:", error); - console.log(error.response.data.detail); + console.log(error.response.data); setRegisterErrorMessage(error.response.data); } setViewPageLoader(false); @@ -35,7 +35,7 @@ export default function RegisterForm( {setSentEmail, setViewPageLoader} ) { return (
- + {/* */}
@@ -53,7 +56,10 @@ export default function RegisterForm( {setSentEmail, setViewPageLoader} ) { type="text" placeholder="CURP" register={register} - errors={errors.curp ? errors.curp.message : undefined} + errors={ + errors.curp ? errors.curp.message : // Si no hay errores de la validadion Yup + registerErrorMessage.curp ? registerErrorMessage.curp[0] : undefined // Mostrara los errores enviados desde back si lo hay + } />
@@ -63,7 +69,10 @@ export default function RegisterForm( {setSentEmail, setViewPageLoader} ) { type="text" placeholder="CORREO ELECTRONICO" register={register} - errors={errors.email ? errors.email.message : undefined} + errors={ + errors.email ? errors.email.message : // Si no hay errores de la validadion Yup + registerErrorMessage.email ? registerErrorMessage.email[0] : undefined // Mostrara los errores enviados desde back si lo hay + } />