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 {Link} from '@material-ui/core';
  7import CardContent from '@material-ui/core/CardContent';
  8import CardActionArea from '@material-ui/core/CardActions';
  9import CardActions from '@material-ui/core/CardActions';
 10
 11export default () => {
 12  const {t} = useTranslation();
 13  const {signUp} = useAuth();
 14  const [isLoading, setIsLoading] = useState(false);
 15  const [firstName, setFirstName] = useState('');
 16  const [lastName, setLastName] = useState('');
 17  const [email, setEmail] = useState('');
 18  const [password, setPassword] = useState('');
 19
 20  const canSubmit = useMemo(
 21    () =>
 22      [firstName, lastName, email, password].filter(s => s.length < 4)
 23        .length === 0,
 24    [firstName, lastName, email, password]
 25  );
 26
 27  const onSubmit = useCallback(async () => {
 28    setIsLoading(true);
 29    try {
 30      await signUp(email, email, password, {firstName, lastName});
 31    } catch (error) {
 32      console.error(error);
 33    }
 34    setIsLoading(false);
 35  }, [firstName, lastName, email, password]);
 36  return (
 37    <form onSubmit={onSubmit}>
 38      <CardContent>
 39        <TextField
 40          label={t('signup.firstName')}
 41          fullWidth
 42          autoFocus
 43          margin="dense"
 44          value={firstName}
 45          required={true}
 46          onChange={({target: {value = ''}}) => setFirstName(value)}
 47          id="SignUpFirstName"
 48          name="firstName"
 49        />
 50        <TextField
 51          label={t('signup.lastName')}
 52          fullWidth
 53          required={true}
 54          margin="dense"
 55          value={lastName}
 56          onChange={({target: {value = ''}}) => setLastName(value)}
 57          id="SignUpLastName"
 58          name="lastName"
 59        />
 60        <TextField
 61          label={t('signup.email')}
 62          fullWidth
 63          required={true}
 64          margin="dense"
 65          value={email}
 66          onChange={({target: {value = ''}}) => setEmail(value)}
 67          id="SignUpEmail"
 68          name="email"
 69          type="email"
 70        />
 71        <TextField
 72          label={t('signup.password')}
 73          fullWidth
 74          required={true}
 75          margin="dense"
 76          value={password}
 77          onChange={({target: {value = ''}}) => setPassword(value)}
 78          id="SignUpEmail"
 79          name="password"
 80          type="password"
 81        />
 82      </CardContent>
 83      <CardActionArea>
 84        <CardActions>
 85          <Button
 86            color="primary"
 87            variant="contained"
 88            type="submit"
 89            disabled={!canSubmit}
 90            aria-disabled={!canSubmit}
 91            id="SignUpSubmit"
 92            s
 93          >
 94            {t('signup.submit')}
 95          </Button>
 96          <Link id="SignUpLogin" href="/login">
 97            {t('signup.login')}
 98          </Link>
 99        </CardActions>
100      </CardActionArea>
101    </form>
102  );
103};