Fix recaptcha handling during login & password reset flows; closes #2064

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -1,27 +1,40 @@
 import * as React from 'react';
+import { 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 { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
+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 { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const ref = useRef<Reaptcha>(null);
+    const [ token, setToken ] = useState('');
+
+    const { clearFlashes, addFlash } = useFlash();
+    const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
 
     const handleSubmission = ({ email }: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
-        setSubmitting(true);
         clearFlashes();
-        requestPasswordResetEmail(email)
+
+        // 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));
+            return;
+        }
+
+        requestPasswordResetEmail(email, token)
             .then(response => {
                 resetForm();
                 addFlash({ type: 'success', title: 'Success', message: response });
@@ -42,7 +55,7 @@ export default () => {
                     .required('A valid email address must be provided to continue.'),
             })}
         >
-            {({ isSubmitting }) => (
+            {({ isSubmitting, setSubmitting, submitForm }) => (
                 <LoginFormContainer
                     title={'Request Password Reset'}
                     css={tw`w-full flex`}
@@ -64,6 +77,21 @@ export default () => {
                             Send Email
                         </Button>
                     </div>
+                    {recaptchaEnabled &&
+                    <Reaptcha
+                        ref={ref}
+                        size={'invisible'}
+                        sitekey={siteKey || '_invalid_key'}
+                        onVerify={response => {
+                            setToken(response);
+                            submitForm();
+                        }}
+                        onExpire={() => {
+                            setSubmitting(false);
+                            setToken('');
+                        }}
+                    />
+                    }
                     <div css={tw`mt-6 text-center`}>
                         <Link
                             type={'button'}