60 lines
2.4 KiB
JavaScript
60 lines
2.4 KiB
JavaScript
import React from 'react'
|
|
import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRoute } from './Auth'
|
|
import { Home } from './Home'
|
|
import { Profile } from './Profile'
|
|
import { Users } from './Users'
|
|
import { HeaderButton, Column, Row, Image, 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 } from 'ui/style'
|
|
|
|
export class App extends React.Component {
|
|
render() {
|
|
const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
|
|
|
|
return (
|
|
<Column minHeight='100vh'>
|
|
<Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
|
|
<Box color='#FAFAFA' borderBottom={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
|
|
<Row minWidth='100vw'>
|
|
<Row.Item>
|
|
<Image source={logoImage}
|
|
height={height}
|
|
margin={sizeInfo.headerMargin} />
|
|
</Row.Item>
|
|
<Row.Item grow> </Row.Item>
|
|
<Row.Item>
|
|
<HeaderButton icon='profile' size={height} />
|
|
<HeaderButton icon='logout' size={height} />
|
|
</Row.Item>
|
|
</Row>
|
|
</Box>
|
|
</Column.Item>
|
|
<Column.Item grow />
|
|
<Column.Item>
|
|
<Router basename='/'>
|
|
<Switch>
|
|
<Route path='/login' component={Login} />
|
|
<Route path='/confirm-email' component={ConfirmEmail} />
|
|
<Route path='/reset-password' component={ResetPassword} />
|
|
<Route path='/forgot-password' component={ForgotPassword} />
|
|
<ProtectedRoute path='/logout' component={Logout} />
|
|
<ProtectedRoute path='/profile' component={Profile} />
|
|
<ProtectedRoute roles={['administrator', 'normal']} path='/' component={Home} />
|
|
<ProtectedRoute roles={['administrator']} path='/users' component={Users} />
|
|
<Route component={Home} />{/* No Match Route */}
|
|
</Switch>
|
|
</Router>
|
|
</Column.Item>
|
|
<Column.Item grow />
|
|
<Column.Item>
|
|
<Box color='#FAFAFA' borderTop={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
|
|
<Text tone='dimmed' margin={10}>{'v' + versionInfo.version} {versionInfo.copyright}</Text>
|
|
</Box>
|
|
</Column.Item>
|
|
</Column>
|
|
)
|
|
}
|
|
}
|