remember me

Feedback.html

@@ -666,7 +666,6 @@ <h3>Connect with us!</h3>
 
 
 <script>
-  // Dark mode functionality
   document.addEventListener('DOMContentLoaded', function () {
     const toggleButton = document.getElementById('dark-mode-toggle');
     const darkModeButton = document.querySelector('.dark-mode-toggle');

login.html

@@ -56,16 +56,21 @@
           <h2 class="title">Sign in</h2>
           <div class="input-field">
             <i class="fas fa-user"></i>
-            <input type="text" placeholder="Username" />
+            <input type="text" id="username" placeholder="Username" />
           </div>
           <div class="input-field">
             <i class="fas fa-lock" id="toggle-password"></i>
             <input type="password" placeholder="Password" id="password-input" />
           </div>
+          <div class="form-check d-flex">
+            <input type="checkbox" class="form-check-input" id="remember-me" />
+            <label class="form-check-label">Remember me</label>
+          </div>
+
           <input type="submit" value="Login" class="btn solid" />
           <p class="social-text">Or Sign in with social platforms</p>
           <div class="social-media">
-            <div class="social-icon g-signin2" id="google_btn" >
+            <div class="social-icon g-signin2" id="google_btn">
               <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i>
             </div>
             <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
@@ -105,11 +110,14 @@ <h2 class="title">Sign up</h2>
             <div class="strength-label" id="strength-label-signup" style="font-size: 14px; margin-top: 10px;">Weak</div>
           </div>
           <!-- Password strength meter ends here -->
-
+          <div class="form-check d-flex">
+            <input type="checkbox" class="form-check-input" id="login-remember" />
+            <label class="form-check-label">Remember me</label>
+          </div>
           <input type="submit" class="btn" value="Sign up" />
           <p class="social-text">Or Sign up with social platforms</p>
           <div class="social-media">
-            <div class="social-icon g-signin2" id="google_btn" >
+            <div class="social-icon g-signin2" id="google_btn">
               <i class="fab fa-google" style="font-size: 24px; color: #4285F4;"></i>
             </div>
             <a href="https://facebook.com/YourPage" target="_blank" class="social-icon">
@@ -248,34 +256,34 @@ <h3>One of us ?</h3>
       */
     });
 
-
 
-      // Uncomment the below code when MongoDB is ready
-      /*
-      try {
-        const response = await fetch("http://localhost:3000/signup", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: data,
-        });
-
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.message || "Signup failed");
-        }
 
-        const result = await response.json();
-        console.log("Server response:", result);
+    // Uncomment the below code when MongoDB is ready
+    /*
+    try {
+      const response = await fetch("http://localhost:3000/signup", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: data,
+      });
 
-        alert("Signup successful!");
-        window.location.href = "login.html";
-      } catch (error) {
-        alert(error.message);
-        console.error("Error during signup:", error);
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Signup failed");
       }
-      */
+
+      const result = await response.json();
+      console.log("Server response:", result);
+
+      alert("Signup successful!");
+      window.location.href = "login.html";
+    } catch (error) {
+      alert(error.message);
+      console.error("Error during signup:", error);
+    }
+    */
 
     // Toggle password visibility
     function togglePassword(fieldId, icon) {
@@ -396,6 +404,31 @@ <h3>One of us ?</h3>
 
     animateCircles();
   </script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const rememberMeCheckbox = document.getElementById("remember-me");
+      const usernameInput = document.getElementById("username");
+
+      // Load saved username if it exists
+      if (localStorage.getItem("rememberedUsername")) {
+        usernameInput.value = localStorage.getItem("rememberedUsername");
+        rememberMeCheckbox.checked = true;
+      }
+
+      // When the form is submitted, save the username if "Remember Me" is checked
+      document.querySelector(".sign-in-form").addEventListener("submit", function (e) {
+        e.preventDefault(); // Prevent default form submission
+
+        if (rememberMeCheckbox.checked) {
+          localStorage.setItem("rememberedUsername", usernameInput.value);
+        } else {
+          localStorage.removeItem("rememberedUsername");
+        }
+        // Add form submission logic here
+      });
+    });
+
+  </script>
   <script src="https://apis.google.com/js/platform.js" async defer></script>
   <!-- <script src="Firebase.js" type="module"></script> -->
 </body>

login.js

@@ -90,4 +90,4 @@ function displayStrengthMessage(strength) {
 }
 
 // Call the checkPasswordStrength function on password input
-passwordField.addEventListener("input", checkPasswordStrength);
+passwordField.addEventListener("input", checkPasswordStrength);