Fix toast messages (#365)

Author: OlivierJM

src/components/ToastMessage/ToastMessage.tsx

@@ -11,17 +11,17 @@ interface ToastMessageProps {
 
 const ToastMessage: React.FC<ToastMessageProps> = ({ content, type }) => {
   return (
-    <Toast color={type} className="animate-appear bg-white dark:bg-[#202020] p-3">
+    <Toast color={type} className="animate-appear bg-white dark:bg-[#202020] p-3 flex items-center">
       <div
         className={
           'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md ' +
           (type === 'success'
             ? 'bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-300'
             : type === 'warning'
-            ? 'bg-orange-100 text-orange-500 dark:bg-orange-800 dark:text-orange-300'
-            : type === 'error'
-            ? 'bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-300'
-            : type === 'info' && 'bg-cyan-100 text-cyan-600 dark:bg-cyan-800 dark:text-cyan-300')
+              ? 'bg-orange-100 text-orange-500 dark:bg-orange-800 dark:text-orange-300'
+              : type === 'error'
+                ? 'bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-300'
+                : type === 'info' && 'bg-cyan-100 text-cyan-600 dark:bg-cyan-800 dark:text-cyan-300')
         }
       >
         {type === 'error' ? (
@@ -34,7 +34,7 @@ const ToastMessage: React.FC<ToastMessageProps> = ({ content, type }) => {
           type === 'info' && <IoInformation className="h-5 w-5" />
         )}
       </div>
-      <div className="ml-3 text-sm text-gray-800 dark:text-gray-200 font-normal">{content}</div>
+      <div className="ml-3 text-sm text-gray-800 dark:text-gray-200 font-normal whitespace-nowrap">{content}</div>
       <Toast.Toggle className="dark:bg-[#202020] dark:text-gray-600 dark:hover:bg-gray-900 dark:hover:text-gray-100 dark:focus:ring-gray-700" />
     </Toast>
   );

src/components/ToastMessage/ToastMessageContainer.tsx

@@ -4,7 +4,7 @@ import ToastMessage from './ToastMessage';
 
 export default function ToastMessageContainer({ messages }: { messages: ToastMessageData[] }) {
   return (
-    <div className="fixed top-4 left-0 right-0 z-[1000] h-0 flex flex-col items-center space-y-2">
+    <div className="fixed top-4 left-0 right-0 z-[1000] w-full flex flex-col items-center space-y-2">
       {messages.map((message) => (
         <ToastMessage key={message.id} {...message} />
       ))}

src/hooks/useAuth/index.ts

@@ -41,7 +41,7 @@ const useAuth = () => {
           return false;
         }
         message.success(getProcessCodeMeaning(responseData.code));
-        // router.replace('/');
+        router.replace('/auth/login');
       } catch (err: any) {
         message.error(`${i18next.t('unknown_error')}. ${err.msg ? err.msg : ''}`);
         return false;
@@ -144,6 +144,7 @@ const useAuth = () => {
 
   const handleForgotPassword = useCallback(
     async (email: string) => {
+      setLoading(true);
       try {
         const response = await fetch('/api/password/forgotPassword', {
           method: 'POST',
@@ -161,13 +162,16 @@ const useAuth = () => {
       } catch (err: any) {
         message.error(`${i18next.t('unknown_error')}. ${err.msg ? err.msg : ''}`);
         return false;
+      } finally {
+        setLoading(false);
       }
     },
     [message],
   );
 
   const handleResetPassword = useCallback(
     async (token: string, newPassword: string) => {
+      setLoading(true);
       try {
         const response = await fetch('/api/password/resetPassword', {
           method: 'POST',
@@ -187,6 +191,8 @@ const useAuth = () => {
       } catch (err: any) {
         message.error(`${i18next.t('unknown_error')}. ${err.msg ? err.msg : ''}`);
         return false;
+      } finally {
+        setLoading(false);
       }
     },
     [message],

src/utils/intl/index.ts

@@ -147,8 +147,8 @@ i18next.init({
         process_code_504: 'Invalid credentials',
         process_code_505: 'User logged out successfully',
         process_code_506: 'Failed to logout user',
-        process_code_507: 'User was successfully created',
-        process_code_508: 'Password reset email sent successfully',
+        process_code_507: 'User with the same email already exists',
+        process_code_508: 'User created successfully',
         process_code_509: 'Invalid or expired reset token',
         process_code_511: 'Failed to send password reset email, please try again',