diff options
| -rw-r--r-- | modern/package.json | 6 | ||||
| -rw-r--r-- | modern/src/App.js | 26 | ||||
| -rw-r--r-- | modern/src/LoginPage.js | 87 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 49 | ||||
| -rw-r--r-- | modern/src/index.js | 8 |
5 files changed, 159 insertions, 17 deletions
diff --git a/modern/package.json b/modern/package.json index 5dd4cb9..94822a6 100644 --- a/modern/package.json +++ b/modern/package.json @@ -10,12 +10,14 @@ "react-container-dimensions": "^1.4.1", "react-dom": "^16.4.2", "react-leaflet": "^2.0.1", - "react-scripts": "1.1.5" + "react-router-dom": "^4.3.1", + "react-scripts": "^1.1.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" - } + }, + "proxy": "http://localhost:8082" } diff --git a/modern/src/App.js b/modern/src/App.js index 204c89e..31b8b69 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,21 +1,19 @@ -import React, { Component } from 'react'; -import ContainerDimensions from 'react-container-dimensions'; -import MainToobar from './MainToolbar'; -import MainMap from './MainMap'; +import React, { Component, Fragment } from 'react'; +import { Switch, Route } from 'react-router-dom' +import CssBaseline from '@material-ui/core/CssBaseline'; +import MainPage from './MainPage'; +import LoginPage from './LoginPage'; class App extends Component { render() { return ( - <div style={{height: "100vh", display: "flex", flexDirection: "column"}}> - <div style={{flex: 0}}> - <MainToobar /> - </div> - <div style={{flex: 1}}> - <ContainerDimensions> - <MainMap/> - </ContainerDimensions> - </div> - </div> + <Fragment> + <CssBaseline /> + <Switch> + <Route exact path='/' component={MainPage} /> + <Route exact path='/login' component={LoginPage} /> + </Switch> + </Fragment> ); } } diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js new file mode 100644 index 0000000..8b8401a --- /dev/null +++ b/modern/src/LoginPage.js @@ -0,0 +1,87 @@ +import React, { Component } from 'react'; +import Button from '@material-ui/core/Button'; +import FormControl from '@material-ui/core/FormControl'; +import Input from '@material-ui/core/Input'; +import InputLabel from '@material-ui/core/InputLabel'; +import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; +import withStyles from '@material-ui/core/styles/withStyles'; + +const styles = theme => ({ + layout: { + width: 'auto', + display: 'block', // Fix IE11 issue. + marginLeft: theme.spacing.unit * 3, + marginRight: theme.spacing.unit * 3, + [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: { + width: 400, + marginLeft: 'auto', + marginRight: 'auto', + }, + }, + paper: { + marginTop: theme.spacing.unit * 8, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`, + }, + submit: { + marginTop: theme.spacing.unit * 3, + }, +}); + +class LoginPage extends Component { + constructor(props) { + super(props); + this.state = { + failed: false + }; + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleSubmit() { + console.log(); + fetch("/api/session", { + method: "POST", + body: new URLSearchParams(`email=admin&password=admin`) + }).then(response => { + if (response.ok) { + this.props.history.push('/'); // TODO avoid calling sessions twice + } else { + this.setState({ + failed: true + }); + } + }); + } + + render() { + const { classes } = this.props; + const { failed } = this.state; + return ( + <main className={classes.layout}> + <Paper className={classes.paper}> + <Typography variant="headline">Traccar</Typography> + { + failed && + <Typography>Login failed</Typography> + } + <FormControl margin="normal" required fullWidth> + <InputLabel htmlFor="email">Email Address</InputLabel> + <Input id="email" name="email" autoComplete="email" autoFocus /> + </FormControl> + <FormControl margin="normal" required fullWidth> + <InputLabel htmlFor="password">Password</InputLabel> + <Input name="password" type="password" id="password" autoComplete="current-password" /> + </FormControl> + <Button type="submit" fullWidth variant="raised" color="primary" className={classes.submit} onClick={this.handleSubmit}> + Login + </Button> + </Paper> + </main> + ); + } +} + +export default withStyles(styles)(LoginPage); diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js new file mode 100644 index 0000000..02d98dc --- /dev/null +++ b/modern/src/MainPage.js @@ -0,0 +1,49 @@ +import React, { Component } from 'react'; +import ContainerDimensions from 'react-container-dimensions'; +import MainToobar from './MainToolbar'; +import MainMap from './MainMap'; + +class MainPage extends Component { + constructor(props) { + super(props); + this.state = { + loading: true + }; + } + + componentDidMount() { + fetch('/api/session').then(response => { + if (response.ok) { + this.setState({ + loading: false + }); + } else { + this.props.history.push('/login'); + } + }); + } + + render() { + const { loading } = this.state; + if (loading) { + return ( + <div>Loading...</div> + ); + } else { + return ( + <div style={{height: "100vh", display: "flex", flexDirection: "column"}}> + <div style={{flex: 0}}> + <MainToobar /> + </div> + <div style={{flex: 1}}> + <ContainerDimensions> + <MainMap/> + </ContainerDimensions> + </div> + </div> + ); + } + } +} + +export default MainPage; diff --git a/modern/src/index.js b/modern/src/index.js index 917d651..016a4af 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -1,7 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import { BrowserRouter } from 'react-router-dom' import App from './App'; import registerServiceWorker from './registerServiceWorker'; -ReactDOM.render(<App />, document.getElementById('root')); +ReactDOM.render(( + <BrowserRouter> + <App /> + </BrowserRouter> +), document.getElementById('root')); + registerServiceWorker(); |