1

constructor(props) {
    super(props);

    this.state = {
        page: 'login'
    }

    this.handleOnLogout = this.handleOnLogout.bind(this);
}

handleOnLogout(callback) {
    UserDAO.logout().then(() => {
        callback();
    }).catch(error => console.log(error));
}

render() {
    return (
        <Router>
            <div>
                <Navbar onLogout={this.handleOnLogout}/>
                <Switch>
                    <Route path="/login" component={LoginPage} />
                    <PrivateRoute path="/" component={Dashboard}/>
                </Switch>
            </div>
        </Router>
    );
}

function PrivateRoute({ component: Component, ...rest }) {
return (
    <Route
        {...rest}
        render={props => 
            UserDAO.isLoggedIn ? (
                <Component {...props}/>
            ) : (
                <Redirect
                to={{
                    pathname: "/login",
                    state: { from: props.location }
                }}
                />
            )
        }
    />
)
}

handleOnLogin(email, password, positive, negative) {
    let self = this;
    UserDAO.login(email, password).then(user => {
        console.log("Successfully logged in as user #" + user.id);
        positive("Successfully logged in, you'll be soon redirected to the homepage.");
        setTimeout(() => { self.setState({redirectToReferrer: true }) }, 500 );
    }).catch( error => {
        console.log("Error logging in with email/password auth: " + error);
        negative("Error logging in with email/password auth: " + error);
    });
}

render() {
    const { from } = this.props.location.state || { from: { pathname: "/" } };
    const { redirectToReferrer } = this.state;

    if (UserDAO.isLoggedIn || redirectToReferrer) return <Redirect to={from} />;

    return (
        <div className="login-page">
            <div className="container d-flex align-items-center">
                <div className="row d-flex justify-content-center">
                    <div className="col-12 col-lg-6">
                        <LoginForm onLogin={this.handleOnLogin}
                            onForgotPassword={() => { this.setState({ showForgotPasswordModal: true }); } }
                            onResendActivation={() => { this.setState({ showResendActivationModal: true }); } }/>
                    </div>
                </div>
            </div>

            <ResendActivationModal show={this.state.showResendActivationModal} enabled onClose={this.closeResendActivationModal}/>
            <ForgotPasswordModal show={this.state.showForgotPasswordModal} enabled onClose={this.closeForgotPasswordModal}/>
        </div>
    );
}

const Navbar = withRouter(
({ history, onLogout }) => {
    return (
        <nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
            <a className="navbar-brand col-sm-3 col-md-2 mr-0" href="#">MANA</a>
            <ul className="navbar-nav px-3">
                {UserDAO.isLoggedIn &&
                <li className="nav-item text-nowrap">
                    <LinkButton className="nav-link" onClick={() => {
                        onLogout(() => { history.push("/"); console.log(history); })
                    }} href="#">Log out</LinkButton>
                </li>}
            </ul>
        </nav>
    );
}
);

|

2

1

<PrivateRoute path="/" component={Dashboard}/>

<PrivateRoute path="/dashboard" component={Dashboard}/>

const { from } = this.props.location.state || { from: { pathname: "/" } };

|
    0

    export function isLoggedIn() {
        return client.auth.isLoggedIn;
    }
    

    |