) => {
+ e.preventDefault()
const upload = document.getElementById('upload-license') as HTMLInputElement
upload.value = ''
setTimeout(() => {
@@ -98,7 +99,6 @@ const DriverLicense = ({
)}
@@ -107,7 +107,6 @@ const DriverLicense = ({
{license && (
<>
{
const url = `${bookcarsHelper.trimEnd(user ? env.CDN_LICENSES : env.CDN_TEMP_LICENSES, '/')}/${license}`
helper.downloadURI(url)
@@ -116,7 +115,6 @@ const DriverLicense = ({
{
try {
let status = 0
diff --git a/frontend/src/components/NewsletterForm.tsx b/frontend/src/components/NewsletterForm.tsx
index 6a522677e..a43609eba 100644
--- a/frontend/src/components/NewsletterForm.tsx
+++ b/frontend/src/components/NewsletterForm.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
import {
Button,
FormControl,
@@ -8,27 +8,23 @@ import {
CircularProgress,
} from '@mui/material'
import validator from 'validator'
-import { GoogleReCaptcha } from 'react-google-recaptcha-v3'
import * as bookcarsTypes from ':bookcars-types'
import env from '@/config/env.config'
import { strings as commonStrings } from '@/lang/common'
import { strings } from '@/lang/newsletter-form'
import * as helper from '@/common/helper'
import * as UserService from '@/services/UserService'
+import useReCaptcha from '@/hooks/useRecaptcha'
import '@/assets/css/newsletter-form.css'
const NewsletterForm = () => {
+ const { reCaptchaLoaded, generateReCaptchaToken } = useReCaptcha()
+
const [email, setEmail] = useState('')
const [emailValid, setEmailValid] = useState(true)
- const [recaptchaToken, setRecaptchaToken] = useState('')
- const [refreshReCaptcha, setRefreshReCaptcha] = useState(false)
const [submitting, setSubmitting] = useState(false)
- const handleRecaptchaVerify = useCallback(async (token: string) => {
- setRecaptchaToken(token)
- }, [])
-
const validateEmail = (_email: string) => {
if (_email) {
if (validator.isEmail(_email)) {
@@ -53,15 +49,23 @@ const NewsletterForm = () => {
return
}
- const ip = await UserService.getIP()
+ let recaptchaToken = ''
+ if (reCaptchaLoaded) {
+ recaptchaToken = await generateReCaptchaToken()
+ if (!(await helper.verifyReCaptcha(recaptchaToken))) {
+ recaptchaToken = ''
+ }
+
+ if (!recaptchaToken) {
+ helper.error('reCAPTCHA error')
+ }
+ }
const payload: bookcarsTypes.SendEmailPayload = {
from: email,
to: env.CONTACT_EMAIL,
subject: 'New Newsletter Subscription',
message: '',
- recaptchaToken,
- ip,
isContactForm: false,
}
const status = await UserService.sendEmail(payload)
@@ -76,7 +80,6 @@ const NewsletterForm = () => {
helper.error(err)
} finally {
setSubmitting(false)
- setRefreshReCaptcha((refresh) => !refresh)
}
}
@@ -107,7 +110,7 @@ const NewsletterForm = () => {
{(!emailValid && commonStrings.EMAIL_NOT_VALID) || ''}
-
-
-
)
}
diff --git a/frontend/src/components/ReCaptchaProvider.tsx b/frontend/src/components/ReCaptchaProvider.tsx
deleted file mode 100644
index 9fb09c60e..000000000
--- a/frontend/src/components/ReCaptchaProvider.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { ReactNode } from 'react'
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
-import env from '@/config/env.config'
-import * as UserService from '@/services/UserService'
-
-interface ReCaptchaProviderProps {
- children: ReactNode
-}
-
-const ReCaptchaProvider = ({ children }: ReCaptchaProviderProps) => (
- env.RECAPTCHA_ENABLED
- ? (
-
- {children}
-
- )
- : <>{children}
-)
-
-export default ReCaptchaProvider
diff --git a/frontend/src/hooks/useRecaptcha.ts b/frontend/src/hooks/useRecaptcha.ts
new file mode 100644
index 000000000..c763b7d06
--- /dev/null
+++ b/frontend/src/hooks/useRecaptcha.ts
@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react'
+import env from '@/config/env.config'
+
+declare global {
+ interface Window {
+ grecaptcha: any;
+ }
+}
+
+const { RECAPTCHA_SITE_KEY } = env
+
+const showBadge = () => {
+ if (!window.grecaptcha) return
+ window.grecaptcha.ready(() => {
+ const badge = document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement
+ if (!badge) return
+ badge.style.display = 'block'
+ badge.style.zIndex = '1'
+ })
+}
+
+const hideBadge = () => {
+ if (!window.grecaptcha) return
+ window.grecaptcha.ready(() => {
+ const badge = document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement
+ if (!badge) return
+ badge.style.display = 'none'
+ })
+}
+
+const useReCaptcha = (): { reCaptchaLoaded: boolean; generateReCaptchaToken: (action?: string) => Promise } => {
+ const [reCaptchaLoaded, setReCaptchaLoaded] = useState(false)
+
+ // Load ReCaptcha script
+ useEffect(() => {
+ if (!env.RECAPTCHA_ENABLED) return
+ if (env.isSafari) return
+ if (typeof window === 'undefined' || reCaptchaLoaded) return
+ if (window.grecaptcha) {
+ showBadge()
+ setReCaptchaLoaded(true)
+ return
+ }
+ const script = document.createElement('script')
+ script.async = true
+ script.src = `https://www.google.com/recaptcha/api.js?render=${RECAPTCHA_SITE_KEY}`
+ script.addEventListener('load', () => {
+ setReCaptchaLoaded(true)
+ showBadge()
+ })
+ document.body.appendChild(script)
+ }, [reCaptchaLoaded])
+
+ // Hide badge when unmount
+ useEffect(() => hideBadge, [])
+
+ // Get token
+ const generateReCaptchaToken = (action: string = 'submit'): Promise => new Promise((resolve, reject) => {
+ if (env.isSafari) resolve('')
+ if (!reCaptchaLoaded) reject(new Error('ReCaptcha not loaded'))
+ if (typeof window === 'undefined' || !window.grecaptcha) {
+ setReCaptchaLoaded(false)
+ reject(new Error('ReCaptcha not loaded'))
+ }
+ window.grecaptcha.ready(() => {
+ window.grecaptcha.execute(RECAPTCHA_SITE_KEY, { action }).then((token: string) => {
+ resolve(token)
+ })
+ })
+ })
+
+ return { reCaptchaLoaded, generateReCaptchaToken }
+}
+
+export default useReCaptcha
diff --git a/frontend/src/pages/Activate.tsx b/frontend/src/pages/Activate.tsx
index 152d2f4d8..d507fb5f0 100644
--- a/frontend/src/pages/Activate.tsx
+++ b/frontend/src/pages/Activate.tsx
@@ -39,10 +39,12 @@ const Activate = () => {
const handleNewPasswordChange = (e: React.ChangeEvent) => {
setPassword(e.target.value)
+ setConfirmPasswordError(false)
}
const handleConfirmPasswordChange = (e: React.ChangeEvent) => {
setConfirmPassword(e.target.value)
+ setConfirmPasswordError(false)
}
const handleSubmit = async (e: React.FormEvent | React.KeyboardEvent) => {
@@ -160,7 +162,7 @@ const Activate = () => {
{strings.ACTIVATE_HEADING}
{strings.TOKEN_EXPIRED}
-