✨ feat: Add toaster message in login#155
Conversation
…message - Added imports for i18next and sonner in LoginForm.tsx - Updated form submission in the login function to display a toast error message when credentials are invalid
caverav
requested review from
Icksir,
iTzGooDLife,
jllanosg,
massi-ponce and
sealra
|
Warning Rate limit exceeded@caverav has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 14 minutes and 41 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 Walkthrough📝 Walkthrough📝 Walkthrough📝 Walkthrough📝 Walkthrough📝 WalkthroughWalkthroughEste pull request introduce cambios en el componente Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
frontend/src/hooks/useAuth.tsx (1)
63-65: Añade la anotación de tipo para el valor de retorno de la funciónlogin.Los cambios implementados son correctos y cumplen con el objetivo de proporcionar retroalimentación sobre los intentos de inicio de sesión. Sin embargo, es necesario añadir la anotación de tipo para el valor de retorno de la función
login.Aplica este cambio para mejorar la tipificación:
-const login = async (username: string, password: string, totp: string) => { +const login = async (username: string, password: string, totp: string): Promise<boolean> => {Esta modificación hará que el código sea más robusto y fácil de mantener en el futuro.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- frontend/src/components/login/LoginForm.tsx (2 hunks)
- frontend/src/hooks/useAuth.tsx (1 hunks)
- frontend/src/routes/login.tsx (2 hunks)
🧰 Additional context used
🔇 Additional comments (6)
frontend/src/components/login/LoginForm.tsx (1)
1-2: Las importaciones son correctas y necesarias.Las nuevas importaciones de
tytoastson apropiadas para implementar la funcionalidad de mensajes de error internacionalizados. Estas adiciones son coherentes con los cambios realizados en la funciónhandleSubmit.frontend/src/routes/login.tsx (5)
3-3: Importación correcta del componente Toaster.La adición de esta importación es coherente con el objetivo de mostrar mensajes de error durante el inicio de sesión.
22-43: Reestructuración adecuada del componente LoginForm.La nueva estructura del LoginForm es más coherente y mejora la organización del código. Todos los elementos relacionados con el inicio de sesión están ahora correctamente encapsulados dentro del componente.
44-53: Implementación correcta del componente Toaster.La adición del componente Toaster es una mejora significativa que cumple con el objetivo de proporcionar mensajes de error durante el inicio de sesión. Las opciones de estilo personalizadas para diferentes tipos de notificaciones son un buen toque.
21-21: Uso correcto del fragmento de React.La adición del fragmento de React es necesaria y está bien implementada. Permite la inclusión del nuevo componente Toaster sin introducir elementos DOM innecesarios.
Also applies to: 54-54
Line range hint
1-54: Implementación general correcta, pero con margen de mejora.La implementación cumple con los objetivos del PR, pero hay aspectos que podrían mejorarse:
- No se ve la lógica de manejo de errores en este archivo. Asegúrate de que esté correctamente implementada en el componente LoginForm.
- El uso de una biblioteca de terceros para las notificaciones aumenta las dependencias del proyecto. Considera si esto es necesario o si se podría implementar una solución nativa.
Verifica la implementación del manejo de errores en el componente LoginForm ejecutando el siguiente script:
- Updated PrimaryButton component to accept a `type` prop with values 'submit' or 'button'. - Modified LoginForm styles: - Changed background color to bg-gray-900. - Adjusted text color in a section of the form to text-white. - Added new imports in the login route file: - Imported useState from 'react'. - Imported SimpleInput component. - Imported PrimaryButton component. - Implemented new state variables for password and email fields. - Refactored LoginForm to use SimpleInput components for email and password inputs. - Implement email and password state handling in the Login component. - Integrated PrimaryButton component with blue color and 'login' text for form submission. This commit enhances the styling and functionality of the PrimaryButton component and updates the UI of the LoginForm component in the frontend.
jllanosg
left a comment
jllanosg
left a comment
There was a problem hiding this comment.
actualizar traducciones
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (5)
frontend/src/components/button/PrimaryButton.tsx (1)
28-28: La implementación del atributo 'type' es correcta, pero requiere validación adicional.Has implementado correctamente el uso del prop 'type' en el elemento button. Sin embargo, es crucial asegurar que solo se utilicen tipos de botón válidos.
Ignora la sugerencia del análisis estático sobre usar una cadena estática o una expresión ternaria trivial, ya que en este caso queremos que el tipo sea dinámico.
Para mejorar la robustez del componente, considera añadir una validación de tipo en tiempo de ejecución. Podrías implementarlo así:
type={['submit', 'button'].includes(type) ? type : 'button'}Esto garantizará que solo se utilicen tipos válidos, defaulteando a 'button' en caso contrario.
🧰 Tools
🪛 GitHub Check: build (20.15.0)
[failure] 28-28:
The button type attribute must be specified by a static string or a trivial ternary expressionfrontend/src/routes/login.tsx (1)
Line range hint
1-65: Resumen de la revisión: Mejoras significativas, pero se requieren ajustes importantes.Los cambios realizados en el componente Login representan una mejora sustancial en la funcionalidad y la experiencia del usuario. La implementación de componentes reutilizables y la adición del Toaster son pasos positivos.
Sin embargo, hay dos problemas críticos que deben abordarse antes de que este PR pueda ser aprobado:
- Falta de validación del formulario: Implemente una validación robusta para los campos de email y contraseña.
- Ausencia de lógica para mostrar mensajes toast: Agregue la lógica necesaria para mostrar mensajes de éxito o error basados en el resultado del inicio de sesión.
Estos problemas son fundamentales para cumplir con los objetivos del PR y garantizar una experiencia de usuario óptima. Aborde estos puntos y vuelva a solicitar una revisión.
frontend/src/hooks/useAuth.tsx (1)
Line range hint
128-134: Es necesario actualizar la firma de las funciones en el retorno del hook.Las modificaciones en las funciones
loginyregisterhan cambiado sus tipos de retorno, pero esto no se refleja en la declaración de retorno del hookuseAuth.Para mantener la consistencia y el tipado correcto, debes actualizar el retorno del hook de la siguiente manera:
return { isAuthenticated, login: login as (username: string, password: string, totp: string) => Promise<boolean>, logout, checktoken, register: register as (username: string, firstname: string, lastname: string, password: string) => Promise<boolean>, };Esta modificación asegurará que los tipos de retorno de
loginyregistersean correctos y consistentes con sus implementaciones actuales.frontend/src/routes/register.tsx (1)
87-96: Excelente adición del componente ToasterLa inclusión del componente Toaster con estilos personalizados mejora significativamente la experiencia del usuario al proporcionar retroalimentación visual clara.
Sin embargo, considera extraer las opciones de estilo a un archivo de configuración separado para mejorar la mantenibilidad.
Considera crear un archivo
toastConfig.tscon el siguiente contenido:export const toastOptions = { classNames: { error: 'bg-red-400 text-white', success: 'bg-green-400 text-white', warning: 'bg-yellow-400 text-white', info: 'bg-blue-400 text-white', }, };Luego, importa y usa esta configuración en tu componente:
import { toastOptions } from './toastConfig'; // ... <Toaster toastOptions={toastOptions} />frontend/src/i18n/en-US/index.ts (1)
206-206: ¡Oye! Hay un comentario anterior que no has abordado.Existe un comentario de revisión anterior en la línea 206 que sugiere cambiar el texto a 'Passwords do not match'. Aunque no está directamente relacionado con tu cambio actual, deberías considerar implementar esta sugerencia para mejorar la consistencia y claridad de los mensajes de error.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
- frontend/src/components/button/PrimaryButton.tsx (2 hunks)
- frontend/src/components/login/LoginForm.tsx (2 hunks)
- frontend/src/hooks/useAuth.tsx (2 hunks)
- frontend/src/i18n/en-US/index.ts (1 hunks)
- frontend/src/routes/login.tsx (2 hunks)
- frontend/src/routes/register.tsx (3 hunks)
- frontend/tailwind.config.js (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/components/login/LoginForm.tsx
🧰 Additional context used
🪛 GitHub Check: build (20.15.0)
frontend/src/components/button/PrimaryButton.tsx
[failure] 28-28:
The button type attribute must be specified by a static string or a trivial ternary expression
🔇 Additional comments (14)
frontend/src/components/button/PrimaryButton.tsx (3)
7-7: ¡Bien hecho! La adición del prop 'type' mejora la flexibilidad del componente.La inclusión de esta propiedad opcional permite que el botón se utilice tanto como botón de envío como botón regular, lo cual es una mejora significativa en la versatilidad del componente.
20-20: La asignación del valor por defecto es correcta y mantiene la compatibilidad.Has hecho bien en establecer 'button' como valor por defecto para el prop 'type'. Esto asegura que el componente mantenga su comportamiento anterior en caso de que no se especifique un tipo, lo cual es crucial para la compatibilidad con el código existente.
Line range hint
1-36: Resumen de la revisión: Cambios aprobados con una sugerencia de mejora.En general, los cambios realizados en el componente PrimaryButton son positivos y aumentan su flexibilidad. La adición del prop 'type' y su implementación están bien ejecutadas.
Sin embargo, para fortalecer aún más el componente, te sugiero que consideres implementar una validación de tipo en tiempo de ejecución como se mencionó anteriormente. Esto proporcionará una capa adicional de seguridad sin comprometer la flexibilidad que has introducido.
Buen trabajo en la mejora de este componente.
🧰 Tools
🪛 GitHub Check: build (20.15.0)
[failure] 28-28:
The button type attribute must be specified by a static string or a trivial ternary expressionfrontend/src/routes/login.tsx (3)
1-7: Las nuevas importaciones son correctas y necesarias.Las importaciones añadidas son coherentes con los cambios realizados en el componente. La estructura y el orden de las importaciones son adecuados.
15-16: Los hooks useState están correctamente implementados.La gestión del estado del formulario mediante useState es apropiada. Los nombres de las variables y las funciones de actualización son claros y siguen las convenciones de React.
49-54: El componente PrimaryButton está correctamente implementado.La implementación del botón de envío utilizando el componente PrimaryButton es adecuada. El uso de t() para las traducciones y el tipo "submit" son correctos para la funcionalidad del formulario.
frontend/tailwind.config.js (4)
7-48: ¡Bien hecho con la reorganización de colores!La restructuración de la configuración de colores mejora la legibilidad y mantenibilidad del código. La adición de los colores 'chart' parece apropiada para las necesidades del proyecto.
49-87: La nueva animación 'shake' es una adición excelente.La animación 'shake' será muy útil para proporcionar feedback visual de errores, lo cual se alinea perfectamente con el objetivo de mostrar mensajes de error en el inicio de sesión. La reformatación de las animaciones existentes también mejora la consistencia del código.
88-94: Correcta inclusión de la animación 'shake'.Has añadido correctamente la animación 'shake' a la lista de animaciones disponibles. Esto permitirá su uso en el proyecto, lo cual es crucial para implementar el feedback visual de errores.
95-99: Verificación necesaria para las variables CSS de radio de borde.La adición de configuraciones de radio de borde es buena para mantener un diseño cohesivo. Sin embargo, no veo la definición explícita de la variable CSS
--radius.Asegúrate de que esta variable esté definida en algún lugar de tu proyecto CSS. Si no es así, deberías considerar definirla aquí o en un archivo CSS separado.
frontend/src/hooks/useAuth.tsx (1)
63-68: ¡Cambios aprobados en la funciónlogin!La implementación de los valores de retorno booleanos mejora significativamente la función
login. Ahora proporciona una indicación clara del éxito o fracaso del inicio de sesión, lo que se alinea perfectamente con el objetivo de mejorar el manejo de errores. La lógica es correcta y consistente.frontend/src/routes/register.tsx (2)
2-3: ¡Bien hecho con la optimización!La adición de useCallback y la importación de componentes de notificación son cambios positivos que mejoran el rendimiento y la experiencia del usuario.
Also applies to: 13-37
29-33: Buen manejo de erroresLa adición de manejo de errores para el registro fallido es una mejora significativa en la experiencia del usuario. Proporciona retroalimentación clara cuando algo sale mal.
frontend/src/i18n/en-US/index.ts (1)
205-205: ¡Bien hecho! La nueva línea de error es apropiada.La adición de la línea para el error de creación de usuario es correcta y sigue la estructura existente del archivo. Es una buena práctica tener mensajes de error específicos para diferentes situaciones.
| <SimpleInput | ||
| id="email" | ||
| label={t('email')} | ||
| name="email" | ||
| onChange={setEmail} | ||
| placeholder={t('email')} | ||
| requiredField | ||
| type="text" | ||
| value={email} | ||
| /> | ||
| <SimpleInput | ||
| id="password" | ||
| label={t('password')} | ||
| name="password" | ||
| onChange={setPassword} | ||
| placeholder={t('password')} | ||
| requiredField | ||
| type="password" | ||
| value={password} | ||
| /> |
There was a problem hiding this comment.
Los componentes SimpleInput están bien implementados, pero falta validación del formulario.
La estructura de los componentes SimpleInput es correcta y las propiedades están bien definidas. El uso de t() para las traducciones es consistente con las prácticas de internacionalización.
Sin embargo, aunque se utiliza la propiedad requiredField, no se observa lógica de validación del formulario. Es crucial implementar la validación para garantizar que los campos requeridos se completen antes de enviar el formulario.
Implemente la validación del formulario para asegurar que los campos email y password estén completos antes de permitir el envío. Considere utilizar una biblioteca de validación de formularios como Formik o react-hook-form para una gestión más robusta del estado y la validación del formulario.
| <Toaster | ||
| toastOptions={{ | ||
| classNames: { | ||
| error: 'bg-red-400 text-white', | ||
| success: 'bg-green-400 text-white', | ||
| warning: 'bg-yellow-400 text-white', | ||
| info: 'bg-blue-400 text-white', | ||
| }, | ||
| }} | ||
| /> | ||
| <div className="text-center md:text-left"> | ||
| <button | ||
| className="mt-4 bg-black hover:bg-gray-100 hover:text-black px-4 py-2 text-white uppercase rounded text-xs tracking-wider" | ||
| type="submit" | ||
| > | ||
| {t('login')} | ||
| </button> | ||
| </div> | ||
| </LoginForm> | ||
| </> |
There was a problem hiding this comment.
El componente Toaster está bien implementado, pero falta la lógica para mostrar los mensajes.
La implementación del componente Toaster con opciones de estilo personalizadas es correcta. Su ubicación fuera del LoginForm es apropiada para notificaciones globales.
Sin embargo, no se observa la lógica para activar los toasts basados en el éxito o fracaso del inicio de sesión. Es fundamental implementar esta lógica para proporcionar retroalimentación al usuario.
Implemente la lógica para mostrar los mensajes de toast en respuesta a los resultados del inicio de sesión. Asegúrese de manejar tanto los casos de éxito como los de error, y proporcione mensajes claros y útiles al usuario.
| return true; | ||
| } | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| return false; |
There was a problem hiding this comment.
¡Atención! Hay un problema potencial en la función register.
La implementación actual no distingue claramente entre errores reales y registros fallidos. Ambos casos resultan en un retorno de false, lo que puede dificultar el manejo adecuado de diferentes escenarios de error.
Te sugiero modificar la función para manejar los diferentes casos de manera más específica. Aquí tienes una propuesta de mejora:
const register = async (
username: string,
firstname: string,
lastname: string,
password: string
): Promise<{ success: boolean; error?: string }> => {
// ... (código existente)
try {
const response = await fetch('/api/users/init', {
// ... (configuración existente)
});
const responseData = await response.json();
if (responseData.status === 'success') {
navigate('/login', { replace: true });
return { success: true };
}
return { success: false, error: 'Registro fallido' };
} catch (error) {
console.error(error);
return { success: false, error: 'Error en la solicitud' };
}
};Esta modificación permite distinguir entre un registro fallido y un error en la solicitud, proporcionando información más detallada para el manejo de errores.
| const password = getValue('password'); | ||
| const confirmPassword = getValue('confirmPassword'); | ||
| if (password !== confirmPassword) { | ||
| toast.error(t('confirmPasswordDifferents')); |
There was a problem hiding this comment.
¡Ojo con la clave del mensaje de error!
La clave del mensaje de error para contraseñas que no coinciden no es coherente. Estás usando 'confirmPasswordDifferents', pero en comentarios anteriores se sugirió 'err.confirmPasswordDifferents'. Asegúrate de usar la clave correcta para mantener la consistencia en la internacionalización.
Aplica este cambio:
- toast.error(t('confirmPasswordDifferents'));
+ toast.error(t('err.confirmPasswordDifferents'));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| toast.error(t('confirmPasswordDifferents')); | |
| toast.error(t('err.confirmPasswordDifferents')); |
Co-authored-by: José Llanos <74331945+jllanosg@users.noreply.github.com>
Co-authored-by: José Llanos <74331945+jllanosg@users.noreply.github.com>
3 participants
Descripción
Se agrega mensaje de error en caso de credenciales incorrectas
Motivación y Contexto
No había ningún tipo de retroalimentación
¿Cómo ha sido probado?
Iniciando con credenciales incorrectas
Capturas de pantalla (si es apropiado):
Tipos de cambios
Lista de verificación:
Summary by CodeRabbit
Nuevas Funciones
Toasterpara gestionar las notificaciones de éxito y error durante el proceso de inicio de sesión.PrimaryButtonque permite flexibilidad en su uso como botón de envío.Mejoras
useAuthahora devuelve un valor booleano que indica el éxito o fracaso del inicio de sesión y registro.useCallback.