diff options
| -rw-r--r-- | modern/src/DevicePage.js | 45 | ||||
| -rw-r--r-- | modern/src/LoginPage.js | 92 |
2 files changed, 79 insertions, 58 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js index e882de3..24a06d1 100644 --- a/modern/src/DevicePage.js +++ b/modern/src/DevicePage.js @@ -1,19 +1,52 @@ import React from 'react'; import MainToobar from './MainToolbar'; -import withStyles from '@material-ui/core/styles/withStyles'; -import withWidth from '@material-ui/core/withWidth'; import { useHistory } from 'react-router-dom'; +import { makeStyles } from '@material-ui/core/styles'; +import TextField from '@material-ui/core/TextField'; +import Container from '@material-ui/core/Container'; +import Button from '@material-ui/core/Button'; +import FormControl from '@material-ui/core/FormControl'; -const styles = theme => ({}); +import t from './common/localization'; + +const useStyles = makeStyles(theme => ({ + container: { + marginTop: theme.spacing(2), + }, + buttons: { + display: 'flex', + justifyContent: 'space-evenly', + '& > *': { + flexBasis: '33%', + }, + }, +})); const DevicePage = () => { const history = useHistory(); + const classes = useStyles(); return ( - <div> + <> <MainToobar history={history} /> - </div> + <Container maxWidth='xs' className={classes.container}> + <form> + <TextField margin="normal" fullWidth label={t('sharedName')} variant="filled" /> + <TextField margin="normal" fullWidth label={t('deviceIdentifier')} variant="filled" /> + <FormControl fullWidth margin="normal"> + <div className={classes.buttons}> + <Button type="button" color="primary" variant="outlined"> + {t('sharedCancel')} + </Button> + <Button type="button" color="primary" variant="contained"> + {t('sharedSave')} + </Button> + </div> + </FormControl> + </form> + </Container> + </> ); } -export default withWidth()(withStyles(styles)(DevicePage)); +export default DevicePage; diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 20375b9..cacfaec 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> |