Added error message for the login in it was not able to login

Frontend/power-tracker/src/pages/login.tsx

@@ -21,6 +21,17 @@ import {
     FormLabel,
     FormMessage,
 } from "@/components/ui/form"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
 import { useForm } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Input } from "@/components/ui/input"
@@ -30,6 +41,11 @@ const EgressAPI = import.meta.env.VITE_EAPI_URL
 
 
 function Login() {
+    const [open, setOpen] = useState(false);
+
+    const handleClose = () => {
+        setOpen(false);
+    };
 
     const navigate = useNavigate();
 
@@ -65,11 +81,26 @@ function Login() {
             loader()
         }).catch((error) => {
             console.log(error)
+            setOpen(true);
         })
     };
 
     return(
         <div id="loginpage"> {/* !! READ ABOUT USING "zod" https://zod.dev to allow client side validation && needed to make SHADUI form !! */}
+        <AlertDialog open={open}>
+            <AlertDialogContent>
+            <AlertDialogHeader>
+                <AlertDialogTitle>Login failed</AlertDialogTitle>
+            </AlertDialogHeader>
+                <div>
+                    Invalid username or password. Please try again.
+                </div>
+            
+            <AlertDialogFooter>
+                <AlertDialogCancel onClick={handleClose}>Close</AlertDialogCancel>
+            </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
             <div id="logincard">
                 <Card>
                     <CardHeader>