Add proper logout, add rebuilding user from local storage

Feature #13563

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>:

diff --git a/src/index.tsx b/src/index.tsx
index ae5395f5de9a2b1d1e832d796229330bba2d010b..c1785c8b155d8629adf9b20dfc471f203aef959e 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,6 +13,7 @@ import createBrowserHistory from "history/createBrowserHistory";
 import configureStore from "./store/store";
 import { ConnectedRouter } from "react-router-redux";
 import ApiToken from "./components/api-token/api-token";
+import authActions from "./store/auth-action";
 
 const history = createBrowserHistory();
 const store = configureStore({
@@ -29,6 +30,8 @@ const store = configureStore({
     }
 }, history);
 
+store.dispatch(authActions.INIT());
+
 const App = () =>
     <Provider store={store}>
         <ConnectedRouter history={history}>

diff --git a/src/services/auth-service/auth-service.ts b/src/services/auth-service/auth-service.ts
index cedf3c6215222d1db0f82d1209e1d0f239d22a73..5a08d3b50961fa0b1f2b73b63f7a0da13e9a2e06 100644 (file)
--- a/src/services/auth-service/auth-service.ts
+++ b/src/services/auth-service/auth-service.ts
@@ -4,8 +4,12 @@
 
 import Axios from "axios";
 import { API_HOST } from "../../common/server-api";
+import { User } from "../../models/user";
 
-const API_TOKEN_KEY = 'api_token';
+const API_TOKEN_KEY = 'apiToken';
+const USER_EMAIL_KEY = 'userEmail';
+const USER_FIRST_NAME_KEY = 'userFirstName';
+const USER_LAST_NAME_KEY = 'userLastName';
 
 export default class AuthService {
 
@@ -18,11 +22,28 @@ export default class AuthService {
     }
 
     public getApiToken() {
-        return localStorage.getItem(API_TOKEN_KEY);
+        return localStorage.getItem(API_TOKEN_KEY) || undefined;
     }
 
-    public isUserLoggedIn() {
-        return this.getApiToken() !== null;
+    public getUser(): User | undefined {
+        const email = localStorage.getItem(USER_EMAIL_KEY);
+        const firstName = localStorage.getItem(USER_FIRST_NAME_KEY);
+        const lastName = localStorage.getItem(USER_LAST_NAME_KEY);
+        return email && firstName && lastName
+            ? { email, firstName, lastName }
+            : undefined;
+    }
+
+    public saveUser(user: User) {
+        localStorage.setItem(USER_EMAIL_KEY, user.email);
+        localStorage.setItem(USER_FIRST_NAME_KEY, user.firstName);
+        localStorage.setItem(USER_LAST_NAME_KEY, user.lastName);
+    }
+
+    public removeUser() {
+        localStorage.removeItem(USER_EMAIL_KEY);
+        localStorage.removeItem(USER_FIRST_NAME_KEY);
+        localStorage.removeItem(USER_LAST_NAME_KEY);
     }
 
     public login() {
@@ -30,8 +51,8 @@ export default class AuthService {
         window.location.href = `${API_HOST}/login?return_to=${currentUrl}`;
     }
 
-    public logout(): Promise<any> {
+    public logout() {
         const currentUrl = `${window.location.protocol}//${window.location.host}`;
-        return Axios.get(`${API_HOST}/logout?return_to=${currentUrl}`);
+        window.location.href = `${API_HOST}/logout?return_to=${currentUrl}`;
     }
 }

diff --git a/src/store/auth-action.ts b/src/store/auth-action.ts
index 719cb81be7469893c2bb907196fdaca78dd782f7..3343a57e86bc9e7c7a07a2f185c1fd6978f8ebcc 100644 (file)
--- a/src/store/auth-action.ts
+++ b/src/store/auth-action.ts
@@ -17,6 +17,7 @@ const actions = unionize({
     SAVE_API_TOKEN: ofType<string>(),
     LOGIN: {},
     LOGOUT: {},
+    INIT: {},
     USER_DETAILS_REQUEST: {},
     USER_DETAILS_SUCCESS: ofType<UserDetailsResponse>()
 }, {

diff --git a/src/store/auth-reducer.ts b/src/store/auth-reducer.ts
index 0d1f730e0db1ad7eff335b6072d923980b5a3ef0..7901e62ec5d51b08e2c1e142880ee947fc58a155 100644 (file)
--- a/src/store/auth-reducer.ts
+++ b/src/store/auth-reducer.ts
@@ -19,22 +19,30 @@ const authReducer = (state: AuthState = {}, action: AuthAction) => {
             setServerApiAuthorizationHeader(token);
             return {...state, apiToken: token};
         },
+        INIT: () => {
+            const user = authService.getUser();
+            const token = authService.getApiToken();
+            return { user, apiToken: token };
+        },
         LOGIN: () => {
             authService.login();
             return state;
         },
         LOGOUT: () => {
             authService.removeApiToken();
+            authService.removeUser();
             removeServerApiAuthorizationHeader();
             authService.logout();
             return {...state, apiToken: undefined};
         },
         USER_DETAILS_SUCCESS: (ud: UserDetailsResponse) => {
-            return {...state, user: {
+            const user = {
                 email: ud.email,
                 firstName: ud.first_name,
                 lastName: ud.last_name
-            }}
+            };
+            authService.saveUser(user);
+            return {...state, user};
         },
         default: () => state
     });

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 13c7ea225f6a603967783857c8be9beceded0ec1..38c3f042d817923a53c9faaf8e400e0766e3b6e1 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -18,7 +18,6 @@ import { Route, Switch } from "react-router";
 import { Link } from "react-router-dom";
 import Button from "@material-ui/core/Button/Button";
 import authActions from "../../store/auth-action";
-import { authService } from "../../services/services";
 import IconButton from "@material-ui/core/IconButton/IconButton";
 import Menu from "@material-ui/core/Menu/Menu";
 import MenuItem from "@material-ui/core/MenuItem/MenuItem";
@@ -59,7 +58,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
 
 interface WorkbenchDataProps {
     projects: Project[];
-    user: User;
+    user?: User;
 }
 
 interface WorkbenchActionProps {
@@ -101,8 +100,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
     };
 
     render() {
-        const {classes} = this.props;
-        const userLoggedIn = authService.isUserLoggedIn();
+        const {classes, user} = this.props;
         return (
             <div className={classes.root}>
                 <AppBar position="absolute" className={classes.appBar}>
@@ -110,10 +108,10 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                         <Typography variant="title" color="inherit" noWrap style={{flexGrow: 1}}>
                             <span>Arvados</span><br/><span style={{fontSize: 12}}>Workbench 2</span>
                         </Typography>
-                        {userLoggedIn ?
+                        {user ?
                             <div>
                                 <Typography variant="title" color="inherit" noWrap>
-                                    {this.props.user.firstName} {this.props.user.lastName}
+                                    {user.firstName} {user.lastName}
                                 </Typography>
                                 <IconButton
                                       aria-owns={this.state.anchorEl ? 'menu-appbar' : undefined}
@@ -144,7 +142,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                         }
                     </Toolbar>
                 </AppBar>
-                {userLoggedIn &&
+                {user &&
                 <Drawer
                     variant="permanent"
                     classes={{
@@ -169,7 +167,7 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
 export default connect<WorkbenchDataProps>(
     (state: RootState) => ({
         projects: state.projects,
-        user: state.auth.user!
+        user: state.auth.user
     })
 )(
     withStyles(styles)(Workbench)

diff --git a/yarn.lock b/yarn.lock
index eace7b6352ac8996fe125e3ad832cc256db04acb..2d6ca3c1c10c2a2f198222c269f3867b7f1a1dcd 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -6140,7 +6140,7 @@ redux-devtools@3.4.1:
     prop-types "^15.5.7"
     redux-devtools-instrument "^1.0.1"
 
-redux-thunk@^2.3.0:
+redux-thunk@2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
 
@@ -7324,7 +7324,7 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^0.4.3"
 
-unionize@^2.1.2:
+unionize@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/unionize/-/unionize-2.1.2.tgz#2513b148de515bec93f045d1685bd88eab62b608"