frontend/pages/auth/reset.tsx (view raw)
1import {useState} from 'react';
2import {useRouter} from 'next/router';
3import {useTranslation} from 'react-i18next';
4import useToastStore from '../../stores/useToastStore';
5import Layout from '../../layouts/Centered';
6import ResetPasswordContainer from '../../containers/ResetPassword';
7import {useResetPasswordMutation} from '../../generated/graphql';
8
9const ResetPassword = () => {
10 const router = useRouter();
11 const {code} = router.query;
12 const addToast = useToastStore(s => s.addToast);
13 const {t} = useTranslation();
14 const [resetPassword, {loading}] = useResetPasswordMutation();
15 const [password, setPassword] = useState('');
16 const [passwordConfirmation, setPasswordConfirmation] = useState('');
17 const [passwordError, setPasswordError] = useState('');
18
19 const onReset = async e => {
20 if (e.preventDefault) e.preventDefault();
21 try {
22 await resetPassword({
23 variables: {code: code as string, password, passwordConfirmation},
24 });
25 setPasswordError('');
26 addToast(t('lost_password.change_success'));
27 router.push('/auth/login');
28 } catch (err) {
29 if (err.message === 'Bad Request')
30 setPasswordError(t('generic.errors.unknown'));
31 }
32 };
33
34 return (
35 <Layout menuTitle={t('lost_password.reset_title')} displayMenu={false}>
36 <form onSubmit={onReset}>
37 <ResetPasswordContainer
38 isLoading={loading}
39 password={password}
40 setPassword={setPassword}
41 passwordConfirmation={passwordConfirmation}
42 setPasswordConfirmation={setPasswordConfirmation}
43 error={passwordError}
44 />
45 </form>
46 </Layout>
47 );
48};
49
50export default ResetPassword;