Merge pull request #905 from nishant0708/Added-alerts

Bug: No Popup Or Alert When User Tries to login without Filling complete data #691

Html-files/login.html

@@ -11,7 +11,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   <title>Login</title>
 </head>
 
@@ -28,11 +28,11 @@ <h1>LOGIN</h1>
         <br>
         <div class="textfield">
           <label for="usuario">Email</label>
-          <input type="text" name="email" placeholder="Enter Email">
+          <input type="email" name="email" id="email" placeholder="Enter Email">
         </div>
         <div class="textfield">
           <label for="usuario">Username</label>
-          <input type="text" name="Username" placeholder="Username">
+          <input type="text" name="Username" id="username" placeholder="Username">
         </div>
         <div class="textfield">
           <label for="password">Password</label>
@@ -41,23 +41,25 @@ <h1>LOGIN</h1>
             <i class='icon bx bxs-hide' style="font-size: 27px;"></i>
           </span>
         </div>
-        <button class="btn-login">Login</button>
-        <h3><center>OR</center></h3>
+        <button class="btn-login" onclick="validateLogin()">Login</button>
+        <h3>
+          <center>OR</center>
+        </h3>
         <button id="google-login">Login with google</button>
       </div>
     </div>
   </div>
+
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
   <script>
-    AOS.init(
-      {
-        duration: 1000, 
-        easing: 'ease', 
-        once: false, 
-      }
-    );
+    AOS.init({
+      duration: 1000,
+      easing: 'ease',
+      once: false,
+    });
   </script>
 </body>
+
 <script>
   const passwordinput = document.getElementById("password");
   const hidelogo = document.getElementById("login-hide");
@@ -66,19 +68,33 @@ <h3><center>OR</center></h3>
     if (passwordinput.getAttribute("type") == "text") {
       passwordinput.setAttribute("type", "password");
       passwordfield.classList.replace("bxs-show", "bxs-hide");
-    }
-    else {
+    } else {
       passwordinput.setAttribute("type", "text");
       passwordfield.classList.replace("bxs-hide", "bxs-show");
-
     }
-  })
+  });
 
   const closeBtn = document.querySelector('.close-btn');
-    closeBtn.addEventListener('click', function () {
-      // document.querySelector('.card-login').style.display = 'none';
-      window.location.href='../index.html';
-    });
+  closeBtn.addEventListener('click', function () {
+    window.location.href = '../index.html';
+  });
+
+  function validateLogin() {
+    const email = document.getElementById("email").value;
+    const username = document.getElementById("username").value;
+    const password = document.getElementById("password").value;
+
+    if (email === "") {
+      alert("Please Enter Email");
+    } else if (username === "") {
+      alert("Please Enter Username");
+    } else if (password === "") {
+      alert("Please Enter Password");
+    } else {
+      // add login logic
+      alert("Form submitted successfully!");
+    }
+  }
 </script>
 
-</html>
+</html>