Update login.html

added success message on login
Anjaliavv51 · Oct 27, 2024 · 189876d · 189876d
1 parent fd9d0e9
commit 189876d
Showing 1 changed file with 43 additions and 31 deletions.
diff --git a/Html-files/login.html b/Html-files/login.html
@@ -387,36 +387,7 @@ <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');
-      }
-    });
+
 
     // Toggle password visibility
     function togglePasswordVisibility() {
@@ -433,6 +404,47 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
       }
     }
   </script>
+  <!-- Add this element to display success messages -->
+<div id="success-message" style="color: green;"></div>
+
+<script>
+  // 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 = '';
+    document.getElementById('success-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, display success message
+      document.getElementById('success-message').textContent = 'Login successful!';
+      // Optionally, redirect after a delay
+      setTimeout(() => {
+        window.location.assign('logged.html');
+      }, 2000); // Redirect after 2 seconds
+    }
+  });
+
+</script>
   <script>
     window.embeddedChatbotConfig = {
       chatbotId: "dGlQ5bP-F7GodLWzgrVAx",
@@ -451,4 +463,4 @@ <h1 style="color: hsl(203, 30%,26%);font-family: var(--ff-philosopher);">LOGIN</
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 </body>
-</html>
+</html>