diff --git a/.env.template b/.env.template index 2d77fb1..1a1a9dd 100644 --- a/.env.template +++ b/.env.template @@ -1,6 +1,5 @@ -RECAPTCHA_API_KEY="" -RECAPTCHA_SITE_KEY="" -EMAILJS_API_KEY="" -EMAILJS_TEMPLATE_ID="" -EMAILJS_SERVICE_ID="" +NEXT_PUBLIC_EMAILJS_API_KEY="" +NEXT_PUBLIC_EMAILJS_SERVICE_ID="" +NEXT_PUBLIC_EMAILJS_TEMPLATE_ID="" +NEXT_PUBLIC_CAPTCHA_SITE_KEY="" LOCAL=true \ No newline at end of file diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index b16510a..5bd0ec9 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -33,11 +33,10 @@ jobs: - name: Build with Next.js 🏗️ run: npx next build env: - EMAILJS_API_KEY: ${{ vars.EMAILJS_API_KEY }} - EMAILJS_SERVICE_ID: ${{ vars.EMAILJS_SERVICE_ID }} - EMAILJS_TEMPLATE_ID: ${{ vars.EMAILJS_TEMPLATE_ID }} - RECAPTCHA_API_KEY: ${{ vars.RECAPTCHA_API_KEY }} - RECAPTCHA_SITE_KEY: ${{ vars.RECAPTCHA_SITE_KEY }} + NEXT_PUBLIC_EMAILJS_API_KEY: ${{ vars.NEXT_PUBLIC_EMAILJS_API_KEY }} + NEXT_PUBLIC_EMAILJS_SERVICE_ID: ${{ vars.NEXT_PUBLIC_EMAILJS_SERVICE_ID }} + NEXT_PUBLIC_EMAILJS_TEMPLATE_ID: ${{ vars.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID }} + NEXT_PUBLIC_CAPTCHA_SITE_KEY: ${{ vars.NEXT_PUBLIC_CAPTCHA_SITE_KEY }} - name: Debug run: ls -la diff --git a/package.json b/package.json index 76965fb..cfa75e2 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "next-themes": "^0.2.1", "react": "^18", "react-dom": "^18", - "react-google-recaptcha-v3": "^1.10.1", + "react-google-recaptcha": "^3.1.0", "react-hook-form": "^7.50.1", "react-icons": "^5.0.1", "sharp": "^0.33.2", @@ -41,6 +41,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-google-recaptcha": "^2.1.9", "autoprefixer": "^10.0.1", "eslint": "^8.56.0", "eslint-config-next": "14.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a63e91b..184d490 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,9 +62,9 @@ dependencies: react-dom: specifier: ^18 version: 18.2.0(react@18.2.0) - react-google-recaptcha-v3: - specifier: ^1.10.1 - version: 1.10.1(react-dom@18.2.0)(react@18.2.0) + react-google-recaptcha: + specifier: ^3.1.0 + version: 3.1.0(react@18.2.0) react-hook-form: specifier: ^7.50.1 version: 7.51.2(react@18.2.0) @@ -97,6 +97,9 @@ devDependencies: '@types/react-dom': specifier: ^18 version: 18.2.24 + '@types/react-google-recaptcha': + specifier: ^2.1.9 + version: 2.1.9 autoprefixer: specifier: ^10.0.1 version: 10.4.19(postcss@8.4.38) @@ -1474,6 +1477,12 @@ packages: dependencies: '@types/react': 18.2.74 + /@types/react-google-recaptcha@2.1.9: + resolution: {integrity: sha512-nT31LrBDuoSZJN4QuwtQSF3O89FVHC4jLhM+NtKEmVF5R1e8OY0Jo4//x2Yapn2aNHguwgX5doAq8Zo+Ehd0ug==} + dependencies: + '@types/react': 18.2.74 + dev: true + /@types/react@18.2.74: resolution: {integrity: sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==} dependencies: @@ -3530,7 +3539,6 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 - dev: true /punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} @@ -3540,6 +3548,16 @@ packages: /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + /react-async-script@1.2.0(react@18.2.0): + resolution: {integrity: sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==} + peerDependencies: + react: '>=16.4.1' + dependencies: + hoist-non-react-statics: 3.3.2 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -3550,15 +3568,14 @@ packages: scheduler: 0.23.0 dev: false - /react-google-recaptcha-v3@1.10.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-K3AYzSE0SasTn+XvV2tq+6YaxM+zQypk9rbCgG4OVUt7Rh4ze9basIKefoBz9sC0CNslJj9N1uwTTgRMJQbQJQ==} + /react-google-recaptcha@3.1.0(react@18.2.0): + resolution: {integrity: sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==} peerDependencies: - react: ^16.3 || ^17.0 || ^18.0 - react-dom: ^17.0 || ^18.0 + react: '>=16.4.1' dependencies: - hoist-non-react-statics: 3.3.2 + prop-types: 15.8.1 react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react-async-script: 1.2.0(react@18.2.0) dev: false /react-hook-form@7.51.2(react@18.2.0): diff --git a/src/app/GoogleCaptchaWrapper.tsx b/src/app/GoogleCaptchaWrapper.tsx deleted file mode 100644 index 92ebba2..0000000 --- a/src/app/GoogleCaptchaWrapper.tsx +++ /dev/null @@ -1,15 +0,0 @@ -'use client' -import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3' - -export default function GoogleCaptchaWrapper({ - children, -}: { - children: React.ReactNode -}) { - const recaptchaKey: string | undefined = process?.env?.RECAPTCHA_SITE_KEY - return ( - - {children} - - ) -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2058131..e8691a5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,7 +2,6 @@ import { ThemeProvider } from '@/components/theme-provider' import { Toaster } from '@/components/ui/sonner' import type { Metadata } from 'next' import { Inter } from 'next/font/google' -import GoogleCaptchaWrapper from './GoogleCaptchaWrapper' import './globals.css' const inter = Inter({ subsets: ['latin'] }) @@ -23,17 +22,15 @@ export default function RootLayout({ return ( - - - {children} - - - + + {children} + + ) diff --git a/src/components/contact.tsx b/src/components/contact.tsx index 771b8b3..334deda 100644 --- a/src/components/contact.tsx +++ b/src/components/contact.tsx @@ -15,7 +15,7 @@ import emailjs from '@emailjs/browser' import { zodResolver } from '@hookform/resolvers/zod' import Image from 'next/image' import { useState } from 'react' -import { GoogleReCaptcha, useGoogleReCaptcha } from 'react-google-recaptcha-v3' +import ReCAPTCHA from 'react-google-recaptcha' import { useForm } from 'react-hook-form' import { IconContext } from 'react-icons' import { AiOutlineLoading3Quarters } from 'react-icons/ai' @@ -31,8 +31,7 @@ const formSchema = z.object({ export default function Contact() { const [isSubmitting, setIsSubmitting] = useState(false) - const { executeRecaptcha } = useGoogleReCaptcha() - const [token, setToken] = useState('') + const [token, setToken] = useState(null) const form = useForm>({ resolver: zodResolver(formSchema), @@ -46,36 +45,32 @@ export default function Contact() { async function onSubmit(values: z.infer) { try { setIsSubmitting(true) - if (!executeRecaptcha) { - return - } - const token = await executeRecaptcha('send_form') - if (token) { - const params = { - name: values.name, - email: values.email, - message: values.message, - } - emailjs - .send( - process.env.EMAILJS_SERVICE_ID!, - process.env.EMAILJS_TEMPLATE_ID!, - params, - { - publicKey: process.env.EMAILJS_API_KEY!, - }, - ) - .then( - () => { - console.log('SUCCESS!') - toast.success('Request send. See you soon ;)') - }, - (error) => { - console.log('FAILED...', error.text) - throw new Error(error.text) - }, - ) + console.log('token = ' + token) + const params = { + name: values.name, + email: values.email, + message: values.message, + 'g-recaptcha-response': token, } + emailjs + .send( + process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID!, + process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID!, + params, + { + publicKey: process.env.NEXT_PUBLIC_EMAILJS_API_KEY!, + }, + ) + .then( + () => { + console.log('SUCCESS!') + toast.success('Request send. See you soon ;)') + }, + (error) => { + console.log('FAILED...', error.text) + throw new Error(error.text) + }, + ) setIsSubmitting(false) } catch (error) { toast.error('Error sending the request.') @@ -89,7 +84,6 @@ export default function Contact() { className="my-52 flex w-full flex-col items-center py-24" id="contact" > - {}} />
@@ -149,7 +143,6 @@ export default function Contact() { />
-
+ setToken(token)} + /> )