diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-06-13 11:59:00 -0700 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-06-13 11:59:00 -0700 |
commit | 505aec2ef38d52d46d2ff11e5f62f1aee0cc1417 (patch) | |
tree | d77237fc7eefdabb37d0ea3d347e0ac6230ef652 /modern/src/LoginPage.js | |
parent | cf20c43948b83539a9a049a81796e15509c393b4 (diff) | |
download | trackermap-web-505aec2ef38d52d46d2ff11e5f62f1aee0cc1417.tar.gz trackermap-web-505aec2ef38d52d46d2ff11e5f62f1aee0cc1417.tar.bz2 trackermap-web-505aec2ef38d52d46d2ff11e5f62f1aee0cc1417.zip |
Update devices and login views
Diffstat (limited to 'modern/src/LoginPage.js')
-rw-r--r-- | modern/src/LoginPage.js | 92 |
1 files changed, 40 insertions, 52 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 20375b98..cacfaecb 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -3,19 +3,16 @@ import { useDispatch } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { sessionActions } from './store'; 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 { makeStyles } from '@material-ui/core'; +import TextField from '@material-ui/core/TextField'; import t from './common/localization'; const useStyles = makeStyles(theme => ({ root: { width: 'auto', - display: 'block', // Fix IE11 issue. marginLeft: theme.spacing(3), marginRight: theme.spacing(3), [theme.breakpoints.up(400 + theme.spacing(3 * 2))]: { @@ -29,19 +26,18 @@ const useStyles = makeStyles(theme => ({ display: 'flex', flexDirection: 'column', alignItems: 'center', - padding: `${theme.spacing(3)}px`, + padding: theme.spacing(3), }, logo: { - margin: `${theme.spacing(2)}px 0 ${theme.spacing(1)}px` + marginTop: theme.spacing(2) }, buttons: { - width: '100%', + marginTop: theme.spacing(1), display: 'flex', - flexDirection: 'row' - }, - button: { - flex: '1 1 0', - margin: `${theme.spacing(3)}px ${theme.spacing(1)}px 0` + justifyContent: 'space-evenly', + '& > *': { + flexBasis: '40%', + }, }, })); @@ -85,49 +81,41 @@ const LoginPage = () => { <Paper className={classes.paper}> <img className={classes.logo} src="/logo.svg" alt="Traccar" /> <form onSubmit={handleLogin}> - <FormControl margin="normal" required fullWidth error={failed}> - <InputLabel htmlFor="email">{t('userEmail')}</InputLabel> - <Input - id="email" - name="email" - value={email} - autoComplete="email" - autoFocus - onChange={handleEmailChange} /> - {failed && <FormHelperText>Invalid username or password</FormHelperText>} - </FormControl> - <FormControl margin="normal" required fullWidth> - <InputLabel htmlFor="password">{t('userPassword')}</InputLabel> - <Input - id="password" - name="password" - type="password" - value={password} - autoComplete="current-password" - onChange={handlePasswordChange} /> - </FormControl> - - <div className={classes.buttons}> - <Button - type="button" - variant="contained" - disabled - className={classes.button} - onClick={handleRegister}> - {t('loginRegister')} - </Button> + <TextField + margin="normal" + required + fullWidth + error={failed} + label={t('userEmail')} + name="email" + value={email} + autoComplete="email" + autoFocus + onChange={handleEmailChange} + helperText={failed && 'Invalid username or password'} /> - <Button - type="submit" - variant="contained" - color="primary" - disabled={!email || !password} - className={classes.button}> - {t('loginLogin')} - </Button> + <TextField + margin="normal" + required + fullWidth + error={failed} + label={t('userPassword')} + name="password" + value={password} + autoComplete="current-password" + onChange={handlePasswordChange} /> - </div> + <FormControl fullWidth margin="normal"> + <div className={classes.buttons}> + <Button type="button" variant="contained" disabled onClick={handleRegister}> + {t('loginRegister')} + </Button> + <Button type="submit" variant="contained" color="primary" disabled={!email || !password}> + {t('loginLogin')} + </Button> + </div> + </FormControl> </form> </Paper> </main> |