Refactor : fetch items

Author: MDJAmin

index.html

@@ -22,7 +22,7 @@ <h2 class="form__title">Sign Up</h2>
         <div class="container__form container--signin">
             <form action="#" class="form" id="form2">
                 <h2 class="form__title">Sign In</h2>
-                <input type="email" placeholder="Email" class="input" />
+                <input type="text" placeholder="Email" class="input" />
                 <input type="password" placeholder="Password" class="input" />
                 <a href="#" class="link">Forgot your password?</a>
                 <button class="btn">Sign In</button>

js/script.js

@@ -4,14 +4,40 @@ const fistForm = document.querySelector("#form1");
 const secondForm = document.querySelector("#form2");
 const container = document.querySelector(".container");
 
-
 signInBtn.addEventListener("click", () => {
-	container.classList.remove("right-panel-active");
+  container.classList.remove("right-panel-active");
 });
 
 signUpBtn.addEventListener("click", () => {
-	container.classList.add("right-panel-active");
+  container.classList.add("right-panel-active");
 });
 
 fistForm.addEventListener("submit", (e) => e.preventDefault());
-secondForm.addEventListener("submit", (e) => e.preventDefault());
+secondForm.addEventListener("submit", (e) => handleLogin(e));
+
+async function handleLogin(e) {
+  e.preventDefault();
+
+  const email = secondForm.querySelector("input[type='text']").value;
+  const password = secondForm.querySelector("input[type='password']").value;
+
+  try {
+    const response = await fetch("https://fakestoreapi.com/auth/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email, password }),
+    });
+    if (!response.ok) {
+      throw new Error("Login failed! Please check your credentials.");
+    }
+    const data = await response.json();
+    localStorage.setItem("token", data.token);
+    alert("Login successful!");
+
+  } catch (error) {
+    console.error(error);
+    alert(error.message);
+  }
+}