Store user data in localStorage (optionally)

2 files changed, 26 insertions, 5 deletions

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index f2c44ef..af90a56 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Window from "../../components/Window/Window";
 
 import {
+  Button,
   makeStyles,
 } from "@material-ui/core";
 import Registration from "./Registration/Registration";
@@ -18,13 +19,21 @@ const useStyles = makeStyles(theme => ({
 const Profile = ({ user, setUser }) => {
   const classes = useStyles();
 
+  const handleLogout = () => {
+    setUser({ username: 'anonymous', id: null });
+    localStorage.clear();
+  };
+
   return (
     <>
       <Window type="primary">
         <div className={classes.primary}>
           { user.id? (
             <ContentSection sectionName={`Welcome back, ${user.username}`}>
-
+              <p> You can always log out from your account! </p>
+              <Button variant="contained" color="secondary" onClick={handleLogout}>
+                Logout
+              </Button>
             </ContentSection>
           ): (
             <Registration setUser={setUser} />
diff --git a/src/pages/Profile/Registration/Registration.js b/src/pages/Profile/Registration/Registration.js
index 8853a7a..ce8384f 100644
--- a/src/pages/Profile/Registration/Registration.js
+++ b/src/pages/Profile/Registration/Registration.js
@@ -15,19 +15,32 @@ import {get, post} from "../../../requests";
 const Registration = ({ setUser }) => {
 
   const [username, setUsername] = useState('');
+  const [isRememberMe, setIsRememberMe] = useState(false);
 
   const handleChange = (event) => {
     setUsername(event.target.value);
   };
 
+  const handleCheck = (event) => {
+    setIsRememberMe(event.target.checked);
+  };
+
   const handleSubmit = () => {
     post('users/', { username })
       .then(response => {
-        setUser(response.data);
+        const user = response.data;
+        setUser(user);
+        if (isRememberMe) {
+          localStorage.setItem('userId', user.id);
+        }
       })
       .catch(err => {
         get('users/').then(response => {
-          setUser(response.data.filter(user => user.username === username)[0]);
+          const user = response.data.filter(user => user.username === username)[0];
+          setUser(user);
+          if (isRememberMe) {
+            localStorage.setItem('userId', user.id);
+          }
         });
       });
   };
@@ -47,7 +60,7 @@ const Registration = ({ setUser }) => {
         </Grid>
         <Grid item>
           <FormControlLabel
-            control={<Checkbox color="secondary" />}
+            control={<Checkbox color="secondary" onChange={handleCheck} />}
             label="Remember me"
           />
         </Grid>
@@ -57,7 +70,6 @@ const Registration = ({ setUser }) => {
           </Button>
         </Grid>
       </Grid>
-
     </ContentSection>
   );
 };