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