partly implemented login remember me

src/component/auth/Login2.jsx

@@ -19,15 +19,15 @@ export default function Login() {
   const navigate = useNavigate()
 
   const [fields, setFields] = useState({
-    username: '',
+    username: localStorage.getItem('username') || '',
     password: '',
-    // remember: false
+    remember: localStorage.getItem('username') ? true : false
   })
 
   const handleChange = ({target:{name, value}}) => {
-    // if(name == 'remember'){
-    //     return setFields(prev => ({...prev, remember:!prev.remember}))
-    // }
+    if(name == 'remember'){
+        return setFields(prev => ({...prev, remember:!prev.remember}))
+    }
       setFields(prev => ({...prev, [name]:value}))
   }
 
@@ -36,6 +36,7 @@ export default function Login() {
         if(!fields.username || !fields.password){
             throw new Error('Please provide all fields marked *')
         }
+        rememberMe(fields.remember) // FUNCTION TO SAVE USERNAME OF THE USER TO LOCAL STORAGE
         return loginUser(fields)
     },
     onError: (error) => {
@@ -52,6 +53,14 @@ export default function Login() {
     }
   })
 
+  const rememberMe = (checked) => {
+    if(checked){
+        localStorage.setItem('username', fields.username)
+    }else{
+        localStorage.removeItem('username')
+    }
+  }
+
   return (
     <div className="app">
         <div className="app-wrap">
@@ -81,7 +90,7 @@ export default function Login() {
                                                 <div className="col-12">
                                                     <div className="d-block d-sm-flex  align-items-center">
                                                         <div className="form-check">
-                                                            <input className="form-check-input" type="checkbox" id="gridCheck" />
+                                                            <input className="form-check-input" type="checkbox" id="gridCheck" name='remember' checked={fields.remember} onChange={handleChange} disabled={!fields.username ? true : false} />
                                                             <label className="form-check-label text-black" htmlFor="gridCheck">
                                                                 Remember Me
                                                             </label>