turnstile

next.config.js

@@ -79,6 +79,7 @@ module.exports = withBundleAnalyzer(
           STRIPE_PUBLIC_KEY_PROKOM: process.env.STRIPE_PUBLIC_KEY_PROKOM || null,
           STRIPE_PUBLIC_KEY_TRIKOM: process.env.STRIPE_PUBLIC_KEY_TRIKOM || null,
           RECAPTCHA_PUBLIC_KEY: process.env.RECAPTCHA_PUBLIC_KEY || '',
+          OW4_DJANGO_TURNSTILE_PUBLIC_KEY: process.env.OW4_DJANGO_TURNSTILE_PUBLIC_KEY || '',
         },
         redirects,
         images: {

package.json

@@ -69,6 +69,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.7.2",
     "@fortawesome/free-solid-svg-icons": "^5.7.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "@marsidev/react-turnstile": "^0.5.4",
     "@next/bundle-analyzer": "^9.3.4",
     "@reduxjs/toolkit": "^1.3.4",
     "@sentry/browser": "^5.6.3",
@@ -101,6 +102,7 @@
     "react-select": "^3.0.8",
     "react-spring": "^8.0.20",
     "react-stripe-elements": "^5.0.1",
+    "react-turnstile": "^1.1.3",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "sharp": "^0.33.2",

src/common/constants/turnstile.ts

@@ -0,0 +1 @@
+export const OW4_DJANGO_TURNSTILE_PUBLIC_KEY = process.env.OW4_DJANGO_TURNSTILE_PUBLIC_KEY || '';

src/events/api/attendee.ts

@@ -40,7 +40,7 @@ export const userAttendEvent = async (
         show_as_attending_event: options?.showAsAttending,
         allow_pictures: options?.allowPictures,
         extras: options?.extras,
-        recaptcha: captcha,
+        turnstile: captcha,
       },
       undefined,
       { user }

src/events/components/Attendance/AttendButton.tsx

@@ -33,7 +33,7 @@ const AttendButton: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
     }
   };
   const toggleModal = () => setShowModal(!showModal);
-  const modal = <CaptchaModal showModal={showModal} toggleModal={toggleModal} setRecaptcha={signUp} />;
+  const modal = <CaptchaModal showModal={showModal} toggleModal={toggleModal} setCaptcha={signUp} />;
   const onConfirmModalClose = (retValue: boolean) => {
     setShowConfirmModal(false);
 

src/events/components/Attendance/CaptchaModal.tsx

@@ -1,22 +1,22 @@
 import React, { FC } from 'react';
 import { Modal } from '@dotkomonline/design-system';
-import ReCAPTCHA from 'react-google-recaptcha';
-import { RECAPTCHA_KEY } from 'common/constants/google';
+import { OW4_DJANGO_TURNSTILE_PUBLIC_KEY } from 'common/constants/turnstile';
+import Turnstile from "react-turnstile";
 
 interface ICaptchaModalProps {
   showModal: boolean;
   header?: string;
   text?: string;
   toggleModal: () => void;
-  setRecaptcha: (token: string | null) => void;
+  setCaptcha: (token: string | null) => void;
 }
 
 const CaptchaModal: FC<ICaptchaModalProps> = (props: ICaptchaModalProps) => {
-  const { showModal, toggleModal, setRecaptcha, header, text } = props;
+  const { showModal, toggleModal, setCaptcha, header, text } = props;
 
   const validCaptcha = (token: string | null) => {
     if (token) {
-      setRecaptcha(token);
+      setCaptcha(token);
       toggleModal();
     }
     //TODO Do something with unvalid token?
@@ -28,7 +28,7 @@ const CaptchaModal: FC<ICaptchaModalProps> = (props: ICaptchaModalProps) => {
     <Modal open={showModal} onClose={toggleModal}>
       <h1>{header}</h1>
       <p>{text}</p>
-      <ReCAPTCHA sitekey={RECAPTCHA_KEY} onChange={validCaptcha} />
+      <Turnstile sitekey={OW4_DJANGO_TURNSTILE_PUBLIC_KEY} onVerify={validCaptcha} />
     </Modal>
   );
 };