Initial Login Screen Draft

3 files changed, 134 insertions, 53 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index 5fd10de..7ff090a 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ThemeProvider } from '@material-ui/core/styles';
 import { Switch, Route } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline';
 import MainPage from './MainPage';
@@ -31,11 +32,13 @@ import MaintenancePage from './settings/MaintenancePage';
 import StatisticsPage from './admin/StatisticsPage';
 import CachingController from './CachingController';
 
+import theme from './Theme';
+
 const App = () => {
   const initialized = useSelector(state => !!state.session.server && !!state.session.user);
 
   return (
-    <>
+    <ThemeProvider theme={theme}>
       <CssBaseline />
       <SocketController />
       <CachingController />
@@ -72,7 +75,7 @@ const App = () => {
           )}
         </Route>
       </Switch>
-    </>
+    </ThemeProvider>
   );
 }
 
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index d3be397..068b156 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -2,11 +2,17 @@ import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { sessionActions } from './store';
-import Button from '@material-ui/core/Button';
-import FormControl from '@material-ui/core/FormControl';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core';
-import TextField from '@material-ui/core/TextField';
+import { Grid, 
+         useMediaQuery, 
+         makeStyles, 
+         InputLabel, 
+         Select, 
+         MenuItem, 
+         FormControl, 
+         Button, 
+         TextField, 
+         Paper } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import RegisterDialog from './RegisterDialog';
 import { useSelector } from 'react-redux';
 
@@ -14,48 +20,53 @@ import t from './common/localization';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: 'auto',
-    marginLeft: theme.spacing(3),
-    marginRight: theme.spacing(3),
-    [theme.breakpoints.up(400 + theme.spacing(3 * 2))]: {
-      width: 400,
-      marginLeft: 'auto',
-      marginRight: 'auto',
+    display: 'flex',
+    height: '100vh',
+  },
+  sidebar: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: theme.palette.common.purple,
+    width: '28%',
+    [theme.breakpoints.down('xs')]: {
+      width: '0px',
     },
   },
   paper: {
-    marginTop: theme.spacing(8),
-    display: 'flex',
+    display:'flex',
     flexDirection: 'column',
+    justifyContent: 'center',
     alignItems: 'center',
-    padding: theme.spacing(3),
-  },
-  logo: {
-    marginTop: theme.spacing(2)
+    width: '100%',
+    padding: theme.spacing(8, 4),
+    boxShadow: '-2px 0px 16px rgba(0, 0, 0, 0.25)'
   },
-  buttons: {
+  form: {
     marginTop: theme.spacing(1),
-    display: 'flex',
-    justifyContent: 'space-evenly',
-    '& > *': {
-      flexBasis: '40%',
-    },
   },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+  register: {
+    marginTop: theme.spacing(2),
+  }
 }));
 
 const LoginPage = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const [failed, setFailed] = useState(false);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [registerDialogShown, setRegisterDialogShown] = useState(false);
-
-  const classes = useStyles();
-  const history = useHistory();
-
   const registrationEnabled =  useSelector(state => state.session.server ? state.session.server['registration'] : false);
- 
+  const matches = useMediaQuery(theme.breakpoints.down('md'));
+
   const handleEmailChange = (event) => {
     setEmail(event.target.value);
   }
@@ -87,10 +98,12 @@ const LoginPage = () => {
 
   return (
     <main className={classes.root}>
+      <div className={classes.sidebar}>
+        {!matches && <img src='/logo.svg' alt='Traccar' />}
+      </div>
       <Paper className={classes.paper}>
-        <img className={classes.logo} src='/logo.svg' alt='Traccar' />
-        <form onSubmit={handleLogin}>
-
+        {matches && <img src='/logo_main.svg' alt='Traccar' />}
+        <form className={classes.form} onSubmit={handleLogin}>
           <TextField
             margin='normal'
             required
@@ -102,8 +115,8 @@ const LoginPage = () => {
             autoComplete='email'
             autoFocus
             onChange={handleEmailChange}
-            helperText={failed && 'Invalid username or password'} />
-
+            helperText={failed && 'Invalid username or password'}
+            variant='filled' />
           <TextField
             margin='normal'
             required
@@ -114,27 +127,42 @@ const LoginPage = () => {
             value={password}
             type='password'
             autoComplete='current-password'
-            onChange={handlePasswordChange} />
-
-          <FormControl fullWidth margin='normal'>
-            <div className={classes.buttons}>
-              <Button type='button' variant='contained' onClick={handleRegister} disabled={!registrationEnabled}>
+            onChange={handlePasswordChange}
+            variant='filled' />
+          <Button 
+            type='submit'
+            variant='contained' 
+            color='secondary'
+            className={classes.submit}
+            disabled={!email || !password}
+            fullWidth>
+            {t('loginLogin')}
+          </Button>
+          <Grid container>
+            <Grid item xs={3}>
+              <Button className={classes.register} onClick={handleRegister} disabled={!registrationEnabled} color="secondary">
                 {t('loginRegister')}
               </Button>
-              <Button type='submit' variant='contained' color='primary' disabled={!email || !password}>
-                {t('loginLogin')}
-              </Button>
-            </div>
-          </FormControl>
+            </Grid>
+            <Grid item xs={9}>
+              <FormControl variant="filled" margin="normal" fullWidth>
+                <InputLabel>{t('loginLanguage')}</InputLabel>
+                <Select>
+                  <MenuItem value="en">English</MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+          </Grid>
+          <Grid container justify="flex-end">
+            <Grid item>
+              <Button color="primary">
+                {t('loginReset')}
+              </Button>              
+            </Grid>
+          </Grid>
         </form>
-
-        {registerDialogShown && 
-          <RegisterDialog showDialog={true} onResult={handleRegisterResult} />
-        }
-      
       </Paper>
     </main>
-  );
+  )
 }
-
 export default LoginPage;
diff --git a/modern/src/Theme.js b/modern/src/Theme.js
new file mode 100644
index 0000000..4d534a4
--- /dev/null
+++ b/modern/src/Theme.js
@@ -0,0 +1,50 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const traccarPurple = '#333366';
+const traccarGreen = '#4CAF50';
+const traccarWhite = '#FFF';
+
+export default createMuiTheme({
+  palette: {  
+    common: {
+      purple: traccarPurple,
+      green: traccarGreen
+    },
+    primary: {
+      main: traccarPurple
+    },
+    secondary: {
+      main: traccarGreen,
+      contrastText: traccarWhite
+    }
+  },
+  overrides: {
+    MuiFormControl: {
+      root: {
+        height: '42px',
+      }
+    },    
+    MuiFilledInput: {
+      root: {
+        height: '42px',
+        borderRadius: '4px'
+      },
+      underline: {
+        "&:before": {
+          borderBottom: 'none',
+        },
+        "&:after": {
+          borderBottom: 'none',
+        },
+        "&:hover:before": {
+          borderBottom: 'none',
+        },             
+      }
+    },
+    MuiButton: {
+      root: {
+        height: '42px',
+      }
+    }
+  } 
+});