app/src/pages/ResetPassword.js (view raw)
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;