Merge pull request #44 from ohtuprojekti-ilmo/logout

Added log out button to navigation bar

src/App.js

@@ -22,6 +22,11 @@ import tokenCheckService from './services/tokenCheck'
 
 
 class App extends Component {
+  constructor(props) {
+    super(props)
+
+    this.logout = this.logout.bind(this)
+  }
 
   componentWillMount() {
     if (window.localStorage.getItem('loggedInUser')) {
@@ -45,6 +50,14 @@ class App extends Component {
     }
   }
 
+  logout() {
+    this.props.updateIsLoading(true)
+    window.localStorage.clear()
+    this.props.updateUser('')
+    window.location.reload()
+    this.props.updateIsLoading(false)
+  }
+
   render() {
     if (this.props.isLoading) {
       return (
@@ -56,7 +69,7 @@ class App extends Component {
     return (
       <Router>
         <div id="app-wrapper">
-          <NavigationBar />
+          <NavigationBar logout={this.logout}/>
           <Notification type={this.props.type} message={this.props.message} open={this.props.open}/>
           <div id="app-content">
             <Switch>

src/components/ViewTopicPage.css

@@ -1,9 +1,3 @@
-h2 {
-  padding-bottom: 50px
-}
 .block {
   padding: 10px
-}
-h4 {
-  padding-bottom: 10px
 }

src/components/common/NavigationBar.css

@@ -1,5 +1,6 @@
 .navigation-bar-container {
-  flex-grow: 1
+  flex-grow: 1;
+  width: 100%
 }
 
 .grow {

src/components/common/NavigationBar.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
+import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 import AccountCircle from '@material-ui/icons/AccountCircle'
 import './NavigationBar.css'
 
 class NavigationBar extends React.Component {
+
   state = {
     anchorEl: null,
     mobileMoreAnchorEl: null,
@@ -14,13 +16,16 @@ class NavigationBar extends React.Component {
   render() {
     let loggedIn
     let username
+    let logoutButton
     if (window.localStorage.getItem('loggedInUser')) {
       loggedIn = <AccountCircle />
       username = <h4 className='navigation-bar-username tracking-in-expand'>{JSON.parse(window.localStorage.getItem('loggedInUser')).user.username}</h4>
+      logoutButton = <Button style={{ marginLeft: '10px' }} variant="outlined" onClick={this.props.logout}>Log out</Button>
     } else {
       loggedIn = ''
     }
 
+    console.log(this.props.logout)
     return (
       <div className='navigation-bar-container'>
         <AppBar position="static">
@@ -30,6 +35,7 @@ class NavigationBar extends React.Component {
             </Typography>
             {loggedIn}
             {username}
+            {logoutButton}
           </Toolbar>
         </AppBar>
       </div>

src/index.js

@@ -5,16 +5,16 @@ import { Provider } from 'react-redux'
 import App from './App'
 import store from './reducers/store'
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-import green from '@material-ui/core/colors/green'
+import amber from '@material-ui/core/colors/amber'
 
 console.log(store.getState())
 
 const theme = createMuiTheme({
   palette: {
     primary: {
-      main: '#0288d1'
+      main: '#fdd835'
     },
-    secondary: green,
+    secondary: amber,
   },
   typography: {
     useNextVariants: true,