diff options
author | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-05-08 18:20:48 +0530 |
---|---|---|
committer | Ashutosh Bishnoi <mail2bishnoi@gmail.com> | 2021-05-08 18:20:48 +0530 |
commit | ca9d842c875c8867aca8ec7c5f533bde1be3f975 (patch) | |
tree | a99bc33abf3b73223be3a9230a8c5693fc554bb3 /modern/src/LoginPage.js | |
parent | 47f8bd006edf77b1325ecb36e594eed2fa0dd26e (diff) | |
download | etbsa-traccar-web-ca9d842c875c8867aca8ec7c5f533bde1be3f975.tar.gz etbsa-traccar-web-ca9d842c875c8867aca8ec7c5f533bde1be3f975.tar.bz2 etbsa-traccar-web-ca9d842c875c8867aca8ec7c5f533bde1be3f975.zip |
Added Registration form
Diffstat (limited to 'modern/src/LoginPage.js')
-rw-r--r-- | modern/src/LoginPage.js | 118 |
1 files changed, 6 insertions, 112 deletions
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js index 30275e5..3d4b17f 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> |