diff --git a/recaptcha/indico_recaptcha/client/Captcha.jsx b/recaptcha/indico_recaptcha/client/Captcha.jsx index 0f94ea4..0a0c95d 100644 --- a/recaptcha/indico_recaptcha/client/Captcha.jsx +++ b/recaptcha/indico_recaptcha/client/Captcha.jsx @@ -6,7 +6,7 @@ // see the LICENSE file for more details. import PropTypes from 'prop-types'; -import React, {useEffect, useRef, useCallback} from 'react'; +import React, {useState, useEffect, useRef, useCallback} from 'react'; import {useFormState, useForm} from 'react-final-form'; import ReCAPTCHA from 'react-google-recaptcha'; import {Message, Form} from 'semantic-ui-react'; @@ -16,6 +16,27 @@ import {Translate} from 'indico/react/i18n'; import './Captcha.module.scss'; +export default function Captcha({name, settings: {siteKey}, wtf}) { + return wtf ? ( + + ) : ( + + ); +} + +Captcha.propTypes = { + name: PropTypes.string, + wtf: PropTypes.bool, + settings: PropTypes.shape({ + siteKey: PropTypes.string.isRequired, + }).isRequired, +}; + +Captcha.defaultProps = { + name: 'captcha', + wtf: false, +}; + function CaptchaField({onChange, siteKey, reCaptchaRef}) { return ; } @@ -23,11 +44,37 @@ function CaptchaField({onChange, siteKey, reCaptchaRef}) { CaptchaField.propTypes = { onChange: PropTypes.func.isRequired, siteKey: PropTypes.string.isRequired, - reCaptchaRef: PropTypes.object.isRequired, + reCaptchaRef: PropTypes.object, }; -export default function Captcha({name, settings}) { - const {siteKey} = settings; +CaptchaField.defaultProps = { + reCaptchaRef: undefined, +}; + +function WTFCaptcha({name, siteKey}) { + const [response, setResponse] = useState(''); + + return ( + + + Confirm that you are not a robot 🤖 + +
+
+ + + +
+
+ ); +} + +WTFCaptcha.propTypes = { + name: PropTypes.string.isRequired, + siteKey: PropTypes.string.isRequired, +}; + +function FinalCaptcha({name, siteKey}) { const reCaptchaRef = useRef(null); const form = useForm(); const {submitErrors} = useFormState({ @@ -68,11 +115,7 @@ export default function Captcha({name, settings}) { ); } -Captcha.propTypes = { - name: PropTypes.string, - settings: PropTypes.object.isRequired, -}; - -Captcha.defaultProps = { - name: 'captcha', +FinalCaptcha.propTypes = { + name: PropTypes.string.isRequired, + siteKey: PropTypes.string.isRequired, };