making login page beautiful

src/pages/login/login.css

@@ -0,0 +1,16 @@
+.login-div {
+  display: flex;
+  height: 100%;
+  justify-content: flex-end;
+  align-items: center;
+  border: 1px solid green;
+}
+
+.login-right-div {
+  display: flex;
+  height: 100%;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: column;
+  border: 1px solid blue;
+}

src/pages/login/login.tsx

@@ -5,6 +5,9 @@ import { toast } from "react-toastify"
 
 import useAuth from "../../auth/auth";
 
+import FormField from "../../components/FormField"
+import "./login.css"
+
 
 const Login = () => {
   const { setToken } = useAuth();
@@ -13,9 +16,20 @@ const Login = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
+  const [usernameEmpty, setUsernameEmpty] = useState(false);
+  const [passwordEmpty, setPasswordEmpty] = useState(false);
+
   const from = location.state?.from?.pathname || "/";
 
-  const handleSubmit = () => {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!username || !password) {
+      if (!username) setUsernameEmpty(true);
+      if (!password) setPasswordEmpty(true);
+      return;
+    }
+
     // TODO: request to API
     if ((username === "admin" && password === "1234") || (username === "a" && password === "a")) {
       const token = "todo.jwt.token";
@@ -27,46 +41,49 @@ const Login = () => {
   };
 
   return (
-    <div style={{
-        display: "flex",
-        justifyContent: "right",
-        alignItems: "center",
-        minHeight: "100vh",
-        flexDirection: "column",
-        gap: "15px",
-        margin: "0 15px"
-    }}>
-      <h2>Login</h2>
-      <form onSubmit={(e) => {e.preventDefault(); handleSubmit()}}
-        id="form-id"
+    <div className="login-right-div">
+      <h2
+        style={{
+          display: "flex"
+        }}
+      >
+        Login
+      </h2>
+      <form onSubmit={handleSubmit}
         style={{
           flexDirection: "column",
           display: "flex",
-          gap: "5px",
-          width: "100%",
-          maxWidth: "400px",
+          gap: "10px",
           alignItems: "center",
         }}
+        noValidate
       >
-        <div>
-          <input
-            type="text"
-            placeholder=" Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            required
+        <FormField
+          type="text"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+          showError={usernameEmpty}
+          errorMessage="Please enter your username"
+          className="test1"
           />
-        </div>
-        <div>
-          <input
-            type="password"
-            placeholder=" Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
+        <FormField
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+          showError={passwordEmpty}
+          errorMessage="Please enter your password"
+          className="test2"
           />
-        </div>
-        <button type="submit" style={{ marginTop: "10px" }}>
+        <button type="submit"
+          style={{
+            display: "flex",
+            marginTop: "10px"
+          }}
+        >
           Login
         </button>
       </form>