feat: add remember me option to login page (Issue #276)

client/src/components/Login/Login.jsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useContext, useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { Link } from "react-router-dom";
@@ -15,11 +15,23 @@ const Login = () => {
     register,
     handleSubmit,
     formState: { errors },
+    setValue,
   } = useForm();
 
   const { setUser } = useContext(UserContext);
   const [passToggle, setPassToggle] = useState("password");
   const [loading, setLoading] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+
+  useEffect(() => {
+    const savedEmail = localStorage.getItem("rememberedEmail");
+    const savedPassword = localStorage.getItem("rememberedPassword");
+    if (savedEmail && savedPassword) {
+      setValue("email", savedEmail);
+      setValue("password", savedPassword);
+      setRememberMe(true);
+    }
+  }, [setValue]);
 
   const navigate = useNavigate();
 
@@ -39,6 +51,13 @@ const Login = () => {
         data
       );
       if (res.data.message === "login success") {
+        if (rememberMe) {
+          localStorage.setItem("rememberedEmail", data.email);
+          localStorage.setItem("rememberedPassword", data.password);
+        } else {
+          localStorage.removeItem("rememberedEmail");
+          localStorage.removeItem("rememberedPassword");
+        }
         localStorage.setItem("token", res.data.token);
         setUser(res.data.user);
         toast.success("Logged in successfully!", {
@@ -238,6 +257,22 @@ const Login = () => {
                 </div>
               </div>
 
+              <div className="flex items-center justify-between">
+                <div className="flex items-center">
+                  <input
+                    id="remember-me"
+                    name="remember-me"
+                    type="checkbox"
+                    className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer"
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                  />
+                  <label htmlFor="remember-me" className="ml-3 block text-sm leading-6 text-gray-900 cursor-pointer">
+                    Remember me
+                  </label>
+                </div>
+              </div>
+
               <div>
                 <button
                   type="submit"