Update devices and login views

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>