diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2021-06-12 10:53:58 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-12 10:53:58 -0700 |
commit | b7928f760ab557be29ade8c4b8e1605feed6fd7f (patch) | |
tree | 3a416c82c71d71adf661c65e937047c78b986a95 /modern/src/components/registration/RegisterForm.js | |
parent | 6936f6debf0e122feae8caca0547a7949f05ff6f (diff) | |
parent | 94b0d73ce01f9c437e2fa9b0dfafca5bcb86f2e9 (diff) | |
download | etbsa-traccar-web-b7928f760ab557be29ade8c4b8e1605feed6fd7f.tar.gz etbsa-traccar-web-b7928f760ab557be29ade8c4b8e1605feed6fd7f.tar.bz2 etbsa-traccar-web-b7928f760ab557be29ade8c4b8e1605feed6fd7f.zip |
Merge pull request #852 from mail2bishnoi/reports
Update reports design
Diffstat (limited to 'modern/src/components/registration/RegisterForm.js')
-rw-r--r-- | modern/src/components/registration/RegisterForm.js | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js new file mode 100644 index 0000000..c2af04b --- /dev/null +++ b/modern/src/components/registration/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; |