1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import React, { useState } from 'react';
import {
Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, useTheme,
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import StartPage from '../../StartPage';
import t from '../../common/localization';
import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
const useStyles = makeStyles((theme) => ({
register: {
fontSize: theme.spacing(3),
fontWeight: 500,
marginLeft: theme.spacing(2),
textTransform: 'uppercase',
},
link: {
fontSize: theme.spacing(3),
fontWeight: 500,
marginTop: theme.spacing(0.5),
cursor: 'pointer',
},
}));
const RegisterForm = () => {
const classes = useStyles();
const history = useHistory();
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [snackbarOpen, setSnackbarOpen] = useState(false);
const theme = useTheme();
const submitDisabled = () => !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 (
<StartPage>
<Snackbar
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
open={snackbarOpen}
onClose={() => history.push('/login')}
autoHideDuration={6000}
message={t('loginCreated')}
/>
<Grid container direction="column" spacing={2}>
<Grid container item>
<Grid item>
<Typography className={classes.link} color="primary">
<Link onClick={() => history.push('/login')}>
{theme.direction === 'rtl' ? <ArrowForwardIcon /> : <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>
</StartPage>
);
};
export default RegisterForm;
|
