diff --git a/packages/web/components/templates/auth/EmailForgotPassword.tsx b/packages/web/components/templates/auth/EmailForgotPassword.tsx index 36a853c56..1e7a3b7bc 100644 --- a/packages/web/components/templates/auth/EmailForgotPassword.tsx +++ b/packages/web/components/templates/auth/EmailForgotPassword.tsx @@ -1,19 +1,22 @@ import { SpanBox, VStack } from '../../elements/LayoutPrimitives' import { Button } from '../../elements/Button' import { StyledText } from '../../elements/StyledText' -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { BorderedFormInput, FormLabel } from '../../elements/FormElements' import { fetchEndpoint } from '../../../lib/appConfig' import { logoutMutation } from '../../../lib/networking/mutations/logoutMutation' import { useRouter } from 'next/router' import { formatMessage } from '../../../locales/en/messages' import { parseErrorCodes } from '../../../lib/queryParamParser' +import { Recaptcha } from '../../elements/Recaptcha' export function EmailForgotPassword(): JSX.Element { const router = useRouter() const [email, setEmail] = useState('') - const [errorMessage, setErrorMessage] = - useState(undefined) + const [errorMessage, setErrorMessage] = useState( + undefined + ) + const recaptchaTokenRef = useRef(null) useEffect(() => { if (!router.isReady) return @@ -63,6 +66,25 @@ export function EmailForgotPassword(): JSX.Element { + {process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY && ( + <> + { + if (recaptchaTokenRef.current) { + recaptchaTokenRef.current.value = token + } else { + console.log('error updating recaptcha token') + } + }} + /> + + + )} + {errorMessage && {errorMessage}}