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);