1import React, {useCallback, useState, useMemo} from 'react';
  2import {Redirect} from 'react-router-dom';
  3import {useTranslation} from 'react-i18next';
  4import {useAuth} from 'strapi-react-context';
  5import TextField from '@material-ui/core/TextField';
  6import Button from '@material-ui/core/Button';
  7import CardContent from '@material-ui/core/CardContent';
  8import {CircularProgress} from '@material-ui/core';
  9import CardActions from '@material-ui/core/CardActions';
 10import {useToast} from '../../contexts/Toast';
 11
 12const SignIn = () => {
 13  const {t} = useTranslation();
 14  const {login, token, authState} = useAuth();
 15  const [isLoading, setIsLoading] = useState(false);
 16  const [email, setEmail] = useState('');
 17  const [password, setPassword] = useState('');
 18  const {addToast} = useToast();
 19
 20  const canSubmit = useMemo(
 21    () => [email, password].filter(s => s.length < 4).length === 0,
 22    [email, password]
 23  );
 24
 25  const onSubmit = useCallback(
 26    async evt => {
 27      if (evt.preventDefault) evt.preventDefault();
 28      if (isLoading) {
 29        return;
 30      }
 31      setIsLoading(true);
 32      try {
 33        await login(email, password);
 34        // TODO add to my event if saved in local storage
 35        // TODO remove from local storage.
 36      } catch (error) {
 37        console.log('ERROR', {error});
 38        if (error) {
 39          addToast(t('signin.errors'));
 40        }
 41      }
 42
 43      setIsLoading(false);
 44      return false;
 45    },
 46    [email, password, login, isLoading, addToast, t]
 47  );
 48
 49  if (token) {
 50    return <Redirect to="/dashboard" />;
 51  }
 52  if (authState && authState.user && !authState.user.confirmed) {
 53    return <Redirect to="/confirm" />;
 54  }
 55  return (
 56    <form onSubmit={onSubmit}>
 57      <CardContent>
 58        <TextField
 59          label={t('signin.email')}
 60          fullWidth
 61          required={true}
 62          margin="dense"
 63          value={email}
 64          onChange={({target: {value = ''}}) => setEmail(value)}
 65          id="SignInEmail"
 66          name="email"
 67          type="email"
 68        />
 69        <TextField
 70          label={t('signin.password')}
 71          fullWidth
 72          required={true}
 73          margin="dense"
 74          value={password}
 75          onChange={({target: {value = ''}}) => setPassword(value)}
 76          id="SignInEmail"
 77          name="password"
 78          type="password"
 79        />
 80      </CardContent>
 81      <CardActions>
 82        <Button
 83          color="primary"
 84          variant="contained"
 85          type="submit"
 86          disabled={!canSubmit}
 87          aria-disabled={!canSubmit}
 88          id="SignInSubmit"
 89        >
 90          {t('signin.login')}
 91          {isLoading && <CircularProgress size={20} />}
 92        </Button>
 93        <Button id="SignInRegister" href="/register">
 94          {t('signin.register')}
 95        </Button>
 96      </CardActions>
 97    </form>
 98  );
 99};
100
101export default SignIn;