diff --git a/src/public/js/actions/actionCreators.js b/src/public/js/actions/actionCreators.js index b1fa1e4..de9f1b1 100644 --- a/src/public/js/actions/actionCreators.js +++ b/src/public/js/actions/actionCreators.js @@ -1,5 +1,6 @@ export const ADD_MOVIES = 'ADD_MOVIES' export const SELECT_MOVIE = 'SELECT_MOVIE' +export const IS_USER_LOGGED_IN = 'IS_USER_LOGGED_IN' // Select Movie export function selectMovie(index) { @@ -15,3 +16,9 @@ export function addMovies(movies) { movies } } + +export function isUserLoggedIn() { + return { + type: IS_USER_LOGGED_IN, + } +} diff --git a/src/public/js/app.js b/src/public/js/app.js index 6519008..aa9d6e4 100644 --- a/src/public/js/app.js +++ b/src/public/js/app.js @@ -19,7 +19,7 @@ class Main extends React.Component { return (
- +
diff --git a/src/public/js/components/navbar.jsx b/src/public/js/components/navbar.jsx index f256c9b..d6ce818 100644 --- a/src/public/js/components/navbar.jsx +++ b/src/public/js/components/navbar.jsx @@ -1,8 +1,15 @@ import React from 'react' import { Link } from 'react-router' +import { store } from '../store' +import { isUserLoggedIn } from '../actions/actionCreators' export default class NavBar extends React.Component { + componentDidMount() { + this.props.isUserLoggedIn() + } render() { + const username = this.props.userStore.username; + const isLoggedIn = username !== "" ? true : false; return (
@@ -14,10 +21,20 @@ export default class NavBar extends React.Component { Canape
-
+
  • Movies
  • -
  • Login
  • +
+
    + {isLoggedIn && +
  • {username} / Edit
  • + } + {isLoggedIn || +
  • Login
  • + } + {isLoggedIn && +
  • Logout
  • + }
diff --git a/src/public/js/reducers/users.js b/src/public/js/reducers/users.js index 7c9e00e..899baca 100644 --- a/src/public/js/reducers/users.js +++ b/src/public/js/reducers/users.js @@ -1,5 +1,10 @@ +import { IS_USER_LOGGED_IN } from '../actions/actionCreators' +import jwtDecode from 'jwt-decode' + const defaultState = { userLoading: false, + username: "", + isAdmin: false, }; // This actions are generated from the promise middleware @@ -11,10 +16,32 @@ export default function userStore(state = defaultState, action) { userLoading: true, }) case 'USER_LOGIN_FULFILLED': - return Object.assign({}, state, { - userLoading: false, - }) + if (action.payload.data.type === "error") { + return logoutUser(state) + } + return updateFromToken(state, action.payload.data.token) + case IS_USER_LOGGED_IN: + let localToken = localStorage.getItem('token'); + if (localToken === "") { + return state; + } + return updateFromToken(state, localToken) default: return state; } } + +function logoutUser(state) { + localStorage.removeItem('token'); + return Object.assign({}, state, defaultState) +} + +function updateFromToken(state, token) { + const decodedToken = jwtDecode(token); + localStorage.setItem('token', token); + return Object.assign({}, state, { + userLoading: false, + isAdmin: decodedToken.isAdmin, + username: decodedToken.username, + }) +}