diff options
| -rw-r--r-- | modern/src/LoginPage.js | 92 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 2 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 19 |
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> ); |