From f15034e5fe4e5c702975b8a0f583a9917c4b1b3b Mon Sep 17 00:00:00 2001
From: Ashutosh Bishnoi <mail2bishnoi@gmail.com>
Date: Sat, 22 May 2021 12:49:22 +0530
Subject: Resolving Comments and Observations

---
 modern/src/components/LoginForm.js                 | 125 ---------------------
 modern/src/components/RegisterForm.js              | 122 --------------------
 modern/src/components/ResetPasswordForm.js         |  12 --
 modern/src/components/registration/LoginForm.js    | 125 +++++++++++++++++++++
 modern/src/components/registration/RegisterForm.js | 122 ++++++++++++++++++++
 .../components/registration/ResetPasswordForm.js   |  12 ++
 modern/src/components/reports/ReportNavbar.js      |  34 ++++++
 modern/src/components/reports/ReportSidebar.js     |  30 +++++
 8 files changed, 323 insertions(+), 259 deletions(-)
 delete mode 100644 modern/src/components/LoginForm.js
 delete mode 100644 modern/src/components/RegisterForm.js
 delete mode 100644 modern/src/components/ResetPasswordForm.js
 create mode 100644 modern/src/components/registration/LoginForm.js
 create mode 100644 modern/src/components/registration/RegisterForm.js
 create mode 100644 modern/src/components/registration/ResetPasswordForm.js
 create mode 100644 modern/src/components/reports/ReportNavbar.js
 create mode 100644 modern/src/components/reports/ReportSidebar.js

(limited to 'modern/src/components')

