Login Successful with Wrong Email (#271)

<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
Fixed a bug where the login was successful even with an incorrect email
format. Added a validation to ensure that the email follows a valid
format before checking the password.


## Related Issues

<!--Cite any related issue(s) this pull request addresses. If none,
simply state “None”-->
- Closes ##201

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [X] (Bug Fix)

## Screenshots / videos (if applicable)
<!--Attach any relevant screenshots or videos demonstrating the
changes-->


https://github.com/user-attachments/assets/278e0a45-86ff-437f-b72c-a21032c52e43



## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with project `main` branch
before making this PR
- [X] I have performed a self-review of my code
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
<!--Include any additional information or context that might be helpful
for reviewers.-->
The added validation ensures that incorrect email formats will no longer
allow users to proceed with the login.

Html-files/login.html

@@ -127,20 +127,21 @@
         </div>
       </div>
     </div>
-  <form action="">
+  <form id="loginForm" action="logged.html">
     <div class="right-login">
       <div class="card-login">
         <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</h1>
         <div class="textfield">
           <label for="usuario" style="color: black;font-family:var(--ff-poppins);">Email / User Name</label>
-          <input required type="text" name="email" placeholder="Enter Email / UserName" style="font-family:var(--ff-poppins);">
+          <input required type="text" id="email" name="email" placeholder="Enter Email / UserName" style="font-family:var(--ff-poppins);">
         </div>
         <div class="textfield">
           <label required for="password" style="color: black;font-family:var(--ff-poppins);">Password</label>
-          <input required type="password" name="password" placeholder="Enter Password" style="font-family:var(--ff-poppins);">
+          <input required type="password" id="password" name="password" placeholder="Enter Password" style="font-family:var(--ff-poppins);">
         </div>
-        <button class="btn-login" style="color: black;font-family:var(--ff-poppins);"><a style="text-decoration: none;color: black;" href="logged.html">Login</a></button>
+        <button type="submit" class="btn-login" style="color: black;font-family:var(--ff-poppins);">Login</button>
         <button id="google-login" style="color: black;font-family:var(--ff-poppins);">Login with google</button>
+        <p id="error-message" style="color: red; font-family: var(--ff-poppins);"></p>
       </div>
     </div>
 </form>
@@ -210,6 +211,38 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
     }
 
     animateCircles();
+
+// Form submission event listener
+document.getElementById('loginForm').addEventListener('submit', function(event) {
+    // Prevent form submission
+    event.preventDefault();
+
+    // Get the input values
+    const emailInput = document.getElementById('email').value;
+    const passwordInput = document.getElementById('password').value;
+
+    // Regular expression for email validation (simple check)
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    // Password validation (at least 8 characters)
+    const isValidPassword = passwordInput.length >= 8;
+
+    // Clear previous error message
+    document.getElementById('error-message').textContent = '';
+
+    // Validate the email and password separately
+    if (!emailPattern.test(emailInput)) {
+        // Display an error message if the email format is incorrect
+        document.getElementById('error-message').textContent = 'Invalid email format.';
+    } else if (!isValidPassword) {
+        // Display an error message if the password is too short
+        document.getElementById('error-message').textContent = 'Password must be at least 8 characters.';
+    } else {
+        // If both are valid, redirect to logged.html
+        window.location.assign('logged.html');
+    }
+});
+
   </script>
 </body>
 </html>