aboutsummaryrefslogtreecommitdiff
path: root/modern/src/LoginPage.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/LoginPage.js')
-rw-r--r--modern/src/LoginPage.js118
1 files changed, 6 insertions, 112 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>