108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import { t, onChange } from 'common/functions';
|
|
import { useSetting, useSelector, useAction } from 'settings/store/hooks';
|
|
import { Label, Inputs } from 'settings/components';
|
|
|
|
export default function Captcha() {
|
|
const [type, setType] = useSetting('captcha', 'type');
|
|
const [token, setToken] = useSetting('captcha', 'recaptcha_site_token');
|
|
const [secret, setSecret] = useSetting('captcha', 'recaptcha_secret_token');
|
|
const hasBuiltInCaptcha = useSelector('isBuiltInCaptchaSupported')();
|
|
const setErrorFlag = useAction('setErrorFlag');
|
|
const missingToken = (type === 'recaptcha' && token.trim() === '');
|
|
const missingSecret = (type === 'recaptcha' && secret.trim() === '');
|
|
React.useEffect(() => {
|
|
setErrorFlag(missingToken || missingSecret);
|
|
}, [missingSecret, missingToken, setErrorFlag]);
|
|
|
|
return (
|
|
<>
|
|
<Label
|
|
title={t('captchaTitle')}
|
|
description={(
|
|
<>
|
|
{t('captchaDescription')}
|
|
{' '}
|
|
<a
|
|
href="https://www.google.com/recaptcha/admin"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
{t('signupForCaptchaKey')}
|
|
</a>
|
|
</>
|
|
)}
|
|
htmlFor=""
|
|
/>
|
|
<Inputs>
|
|
<input
|
|
type="radio"
|
|
id="built-in-captcha"
|
|
disabled={!hasBuiltInCaptcha}
|
|
value="built-in"
|
|
checked={type === 'built-in'}
|
|
onChange={onChange(setType)}
|
|
/>
|
|
<label htmlFor="built-in-captcha">
|
|
{t('builtInCaptcha')}
|
|
{' '}
|
|
{!hasBuiltInCaptcha && t('disbaledBecauseExtensionMissing')}
|
|
</label>
|
|
<br />
|
|
<input
|
|
type="radio"
|
|
id="google-captcha"
|
|
value="recaptcha"
|
|
checked={type === 'recaptcha'}
|
|
onChange={onChange(setType)}
|
|
/>
|
|
<label htmlFor="google-captcha">
|
|
{t('googleReCaptcha')}
|
|
</label>
|
|
{type === 'recaptcha' && (
|
|
<>
|
|
<br />
|
|
<input
|
|
type="text"
|
|
value={token}
|
|
className="regular-text"
|
|
onChange={onChange(setToken)}
|
|
placeholder={t('yourReCaptchaKey')}
|
|
/>
|
|
{missingToken && (
|
|
<span className="mailpoet_error_item mailpoet_error">
|
|
{t('fillReCaptchaKeys')}
|
|
</span>
|
|
)}
|
|
<br />
|
|
<input
|
|
type="text"
|
|
value={secret}
|
|
className="regular-text"
|
|
onChange={onChange(setSecret)}
|
|
placeholder={t('yourReCaptchaSecret')}
|
|
/>
|
|
{missingSecret && (
|
|
<span className="mailpoet_error_item mailpoet_error">
|
|
{t('fillReCaptchaKeys')}
|
|
</span>
|
|
)}
|
|
</>
|
|
)}
|
|
<br />
|
|
<input
|
|
type="radio"
|
|
id="no-captcha"
|
|
value=""
|
|
checked={type === ''}
|
|
onChange={onChange(setType)}
|
|
/>
|
|
<label htmlFor="no-captcha">
|
|
{t('disable')}
|
|
</label>
|
|
</Inputs>
|
|
</>
|
|
);
|
|
}
|