Add Captcha fields

assets/js/src/settings/pages/advanced/captcha.tsx

@@ -0,0 +1,107 @@
+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>
+    </>
+  );
+}

assets/js/src/settings/pages/advanced/index.tsx

@@ -6,6 +6,7 @@ import Tracking from './tracking';
 import Transactional from './transactional';
 import InactiveSubscribers from './inactive_subscribers';
 import ShareData from './share_data';
+import Captcha from './captcha';
 
 export default function Advanced() {
   return (
@@ -17,6 +18,7 @@ export default function Advanced() {
       <Transactional />
       <InactiveSubscribers />
       <ShareData />
+      <Captcha />
     </div>
   );
 }

assets/js/src/settings/store/make_default_state.ts

@@ -13,6 +13,7 @@ export default function makeDefaultState(window: any): State {
     newUser: !!window.mailpoet_is_new_user,
     woocommerce: !!window.mailpoet_woocommerce_active,
     membersPlugin: !!window.mailpoet_members_plugin_active,
+    builtInCaptcha: window.mailpoet_built_in_captcha_supported,
   };
   const premiumStatus = getPremiumStatus(
     window.mailpoet_premium_key_valid,

assets/js/src/settings/store/selectors.ts

@@ -33,6 +33,10 @@ export function hasMembersPlugin(state: State) {
   return state.flags.membersPlugin;
 }
 
+export function isBuiltInCaptchaSupported(state: State) {
+  return state.flags.builtInCaptcha;
+}
+
 export function isNewUser(state: State) {
   return state.flags.newUser;
 }

assets/js/src/settings/store/types.ts

@@ -233,6 +233,7 @@ export type State = {
   flags: {
     woocommerce: boolean
     membersPlugin: boolean
+    builtInCaptcha: boolean
     newUser: boolean
     error: boolean
   }

views/settings.html

@@ -19,6 +19,7 @@
       var mailpoet_premium_key_valid = <%= json_encode(premium_key_valid) %>;
       var mailpoet_premium_plugin_installed = <%= json_encode(premium_plugin_installed) %>;
       var mailpoet_paths = <%= json_encode(paths) %>;
+      var mailpoet_built_in_captcha_supported = <%= json_encode(built_in_captcha_supported == true) %>;
     <% endautoescape %>
     var mailpoet_beacon_articles = [
       '57f71d49c697911f2d323486',