aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2018-09-05 15:30:07 +1200
committerAnton Tananaev <anton.tananaev@gmail.com>2018-09-05 15:30:07 +1200
commitc1de0809d37eceb5194f5a9f8a76ebdea7504be8 (patch)
treee8d4e5ef30f3476e4c17dfc504c76383863d3069 /modern
parent568c3686c51b18c0ac05fc1dd3f534b4f72d8d76 (diff)
downloadetbsa-traccar-web-c1de0809d37eceb5194f5a9f8a76ebdea7504be8.tar.gz
etbsa-traccar-web-c1de0809d37eceb5194f5a9f8a76ebdea7504be8.tar.bz2
etbsa-traccar-web-c1de0809d37eceb5194f5a9f8a76ebdea7504be8.zip
Improve login screen
Diffstat (limited to 'modern')
-rw-r--r--modern/public/logo.svg33
-rw-r--r--modern/src/LoginPage.js103
2 files changed, 113 insertions, 23 deletions
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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg id="svg2985" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 240 64" width="240" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata id="metadata2990">
+ <rdf:RDF>
+ <cc:Work rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+ <dc:title/>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g id="layer1">
+ <rect id="rect3778" height="64" width="236.1" y="0" x="0" fill="none"/>
+ <ellipse id="path3038" rx="28.995" ry="28.995" transform="rotate(-30)" cy="43.713" cx="11.713" stroke-width="10.699" fill="#fff"/>
+ <g fill="#336">
+ <circle id="path2993" stroke-width="1.3262" transform="rotate(-30)" cy="43.713" cx="9.4364" r="2.2765"/>
+ <path id="path3004" d="m37.012 24.177-2.8428 3.6128c0.66345 0.52205 1.3255 1.1576 1.7734 1.9333 0.4479 0.77578 0.66726 1.6669 0.78764 2.5025l4.5502-0.65558c-0.193-1.42-0.633-2.804-1.394-4.123s-1.74-2.391-2.874-3.27z" stroke-width="1.0095"/>
+ <path id="path3014" d="m42.504 16.9-2.8428 3.6128c1.607 1.2355 3.0914 2.7935 4.1679 4.6581s1.6835 3.9291 1.95 5.9386l4.5502-0.65558c-0.33967-2.5954-1.1669-5.1513-2.5573-7.5594-1.3903-2.4081-3.1901-4.4025-5.268-5.9944z" stroke-width="1.0095"/>
+ <path id="path3036" d="m2.607 52.819a9.1058 9.1058 0 0 1 -7.8859 -4.5529 9.1058 9.1058 0 0 1 0 -9.1058 9.1058 9.1058 0 0 1 7.8859 -4.5529l-2e-7 9.1058z" transform="rotate(-30)" stroke-width="3.6204"/>
+ <path id="path3038-8" d="m17.502 6.8895c-13.868 8.0065-18.619 25.74-10.612 39.608 8.006 13.868 25.739 18.619 39.608 10.613 13.868-8.007 18.619-25.74 10.613-39.609-8.007-13.868-25.74-18.619-39.609-10.612zm1.706 2.9541c12.237-7.0648 27.884-2.8722 34.948 9.3644 7.065 12.237 2.873 27.884-9.364 34.948-12.237 7.065-27.884 2.873-34.948-9.364-7.0652-12.237-2.8726-27.884 9.364-34.948z" stroke-width="1.0095"/>
+ <g id="text3003" aria-label="Traccar">
+ <path id="path4172" d="m89.719 48.671h-3.915v-30.192h-10.663v-3.4775h25.241v3.4775h-10.663v30.192z"/>
+ <path id="path4174" d="m116.36 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.063 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43756 4.675h0.18424q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/>
+ <path id="path4176" d="m139.62 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0763-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5236 1.0824z"/>
+ <path id="path4178" d="m160.44 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8194 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4713-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/>
+ <path id="path4180" d="m182.92 49.131q-5.4811 0-8.498-3.3623-2.9939-3.3854-2.9939-9.5573 0-6.3332 3.0399-9.7876 3.063-3.4545 8.7052-3.4545 1.8193 0 3.6387 0.3915t2.8557 0.92119l-1.1745 3.2472q-1.2666-0.50665-2.7636-0.82907-1.4969-0.34544-2.6484-0.34544-7.6919 0-7.6919 9.8106 0 4.652 1.8654 7.1392 1.8884 2.4872 5.5732 2.4872 3.1551 0 6.4714-1.3588v3.3854q-2.5333 1.3127-6.3792 1.3127z"/>
+ <path id="path4182" d="m210.83 48.671-0.75998-3.5926h-0.18424q-1.8884 2.3721-3.7769 3.2242-1.8654 0.82907-4.675 0.82907-3.7538 0-5.8956-1.9345-2.1187-1.9345-2.1187-5.5041 0-7.6459 12.229-8.0143l4.2835-0.13818v-1.566q0-2.9708-1.2897-4.3756-1.2666-1.4278-4.0762-1.4278-3.1551 0-7.1392 1.9345l-1.1745-2.9248q1.8654-1.0133 4.0762-1.589 2.2339-0.57574 4.4678-0.57574 4.5138 0 6.6786 2.0036 2.1878 2.0036 2.1878 6.4253v17.226h-2.8326zm-8.6361-2.6945q3.5696 0 5.5962-1.9575 2.0496-1.9575 2.0496-5.4811v-2.2799l-3.8229 0.16121q-4.5599 0.16121-6.5865 1.4278-2.0036 1.2436-2.0036 3.892 0 2.0727 1.2436 3.1551 1.2666 1.0824 3.5235 1.0824z"/>
+ <path id="path4184" d="m233.08 22.969q1.6812 0 3.0169 0.27636l-0.52968 3.5466q-1.566-0.34544-2.7636-0.34544-3.0629 0-5.2508 2.4872-2.1648 2.4872-2.1648 6.195v13.541h-3.8229v-25.241h3.1551l0.43757 4.675h0.18423q1.4048-2.4642 3.3854-3.7999t4.3526-1.3357z"/>
+ </g>
+ </g>
+ </g>
+</svg>
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 (
<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 />
+
+ <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 name="password" type="password" id="password" autoComplete="current-password" />
+ <Input
+ id="password"
+ type="password"
+ value={password}
+ autoComplete="current-password"
+ onChange={this.handleChange} />
</FormControl>
- <Button type="submit" fullWidth variant="raised" color="primary" className={classes.submit} onClick={this.handleSubmit}>
- Login
- </Button>
+
+ <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>
+
</Paper>
</main>
);