feat: remember login

ChristopheRibault · Nov 15, 2021 · 7814e34 · 7814e34
1 parent 427a430
commit 7814e34
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 18 deletions.
diff --git a/front/src/pages/login.jsx b/front/src/pages/login.jsx
@@ -2,42 +2,55 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import { useForm } from '../utils/hooks';
 import { logUserIn } from '../features/login';
+import { forgetRememberedLogIn, rememberLogIn } from '../utils/rememberLogIn';
 
 function Login() {
 
   const dispatch = useDispatch();
   const { values, handleChange, handleSubmit } = useForm(async (values) => {
+    if (values.remember) {
+      rememberLogIn(values);
+    } else {
+      forgetRememberedLogIn();
+    }
+
     dispatch(logUserIn(values));
   });
 
   const login = useSelector(state => state.login);
 
   if (login?.data?.token) {
-    return <Redirect to="/profile" />;
+    return <Redirect to='/profile' />;
   }
 
   return (
-    <main className="main bg-dark">
-      <section className="sign-in-content">
-        <i className="fa fa-user-circle sign-in-icon"></i>
+    <main className='main bg-dark'>
+      <section className='sign-in-content'>
+        <i className='fa fa-user-circle sign-in-icon'></i>
         <h1>Sign In</h1>
         <form onSubmit={handleSubmit}>
-          <div className="input-wrapper">
-            <label htmlFor="username">Username</label>
-            <input type="text" id="username" name="email" value={values.email || ''} onChange={handleChange} />
+          <div className='input-wrapper'>
+            <label htmlFor='username'>Username</label>
+            <input type='text' id='username' name='email' value={values.email || ''} onChange={handleChange} />
           </div>
-          <div className="input-wrapper">
-            <label htmlFor="password">Password</label>
-            <input type="password" id="password" name="password" value={values.password || ''} onChange={handleChange}/>
+          <div className='input-wrapper'>
+            <label htmlFor='password'>Password</label>
+            <input type='password' id='password' name='password' value={values.password || ''} onChange={handleChange}/>
             {login?.error &&
-              <div className="error-message">Error: Unknown user or wrong password</div>
+              <div className='error-message'>Error: Unknown user or wrong password</div>
             }
           </div>
-          <div className="input-remember">
-            <input type="checkbox" id="remember-me" />
-            <label htmlFor="remember-me">Remember me</label>
+          <div className='input-remember'>
+            <input
+              type='checkbox'
+              id='remember-me'
+              name='remember'
+              checked={values.remember || false}
+              onChange={handleChange}
+            />
+            <label htmlFor='remember-me'>Remember me</label>
           </div>
-          <button type='submit' className="sign-in-button">Sign In</button>
+          <button type='submit' className='sign-in-button'>Sign In</button>
         </form>
       </section>
     </main>

diff --git a/front/src/utils/axios.js b/front/src/utils/axios.js
@@ -33,7 +33,7 @@ export const fetchReducers = {
   rejected: (draft, action) => {
     if (draft.status === 'pending' || draft.status === 'updating') {
       draft.status = 'rejected';
-      draft.error = action.payload;
+      draft.error = JSON.stringify(action.payload);
       draft.data = null;
       return;
     }

diff --git a/front/src/utils/hooks/useForm.js b/front/src/utils/hooks/useForm.js
@@ -1,13 +1,21 @@
 import { useState } from 'react';
+import { getRememberedLogIn } from '../rememberLogIn';
 
 const useForm = callback => {
-  const [ values, setValues ] = useState({});
+
+  const initialState = getRememberedLogIn() ?? {};
+
+  const [ values, setValues ] = useState(initialState);
   return {
     values,
     handleChange: e => {
+      const { target } = e;
       setValues({
         ...values,
-        [e.target.name]: e.target.value,
+        [target.name]: 
+          target.type === 'checkbox' ?
+            target.checked :
+            target.value,
       });
     },
     handleSubmit: e => {

diff --git a/front/src/utils/rememberLogIn.js b/front/src/utils/rememberLogIn.js
@@ -0,0 +1,17 @@
+const rememberLogIn = function(data) {
+  localStorage.setItem('login-data', JSON.stringify(data));
+};
+
+const getRememberedLogIn = function() {
+  return JSON.parse(localStorage.getItem('login-data'));
+};
+
+const forgetRememberedLogIn = function() {
+  localStorage.removeItem('login-data');
+};
+
+export {
+  rememberLogIn,
+  getRememberedLogIn,
+  forgetRememberedLogIn,
+};