add recaptcha to the reset-password page

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<string>('')
-  const [errorMessage, setErrorMessage] =
-    useState<string | undefined>(undefined)
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
+  const recaptchaTokenRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (!router.isReady) return
@@ -63,6 +66,25 @@ export function EmailForgotPassword(): JSX.Element {
           </SpanBox>
         </VStack>
 
+        {process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY && (
+          <>
+            <Recaptcha
+              setRecaptchaToken={(token) => {
+                if (recaptchaTokenRef.current) {
+                  recaptchaTokenRef.current.value = token
+                } else {
+                  console.log('error updating recaptcha token')
+                }
+              }}
+            />
+            <input
+              ref={recaptchaTokenRef}
+              type="hidden"
+              name="recaptchaToken"
+            />
+          </>
+        )}
+
         {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
         <Button type="submit" style="ctaDarkYellow" css={{ my: '$2' }}>
           Reset Password

packages/web/pages/auth/email-login.tsx

@@ -5,18 +5,16 @@ import { GoogleReCaptchaProvider } from '@google-recaptcha/react'
 
 export default function EmailLoginPage(): JSX.Element {
   return (
-    <>
-      <GoogleReCaptchaProvider
-        type="v2-checkbox"
-        isEnterprise={true}
-        siteKey={process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY ?? ''}
-      >
-        <PageMetaData title="Login - Omnivore" path="/email-login" />
-        <ProfileLayout>
-          <EmailLogin />
-        </ProfileLayout>
-        <div data-testid="email-login-page-tag" />
-      </GoogleReCaptchaProvider>
-    </>
+    <GoogleReCaptchaProvider
+      type="v2-checkbox"
+      isEnterprise={true}
+      siteKey={process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY ?? ''}
+    >
+      <PageMetaData title="Login - Omnivore" path="/email-login" />
+      <ProfileLayout>
+        <EmailLogin />
+      </ProfileLayout>
+      <div data-testid="email-login-page-tag" />
+    </GoogleReCaptchaProvider>
   )
 }

packages/web/pages/auth/forgot-password.tsx

@@ -2,10 +2,15 @@ import { PageMetaData } from '../../components/patterns/PageMetaData'
 import { ProfileLayout } from '../../components/templates/ProfileLayout'
 import { EmailForgotPassword } from '../../components/templates/auth/EmailForgotPassword'
 import { Toaster } from 'react-hot-toast'
+import { GoogleReCaptchaProvider } from '@google-recaptcha/react'
 
 export default function ForgotPassword(): JSX.Element {
   return (
-    <>
+    <GoogleReCaptchaProvider
+      type="v2-checkbox"
+      isEnterprise={true}
+      siteKey={process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY ?? ''}
+    >
       <PageMetaData
         title="Reset your password - Omnivore"
         path="/auth-forgot-password"
@@ -19,6 +24,6 @@ export default function ForgotPassword(): JSX.Element {
         <EmailForgotPassword />
       </ProfileLayout>
       <div data-testid="auth-forgot-password-page-tag" />
-    </>
+    </GoogleReCaptchaProvider>
   )
 }