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;