Recuperación de Contraseña - HU004

[JackJoshua10]

Descripción

Como usuario deseo poder recuperar mi contraseña si la olvido, para poder volver a acceder al sistema sin crear una nueva cuenta.

---

Criterios de Aceptación

Dado un usuario en la página de inicio de sesión, cuando haga clic en el enlace "Olvidé mi contraseña", entonces debe ser redirigido a la página de recuperación de contraseña.

Dado un usuario en la página de recuperación de contraseña, cuando ingrese su correo electrónico registrado y haga clic en "Enviar", entonces el sistema debe enviar un correo electrónico con un enlace para restablecer la contraseña.

Dado un usuario que ha recibido el correo electrónico para restablecer la contraseña, cuando haga clic en el enlace proporcionado en el correo, entonces debe ser redirigido a una página para crear una nueva contraseña.

Dado un usuario en la página para crear una nueva contraseña, cuando ingrese una nueva contraseña y confirme la misma, entonces el sistema debe guardar la nueva contraseña y permitir el inicio de sesión con la nueva contraseña.

Dado un usuario en la página de recuperación de contraseña, cuando ingrese un correo electrónico que no está registrado en el sistema y haga clic en "Enviar", entonces el sistema debe mostrar un mensaje indicando que no se ha encontrado ninguna cuenta asociada a ese correo electrónico.

Dado un usuario que intenta usar un enlace de restablecimiento de contraseña caducado, cuando haga clic en el enlace, entonces el sistema debe mostrar un mensaje indicando que el enlace ha caducado y ofrecer la opción de solicitar un nuevo enlace.

Dado un usuario en la página para crear una nueva contraseña, cuando ingrese una nueva contraseña que no coincida con la confirmación, entonces el sistema debe mostrar un mensaje de error indicando que las contraseñas no coinciden y no debe permitir guardar la nueva contraseña.

---

Tarea 1: Crear el formulario de recuperación de contraseña

Acciones:
Revisar el diseño en Figma para asegurarse de que el formulario de recuperación de contraseña respete los colores, fuentes, tamaños, y espaciados definidos.
Implementar un componente PasswordRecoveryForm en React basado en el diseño.
Seguir las interacciones y animaciones definidas en Figma (por ejemplo, efectos hover, transiciones de botones, etc.).
Añadir validaciones según el prototipo (ejemplo: mensajes de error estilizados según el diseño).
Verificar la responsividad para los tamaños de pantalla definidos en el diseño.

Tarea 2: Crear el formulario de restablecimiento de contraseña

Acciones:
Basarse en el diseño en Figma para construir el componente ResetPasswordForm.
Seguir las indicaciones visuales y de interacción del diseño para los campos de nueva contraseña y confirmación.
Implementar validaciones de contraseña (ej.: si en el diseño se incluyen indicaciones como "Debe tener 8 caracteres", asegúrate de reflejar esto en la lógica y en el mensaje de error).
Diseñar mensajes de éxito o error visuales siguiendo el prototipo (por ejemplo, confirmación tras guardar la contraseña).
Usar herramientas como CSS Modules o styled-components si las clases están predefinidas en el prototipo.

Tarea 3: Implementar las rutas y la lógica de integración

Acciones:
Configurar las rutas de navegación para las pantallas según el flujo en Figma:
/password-recovery para la página de recuperación de contraseña.
/reset-password para la página de restablecimiento de contraseña.
Seguir la estructura y jerarquía de navegación establecida en el prototipo.
Asegurarse de que las respuestas simuladas del back-end coincidan con los estados definidos en el diseño (por ejemplo, mostrar los estados de carga o de error con los estilos de Figma).
Implementar loaders o animaciones si están definidas en el prototipo.
Garantizar que el flujo de navegación sea fluido y cumpla con las transiciones previstas en el diseño.