Added Registration form

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>