1import React, {useCallback, useState, useMemo} from 'react';
  2import {Redirect, Link as RouterLink} 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 Link from '@material-ui/core/Link';
  8
  9import CardContent from '@material-ui/core/CardContent';
 10import {CircularProgress} from '@material-ui/core';
 11import CardActions from '@material-ui/core/CardActions';
 12import {useToast} from '../../contexts/Toast';
 13import {makeStyles} from '@material-ui/core/styles';
 14
 15const SignIn = () => {
 16  const {t} = useTranslation();
 17  const classes = useStyles();
 18
 19  const {login, token, authState} = useAuth();
 20  const [isLoading, setIsLoading] = useState(false);
 21  const [error, setError] = useState('');
 22  const [email, setEmail] = useState('');
 23  const [password, setPassword] = useState('');
 24  const {addToast} = useToast();
 25
 26  const canSubmit = useMemo(
 27    () => [email, password].filter(s => s.length < 4).length === 0,
 28    [email, password]
 29  );
 30
 31  const onSubmit = useCallback(
 32    async evt => {
 33      if (evt.preventDefault) evt.preventDefault();
 34      if (isLoading) {
 35        return;
 36      }
 37      setIsLoading(true);
 38      try {
 39        await login(email, password);
 40        // TODO add to my event if saved in local storage
 41        // TODO remove from local storage.
 42      } catch (error) {
 43        console.log('ERROR', {error});
 44        if (error.kind === 'bad_data') {
 45          setError(t('signin.errors'));
 46          addToast(t('signin.errors'));
 47        }
 48      }
 49
 50      setIsLoading(false);
 51      return false;
 52    },
 53    [email, password, login, isLoading, addToast, t]
 54  );
 55
 56  if (token) {
 57    return <Redirect to="/dashboard" />;
 58  }
 59  if (authState && authState.user && !authState.user.confirmed) {
 60    return <Redirect to="/confirm" />;
 61  }
 62  return (
 63    <form onSubmit={onSubmit}>
 64      <CardContent>
 65        <TextField
 66          label={t('signin.email')}
 67          fullWidth
 68          required={true}
 69          margin="dense"
 70          value={email}
 71          onChange={({target: {value = ''}}) => setEmail(value)}
 72          id="SignInEmail"
 73          name="email"
 74          type="email"
 75          error={!!error}
 76          helperText={error}
 77        />
 78        <TextField
 79          label={t('signin.password')}
 80          fullWidth
 81          required={true}
 82          margin="dense"
 83          value={password}
 84          onChange={({target: {value = ''}}) => setPassword(value)}
 85          id="SignInEmail"
 86          name="password"
 87          type="password"
 88          error={!!error}
 89          helperText={
 90            error && (
 91              <RouterLink to="/lost-password" component={Link}>
 92                {t('lost_password.message')}
 93              </RouterLink>
 94            )
 95          }
 96        />
 97      </CardContent>
 98      <CardActions>
 99        <Button
100          color="primary"
101          variant="contained"
102          type="submit"
103          disabled={!canSubmit}
104          aria-disabled={!canSubmit}
105          id="SignInSubmit"
106        >
107          {t('signin.login')}
108          {isLoading && (
109            <CircularProgress className={classes.loader} size={20} />
110          )}
111        </Button>
112        <Button id="SignInRegister" href="/register">
113          {t('signin.register')}
114        </Button>
115      </CardActions>
116    </form>
117  );
118};
119
120const useStyles = makeStyles(theme => ({
121  loader: {
122    marginLeft: '14px',
123  },
124}));
125export default SignIn;