diff options
author | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-11 22:14:39 +0000 |
---|---|---|
committer | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-11 22:14:39 +0000 |
commit | 1b93de84e2bf6a6532bdb03e1ae75e47061a4dca (patch) | |
tree | 8989ce8c6c5bb1d2a748ffe91895fe929c99dd5e /modern/src/components | |
parent | efe18c504a834760242937572b369530c552e589 (diff) | |
download | etbsa-traccar-web-1b93de84e2bf6a6532bdb03e1ae75e47061a4dca.tar.gz etbsa-traccar-web-1b93de84e2bf6a6532bdb03e1ae75e47061a4dca.tar.bz2 etbsa-traccar-web-1b93de84e2bf6a6532bdb03e1ae75e47061a4dca.zip |
Fixed linting
Diffstat (limited to 'modern/src/components')
-rw-r--r-- | modern/src/components/NavBar.js | 4 | ||||
-rw-r--r-- | modern/src/components/SideNav.js | 42 | ||||
-rw-r--r-- | modern/src/components/registration/LoginForm.js | 71 | ||||
-rw-r--r-- | modern/src/components/registration/RegisterForm.js | 82 | ||||
-rw-r--r-- | modern/src/components/registration/ResetPasswordForm.js | 13 |
5 files changed, 111 insertions, 101 deletions
diff --git a/modern/src/components/NavBar.js b/modern/src/components/NavBar.js index 68e38bf..93e79bb 100644 --- a/modern/src/components/NavBar.js +++ b/modern/src/components/NavBar.js @@ -1,5 +1,7 @@ import React from 'react'; -import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core'; +import { + AppBar, Toolbar, Typography, IconButton, +} from '@material-ui/core'; import MenuIcon from '@material-ui/icons/Menu'; const Navbar = ({ setOpenDrawer, title }) => ( diff --git a/modern/src/components/SideNav.js b/modern/src/components/SideNav.js index 8bd43ac..aa07808 100644 --- a/modern/src/components/SideNav.js +++ b/modern/src/components/SideNav.js @@ -1,5 +1,7 @@ import React from 'react'; -import { List, ListItem, ListItemText, ListItemIcon, Divider, ListSubheader } from '@material-ui/core'; +import { + List, ListItem, ListItemText, ListItemIcon, Divider, ListSubheader, +} from '@material-ui/core'; import { Link, useLocation } from 'react-router-dom'; const SideNav = ({ routes }) => { @@ -7,26 +9,24 @@ const SideNav = ({ routes }) => { return ( <List disablePadding style={{ paddingTop: '16px' }}> - {routes.map((route, index) => - route.subheader ? ( - <> - <Divider /> - <ListSubheader>{route.subheader}</ListSubheader> - </> - ) : ( - <ListItem - disableRipple - component={Link} - key={route.href || route.subheader} - button - to={route.href} - selected={location.pathname.match(route.match || route.href)} - > - <ListItemIcon>{route.icon}</ListItemIcon> - <ListItemText primary={route.name} /> - </ListItem> - ) - )} + {routes.map((route, index) => (route.subheader ? ( + <> + <Divider /> + <ListSubheader>{route.subheader}</ListSubheader> + </> + ) : ( + <ListItem + disableRipple + component={Link} + key={route.href || route.subheader} + button + to={route.href} + selected={location.pathname.match(route.match || route.href)} + > + <ListItemIcon>{route.icon}</ListItemIcon> + <ListItemText primary={route.name} /> + </ListItem> + )))} </List> ); }; diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js index 382b4fd..e083541 100644 --- a/modern/src/components/registration/LoginForm.js +++ b/modern/src/components/registration/LoginForm.js @@ -1,24 +1,25 @@ import React, { useState } from 'react'; -import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link } from '@material-ui/core'; +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 StartPage from './../../StartPage'; +import StartPage from '../../StartPage'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ logoContainer: { textAlign: 'center', color: theme.palette.primary.main, }, resetPassword: { cursor: 'pointer', - } + }, })); const LoginForm = () => { - const classes = useStyles(); const dispatch = useDispatch(); const history = useHistory(); @@ -27,16 +28,16 @@ const LoginForm = () => { 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 emailEnabled = useSelector(state => state.session.server ? state.session.server['emailEnabled'] : false); + const registrationEnabled = useSelector((state) => (state.session.server ? state.session.server.registration : false)); + const emailEnabled = useSelector((state) => (state.session.server ? state.session.server.emailEnabled : false)); const handleEmailChange = (event) => { setEmail(event.target.value); - } + }; const handlePasswordChange = (event) => { setPassword(event.target.value); - } + }; const handleLogin = async (event) => { event.preventDefault(); @@ -49,38 +50,40 @@ const LoginForm = () => { setFailed(true); setPassword(''); } - } + }; - const handleSpecialKey = e => { + const handleSpecialKey = (e) => { if (e.keyCode === 13 && email && password) { handleLogin(e); } - } + }; return ( <StartPage> - <Grid container direction='column' spacing={2}> - {useMediaQuery(theme.breakpoints.down('md')) && + <Grid container direction="column" spacing={2}> + {useMediaQuery(theme.breakpoints.down('md')) + && ( <Grid item className={classes.logoContainer}> <svg height="64" width="240"> - <use xlinkHref="/logo.svg#img"></use> + <use xlinkHref="/logo.svg#img" /> </svg> </Grid> - } + )} <Grid item> <TextField required fullWidth error={failed} label={t('userEmail')} - name='email' + name="email" value={email} - autoComplete='email' + autoComplete="email" autoFocus onChange={handleEmailChange} onKeyUp={handleSpecialKey} helperText={failed && 'Invalid username or password'} - variant='filled' /> + variant="filled" + /> </Grid> <Grid item> <TextField @@ -88,22 +91,24 @@ const LoginForm = () => { fullWidth error={failed} label={t('userPassword')} - name='password' + name="password" value={password} - type='password' - autoComplete='current-password' + type="password" + autoComplete="current-password" onChange={handlePasswordChange} onKeyUp={handleSpecialKey} - variant='filled' /> + variant="filled" + /> </Grid> <Grid item> - <Button + <Button onClick={handleLogin} onKeyUp={handleSpecialKey} - variant='contained' - color='secondary' + variant="contained" + color="secondary" disabled={!email || !password} - fullWidth> + fullWidth + > {t('loginLogin')} </Button> </Grid> @@ -122,14 +127,16 @@ const LoginForm = () => { </FormControl> </Grid> </Grid> - {emailEnabled && <Grid item container justify="flex-end"> + {emailEnabled && ( + <Grid item container justify="flex-end"> <Grid item> - <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> + <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> </Grid> - </Grid>} + </Grid> + )} </Grid> </StartPage> - ) -} + ); +}; export default LoginForm; diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js index b2a8222..06f5355 100644 --- a/modern/src/components/registration/RegisterForm.js +++ b/modern/src/components/registration/RegisterForm.js @@ -1,27 +1,28 @@ import React, { useState } from 'react'; -import { Grid, Button, TextField, Typography, Link, makeStyles, Snackbar } from '@material-ui/core'; +import { + Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, +} from '@material-ui/core'; import { useHistory } from 'react-router-dom'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; -import StartPage from './../../StartPage'; -import t from './../../common/localization'; +import StartPage from '../../StartPage'; +import t from '../../common/localization'; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ register: { fontSize: theme.spacing(3), fontWeight: 500, marginLeft: theme.spacing(2), - textTransform: "uppercase" + textTransform: 'uppercase', }, link: { fontSize: theme.spacing(3), fontWeight: 500, marginTop: theme.spacing(0.5), - cursor: 'pointer' - } + cursor: 'pointer', + }, })); const RegisterForm = () => { - const classes = useStyles(); const history = useHistory(); @@ -30,21 +31,19 @@ const RegisterForm = () => { const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); - const submitDisabled = () => { - return !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; - } + const submitDisabled = () => !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}) + body: JSON.stringify({ name, email, password }), }); if (response.ok) { setSnackbarOpen(true); - } - } + } + }; return ( <StartPage> @@ -53,18 +52,19 @@ const RegisterForm = () => { open={snackbarOpen} onClose={() => history.push('/login')} autoHideDuration={6000} - message={t('loginCreated')} /> - <Grid container direction='column' spacing={2}> + message={t('loginCreated')} + /> + <Grid container direction="column" spacing={2}> <Grid container item> <Grid item> - <Typography className={classes.link} color='primary'> + <Typography className={classes.link} color="primary"> <Link onClick={() => history.push('/login')}> <ArrowBackIcon /> </Link> </Typography> </Grid> <Grid item xs> - <Typography className={classes.register} color='primary'> + <Typography className={classes.register} color="primary"> {t('loginRegister')} </Typography> </Grid> @@ -74,50 +74,54 @@ const RegisterForm = () => { required fullWidth label={t('sharedName')} - name='name' + name="name" value={name || ''} - autoComplete='name' + autoComplete="name" autoFocus - onChange={event => setName(event.target.value)} - variant='filled' /> + onChange={(event) => setName(event.target.value)} + variant="filled" + /> </Grid> <Grid item> <TextField required fullWidth - type='email' + type="email" label={t('userEmail')} - name='email' + name="email" value={email || ''} - autoComplete='email' - onChange={event => setEmail(event.target.value)} - variant='filled' /> + autoComplete="email" + onChange={(event) => setEmail(event.target.value)} + variant="filled" + /> </Grid> <Grid item> <TextField required fullWidth label={t('userPassword')} - name='password' + name="password" value={password || ''} - type='password' - autoComplete='current-password' - onChange={event => setPassword(event.target.value)} - variant='filled' /> + type="password" + autoComplete="current-password" + onChange={(event) => setPassword(event.target.value)} + variant="filled" + /> </Grid> <Grid item> <Button - variant='contained' - color="secondary" - onClick={handleRegister} + variant="contained" + color="secondary" + onClick={handleRegister} disabled={submitDisabled()} - fullWidth> - {t('loginRegister')} + fullWidth + > + {t('loginRegister')} </Button> </Grid> </Grid> </StartPage> - ) -} + ); +}; export default RegisterForm; diff --git a/modern/src/components/registration/ResetPasswordForm.js b/modern/src/components/registration/ResetPasswordForm.js index c268f80..f4dd2e4 100644 --- a/modern/src/components/registration/ResetPasswordForm.js +++ b/modern/src/components/registration/ResetPasswordForm.js @@ -1,12 +1,9 @@ import React from 'react'; -const ResetPasswordForm = () => { - - return ( - <> - <div>Reset Password Comming Soon!!!</div> - </> - ) -} +const ResetPasswordForm = () => ( + <> + <div>Reset Password Comming Soon!!!</div> + </> +); export default ResetPasswordForm; |