diff options
Diffstat (limited to 'modern/src')
| -rw-r--r-- | modern/src/LoginPage.js | 118 | ||||
| -rw-r--r-- | modern/src/components/LoginForm.js | 125 | ||||
| -rw-r--r-- | modern/src/components/RegisterForm.js | 122 | ||||
| -rw-r--r-- | modern/src/components/ResetPasswordForm.js | 12 | ||||
| -rw-r--r-- | modern/src/theme/palette.js | 2 |
5 files changed, 265 insertions, 114 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 30275e51..3d4b17f4 100644 --- a/modern/src/LoginPage.js +++ b/modern/src/LoginPage.js @@ -1,14 +1,8 @@ import React, { useState } from 'react'; -import { useDispatch } from 'react-redux'; -import { useHistory } from 'react-router-dom'; -import { sessionActions } from './store'; -import { Grid, useMediaQuery, makeStyles, InputLabel, Select, MenuItem, FormControl, Button, TextField, Paper, Link } from '@material-ui/core'; +import { useMediaQuery, makeStyles, Paper } from '@material-ui/core'; import { useTheme } from '@material-ui/core/styles'; -import RegisterDialog from './RegisterDialog'; -import { useSelector } from 'react-redux'; -import t from './common/localization'; -import Logo from './Logo'; +import LoginForm from './components/LoginForm'; const useStyles = makeStyles(theme => ({ root: { @@ -45,123 +39,23 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(5), width: "100%", }, - logo: { - textAlign: 'center', - }, })); 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 registrationEnabled = useSelector(state => state.session.server ? state.session.server['registration'] : false); + const [CurrentForm, setCurrentForm] = useState(() => LoginForm); const matches = useMediaQuery(theme.breakpoints.down('md')); - const handleEmailChange = (event) => { - setEmail(event.target.value); - } - - const handlePasswordChange = (event) => { - setPassword(event.target.value); - } - - const handleRegister = () => { - setRegisterDialogShown(true); - } - - const handleRegisterResult = () => { - setRegisterDialogShown(false); - } - - 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 ( <main className={classes.root}> <div className={classes.sidebar}> - {!matches && <Logo fill='#fff'/> } + {!matches && <img src='/logo.svg' alt='Traccar' /> } </div> <Paper className={classes.paper}> - <form className={classes.form} onSubmit={handleLogin}> - <Grid container direction='column' spacing={3}> - <Grid item className={classes.logo}> - {matches && <Logo fill='#333366'/>} - </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 - type='submit' - variant='contained' - color='secondary' - disabled={!email || !password} - fullWidth> - {t('loginLogin')} - </Button> - </Grid> - <Grid item container> - <Grid item> - <Button onClick={handleRegister} 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 underline="none">{t('loginReset')}</Link> - </Grid> - </Grid> - </Grid> + <form className={classes.form}> + <CurrentForm setCurrentForm={setCurrentForm} /> </form> </Paper> </main> diff --git a/modern/src/components/LoginForm.js b/modern/src/components/LoginForm.js new file mode 100644 index 00000000..d52a51dd --- /dev/null +++ b/modern/src/components/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/RegisterForm.js b/modern/src/components/RegisterForm.js new file mode 100644 index 00000000..6d013f70 --- /dev/null +++ b/modern/src/components/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/ResetPasswordForm.js b/modern/src/components/ResetPasswordForm.js new file mode 100644 index 00000000..c268f808 --- /dev/null +++ b/modern/src/components/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/theme/palette.js b/modern/src/theme/palette.js index 5a54b77f..5c93cfd2 100644 --- a/modern/src/theme/palette.js +++ b/modern/src/theme/palette.js @@ -1,5 +1,3 @@ -import { deepPurple, green } from '@material-ui/core/colors'; - const traccarPurple = '#333366'; const traccarGreen = '#4CAF50'; const traccarWhite = '#FFF'; |