From 505aec2ef38d52d46d2ff11e5f62f1aee0cc1417 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Sat, 13 Jun 2020 11:59:00 -0700
Subject: Update devices and login views

---
 modern/src/LoginPage.js | 92 +++++++++++++++++++++----------------------------
 1 file changed, 40 insertions(+), 52 deletions(-)

(limited to 'modern/src/LoginPage.js')

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>
-- 
cgit v1.2.3