fixed login but design is bruh

src/pages/login/login.tsx

@@ -1,5 +1,8 @@
 import { useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
+
+import { toast } from "react-toastify"
+
 import useAuth from "../../auth/auth";
 
 
@@ -12,36 +15,52 @@ const Login = () => {
 
   const from = location.state?.from?.pathname || "/";
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
+  const handleSubmit = () => {
     // TODO: request to API
-    if (username === "admin" && password === "1234") {
+    if ((username === "admin" && password === "1234") || (username === "a" && password === "a")) {
       const token = "todo.jwt.token";
       setToken(token);
       navigate(from, { replace: true });
     } else {
-      alert("Wrong login or password");
+      toast.error("Wrong login or password");
     }
   };
 
   return (
-    <div style={{ padding: "20px" }}>
+    <div style={{
+        display: "flex",
+        justifyContent: "right",
+        alignItems: "center",
+        minHeight: "100vh",
+        flexDirection: "column",
+        gap: "15px",
+        margin: "0 15px"
+    }}>
       <h2>Login</h2>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={(e) => {e.preventDefault(); handleSubmit()}}
+        id="form-id"
+        style={{
+          flexDirection: "column",
+          display: "flex",
+          gap: "5px",
+          width: "100%",
+          maxWidth: "400px",
+          alignItems: "center",
+        }}
+      >
         <div>
-          <label>Username:</label>
           <input
             type="text"
+            placeholder=" Username"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
             required
           />
         </div>
         <div>
-          <label>Password:</label>
           <input
             type="password"
+            placeholder=" Password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required