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';
8import pageUtils from '../../lib/pageUtils';
9
10const ResetPassword = () => {
11 const router = useRouter();
12 const {code} = router.query;
13 const addToast = useToastStore(s => s.addToast);
14 const {t} = useTranslation();
15 const [resetPassword, {loading}] = useResetPasswordMutation();
16 const [password, setPassword] = useState('');
17 const [passwordConfirmation, setPasswordConfirmation] = useState('');
18 const [passwordError, setPasswordError] = useState('');
19
20 const onReset = async e => {
21 if (e.preventDefault) e.preventDefault();
22 try {
23 await resetPassword({
24 variables: {code: code as string, password, passwordConfirmation},
25 });
26 setPasswordError('');
27 addToast(t('lost_password.change_success'));
28 router.push('/auth/login');
29 } catch (err) {
30 if (err.message === 'Bad Request')
31 setPasswordError(t('generic.errors.unknown'));
32 }
33 };
34
35 return (
36 <Layout menuTitle={t('lost_password.reset_title')} displayMenu={false}>
37 <form onSubmit={onReset}>
38 <ResetPasswordContainer
39 isLoading={loading}
40 password={password}
41 setPassword={setPassword}
42 passwordConfirmation={passwordConfirmation}
43 setPasswordConfirmation={setPasswordConfirmation}
44 error={passwordError}
45 />
46 </form>
47 </Layout>
48 );
49};
50
51export const getServerSideProps = pageUtils.getServerSideProps();
52
53export default ResetPassword;