119 lines
4.2 KiB
JavaScript
119 lines
4.2 KiB
JavaScript
import React, { Component, Fragment } from 'react'
|
|
import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRoute, DefaultRoute } from './Auth'
|
|
import { Home } from './Home'
|
|
import { Profile } from './Profile'
|
|
import { Users } from './Users'
|
|
import { Teams } from './Teams'
|
|
import { System } from './System'
|
|
import { HeaderButton, HeaderText, Column, Row, Text, Box } from 'ui'
|
|
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
|
|
import logoImage from 'images/logo.png'
|
|
import { versionInfo } from './version'
|
|
import { sizeInfo, colorInfo } from 'ui/style'
|
|
import { api } from 'src/API'
|
|
import PropTypes from 'prop-types'
|
|
import autobind from 'autobind-decorator'
|
|
|
|
export class App extends Component {
|
|
static propTypes = {
|
|
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
loggedInUser: api.loggedInUser
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
api.addListener('login', this.handleUpdate)
|
|
api.addListener('logout', this.handleUpdate)
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
api.removeListener('login', this.handleUpdate)
|
|
api.removeListener('logout', this.handleUpdate)
|
|
}
|
|
|
|
@autobind
|
|
handleUpdate() {
|
|
this.setState({ loggedInUser: api.loggedInUser })
|
|
}
|
|
|
|
handleLogout() {
|
|
// We have to use window here because App does not have history in it's props
|
|
window.location.replace('/logout')
|
|
}
|
|
|
|
handleHome() {
|
|
window.location.replace('/')
|
|
}
|
|
|
|
handleProfile() {
|
|
window.location.replace('/profile')
|
|
}
|
|
|
|
@autobind
|
|
handleChangeTitle(title) {
|
|
this.setState({ title })
|
|
}
|
|
|
|
render() {
|
|
const { loggedInUser } = this.state
|
|
let headerButtonsRight = null
|
|
let headerButtonsLeft = null
|
|
|
|
if (loggedInUser) {
|
|
headerButtonsLeft = (
|
|
<Fragment>
|
|
<HeaderButton image={logoImage} onClick={this.handleHome} />
|
|
<HeaderText text={this.state.title} />
|
|
</Fragment>
|
|
)
|
|
headerButtonsRight = (
|
|
<Fragment>
|
|
<HeaderButton icon='profile' onClick={this.handleProfile} />
|
|
<HeaderButton icon='logout' onClick={this.handleLogout} />
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Router basename='/'>
|
|
<Column minHeight='100vh'>
|
|
<Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
|
|
<Box background={colorInfo.headerButtonBackground}
|
|
borderBottom={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
|
|
style={{ boxSizing: 'content' }}>
|
|
<Row minWidth='100vw'>
|
|
<Row.Item>{headerButtonsLeft}</Row.Item>
|
|
<Row.Item grow />
|
|
<Row.Item>{headerButtonsRight}</Row.Item>
|
|
</Row>
|
|
</Box>
|
|
</Column.Item>
|
|
<Switch>
|
|
<Route exact path='/login' component={Login} />
|
|
<Route exact path='/logout' component={Logout} />
|
|
<Route exact path='/confirm-email' component={ConfirmEmail} />
|
|
<Route exact path='/reset-password' component={ResetPassword} />
|
|
<Route exact path='/forgot-password' component={ForgotPassword} />
|
|
<ProtectedRoute exact path='/profile' render={props => (<Profile {...props} changeTitle={this.handleChangeTitle} />)} />
|
|
<ProtectedRoute exact admin path='/users' render={props => (<Users {...props} changeTitle={this.handleChangeTitle} />)} />
|
|
<ProtectedRoute exact admin path='/teams' render={props => (<Teams {...props} changeTitle={this.handleChangeTitle} />)} />
|
|
<ProtectedRoute exact admin path='/system' render={props => (<System {...props} changeTitle={this.handleChangeTitle} />)} />
|
|
<ProtectedRoute exact admin path='/home' render={props => (<Home {...props} changeTitle={this.handleChangeTitle} />)} />
|
|
<DefaultRoute />
|
|
</Switch>
|
|
<Column.Item>
|
|
<Box background={colorInfo.headerButtonBackground} borderTop={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}>
|
|
<Text color='dimmed' margin={sizeInfo.footerTextMargin}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
|
|
</Box>
|
|
</Column.Item>
|
|
</Column>
|
|
</Router>
|
|
)
|
|
}
|
|
}
|