Merge pull request #364 from shriyadindi/remember-me

Remember me" added to the signup and signin page connecting it to the local storage database for user authentication. #364
Bitbox-Connect · Nov 5, 2024 · 7550852 · 7550852
2 parents b371164 + bec6ca3
commit 7550852
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 1 deletion.
diff --git a/client/src/component/Login.jsx b/client/src/component/Login.jsx
@@ -75,6 +75,20 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
       }
     }
   };
+  document.querySelector('#login-btn').addEventListener('click', (event) => {
+    event.preventDefault();
+
+    const emailInput = document.getElementById('login-email');
+    const rememberMeCheckbox = document.getElementById('login-remember');
+
+    if (rememberMeCheckbox.checked) {
+      localStorage.setItem('rememberedEmail', emailInput.value);
+    } else {
+      localStorage.removeItem('rememberedEmail');
+    }
+
+    // Continue with your existing login logic...
+  });    
 
   return (
     <div className="min-h-screen flex items-center justify-center mt-10" data-aos="zoom-in" data-aos-duration="1800">
@@ -139,7 +153,10 @@ const Login = ({ mode, showAlert, isloggedin, setloggedin }) => {
 
             />
           </div>
-
+          <div class="form-check d-flex">
+          <input type="checkbox" class="form-check-input" id="login-remember" />
+          <label class="form-check-label" for="login-remember">Remember me</label>
+          </div>
           <button className="submit" type="submit" disabled={loading}>
             {loading ? <Spin size="small" /> : "Login"}
           </button>

diff --git a/client/src/component/Signup.jsx b/client/src/component/Signup.jsx
@@ -76,6 +76,20 @@ const Signup = ({ mode }) => {
       },
       body: JSON.stringify({ name, email, password }),
     });
+    document.querySelector('#login-btn').addEventListener('click', (event) => {
+      event.preventDefault();
+
+      const emailInput = document.getElementById('login-email');
+      const rememberMeCheckbox = document.getElementById('login-remember');
+
+      if (rememberMeCheckbox.checked) {
+        localStorage.setItem('rememberedEmail', emailInput.value);
+      } else {
+        localStorage.removeItem('rememberedEmail');
+      }
+
+      // Continue with your existing login logic...
+    });    
     const json = await response.json();
 
     if (json.success) {
@@ -238,6 +252,10 @@ const Signup = ({ mode }) => {
             </div>
 
             <br />
+            <div class="form-check d-flex">
+          <input type="checkbox" class="form-check-input" id="login-remember" />
+          <label class="form-check-label" for="login-remember">Remember me</label>
+            </div>
 
             <button type="submit" className="signup-submit">
               Sign Up

diff --git a/client/src/css/Login.css b/client/src/css/Login.css
@@ -27,6 +27,14 @@ body {
   text-align: center;
   background-color: var(--form-bg, #fff);
 }
+.form-check {
+  align-items: center; /* Aligns checkbox and label vertically */
+}
+
+.form-check-input {
+  margin-right: 10px; /* Space between checkbox and label */
+}
+
 
 .title {
   font-size: 3rem;

diff --git a/client/src/css/Signup.css b/client/src/css/Signup.css
@@ -84,6 +84,14 @@
 .signup-link:hover {
     color: #6366F1;
 }
+.form-check {
+    align-items: center; /* Aligns checkbox and label vertically */
+  }
+
+  .form-check-input {
+    margin-right: 10px; /* Space between checkbox and label */
+  }
+
 
 @media (max-width: 600px) {
     .signup-wrapper {