import * as React from 'react'; import { useEffect, useRef, useState } from 'react'; import { Link } from 'react-router-dom'; import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail'; import { httpErrorToHuman } from '@/api/http'; import LoginFormContainer from '@/components/auth/LoginFormContainer'; import { useStoreState } from 'easy-peasy'; import Field from '@/components/elements/Field'; import { Formik, FormikHelpers } from 'formik'; import { object, string } from 'yup'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; import Reaptcha from 'reaptcha'; import useFlash from '@/plugins/useFlash'; interface Values { email: string; } export default () => { const ref = useRef(null); const [ token, setToken ] = useState(''); const { clearFlashes, addFlash } = useFlash(); const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha); useEffect(() => { clearFlashes(); }, []); const handleSubmission = ({ email }: Values, { setSubmitting, resetForm }: FormikHelpers) => { clearFlashes(); // If there is no token in the state yet, request the token and then abort this submit request // since it will be re-submitted when the recaptcha data is returned by the component. if (recaptchaEnabled && !token) { ref.current!.execute().catch(error => { console.error(error); setSubmitting(false); addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) }); }); return; } requestPasswordResetEmail(email, token) .then(response => { resetForm(); addFlash({ type: 'success', title: 'Success', message: response }); }) .catch(error => { console.error(error); addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) }); }) .then(() => { setToken(''); if (ref.current) ref.current.reset(); setSubmitting(false); }); }; return ( {({ isSubmitting, setSubmitting, submitForm }) => (
{recaptchaEnabled && { setToken(response); submitForm(); }} onExpire={() => { setSubmitting(false); setToken(''); }} /> }
Return to Login
)}
); };