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};