diff --git a/src/core/index.tsx b/src/core/index.tsx index 6c20982f..2617ef2c 100644 --- a/src/core/index.tsx +++ b/src/core/index.tsx @@ -1,5 +1,5 @@ import Head from 'next/head'; -import { FC } from 'react'; +import React, { FC } from 'react'; import Footer from './components/Footer/index'; import Header from './components/Header/index'; diff --git a/src/events/components/Attendance/AttendButton.tsx b/src/events/components/Attendance/AttendButton.tsx index cbfbf9a6..25d9b268 100644 --- a/src/events/components/Attendance/AttendButton.tsx +++ b/src/events/components/Attendance/AttendButton.tsx @@ -14,6 +14,22 @@ interface IAttendButtonProps { cannotUnattend?: boolean; } +const FAILED_CAPTCHA_ERROR_TEXT = ( + <> + Kunne ikke verifisere at du ikke er en bot. +
+
+ Dette kan du prøve: + + +); const AttendButton: FC = (props: IAttendButtonProps) => { const dispatch = useDispatch(); const { eventId, isEventFull } = props; @@ -33,7 +49,14 @@ const AttendButton: FC = (props: IAttendButtonProps) => { } }; const toggleModal = () => setShowModal(!showModal); - const modal = ; + const modal = ( + + ); const onConfirmModalClose = (retValue: boolean) => { setShowConfirmModal(false); diff --git a/src/events/components/Attendance/CaptchaModal.tsx b/src/events/components/Attendance/CaptchaModal.tsx index 57dcab38..daa7ef1f 100644 --- a/src/events/components/Attendance/CaptchaModal.tsx +++ b/src/events/components/Attendance/CaptchaModal.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; import { Modal } from '@dotkomonline/design-system'; import { OW4_TURNSTILE_PUBLIC_KEY } from 'common/constants/turnstile'; import Turnstile from 'react-turnstile'; @@ -9,10 +9,13 @@ interface ICaptchaModalProps { text?: string; toggleModal: () => void; setCaptcha: (token: string | null) => void; + errorText?: React.ReactNode | string; } const CaptchaModal: FC = (props: ICaptchaModalProps) => { - const { showModal, toggleModal, setCaptcha, header, text } = props; + const { showModal, toggleModal, setCaptcha, header, text, errorText } = props; + const [showErrorText, setShowErrorText] = useState(true); + const [turnstileError, setTurnstileError] = useState(null); const validCaptcha = (token: string | null) => { if (token) { @@ -22,13 +25,21 @@ const CaptchaModal: FC = (props: ICaptchaModalProps) => { //TODO Do something with unvalid token? }; + const onError = (error: Error) => { + console.log('Error from captcha failure:', error); + setShowErrorText(true); + setTurnstileError(error.message || 'Ingen feilmelding'); + }; + if (!showModal) return null; return (

{header}

{text}

- + {showErrorText &&

{errorText}

} + {turnstileError &&

Error message: {turnstileError}

} +
); };