Merge pull request #1221 from Maana-Ajmera/feat/login-successful

Added popup for signin successful
Suchitra-Sahoo · Jul 23, 2024 · c0eb9d9 · c0eb9d9
2 parents 95eb45f + bc6593a
commit c0eb9d9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/login/login.css b/login/login.css
@@ -385,4 +385,19 @@ body::before {
   .footer{
     bottom: -95%;
   }
+}
+.success-banner {
+  position: absolute;
+  bottom: 25px;
+  width: 60%;
+  left: 20%;
+  border-radius: 4px;
+  border: 2px solid #14810a;
+  text-align: center;
+  z-index: 1000;
+  font-size:1rem;
+}
+#banner-text{
+  color:#0b8835;
+  margin: 4px;
 }
diff --git a/login/login.html b/login/login.html
@@ -61,7 +61,7 @@
         >
       </nav>
     </header>
-
+    
     <div class="container" id="container">
       <div class="form-container sign-up" id="signup-form">
         <form>
@@ -168,6 +168,11 @@ <h1>Sign In</h1>
           >
           <button>Sign In</button>
         </form>
+        <div class="outer-banner">
+        <div id="success-banner" class="success-banner" style="display: none;">
+          <p id="banner-text"></p>
+        </div>
+      </div>
       </div>
 
       <!-- Forget Password Form-->

diff --git a/login/login.js b/login/login.js
@@ -40,6 +40,16 @@ loginBtn.addEventListener("click", () => {
   forgotPasswordForm.style.display = 'none';
 });
 
+
+function showSuccessBanner(message) {
+  const banner = document.getElementById('success-banner');
+  const bannerText = document.getElementById('banner-text');
+  bannerText.textContent = message;
+  banner.style.display = 'block';
+  setTimeout(() => {
+    banner.style.display = 'none';
+  }, 3000);
+}
 function validatePasswords() {
   if (passwordInput.value !== confirmPasswordInput.value) {
     passwordMatchError.style.display = 'block';
@@ -49,9 +59,16 @@ function validatePasswords() {
     signUpBtn.disabled = false;
   }
 }
+document.querySelector('.sign-up form').addEventListener('submit', (e) => {
+  e.preventDefault();
+  showSuccessBanner('Signed up successfully');
+});
+// Handle sign-in form submission
+document.querySelector('.sign-in form').addEventListener('submit', (e) => {
+  e.preventDefault();
+  showSuccessBanner('Signed in successfully');
+});
 
-passwordInput.addEventListener('input', validatePasswords);
-confirmPasswordInput.addEventListener('input', validatePasswords);
 
 forgotPasswordLink.addEventListener('click', () => {
 forgotPasswordForm.style.display = 'block';