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