diff --git a/modern/src/components/LoginForm.js b/modern/src/components/LoginForm.js
deleted file mode 100644
index d52a51d..0000000
--- a/modern/src/components/LoginForm.js
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { useState } from 'react';
-import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core';
-import { useTheme } from '@material-ui/core/styles';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import { sessionActions } from './../store';
-import t from './../common/localization';
-import RegisterForm from './RegisterForm';
-import ResetPasswordForm from './ResetPasswordForm';
-
-const useStyles = makeStyles(theme => ({
-  logoContainer: {
-    textAlign: 'center',
-  },
-  resetPassword: {
-    cursor: 'pointer',
-  }
-}));
-
-const forms = {
-  register: () => RegisterForm,
-  resetPassword: () => ResetPasswordForm,
-};
-
-const LoginForm = ({ setCurrentForm }) => {
-
-  const classes = useStyles();
-  const dispatch = useDispatch();
-  const history = useHistory();
-  const theme = useTheme();
-  const matches = useMediaQuery(theme.breakpoints.down('md'));
-
-  const [failed, setFailed] = useState(false);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const registrationEnabled =  useSelector(state => state.session.server ? state.session.server['registration'] : false);
-
-  const handleEmailChange = (event) => {
-    setEmail(event.target.value);
-  }
-
-  const handlePasswordChange = (event) => {
-    setPassword(event.target.value);
-  }
-
-  const handleLogin = async (event) => {
-    event.preventDefault();
-    const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) });
-    if (response.ok) {
-      const user = await response.json();
-      dispatch(sessionActions.updateUser(user));
-      history.push('/');
-    } else {
-      setFailed(true);
-      setPassword('');
-    }
-  }
-
-  return (
-    <Grid container direction='column' spacing={3}>
-      <Grid item className={classes.logoContainer}>
-        {matches && <img src='/logo.svg' alt='Traccar' />}
-      </Grid>    
-      <Grid item>
-        <TextField
-          required
-          fullWidth
-          error={failed}
-          label={t('userEmail')}
-          name='email'
-          value={email}
-          autoComplete='email'
-          autoFocus
-          onChange={handleEmailChange}
-          helperText={failed && 'Invalid username or password'}
-          variant='filled' />
-      </Grid>
-      <Grid item>
-        <TextField
-          required
-          fullWidth
-          error={failed}
-          label={t('userPassword')}
-          name='password'
-          value={password}
-          type='password'
-          autoComplete='current-password'
-          onChange={handlePasswordChange}
-          variant='filled' />
-      </Grid>
-      <Grid item>
-        <Button 
-          onClick={handleLogin}
-          variant='contained' 
-          color='secondary'
-          disabled={!email || !password}
-          fullWidth>
-          {t('loginLogin')}
-        </Button>
-      </Grid>
-      <Grid item container>
-        <Grid item>
-          <Button onClick={() => setCurrentForm(forms.register)} disabled={!registrationEnabled} color="secondary">
-            {t('loginRegister')}
-          </Button>
-        </Grid>
-        <Grid item xs>
-          <FormControl variant="filled" fullWidth>
-            <InputLabel>{t('loginLanguage')}</InputLabel>
-            <Select>
-              <MenuItem value="en">English</MenuItem>
-            </Select>
-          </FormControl>
-        </Grid>
-      </Grid>
-      <Grid item container justify="flex-end">
-        <Grid item>
-          <Link onClick={() => setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>              
-        </Grid>
-      </Grid>            
-    </Grid>
-  )
-}
-
-export default LoginForm;
diff --git a/modern/src/components/RegisterForm.js b/modern/src/components/RegisterForm.js
deleted file mode 100644
index 6d013f7..0000000
--- a/modern/src/components/RegisterForm.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { useState } from 'react';
-import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import LoginForm from './LoginForm';
-import t from './../common/localization';
-
-const useStyles = makeStyles(theme => ({
-  register: {
-    fontSize: theme.spacing(3),
-    fontWeight: 500
-  },
-  link: {
-    fontSize: theme.spacing(3),
-    fontWeight: 500,
-    marginTop: theme.spacing(0.5),
-    cursor: 'pointer' 
-  }
-}));
-
-const forms = {
-  login: () => LoginForm,
-};
-
-const RegisterForm = ({ setCurrentForm }) => {
-
-  const classes = useStyles();
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
-
-  const submitDisabled = () => {
-    return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password;
-  }
-
-  const handleRegister = async () => {
-    const response = await fetch('/api/users', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({name, email, password})
-    });
-
-    if (response.ok) {
-      setSnackbarOpen(true);
-    } 
-  }
-
-  return (
-    <>
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        open={snackbarOpen}
-        onClose={() => setCurrentForm(forms.login)}
-        autoHideDuration={6000}
-        message={t('loginCreated')} />    
-      <Grid container direction='column' spacing={3}>
-        <Grid container item>
-          <Grid item>
-            <Typography className={classes.link} color='primary'>
-              <Link onClick={() => setCurrentForm(forms.login)}>
-                <ArrowBackIcon />
-              </Link>
-            </Typography>
-          </Grid>
-          <Grid item xs>
-            <Typography className={classes.register} color='primary'>
-              {t('loginRegister')}
-            </Typography>
-          </Grid>
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            label={t('sharedName')}
-            name='name'
-            value={name || ''}
-            autoComplete='name'
-            autoFocus
-            onChange={event => setName(event.target.value)}
-            variant='filled' />        
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            type='email' 
-            label={t('userEmail')}
-            name='email'
-            value={email || ''}
-            autoComplete='email'
-            onChange={event => setEmail(event.target.value)}
-            variant='filled' />
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            label={t('userPassword')}
-            name='password'
-            value={password || ''}
-            type='password'
-            autoComplete='current-password'
-            onChange={event => setPassword(event.target.value)}
-            variant='filled' />
-        </Grid>
-        <Grid item>
-          <Button
-            variant='contained' 
-            color="secondary" 
-            onClick={handleRegister} 
-            disabled={submitDisabled()}
-            fullWidth>
-              {t('loginRegister')}
-          </Button>
-        </Grid>
-      </Grid>
-    </>
-  )
-}
-
-export default RegisterForm;
diff --git a/modern/src/components/ResetPasswordForm.js b/modern/src/components/ResetPasswordForm.js
deleted file mode 100644
index c268f80..0000000
--- a/modern/src/components/ResetPasswordForm.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-const ResetPasswordForm = () => {
-
-  return (
-    <>
-      <div>Reset Password Comming Soon!!!</div>
-    </>
-  )
-}
-
-export default ResetPasswordForm;
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
new file mode 100644
index 0000000..6469b31
--- /dev/null
+++ b/modern/src/components/registration/LoginForm.js
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { sessionActions } from '../../store';
+import t from '../../common/localization';
+import RegisterForm from './RegisterForm';
+import ResetPasswordForm from './ResetPasswordForm';
+
+const useStyles = makeStyles(theme => ({
+  logoContainer: {
+    textAlign: 'center',
+  },
+  resetPassword: {
+    cursor: 'pointer',
+  }
+}));
+
+const forms = {
+  register: () => RegisterForm,
+  resetPassword: () => ResetPasswordForm,
+};
+
+const LoginForm = ({ setCurrentForm }) => {
+
+  const classes = useStyles();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down('md'));
+
+  const [failed, setFailed] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const registrationEnabled =  useSelector(state => state.session.server ? state.session.server['registration'] : false);
+
+  const handleEmailChange = (event) => {
+    setEmail(event.target.value);
+  }
+
+  const handlePasswordChange = (event) => {
+    setPassword(event.target.value);
+  }
+
+  const handleLogin = async (event) => {
+    event.preventDefault();
+    const response = await fetch('/api/session', { method: 'POST', body: new URLSearchParams(`email=${email}&password=${password}`) });
+    if (response.ok) {
+      const user = await response.json();
+      dispatch(sessionActions.updateUser(user));
+      history.push('/');
+    } else {
+      setFailed(true);
+      setPassword('');
+    }
+  }
+
+  return (
+    <Grid container direction='column' spacing={3}>
+      <Grid item className={classes.logoContainer}>
+        {matches && <img src='/logo.svg' alt='Traccar' />}
+      </Grid>    
+      <Grid item>
+        <TextField
+          required
+          fullWidth
+          error={failed}
+          label={t('userEmail')}
+          name='email'
+          value={email}
+          autoComplete='email'
+          autoFocus
+          onChange={handleEmailChange}
+          helperText={failed && 'Invalid username or password'}
+          variant='filled' />
+      </Grid>
+      <Grid item>
+        <TextField
+          required
+          fullWidth
+          error={failed}
+          label={t('userPassword')}
+          name='password'
+          value={password}
+          type='password'
+          autoComplete='current-password'
+          onChange={handlePasswordChange}
+          variant='filled' />
+      </Grid>
+      <Grid item>
+        <Button 
+          onClick={handleLogin}
+          variant='contained' 
+          color='secondary'
+          disabled={!email || !password}
+          fullWidth>
+          {t('loginLogin')}
+        </Button>
+      </Grid>
+      <Grid item container>
+        <Grid item>
+          <Button onClick={() => setCurrentForm(forms.register)} disabled={!registrationEnabled} color="secondary">
+            {t('loginRegister')}
+          </Button>
+        </Grid>
+        <Grid item xs>
+          <FormControl variant="filled" fullWidth>
+            <InputLabel>{t('loginLanguage')}</InputLabel>
+            <Select>
+              <MenuItem value="en">English</MenuItem>
+            </Select>
+          </FormControl>
+        </Grid>
+      </Grid>
+      <Grid item container justify="flex-end">
+        <Grid item>
+          <Link onClick={() => setCurrentForm(forms.resetPassword)} className={classes.resetPassword} underline="none">{t('loginReset')}</Link>              
+        </Grid>
+      </Grid>            
+    </Grid>
+  )
+}
+
+export default LoginForm;
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
new file mode 100644
index 0000000..c2af04b
--- /dev/null
+++ b/modern/src/components/registration/RegisterForm.js
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import LoginForm from './LoginForm';
+import t from './../../common/localization';
+
+const useStyles = makeStyles(theme => ({
+  register: {
+    fontSize: theme.spacing(3),
+    fontWeight: 500
+  },
+  link: {
+    fontSize: theme.spacing(3),
+    fontWeight: 500,
+    marginTop: theme.spacing(0.5),
+    cursor: 'pointer' 
+  }
+}));
+
+const forms = {
+  login: () => LoginForm,
+};
+
+const RegisterForm = ({ setCurrentForm }) => {
+
+  const classes = useStyles();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+
+  const submitDisabled = () => {
+    return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password;
+  }
+
+  const handleRegister = async () => {
+    const response = await fetch('/api/users', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({name, email, password})
+    });
+
+    if (response.ok) {
+      setSnackbarOpen(true);
+    } 
+  }
+
+  return (
+    <>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={snackbarOpen}
+        onClose={() => setCurrentForm(forms.login)}
+        autoHideDuration={6000}
+        message={t('loginCreated')} />    
+      <Grid container direction='column' spacing={3}>
+        <Grid container item>
+          <Grid item>
+            <Typography className={classes.link} color='primary'>
+              <Link onClick={() => setCurrentForm(forms.login)}>
+                <ArrowBackIcon />
+              </Link>
+            </Typography>
+          </Grid>
+          <Grid item xs>
+            <Typography className={classes.register} color='primary'>
+              {t('loginRegister')}
+            </Typography>
+          </Grid>
+        </Grid>
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            label={t('sharedName')}
+            name='name'
+            value={name || ''}
+            autoComplete='name'
+            autoFocus
+            onChange={event => setName(event.target.value)}
+            variant='filled' />        
+        </Grid>
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            type='email' 
+            label={t('userEmail')}
+            name='email'
+            value={email || ''}
+            autoComplete='email'
+            onChange={event => setEmail(event.target.value)}
+            variant='filled' />
+        </Grid>
+        <Grid item>
+          <TextField
+            required
+            fullWidth
+            label={t('userPassword')}
+            name='password'
+            value={password || ''}
+            type='password'
+            autoComplete='current-password'
+            onChange={event => setPassword(event.target.value)}
+            variant='filled' />
+        </Grid>
+        <Grid item>
+          <Button
+            variant='contained' 
+            color="secondary" 
+            onClick={handleRegister} 
+            disabled={submitDisabled()}
+            fullWidth>
+              {t('loginRegister')}
+          </Button>
+        </Grid>
+      </Grid>
+    </>
+  )
+}
+
+export default RegisterForm;
diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js
new file mode 100644
index 0000000..c268f80
--- /dev/null
+++ b/modern/src/components/registration/ResetPasswordForm.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ResetPasswordForm = () => {
+
+  return (
+    <>
+      <div>Reset Password Comming Soon!!!</div>
+    </>
+  )
+}
+
+export default ResetPasswordForm;
diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
new file mode 100644
index 0000000..93c01a0
--- /dev/null
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+
+import MenuIcon from '@material-ui/icons/Menu';
+import t from '../../common/localization';
+
+const useStyles = makeStyles(theme => ({
+  menuButton: {
+  }
+}));
+const ReportNavbar = ({ openDrawer, setOpenDrawer, reportName }) => {
+  
+  const classes = useStyles();
+
+  return (
+    <AppBar position="fixed" color="inherit">
+      <Toolbar>
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          edge="start"
+          onClick={() => setOpenDrawer(!openDrawer)}
+          className={classes.menuButton}>
+          <MenuIcon />
+        </IconButton>
+        <Typography variant="h6" noWrap>
+          {t('reportTitle')} / {reportName}
+        </Typography>        
+      </Toolbar>
+    </AppBar> 
+  )
+}
+
+export default ReportNavbar;
diff --git a/modern/src/components/reports/ReportSidebar.js b/modern/src/components/reports/ReportSidebar.js
new file mode 100644
index 0000000..e42c36e
--- /dev/null
+++ b/modern/src/components/reports/ReportSidebar.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { AppBar, Toolbar, Typography, List, ListItem, ListItemText, ListItemIcon, Divider, Drawer, makeStyles, IconButton, Hidden } from '@material-ui/core';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+
+const ReportNavbar = ({ routes, setReportName }) => {
+
+  const location = useLocation();
+
+  return (
+    <List disablePadding>
+      {routes.map((route, index) => (
+        <ListItem
+          disableRipple
+          component={Link}
+          key={`${route}${index}`}
+          button
+          to={route.href}
+          selected={route.href === location.pathname}
+          onClick={() =>  setReportName(route.name)}>
+          <ListItemIcon>
+            {route.icon}
+          </ListItemIcon>
+          <ListItemText primary={route.name} />
+        </ListItem>
+      ))}
+    </List>
+  )
+}
+
+export default ReportNavbar;
-- 
cgit v1.2.3