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="/dashboard" />;
 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;