Merge pull request #975 from MuraliDharan7/add-forgetpass-section

Added Forget Password section
khushi-joshi-05 · Jun 21, 2024 · 5747718 · 5747718
2 parents 7b0da3e + 3acc369
commit 5747718
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 0 deletions.
diff --git a/Css-files/login1.css b/Css-files/login1.css
@@ -229,4 +229,20 @@ body * {
     width: 90%;
   }
 }
+.forgot-password {
+  text-align: right;
+  margin-bottom: 15px;
+}
+
+.forgot-password a {
+  color: #3bb77e;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.forgot-password a:hover {
+  text-decoration: underline;
+}
+
 
diff --git a/Html-files/forget_pass.html b/Html-files/forget_pass.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="../Css-files/login1.css">
+  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+  <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" />
+  <title>Forgot Password</title>
+</head>
+
+<body>
+  <div class="main-login">
+    <div class="left-login" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
+      <h1>Reset Your Password<br>Enter your email to reset your password</h1>
+      <img src="../Images/food.jpg" class="left-login-image" alt="food">
+    </div>
+    <div class="right-login">
+      <div class="card-login" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
+        <button class="close-btn">&times;</button>
+        <h1>Forgot Password</h1>
+        <br>
+        <div class="textfield">
+          <label for="email">Email</label>
+          <input type="email" name="email" id="email" placeholder="Enter your email">
+        </div>
+        <button class="btn-login" onclick="resetPassword()">Submit</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+  <script>
+    AOS.init({
+      duration: 1000,
+      easing: 'ease',
+      once: false,
+    });
+  </script>
+
+  <script>
+    function resetPassword() {
+      const email = document.getElementById("email").value;
+
+      if (email === "") {
+        alert("Please enter your email");
+      } else {
+        // Add password reset logic here
+        alert("Password reset instructions have been sent to your email!");
+      }
+    }
+
+    const closeBtn = document.querySelector('.close-btn');
+    closeBtn.addEventListener('click', function () {
+      window.location.href = 'login.html'; // Change this to the actual login page URL
+    });
+  </script>
+</body>
+
+</html>
diff --git a/Html-files/login.html b/Html-files/login.html
@@ -41,6 +41,9 @@ <h1>LOGIN</h1>
             <i class='icon bx bxs-hide' style="font-size: 27px;"></i>
           </span>
         </div>
+        <div class="forgot-password">
+          <a href="/Html-files/forget_pass.html">Forgot Password?</a>
+        </div>
         <button class="btn-login" onclick="validateLogin()">Login</button>
         <h3>
           <center>OR</center>
@@ -95,6 +98,40 @@ <h3>
       alert("Form submitted successfully!");
     }
   }
+  document.querySelector('.forgot-password a').addEventListener('click', function(event) {
+  event.preventDefault();
+  // Implement the functionality here, e.g., open a modal or redirect to a password recovery page
+  alert("Redirecting to password recovery page...");
+  window.location.href = 'forget_pass.html'; // Change this to the actual URL
+});
+
 </script>
+     // Google Sign-In
+     document.getElementById('google-login').addEventListener('click', () => {
+      const provider = new firebase.auth.GoogleAuthProvider();
+      auth.signInWithPopup(provider)
+        .then((result) => {
+          const user = result.user;
 
+          // Save user info to Realtime Database if new user
+          if (result.additionalUserInfo.isNewUser) {
+            return database.ref('users/' + user.uid).set({
+              name: user.displayName,
+              email: user.email,
+              username: user.email.split('@')[0]
+            });
+          }
+        })
+        .then(() => {
+          alert('Logged in with Google!');
+          window.location.href = '../index.html'; // Redirect to homepage or dashboard
+        })
+        .catch((error) => {
+          console.error('Error logging in with Google:', error);
+          alert(error.message);
+        });
+    });
+  </script>
+</body>
 </html>
+</script>