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';
 11
 12const SignUp = () => {
 13  const {t} = useTranslation();
 14  const {signUp, authState = {}} = useAuth();
 15  const [isLoading, setIsLoading] = useState(false);
 16  const [firstName, setFirstName] = useState('');
 17  const [lastName, setLastName] = useState('');
 18  const [email, setEmail] = useState('');
 19  const [password, setPassword] = useState('');
 20
 21  const canSubmit = useMemo(
 22    () =>
 23      [firstName, lastName, email, password].filter(s => s.length < 4)
 24        .length === 0,
 25    [firstName, lastName, email, password]
 26  );
 27  const {addToast} = useToast();
 28
 29  const onSubmit = useCallback(
 30    async evt => {
 31      if (evt.preventDefault) evt.preventDefault();
 32      if (isLoading) return;
 33      setIsLoading(true);
 34      try {
 35        await signUp(email.replace(/\.@/, '_'), email, password, {
 36          firstName,
 37          lastName,
 38        });
 39      } catch (error) {
 40        if (error.kind && error.kind === 'bad_data')
 41          addToast(t('signup.errors.email_taken'));
 42        else if (error.kind) {
 43          addToast(t(`generic.errors.${error.kind}`));
 44        } else {
 45          addToast(t(`generic.errors.unknown`));
 46        }
 47      }
 48      console.log('SIGN UP');
 49
 50      setIsLoading(false);
 51      return false;
 52    },
 53    [firstName, lastName, email, password, addToast, signUp, t, isLoading]
 54  );
 55
 56  if (authState.user) {
 57    return authState.user.confirmed ? (
 58      <Redirect to="/dashboard" />
 59    ) : (
 60      <Redirect to="/register/success" />
 61    );
 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 && <CircularProgress />}
122        </Button>
123        <Button id="SignUpLogin" href="/login">
124          {t('signup.login')}
125        </Button>
126      </CardActions>
127    </form>
128  );
129};
130
131export default SignUp;