Added Registration form

3 files changed, 259 insertions, 0 deletions

diff --git a/modern/src/components/LoginForm.js b/modern/src/components/LoginForm.js
new file mode 100644
index 0000000..d52a51d
--- /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 0000000..6d013f7
--- /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 0000000..c268f80
--- /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;