aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2018-09-05 16:34:44 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2018-09-05 16:34:44 +1200
commit801b2fee9ab28d89aefeeb2d7406cf17eae9117a (patch)
treec3b69304f7558975d32e61865f8361436ddf875f
parent8df444bc17f84236613719f5cdc04b89b2f61f23 (diff)
downloadetbsa-traccar-web-801b2fee9ab28d89aefeeb2d7406cf17eae9117a.tar.gz
etbsa-traccar-web-801b2fee9ab28d89aefeeb2d7406cf17eae9117a.tar.bz2
etbsa-traccar-web-801b2fee9ab28d89aefeeb2d7406cf17eae9117a.zip
Implement logout button
-rw-r--r--modern/src/LoginPage.js92
-rw-r--r--modern/src/MainPage.js2
-rw-r--r--modern/src/MainToolbar.js19
3 files changed, 62 insertions, 51 deletions
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 {
<img className={classes.logo} src="/logo.svg" alt="Traccar" />
- <FormControl margin="normal" required fullWidth error={failed}>
- <InputLabel htmlFor="email">Email</InputLabel>
- <Input
- id="email"
- value={email}
- autoComplete="email"
- autoFocus
- onChange={this.handleChange} />
- { failed && <FormHelperText>Invalid username or password</FormHelperText> }
- </FormControl>
-
- <FormControl margin="normal" required fullWidth>
- <InputLabel htmlFor="password">Password</InputLabel>
- <Input
- id="password"
- type="password"
- value={password}
- autoComplete="current-password"
- onChange={this.handleChange} />
- </FormControl>
-
- <div className={classes.buttons}>
-
- <Button
- type="submit"
- variant="raised"
- disabled
- className={classes.button}
- onClick={this.handleRegister}>
- Register
- </Button>
-
- <Button
- type="submit"
- variant="raised"
- color="primary"
- disabled={!email || !password}
- className={classes.button}
- onClick={this.handleLogin}>
- Login
- </Button>
-
- </div>
+ <form onSubmit={this.handleLogin}>
+
+ <FormControl margin="normal" required fullWidth error={failed}>
+ <InputLabel htmlFor="email">Email</InputLabel>
+ <Input
+ id="email"
+ value={email}
+ autoComplete="email"
+ autoFocus
+ onChange={this.handleChange} />
+ { failed && <FormHelperText>Invalid username or password</FormHelperText> }
+ </FormControl>
+
+ <FormControl margin="normal" required fullWidth>
+ <InputLabel htmlFor="password">Password</InputLabel>
+ <Input
+ id="password"
+ type="password"
+ value={password}
+ autoComplete="current-password"
+ onChange={this.handleChange} />
+ </FormControl>
+
+ <div className={classes.buttons}>
+
+ <Button
+ type="button"
+ variant="raised"
+ disabled
+ className={classes.button}
+ onClick={this.handleRegister}>
+ Register
+ </Button>
+
+ <Button
+ type="submit"
+ variant="raised"
+ color="primary"
+ disabled={!email || !password}
+ className={classes.button}>
+ Login
+ </Button>
+
+ </div>
+
+ </form>
</Paper>
</main>
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 (
<div className={classes.root}>
- <MainToobar />
+ <MainToobar history={this.props.history} />
<div className={classes.mapContainer}>
<ContainerDimensions>
<MainMap/>
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 {
<Typography variant="title" color="inherit" className={classes.flex}>
Traccar
</Typography>
- <Button color="inherit">Logout</Button>
+ <Button color="inherit" onClick={this.handleLogout}>Logout</Button>
</Toolbar>
</AppBar>
);