From 8580f10b0ad00847cd9d8df73782f0dca53acfdd Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Thu, 24 Dec 2020 16:13:10 +0200
Subject: [PATCH 1/2] logout

---
 src/components/layout/Main.js                   |  3 ++-
 src/features/login/components/LoginContainer.js |  3 ++-
 src/hooks/useAuthorizationToken.js              | 13 +++++++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/Main.js b/src/components/layout/Main.js
index ccc8094..841ffa3 100644
--- a/src/components/layout/Main.js
+++ b/src/components/layout/Main.js
@@ -26,7 +26,8 @@ const useStyles = makeStyles(() => ({
     minHeight: "100vh",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "center"
+    justifyContent: "center",
+    alignItems: "center"
   }
 }));
 
diff --git a/src/features/login/components/LoginContainer.js b/src/features/login/components/LoginContainer.js
index b589cb2..4060c57 100644
--- a/src/features/login/components/LoginContainer.js
+++ b/src/features/login/components/LoginContainer.js
@@ -14,7 +14,7 @@ const LoginContainer = () => {
   const dispatchActions = useContext(ApplicationDispatchContext);
   const { error } = useToast();
   const { t } = useTranslation();
-  const { tokenIsValid } = useAuthorizationToken();
+  const { tokenIsValid, invalidateToken } = useAuthorizationToken();
 
   const handleChange = prop => event => {
     dispatchActions.onCredentialsChange(prop, event.target.value);
@@ -37,6 +37,7 @@ const LoginContainer = () => {
 
   const handleLogout = () => {
     invalidate();
+    invalidateToken();
   };
 
   return (
diff --git a/src/hooks/useAuthorizationToken.js b/src/hooks/useAuthorizationToken.js
index 25da53a..a77df79 100644
--- a/src/hooks/useAuthorizationToken.js
+++ b/src/hooks/useAuthorizationToken.js
@@ -1,8 +1,12 @@
 import { useContext } from "react";
-import { ApplicationStateContext } from "../state/ApplicationContexts";
+import {
+  ApplicationStateContext,
+  ApplicationDispatchContext
+} from "../state/ApplicationContexts";
 
 export const useAuthorizationToken = () => {
   const state = useContext(ApplicationStateContext);
+  const dispatchActions = useContext(ApplicationDispatchContext);
 
   const getToken = () => state.security.authorization.token;
   const validateToken = () => {
@@ -16,5 +20,10 @@ export const useAuthorizationToken = () => {
   };
 
   const tokenIsValid = validateToken();
-  return { getToken, validateToken, tokenIsValid };
+
+  const invalidateToken = () => {
+    dispatchActions.onAuthorizationTokenChange(null);
+  };
+
+  return { getToken, validateToken, tokenIsValid, invalidateToken };
 };

From 86008a470ac5c40c2fc6cd7ad144e86066091521 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Thu, 24 Dec 2020 16:48:22 +0200
Subject: [PATCH 2/2] login style fix

---
 src/features/login/components/LoggedInComponent.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/features/login/components/LoggedInComponent.js b/src/features/login/components/LoggedInComponent.js
index bfb51f4..e73937b 100644
--- a/src/features/login/components/LoggedInComponent.js
+++ b/src/features/login/components/LoggedInComponent.js
@@ -11,7 +11,7 @@ import LoginComponent from "./LoginComponent";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(theme => ({
-  root: {
+  card: {
     minWidth: 350
   },
   onRight: {
@@ -19,6 +19,9 @@ const useStyles = makeStyles(theme => ({
   },
   avatar: {
     backgroundColor: theme.palette.primary.main
+  },
+  collapseContent: {
+    padding: 0
   }
 }));
 
@@ -32,7 +35,7 @@ const LoggedInComponent = ({ credentials, onChange, onLogin, onLogout }) => {
   };
 
   return (
-    <Card className={classes.root}>
+    <Card className={classes.card}>
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>
@@ -63,7 +66,10 @@ const LoggedInComponent = ({ credentials, onChange, onLogin, onLogout }) => {
       </CardActions>
       <Divider />
       <Collapse in={expanded} timeout="auto" unmountOnExit>
-        <CardContent>
+        <CardContent
+          className={classes.collapseContent}
+          style={{ paddingBottom: "5px" }}
+        >
           <LoginComponent
             credentials={credentials}
             onChange={onChange}