aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/DevicePage.js45
-rw-r--r--modern/src/LoginPage.js92
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>