app/client/auth/auth.gate.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

import { h, Component } from 'preact';
// import PropTypes from 'prop-types';
import { BrowserRouter, Route, Switch, Redirect, withRouter } from 'react-router-dom'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import * as authActions from './auth.actions';

import Login from './login.component';
import Logout from './logout.component';
import Signup from './signup.component';

import { randint } from '../util/math'

class AuthRouter extends Component {
  render(){
    return (
      <BrowserRouter>
        <div>
          <div className="diamond"></div>
          <Switch>
            <Route exact path='/' component={Login} />
            <Route exact path='/login' component={Login} />
            <Route exact path='/logout' component={Logout} />
            <Route exact path='/signup' component={Signup} />
            <Route component={() => {
              props.actions.setReturnTo(props.location.pathname)
              return (
                <Redirect to="/login" />
              )
            }} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
  componentDidMount(){
    document.querySelector('.diamond').style.backgroundImage = 'linear-gradient(' + (randint(40)-5) + 'deg, #fde, #ffe)'
  }
}

class AuthGate extends Component {
  render(){
    if (!this.props.auth.initialized) {
      return <div className='loading'>Loading</div>
    }
    if (this.props.auth.isAuthenticated) return children
    return <AuthRouter {...this.props} />
  }
  componentDidMount(){
    this.props.actions.checkin(history)
  }
}

const mapStateToProps = (state) => ({
  auth: state.auth
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(authActions, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(AuthGate);