prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add recaptcha to the email-login page

Browse source
This commit is contained in:
Hongbo Wu 2024-04-08 12:15:01 +08:00
parent 7e812ab8b2
commit 3f5417d71d
2 changed files with 38 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/web/components/templates/auth/EmailLogin.tsx
View file

@ -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<string | undefined>(undefined)
const [password, setPassword] = useState<string | undefined>(undefined)
const [errorMessage, setErrorMessage] =
useState<string | undefined>(undefined)
const [errorMessage, setErrorMessage] = useState<string | undefined>(
undefined
)
const recaptchaTokenRef = useRef<HTMLInputElement>(null)
useEffect(() => {
if (!router.isReady) return
@ -78,6 +81,25 @@ export function EmailLogin(): 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>}
<HStack
@ -148,5 +170,5 @@ export function EmailLogin(): JSX.Element {
</StyledText>
</VStack>
</form>
);
)
}

17
packages/web/pages/auth/email-login.tsx
View file

@ -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 (
<>
<PageMetaData title="Login - Omnivore" path="/email-login" />
<ProfileLayout>
<EmailLogin />
</ProfileLayout>
<div data-testid="email-login-page-tag" />
<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>
</>
)
}