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