canape/frontend/js/auth.js

import React from "react"
import PropTypes from "prop-types"
import { connect } from "react-redux"
import { Route, Redirect } from "react-router-dom"
import { setUserToken } from "./actions/users"

const protectedRoute = ({
  component: Component,
  isLogged,
  isActivated,
  isTokenSet,
  setUserToken,
  ...otherProps
}) => {
  const isAuthenticated = () => {
    if (isTokenSet) {
      return true;
    }

    const token = localStorage.getItem("token");
    if (isLogged || (token && token !== "")) {
      if (!isTokenSet) {
        setUserToken(token);
      }
      return true
    }

    return false
  }

  return (
    <Route {...otherProps} render={(props) => {
      if (isAuthenticated()) {
        if (isActivated) {
          return <Component {...props} />
        } else {
          return <Redirect to="/users/activation" />
        }
      } else {
        return <Redirect to="/users/login" />
      }
    }} />
  )
}
protectedRoute.propTypes = {
  component: PropTypes.func,
  isLogged: PropTypes.bool.isRequired,
  isActivated: PropTypes.bool.isRequired,
  isTokenSet: PropTypes.bool.isRequired,
  setUserToken: PropTypes.func.isRequired,
};
export const ProtectedRoute = connect((state) => ({
  isLogged: state.userStore.get("isLogged"),
  isAdmin: state.userStore.get("isLogged"),
  isActivated: state.userStore.get("isActivated"),
  isTokenSet: state.userStore.get("isTokenSet"),
}), { setUserToken })(protectedRoute);

const adminRoute = ({
  component: Component,
  isAdmin,
  ...otherProps
}) => {
  return (
    <Route {...otherProps} render={(props) => {
      if (isAdmin) {
        return <Component {...props} />
      } else {
        return <Redirect to="/" />
      }
    }} />
  )
}
adminRoute.propTypes = {
  component: PropTypes.func,
  isAdmin: PropTypes.bool.isRequired,
};
export const AdminRoute = connect((state) => ({
  isAdmin: state.userStore.get("isLogged"),
}))(adminRoute);