apps/frontend/app/routes/auth/login.tsx

@@ -9,6 +9,7 @@ import { formHook } from '../../providers/FormProvider';
 import type { Route } from './+types/login';
 import { SearchParamKeys } from '../../lib/constants';
 import { useEffect, useState } from 'react';
+import { AxiosError } from 'axios';
 
 const loginFormSchema = v.object({
   username: v.pipe(v.string(), v.trim(), v.minLength(1, 'Username is required')),
@@ -40,7 +41,20 @@ export default function LoginRoute() {
       navigate('/');
     },
     onError: (error) => {
-      if (defaultResponseErrorHandler(error)) return;
+      if (defaultResponseErrorHandler(error, { disableUnauthorizedHandling: true })) return;
+      if (error instanceof AxiosError && error.status === 401) {
+        toast.error('Invalid username or password.', {
+          position: 'top-center',
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: false,
+          progress: undefined,
+          theme: 'colored',
+        });
+        return;
+      }
       console.error('Login failed:', error);
     },
   });
@@ -57,7 +71,7 @@ export default function LoginRoute() {
 
     onSubmit: async ({ value }) => {
       toast.dismiss();
-      return await login({ body: { password: value.password, username: value.username } });
+      return await login({ body: { password: value.password, username: value.username } }).catch(() => {});
     },
   });