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/CircularProgress';
 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 [error, setError] = useState('');
 26  const [firstName, setFirstName] = useState('');
 27  const [lastName, setLastName] = useState('');
 28  const [email, setEmail] = useState('');
 29  const [password, setPassword] = useState('');
 30
 31  const canSubmit = useMemo(
 32    () =>
 33      [firstName, lastName, email, password].filter(s => s.length < 2)
 34        .length === 0,
 35    [firstName, lastName, email, password]
 36  );
 37  const {addToast} = useToast();
 38
 39  const onSubmit = async evt => {
 40    if (evt.preventDefault) evt.preventDefault();
 41    if (isLoading) return;
 42    setIsLoading(true);
 43    try {
 44      await signUp(email.replace(/\.@/, '_'), email, password, {
 45        firstName,
 46        lastName,
 47        events: historyState.event ? [historyState.event] : [],
 48      });
 49    } catch (error) {
 50      if (error.kind && error.kind === 'bad_data') {
 51        setError(t('signup.errors.email_taken'));
 52      } else if (error.kind) {
 53        addToast(t(`generic.errors.${error.kind}`));
 54      } else {
 55        addToast(t(`generic.errors.unknown`));
 56      }
 57    }
 58    setIsLoading(false);
 59    return false;
 60  };
 61
 62  if (!!token && !isLoading) {
 63    return <Redirect to="/dashboard" />;
 64  }
 65
 66  return (
 67    <form onSubmit={onSubmit}>
 68      <CardContent className={classes.content}>
 69        <Typography variant="h6">{t('signup.title')}</Typography>
 70        <TextField
 71          label={t('signup.firstName')}
 72          fullWidth
 73          autoFocus
 74          margin="dense"
 75          value={firstName}
 76          required={true}
 77          onChange={({target: {value = ''}}) => setFirstName(value)}
 78          id="SignUpFirstName"
 79          name="firstName"
 80        />
 81        <TextField
 82          label={t('signup.lastName')}
 83          fullWidth
 84          required={true}
 85          margin="dense"
 86          value={lastName}
 87          onChange={({target: {value = ''}}) => setLastName(value)}
 88          id="SignUpLastName"
 89          name="lastName"
 90        />
 91        <TextField
 92          label={t('signup.email')}
 93          fullWidth
 94          required={true}
 95          error={!!error}
 96          helperText={error}
 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          gutterBottom
108          required={true}
109          margin="dense"
110          value={password}
111          onChange={({target: {value = ''}}) => setPassword(value)}
112          id="SignUpEmail"
113          name="password"
114          type="password"
115        />
116      </CardContent>
117      <CardActions className={classes.actions}>
118        <Button id="SignUpLogin" href="/login" variant="text">
119          {t('signup.login')}
120        </Button>
121        <Button
122          color="primary"
123          variant="contained"
124          type="submit"
125          disabled={!canSubmit}
126          className={classes.button}
127          aria-disabled={!canSubmit}
128          id="SignUpSubmit"
129          iconEnd={
130            isLoading && (
131              <CircularProgress
132                class={classes.loader}
133                size={20}
134                color="secondary"
135              />
136            )
137          }
138        >
139          {t('signup.submit')}
140        </Button>
141      </CardActions>
142    </form>
143  );
144};
145
146const useStyles = makeStyles(theme => ({
147  content: {
148    display: 'flex',
149    flexDirection: 'column',
150    alignItems: 'center',
151  },
152  loader: {
153    marginLeft: '14px',
154    color: theme.palette.background.paper,
155  },
156  actions: {
157    justifyContent: 'center',
158    marginBottom: theme.spacing(2),
159  },
160  button: {
161    margin: theme.spacing(1),
162  },
163}));
164export default SignUp;