1import {useState} from 'react';
 2import {useTranslation} from 'react-i18next';
 3import {useRouter} from 'next/router';
 4import Layout from '../../layouts/Centered';
 5import ResetPasswordContainer from '../../containers/ResetPassword';
 6import useToastStore from '../../stores/useToastStore';
 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('/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;