From c821e4722da493c5408bcb505599239d687453c6 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Tue, 4 Sep 2018 16:44:14 +1200 Subject: Implement login logic --- modern/src/LoginPage.js | 87 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 modern/src/LoginPage.js (limited to 'modern/src/LoginPage.js') 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 ( +
+ + Traccar + { + failed && + Login failed + } + + Email Address + + + + Password + + + + +
+ ); + } +} + +export default withStyles(styles)(LoginPage); -- cgit v1.2.3 From c1de0809d37eceb5194f5a9f8a76ebdea7504be8 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Wed, 5 Sep 2018 15:30:07 +1200 Subject: Improve login screen --- modern/public/logo.svg | 33 ++++++++++++++++ modern/src/LoginPage.js | 103 +++++++++++++++++++++++++++++++++++++----------- 2 files changed, 113 insertions(+), 23 deletions(-) create mode 100644 modern/public/logo.svg (limited to 'modern/src/LoginPage.js') diff --git a/modern/public/logo.svg b/modern/public/logo.svg new file mode 100644 index 0000000..008b46d --- /dev/null +++ b/modern/public/logo.svg @@ -0,0 +1,33 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 8b8401a..9934106 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -1,10 +1,10 @@ import React, { Component } from 'react'; import Button from '@material-ui/core/Button'; +import FormHelperText from '@material-ui/core/FormHelperText'; 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 => ({ @@ -24,10 +24,19 @@ const styles = theme => ({ display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`, + padding: `${theme.spacing.unit * 3}px`, }, - submit: { - marginTop: theme.spacing.unit * 3, + logo: { + margin: `${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px` + }, + buttons: { + width: '100%', + display: 'flex', + flexDirection: 'row' + }, + button: { + flex: '1 1 0', + margin: `${theme.spacing.unit * 3}px ${theme.spacing.unit}px 0` }, }); @@ -35,22 +44,39 @@ class LoginPage extends Component { constructor(props) { super(props); this.state = { - failed: false + filled: false, + loading: false, + failed: false, + email: "", + password: "" }; - this.handleSubmit = this.handleSubmit.bind(this); + this.handleChange = this.handleChange.bind(this); + this.handleRegister = this.handleRegister.bind(this); + this.handleLogin = this.handleLogin.bind(this); } - handleSubmit() { - console.log(); + handleChange(event) { + this.setState({ + [event.target.id]: event.target.value + }); + } + + handleRegister() { + // TODO implement registration + } + + handleLogin() { + const { email, password } = this.state; fetch("/api/session", { method: "POST", - body: new URLSearchParams(`email=admin&password=admin`) + body: new URLSearchParams(`email=${email}&password=${password}`) }).then(response => { if (response.ok) { this.props.history.push('/'); // TODO avoid calling sessions twice } else { this.setState({ - failed: true + failed: true, + password: "" }); } }); @@ -58,26 +84,57 @@ class LoginPage extends Component { render() { const { classes } = this.props; - const { failed } = this.state; + const { failed, email, password } = this.state; return (
- Traccar - { - failed && - Login failed - } - - Email Address - + + Traccar + + + Email + + { failed && Invalid username or password } + Password - + - + +
+ + + + + +
+
); -- cgit v1.2.3 From 8df444bc17f84236613719f5cdc04b89b2f61f23 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Wed, 5 Sep 2018 15:52:02 +1200 Subject: Fix some issues on main screen --- modern/src/LoginPage.js | 4 ++-- modern/src/MainPage.js | 23 +++++++++++++++++------ modern/src/MainToolbar.js | 32 ++++++++++++++------------------ 3 files changed, 33 insertions(+), 26 deletions(-) (limited to 'modern/src/LoginPage.js') diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 9934106..3ba6bac 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -8,7 +8,7 @@ import Paper from '@material-ui/core/Paper'; import withStyles from '@material-ui/core/styles/withStyles'; const styles = theme => ({ - layout: { + root: { width: 'auto', display: 'block', // Fix IE11 issue. marginLeft: theme.spacing.unit * 3, @@ -86,7 +86,7 @@ class LoginPage extends Component { const { classes } = this.props; const { failed, email, password } = this.state; return ( -
+
Traccar diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 02d98dc..36181a9 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -2,6 +2,18 @@ import React, { Component } from 'react'; import ContainerDimensions from 'react-container-dimensions'; import MainToobar from './MainToolbar'; import MainMap from './MainMap'; +import withStyles from '@material-ui/core/styles/withStyles'; + +const styles = theme => ({ + root: { + height: "100vh", + display: "flex", + flexDirection: "column" + }, + mapContainer: { + flexGrow: 1 + } +}); class MainPage extends Component { constructor(props) { @@ -24,6 +36,7 @@ class MainPage extends Component { } render() { + const { classes } = this.props; const { loading } = this.state; if (loading) { return ( @@ -31,11 +44,9 @@ class MainPage extends Component { ); } else { return ( -
-
- -
-
+
+ +
@@ -46,4 +57,4 @@ class MainPage extends Component { } } -export default MainPage; +export default withStyles(styles)(MainPage); diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index e8294ab..1420135 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -1,5 +1,4 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; @@ -9,22 +8,23 @@ import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/Menu'; const styles = { - root: { - flexGrow: 1, - }, flex: { - flexGrow: 1, + flexGrow: 1 }, menuButton: { marginLeft: -12, - marginRight: 20, + marginRight: 20 }, }; -function MainToobar(props) { - const { classes } = props; - return ( -
+class MainToobar extends Component { + constructor(props) { + super(props); + } + + render() { + const { classes } = this.props; + return ( @@ -33,15 +33,11 @@ function MainToobar(props) { Traccar - + -
- ); + ); + } } -MainToobar.propTypes = { - classes: PropTypes.object.isRequired, -}; - export default withStyles(styles)(MainToobar); -- cgit v1.2.3 From 801b2fee9ab28d89aefeeb2d7406cf17eae9117a Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Wed, 5 Sep 2018 16:34:44 +1200 Subject: Implement logout button --- modern/src/LoginPage.js | 92 ++++++++++++++++++++++++----------------------- modern/src/MainPage.js | 2 +- modern/src/MainToolbar.js | 19 ++++++---- 3 files changed, 62 insertions(+), 51 deletions(-) (limited to 'modern/src/LoginPage.js') diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 3ba6bac..ac4a51c 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -65,7 +65,8 @@ class LoginPage extends Component { // TODO implement registration } - handleLogin() { + handleLogin(event) { + event.preventDefault(); const { email, password } = this.state; fetch("/api/session", { method: "POST", @@ -91,49 +92,52 @@ class LoginPage extends Component { Traccar - - Email - - { failed && Invalid username or password } - - - - Password - - - -
- - - - - -
+
+ + + Email + + { failed && Invalid username or password } + + + + Password + + + +
+ + + + + +
+ +
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 36181a9..6db458e 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -45,7 +45,7 @@ class MainPage extends Component { } else { return (
- +
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 1420135..0a21d94 100644 --- a/modern/src/MainToolbar.js +++ b/modern/src/MainToolbar.js @@ -10,16 +10,23 @@ import MenuIcon from '@material-ui/icons/Menu'; const styles = { flex: { flexGrow: 1 - }, - menuButton: { - marginLeft: -12, - marginRight: 20 - }, + } }; class MainToobar extends Component { constructor(props) { super(props); + this.handleLogout = this.handleLogout.bind(this); + } + + handleLogout() { + fetch("/api/session", { + method: "DELETE" + }).then(response => { + if (response.ok) { + this.props.history.push('/login'); + } + }); } render() { @@ -33,7 +40,7 @@ class MainToobar extends Component { Traccar - + ); -- cgit v1.2.3 From 10f244d54f795bbeebc280248e26f9c078a639fd Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Wed, 18 Mar 2020 23:22:36 -0700 Subject: Fix deprecated usages --- modern/src/LoginPage.js | 18 +++++++++--------- modern/src/MainToolbar.js | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) (limited to 'modern/src/LoginPage.js') diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index ac4a51c..c094fa3 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -11,23 +11,23 @@ const styles = theme => ({ root: { 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)]: { + marginLeft: theme.spacing(3), + marginRight: theme.spacing(3), + [theme.breakpoints.up(400 + theme.spacing(3 * 2))]: { width: 400, marginLeft: 'auto', marginRight: 'auto', }, }, paper: { - marginTop: theme.spacing.unit * 8, + marginTop: theme.spacing(8), display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: `${theme.spacing.unit * 3}px`, + padding: `${theme.spacing(3)}px`, }, logo: { - margin: `${theme.spacing.unit * 2}px 0 ${theme.spacing.unit}px` + margin: `${theme.spacing(2)}px 0 ${theme.spacing(1)}px` }, buttons: { width: '100%', @@ -36,7 +36,7 @@ const styles = theme => ({ }, button: { flex: '1 1 0', - margin: `${theme.spacing.unit * 3}px ${theme.spacing.unit}px 0` + margin: `${theme.spacing(3)}px ${theme.spacing(1)}px 0` }, }); @@ -119,7 +119,7 @@ class LoginPage extends Component { -- cgit v1.2.3