logout done

my-app/src/actions/AuthenticationActions.js

 export const SHOW_LOGIN_DIALOG = 'SHOW_LOGIN_DIALOG';
 export const HIDE_LOGIN_DIALOG = 'HIDE_LOGIN_DIALOG';
 
+export const LOGOUT = 'LOGOUT'
 export const AUTHENTICATION_PENDING = 'AUTHENTICATION_PENDING'
 export const AUTHENTICATION_SUCCESS = 'AUTHENTICATION_SUCCESS'
 export const AUTHENTICATION_ERROR = 'AUTHENTICATION_ERROR'
@@ -11,6 +12,14 @@ export function getShowLoginDialogAction() {
     }
 }
 
+export function getLogoutAction() {
+    return {
+        type: LOGOUT,
+        user: null,
+        accessToken: null
+    }
+}
+
 export function getHideLoginDialogAction() {
     return {
         type: HIDE_LOGIN_DIALOG

my-app/src/components/userSessionWidget.js

@@ -11,6 +11,7 @@ import * as authenticationActions from '../actions/AuthenticationActions'
 const mapStateToProps = state => {
     return state;
 }
+
 class userSessionWidget extends Component {
 
     constructor(props) {
@@ -23,6 +24,7 @@ class userSessionWidget extends Component {
         this.handleClose = this.handleClose.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleLogout = this.handleLogout.bind(this);
     }
 
     handleShow(e) {
@@ -52,7 +54,24 @@ class userSessionWidget extends Component {
         console.log("Pushed Submit")
     }
 
+    handleLogout(e) {
+        e.preventDefault()
+        const { logout } = this.props;
+        logout()
+    }
+
     render() {
+        const user = this.props.user
+        let button;
+        if (!user) {
+            button = <Button variant="primary" onClick={this.handleShow} id="OpenLoginDialogButton">
+                Login
+            </Button>
+        } else {
+            button = <Button variant="primary" onClick={this.handleLogout} id="LogoutButton">
+                Logout
+            </Button>
+        }
 
         var showDialog = this.props.showLoginDialog
         if (showDialog === undefined) {
@@ -60,9 +79,7 @@ class userSessionWidget extends Component {
         }
         return (
             <div>
-                <Button variant="primary" onClick={this.handleShow} id="OpenLoginDialogButton">
-                    Login
-                </Button>
+                {button}
 
                 <Modal show={showDialog} onHide={this.handleClose} id="LoginDialog">
                     <Modal.Header closeButton>
@@ -71,13 +88,13 @@ class userSessionWidget extends Component {
                     <Modal.Body>
                         <Form>
                             <Form.Group className="mb-3">
-                                <Form.Label>Email address</Form.Label>
-                                <Form.Control type="email" placeholder="Enter email" name='username' onChange={this.handleChange} id="LoginDialogUserIDText"/>
+                                <Form.Label>Username</Form.Label>
+                                <Form.Control type="email" placeholder="Enter email" name='username' onChange={this.handleChange} id="LoginDialogUserIDText" />
                             </Form.Group>
 
                             <Form.Group className="mb-3">
                                 <Form.Label>Password</Form.Label>
-                                <Form.Control type="password" placeholder="Password" name='password' onChange={this.handleChange} id="LoginDialogPasswordText"/>
+                                <Form.Control type="password" placeholder="Password" name='password' onChange={this.handleChange} id="LoginDialogPasswordText" />
                             </Form.Group>
                             <Button variant="primary" type="submit" onClick={this.handleSubmit} id="PerformLoginButton">
                                 Submit
@@ -97,7 +114,8 @@ class userSessionWidget extends Component {
 const mapDispatchToProps = dispatch => bindActionCreators({
     showLoginDialogAction: authenticationActions.getShowLoginDialogAction,
     hideLoginDialogAction: authenticationActions.getHideLoginDialogAction,
-    authenticateUserAction: authenticationActions.authenticateUser
+    authenticateUserAction: authenticationActions.authenticateUser,
+    logout: authenticationActions.getLogoutAction
 }, dispatch)
 
 const ConnectedUserSessionWidget = connect(mapStateToProps, mapDispatchToProps)(userSessionWidget)

my-app/src/reducer/RootReducer.js

@@ -43,6 +43,12 @@ function rootReducer(state = initialState, action) {
                 pending: false,
                 error: 'Authentication failed'
             }
+            case authenticationActions.LOGOUT:
+                return {
+                    ...state,
+                    user: null,
+                    accessToken: null
+                }
         default:
             return state;
     }