From 7e812ab8b27da656d78e6cdaf48faefa48ee0a54 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Mon, 8 Apr 2024 11:45:53 +0800 Subject: [PATCH 01/49] move Recaptcha to element --- .../web/components/elements/Recaptcha.tsx | 19 +++++++++++++ .../components/templates/auth/EmailSignup.tsx | 28 +++---------------- 2 files changed, 23 insertions(+), 24 deletions(-) create mode 100644 packages/web/components/elements/Recaptcha.tsx diff --git a/packages/web/components/elements/Recaptcha.tsx b/packages/web/components/elements/Recaptcha.tsx new file mode 100644 index 000000000..193ada581 --- /dev/null +++ b/packages/web/components/elements/Recaptcha.tsx @@ -0,0 +1,19 @@ +import { GoogleReCaptchaCheckbox } from '@google-recaptcha/react' + +type RecaptchaProps = { + setRecaptchaToken: (token: string) => void +} + +export const Recaptcha = (props: RecaptchaProps): JSX.Element => { + return ( + <> + { + console.log('recaptcha: ', token) + props.setRecaptchaToken(token) + }} + /> + + ) +} diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx index 79771f308..92a4527c6 100644 --- a/packages/web/components/templates/auth/EmailSignup.tsx +++ b/packages/web/components/templates/auth/EmailSignup.tsx @@ -10,19 +10,17 @@ import { logoutMutation } from '../../../lib/networking/mutations/logoutMutation import { useRouter } from 'next/router' import { formatMessage } from '../../../locales/en/messages' import { parseErrorCodes } from '../../../lib/queryParamParser' -import { - GoogleReCaptchaProvider, - GoogleReCaptchaCheckbox, -} from '@google-recaptcha/react' import Link from 'next/link' +import { Recaptcha } from '../../elements/Recaptcha' const SignUpForm = (): JSX.Element => { const [email, setEmail] = useState() const [password, setPassword] = useState() const [fullname, setFullname] = useState() const [username, setUsername] = useState() - const [debouncedUsername, setDebouncedUsername] = - useState() + const [debouncedUsername, setDebouncedUsername] = useState< + string | undefined + >() const { isUsernameValid, usernameErrorMessage } = useValidateUsernameQuery({ username: debouncedUsername ?? '', @@ -126,24 +124,6 @@ const SignUpForm = (): JSX.Element => { ) } -type RecaptchaProps = { - setRecaptchaToken: (token: string) => void -} - -const Recaptcha = (props: RecaptchaProps): JSX.Element => { - return ( - <> - { - console.log('recaptcha: ', token) - props.setRecaptchaToken(token) - }} - /> - - ) -} - export function EmailSignup(): JSX.Element { const router = useRouter() const recaptchaTokenRef = useRef(null) From 3f5417d71ddfc41487e90614629a81142d69e36c Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Mon, 8 Apr 2024 12:15:01 +0800 Subject: [PATCH 02/49] add recaptcha to the email-login page --- .../components/templates/auth/EmailLogin.tsx | 30 ++++++++++++++++--- packages/web/pages/auth/email-login.tsx | 17 +++++++---- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/packages/web/components/templates/auth/EmailLogin.tsx b/packages/web/components/templates/auth/EmailLogin.tsx index 62fc4847d..9f395bd13 100644 --- a/packages/web/components/templates/auth/EmailLogin.tsx +++ b/packages/web/components/templates/auth/EmailLogin.tsx @@ -1,7 +1,7 @@ import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' import { Button } from '../../elements/Button' import { StyledText, StyledTextSpan } 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' @@ -9,13 +9,16 @@ import { useRouter } from 'next/router' import { parseErrorCodes } from '../../../lib/queryParamParser' import { formatMessage } from '../../../locales/en/messages' import Link from 'next/link' +import { Recaptcha } from '../../elements/Recaptcha' export function EmailLogin(): JSX.Element { const router = useRouter() const [email, setEmail] = useState(undefined) const [password, setPassword] = useState(undefined) - const [errorMessage, setErrorMessage] = - useState(undefined) + const [errorMessage, setErrorMessage] = useState( + undefined + ) + const recaptchaTokenRef = useRef(null) useEffect(() => { if (!router.isReady) return @@ -78,6 +81,25 @@ export function EmailLogin(): 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}} - ); + ) } diff --git a/packages/web/pages/auth/email-login.tsx b/packages/web/pages/auth/email-login.tsx index ae36ba62b..56cc9bd38 100644 --- a/packages/web/pages/auth/email-login.tsx +++ b/packages/web/pages/auth/email-login.tsx @@ -1,15 +1,22 @@ import { PageMetaData } from '../../components/patterns/PageMetaData' import { ProfileLayout } from '../../components/templates/ProfileLayout' import { EmailLogin } from '../../components/templates/auth/EmailLogin' +import { GoogleReCaptchaProvider } from '@google-recaptcha/react' export default function EmailLoginPage(): JSX.Element { return ( <> - - - - -
+ + + + + +
+ ) } From 7ed885bdab9c50a42be49f38d7f3bf8dce356760 Mon Sep 17 00:00:00 2001 From: Hongbo Wu Date: Mon, 8 Apr 2024 12:17:49 +0800 Subject: [PATCH 03/49] add recaptcha to the reset-password page --- .../templates/auth/EmailForgotPassword.tsx | 28 +++++++++++++++++-- packages/web/pages/auth/email-login.tsx | 24 ++++++++-------- packages/web/pages/auth/forgot-password.tsx | 9 ++++-- 3 files changed, 43 insertions(+), 18 deletions(-) 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}}