1import React, {useState} from 'react';
 2import {useLocation, useHistory, Redirect} from 'react-router-dom';
 3import {useAuth} from 'strapi-react-context';
 4import NotFound from './NotFound';
 5import ResetPasswordContainer from '../containers/ResetPassword';
 6import Layout from '../layouts/Centered';
 7import {useTranslation} from 'react-i18next';
 8import {useToast} from '../contexts/Toast';
 9
10const ResetPassword = () => {
11  const {resetPassword, token} = useAuth();
12  const {search} = useLocation();
13  const history = useHistory();
14  const [isLoading, setIsLoading] = useState(false);
15  const {addToast} = useToast();
16  const {t} = useTranslation();
17
18  const [password, setPassword] = useState('');
19  const [passwordConfirmation, setPasswordConfirmation] = useState('');
20  const [passwordError, setPasswordError] = useState('');
21  const code = new URLSearchParams(search).get('code');
22
23  const onReset = async evt => {
24    if (evt.preventDefault) evt.preventDefault();
25    setIsLoading(true);
26    try {
27      await resetPassword(code, password, passwordConfirmation);
28      setPasswordError('');
29      addToast(t('lost_password.change_success'));
30      history.push('/login');
31    } catch (err) {
32      if (err.kind === 'bad_data') {
33        setPasswordError(t('generic.errors.unknown'));
34      }
35    }
36    setIsLoading(false);
37  };
38
39  if (token) {
40    return <Redirect to="/dashboard" />;
41  }
42
43  if (!code) {
44    return <NotFound />;
45  }
46
47  return (
48    <Layout menuTitle={t('lost_password.reset_title')}>
49      <form onSubmit={onReset}>
50        <ResetPasswordContainer
51          isLoading={isLoading}
52          password={password}
53          setPassword={setPassword}
54          passwordConfirmation={passwordConfirmation}
55          setPasswordConfirmation={setPasswordConfirmation}
56          error={passwordError}
57        />
58      </form>
59    </Layout>
60  );
61};
62
63export default ResetPassword;