use usehookform library to handle forms

package.json

@@ -22,6 +22,7 @@
     "msw": "^2.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.2",
     "react-router-dom": "^6.22.3",
     "sort-by": "^1.2.0"
   },

src/assets/css/authentication/LoginContainer.module.css

@@ -5,4 +5,4 @@
   height: 100vh; /* Example to fill the screen */
   background: linear-gradient(180deg, #0C1747 0%, rgba(37, 60, 92, 0.62) 100%);
   border: 1px black solid;
-  }
+}

src/assets/css/authentication/LoginFormComponent.module.css

@@ -82,18 +82,17 @@
   border-radius: 7px;
 
   color: #fff;
-  background-color: #0c1747;
+  background-color: #0c1747 !important;
   font-family: "DM Sans";
   font-size: 20px;
   text-align: center;
   cursor: pointer;
 }
 
 /* For desktops */
-@media (min-width: 1025px) {
+@media (min-width: 992px) {
   .login {
-    width: 60%;
-    height: 60%;
+    max-width: 1037px;
     background-color: white;
     border-radius: 4px;
     display: flex;

src/components/authentication/LoginFormComponent.tsx

@@ -1,29 +1,38 @@
 import { useState } from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
 
 import styles from "css/authentication/LoginFormComponent.module.css";
 import loginImage from "/login-image.svg";
 import { signIn } from "@/api/authentication.ts";
 
+type Inputs = {
+  email: string,
+  password: string
+}
+
 const LoginFormComponent = () => {
-  const [email, setEmail] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
   const [showPassword, setShowPassword] = useState<boolean>(false);
 
+  const {
+    register,
+    handleSubmit,
+  } = useForm<Inputs>();
+  const onSubmit: SubmitHandler<Inputs> = (data) => signIn(data.email, data.password);
+
   const changePasswordVisibility = () => {
     setShowPassword((prev) => !prev);
   };
 
   return (
     <div className={styles.login}>
       <img src={loginImage} alt="login-image" className={styles["login-image"]} />
-      <div className={styles["login-form"]}>
+      <form className={styles["login-form"]} onSubmit={handleSubmit(onSubmit)}>
         <p>Login</p>
-        <input type="text" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <input type="text" placeholder="Email" {...register("email", {required: true })} />
         <input
           type={showPassword ? "text" : "password"}
           placeholder="Password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
+          {...register("password", {required: true })}
         />
         <button className={styles["password-visibility-button"]} onClick={changePasswordVisibility}>
           {showPassword ? "unshow" : "show"}
@@ -32,10 +41,8 @@ const LoginFormComponent = () => {
           Forgot your password?
         </a>
 
-        <button className={styles["sign-in-button"]} onClick={() => signIn(email, password)}>
-          Sign In
-        </button>
-      </div>
+        <input type="submit" className={styles["sign-in-button"]} value="Sign In" />
+      </form>
     </div>
   );
 };

yarn.lock

@@ -3097,6 +3097,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hook-form@^7.51.2:
+  version "7.51.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.2.tgz#79f7f72ee217c5114ff831012d1a7ec344096e7f"
+  integrity sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"