feat: invalid credential error added

frontend/src/components/Login.tsx

@@ -7,19 +7,27 @@ export const Login = () => {
   const navigate = useNavigate();
   const [ name, setName ] = useState<string>('');
   const [ password, setPassword ] = useState<string>('');
+  const [ isError, setIsError ] = useState<boolean>(false);
 
   async function handleSubmit(event: any) {
     event.preventDefault();
     const response: any = await login(name, password);
-    response.status === 200 ? navigate('/pa165/', { replace: true }) : alert('Invalid credentials');
+    if (response.status === 200) {
+      setIsError(false);
+      navigate('/pa165/', { replace: true });
+    } else {
+      setIsError(true);
+      alert('Invalid credentials');
+    }
   }
 
   return (
     <div className="h-[100vh]">
       <Header/>
       <div className="grid place-items-center h-[90%]">
+        {isError && <div className="text-2xl text-center font-bold mt-auto text-red-900">Invalid credentials</div>}
         <form onSubmit={handleSubmit}
-              className="flex flex-col w-1/4 gap-3 border-2 border-black rounded-lg bg-slate-300 p-4">
+              className={`flex flex-col w-1/4 gap-3 border-2 border-black rounded-lg bg-slate-300 p-4 mb-auto ${isError || 'mt-auto'}`}>
           <p className="text-2xl text-center font-bold">Login</p>
           <label className="flex justify-between">
             Username: