Implement logout button

3 files changed, 62 insertions, 51 deletions

diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index 3ba6bacb..ac4a51ce 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 36181a98..6db458ec 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 1420135f..0a21d945 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>
     );