app/src/containers/SignUp/SignUp.js (view raw)
1import React, {useCallback, 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 CardActionArea from '@material-ui/core/CardActions';
8import CardActions from '@material-ui/core/CardActions';
9import {useToast} from '../../contexts/Toast';
10import {Redirect} from 'react-router-dom';
11import {CircularProgress} from '@material-ui/core';
12
13export default () => {
14 const {t} = useTranslation();
15 const {signUp, token} = useAuth();
16 const [isLoading, setIsLoading] = useState(false);
17 const [firstName, setFirstName] = useState('');
18 const [lastName, setLastName] = useState('');
19 const [email, setEmail] = useState('');
20 const [password, setPassword] = useState('');
21
22 const canSubmit = useMemo(
23 () =>
24 [firstName, lastName, email, password].filter(s => s.length < 4)
25 .length === 0,
26 [firstName, lastName, email, password]
27 );
28 const {addToast} = useToast();
29
30 const onSubmit = useCallback(
31 async evt => {
32 if (evt.preventDefault) evt.preventDefault();
33 setIsLoading(true);
34 try {
35 const error = await signUp(email.replace(/\.@/, '_'), email, password, {
36 firstName,
37 lastName,
38 });
39 if (error) {
40 addToast(t('signup.errors.email_taken'));
41 }
42 } catch (error) {
43 console.log('ERROR', {error});
44 // if (error.statusCode && error.statusCode === 400) {
45 // const [message] = error.message.messages;
46 // console.log('add toast', message);
47 // addToast(message.message);
48 // }
49 }
50 console.log('SIGN UP');
51
52 setIsLoading(false);
53 return false;
54 },
55 [firstName, lastName, email, password, addToast, signUp]
56 );
57 if (isLoading) {
58 return (
59 <CardContent>
60 <CircularProgress />
61 </CardContent>
62 );
63 }
64
65 if (token) {
66 return <Redirect to="/dashboard" />;
67 }
68
69 return (
70 <form onSubmit={onSubmit}>
71 <CardContent>
72 <TextField
73 label={t('signup.firstName')}
74 fullWidth
75 autoFocus
76 margin="dense"
77 value={firstName}
78 required={true}
79 onChange={({target: {value = ''}}) => setFirstName(value)}
80 id="SignUpFirstName"
81 name="firstName"
82 />
83 <TextField
84 label={t('signup.lastName')}
85 fullWidth
86 required={true}
87 margin="dense"
88 value={lastName}
89 onChange={({target: {value = ''}}) => setLastName(value)}
90 id="SignUpLastName"
91 name="lastName"
92 />
93 <TextField
94 label={t('signup.email')}
95 fullWidth
96 required={true}
97 margin="dense"
98 value={email}
99 onChange={({target: {value = ''}}) => setEmail(value)}
100 id="SignUpEmail"
101 name="email"
102 type="email"
103 />
104 <TextField
105 label={t('signup.password')}
106 fullWidth
107 required={true}
108 margin="dense"
109 value={password}
110 onChange={({target: {value = ''}}) => setPassword(value)}
111 id="SignUpEmail"
112 name="password"
113 type="password"
114 />
115 </CardContent>
116 <CardActionArea>
117 <CardActions>
118 <Button
119 color="primary"
120 variant="contained"
121 type="submit"
122 disabled={!canSubmit}
123 aria-disabled={!canSubmit}
124 id="SignUpSubmit"
125 s
126 >
127 {t('signup.submit')}
128 </Button>
129 <Button id="SignUpLogin" href="/login">
130 {t('signup.login')}
131 </Button>
132 </CardActions>
133 </CardActionArea>
134 </form>
135 );
136};