app/src/containers/SignUpForm/index.js (view raw)
1import React, {useState, useMemo} from 'react';
2import {useTranslation} from 'react-i18next';
3import {useAuth} from 'strapi-react-context';
4import TextField from '@material-ui/core/TextField';
5import Button from '@material-ui/core/Button';
6import CardContent from '@material-ui/core/CardContent';
7import CardActions from '@material-ui/core/CardActions';
8import Typography from '@material-ui/core/Typography';
9import {useToast} from '../../contexts/Toast';
10import {Redirect} from 'react-router-dom';
11import {CircularProgress} from '@material-ui/core';
12import {makeStyles} from '@material-ui/core/styles';
13import {useHistory} from 'react-router-dom';
14
15const SignUp = () => {
16 const {t} = useTranslation();
17 const classes = useStyles();
18 const history = useHistory();
19 const {
20 location: {state: historyState = {}},
21 } = history;
22
23 const {signUp, token} = useAuth();
24 const [isLoading, setIsLoading] = useState(false);
25 const [firstName, setFirstName] = useState('');
26 const [lastName, setLastName] = useState('');
27 const [email, setEmail] = useState('');
28 const [password, setPassword] = useState('');
29
30 const canSubmit = useMemo(
31 () =>
32 [firstName, lastName, email, password].filter(s => s.length < 4)
33 .length === 0,
34 [firstName, lastName, email, password]
35 );
36 const {addToast} = useToast();
37
38 const onSubmit = async evt => {
39 if (evt.preventDefault) evt.preventDefault();
40 if (isLoading) return;
41 setIsLoading(true);
42 try {
43 await signUp(email.replace(/\.@/, '_'), email, password, {
44 firstName,
45 lastName,
46 events: historyState.event ? [historyState.event] : [],
47 });
48 } catch (error) {
49 if (error.kind && error.kind === 'bad_data')
50 addToast(t('signup.errors.email_taken'));
51 else if (error.kind) {
52 addToast(t(`generic.errors.${error.kind}`));
53 } else {
54 addToast(t(`generic.errors.unknown`));
55 }
56 }
57 setIsLoading(false);
58 return false;
59 };
60
61 if (!!token && !isLoading) {
62 return <Redirect to="/register/success" />;
63 }
64
65 return (
66 <form onSubmit={onSubmit}>
67 <CardContent className={classes.content}>
68 <Typography variant="h6">{t('signup.title')}</Typography>
69 <TextField
70 label={t('signup.firstName')}
71 fullWidth
72 autoFocus
73 margin="dense"
74 value={firstName}
75 required={true}
76 onChange={({target: {value = ''}}) => setFirstName(value)}
77 id="SignUpFirstName"
78 name="firstName"
79 />
80 <TextField
81 label={t('signup.lastName')}
82 fullWidth
83 required={true}
84 margin="dense"
85 value={lastName}
86 onChange={({target: {value = ''}}) => setLastName(value)}
87 id="SignUpLastName"
88 name="lastName"
89 />
90 <TextField
91 label={t('signup.email')}
92 fullWidth
93 required={true}
94 margin="dense"
95 value={email}
96 onChange={({target: {value = ''}}) => setEmail(value)}
97 id="SignUpEmail"
98 name="email"
99 type="email"
100 />
101 <TextField
102 label={t('signup.password')}
103 fullWidth
104 required={true}
105 margin="dense"
106 value={password}
107 onChange={({target: {value = ''}}) => setPassword(value)}
108 id="SignUpEmail"
109 name="password"
110 type="password"
111 />
112 </CardContent>
113 <CardActions className={classes.actions}>
114 <Button
115 color="primary"
116 variant="contained"
117 type="submit"
118 disabled={!canSubmit}
119 className={classes.button}
120 fullWidth
121 aria-disabled={!canSubmit}
122 id="SignUpSubmit"
123 >
124 {t('signup.submit')}
125 {isLoading && (
126 <CircularProgress
127 class={classes.loader}
128 size={20}
129 color="secondary"
130 />
131 )}
132 </Button>
133 <Button id="SignUpLogin" href="/login" fullWidth>
134 {t('signup.login')}
135 </Button>
136 </CardActions>
137 </form>
138 );
139};
140
141const useStyles = makeStyles(theme => ({
142 content: {
143 display: 'flex',
144 flexDirection: 'column',
145 alignItems: 'center',
146 },
147 loader: {
148 marginLeft: '14px',
149 },
150 actions: {
151 display: 'flex',
152 flexDirection: 'column',
153 alignItems: 'center',
154 },
155 button: {
156 margin: theme.spacing(1),
157 },
158}));
159export default SignUp;