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
12export default () => {
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};