Add error message to use when turnstile fails (#737)

* Add error message to user when turnstile fails

* update text

* use jsx instead of string for better readability

* update text

* show turnstile error as well

* show feilmelding

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';

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.
+    <br />
+    <br />
+    Dette kan du prøve:
+    <ul>
+      <li>Last inn siden på nytt og prøv igjen.</li>
+      <li>Prøv en annen nettleser. Vi vet at det har vært problemer med Firefox.</li>
+      <li>
+        Hvis du fortsatt får feil, så send en e-post til [email protected] så vi melder deg på manuelt. Vi setter pris på om du
+        kan oppgi eventuell feilmelding og hvilken nettleser og operativsystem du bruker for å kunne skjønne bedre hva som går galt.
+      </li>
+    </ul>
+  </>
+);
 const AttendButton: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
   const dispatch = useDispatch();
   const { eventId, isEventFull } = props;
@@ -33,7 +49,14 @@ const AttendButton: FC<IAttendButtonProps> = (props: IAttendButtonProps) => {
     }
   };
   const toggleModal = () => setShowModal(!showModal);
-  const modal = <CaptchaModal showModal={showModal} toggleModal={toggleModal} setCaptcha={signUp} />;
+  const modal = (
+    <CaptchaModal
+      showModal={showModal}
+      toggleModal={toggleModal}
+      setCaptcha={signUp}
+      errorText={FAILED_CAPTCHA_ERROR_TEXT}
+    />
+  );
   const onConfirmModalClose = (retValue: boolean) => {
     setShowConfirmModal(false);
 

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<ICaptchaModalProps> = (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<string | null>(null);
 
   const validCaptcha = (token: string | null) => {
     if (token) {
@@ -22,13 +25,21 @@ const CaptchaModal: FC<ICaptchaModalProps> = (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 (
     <Modal open={showModal} onClose={toggleModal}>
       <h1>{header}</h1>
       <p>{text}</p>
-      <Turnstile sitekey={OW4_TURNSTILE_PUBLIC_KEY} onVerify={validCaptcha} />
+      {showErrorText && <p>{errorText}</p>}
+      {turnstileError && <p>Error message: {turnstileError}</p>}
+      <Turnstile sitekey={OW4_TURNSTILE_PUBLIC_KEY} onVerify={validCaptcha} onError={onError} />
     </Modal>
   );
 };