Mod. Settings. Moving settings to React

css/src/spbc-settings.css

@@ -76,11 +76,6 @@
 .spbc_waf_reason{display: none;}
 .spbc_waf_reason_title:hover + .spbc_waf_reason{display: inline;}
 
-/** .spbc_sub* and spbc_affiliate_shortcode used in General settings tab */
-.spbc_sub_setting{margin-left: 30px !important;}
-.spbc_sub2_setting{margin-left: 60px !important;}
-.spbc_affiliate_shortcode{width:inherit !important; min-width: inherit !important}
-
 .spbc_highlighted{
 	outline-offset: 5px;
 	outline-color: red;

js/src/react/components/TabContent/TabSettingsGeneral/Settings.js

@@ -1,5 +1,7 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import SettingsGroup from './SettingsGroup';
+import VulnerabilityCheckDesc from './Settings/VulnerabilityCheckDesc';
+import {DataRootContext} from '../../App';
 const {__} = wp.i18n;
 
 export default function Settings(props) {
@@ -23,6 +25,8 @@ export default function Settings(props) {
         wlCompanyName,
     } = props;
 
+    const {wlModeEnabled} = useContext(DataRootContext) || {};
+
     const settingKeys = Object.keys(settings || {});
 
     const SETTINGS_SECTIONS_TITLES = {
@@ -46,6 +50,22 @@ export default function Settings(props) {
             title: __('Malware Scanner', 'security-malware-firewall'),
             description: '',
         },
+        vulnerability_check: {
+            title: __('Modules vulnerability detection', 'security-malware-firewall'),
+            description: <VulnerabilityCheckDesc />,
+        },
+        admin_bar: {
+            title: __('Admin Bar', 'security-malware-firewall'),
+            description: '',
+        },
+        misc: {
+            title: __('Miscellaneous', 'security-malware-firewall'),
+            description: '',
+        },
+        spbc_trusted_and_affiliate: {
+            title: __('Trusted and Affiliate', 'security-malware-firewall'),
+            description: '',
+        },
     };
 
     return <>
@@ -73,13 +93,17 @@ export default function Settings(props) {
             if (
                 sectionGroupId === 'auth_and_logging_in' ||
                 sectionGroupId === 'scanner_settings' ||
-                sectionGroupId === 'firewall'
+                sectionGroupId === 'firewall' ||
+                sectionGroupId === 'vulnerability_check' ||
+                sectionGroupId === 'admin_bar' ||
+                sectionGroupId === 'misc' ||
+                (sectionGroupId === 'spbc_trusted_and_affiliate' && !wlModeEnabled)
             ) {
                 // todo: AG needs to be reduced in context
                 return <SettingsGroup
                     key={sectionGroupId}
-                    groupTitle={SETTINGS_SECTIONS_TITLES[sectionGroupId].title}
-                    groupDescription={SETTINGS_SECTIONS_TITLES[sectionGroupId].description}
+                    groupTitle={SETTINGS_SECTIONS_TITLES[sectionGroupId]?.title || ''}
+                    groupDescription={SETTINGS_SECTIONS_TITLES[sectionGroupId]?.description || ''}
                     groupId={sectionGroupId}
                     settingsSlug={settingsSlug}
                     settings={settings[sectionGroupId]}

js/src/react/components/TabContent/TabSettingsGeneral/Settings/AdminBarAdminsOnlineCounter.js

@@ -0,0 +1,30 @@
+import React from 'react';
+const {__} = wp.i18n;
+
+export default function AdminBarAdminsOnlineCounter(props) {
+    const {id, name, value, onSettingChange} = props;
+
+    return (
+        <div className="spbc_sub_setting">
+            <input
+                type="checkbox"
+                id={'spbc_setting_' + id}
+                name={name}
+                value={value}
+                checked={value === 1 || value === '1' || value === true}
+                onChange={(e) => {
+                    const next = e.target.checked ? 1 : 0;
+                    onSettingChange?.(id, next);
+                }}
+            />
+            <label
+                htmlFor={'spbc_setting_' + id}
+                className="spbc_setting-field_title--field"
+            >
+                {__('Administrators online counter', 'security-malware-firewall')}
+            </label>
+            <i data-setting={id} className="spbc_long_description__show spbc-icon-help-circled"></i>
+            <div className="spbc_settings_description">{__('Shows the number of administrators online in the admin bar.', 'security-malware-firewall')}</div>
+        </div>
+    );
+}

js/src/react/components/TabContent/TabSettingsGeneral/Settings/AdminBarBruteForceCounter.js

@@ -0,0 +1,29 @@
+import React from 'react';
+const {__} = wp.i18n;
+
+export default function AdminBarBruteForceCounter(props) {
+    const {id, name, value, onSettingChange} = props;
+
+    return (
+        <div className="spbc_sub_setting">
+            <input
+                type="checkbox"
+                id={'spbc_setting_' + id}
+                name={name}
+                value={value}
+                checked={value === 1 || value === '1' || value === true}
+                onChange={(e) => {
+                    const next = e.target.checked ? 1 : 0;
+                    onSettingChange?.(id, next);
+                }}
+            />
+            <label
+                htmlFor={'spbc_setting_' + id}
+                className="spbc_setting-field_title--field"
+            >
+                {__('Allowed/Blocked login attempts counter', 'security-malware-firewall')}
+            </label>
+            <div className="spbc_settings_description">{__('Shows the number of blocked login attempts in the admin bar. Counts only the local database.', 'security-malware-firewall')}</div>
+        </div>
+    );
+}

js/src/react/components/TabContent/TabSettingsGeneral/Settings/AdminBarFirewallCounter.js

@@ -0,0 +1,29 @@
+import React from 'react';
+const {__} = wp.i18n;
+
+export default function AdminBarFirewallCounter(props) {
+    const {id, name, value, onSettingChange} = props;
+
+    return (
+        <div className="spbc_sub_setting">
+            <input
+                type="checkbox"
+                id={'spbc_setting_' + id}
+                name={name}
+                value={value}
+                checked={value === 1 || value === '1' || value === true}
+                onChange={(e) => {
+                    const next = e.target.checked ? 1 : 0;
+                    onSettingChange?.(id, next);
+                }}
+            />
+            <label
+                htmlFor={'spbc_setting_' + id}
+                className="spbc_setting-field_title--field"
+            >
+                {__('Security Firewall counter', 'security-malware-firewall')}
+            </label>
+            <div className="spbc_settings_description">{__('Shows the firewall counters in the admin bar. Counts only the local database.', 'security-malware-firewall')}</div>
+        </div>
+    );
+}

js/src/react/components/TabContent/TabSettingsGeneral/Settings/AdminBarShow.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import useSettingsDependencies from '../../../../hooks/useSettingsDependencies';
+
+const {__, sprintf} = wp.i18n;
+
+export default function AdminBarShow(props) {
+    const {id, name, value, onSettingChange, wlCompanyName} = props;
+    const handleSettingsDependencies = useSettingsDependencies();
+
+    return (
+        <>
+            <input
+                type="checkbox"
+                id={'spbc_setting_' + id}
+                name={name}
+                value={value}
+                checked={value === 1 || value === '1' || value === true}
+                onChange={(e) => {
+                    const next = e.target.checked ? 1 : 0;
+                    onSettingChange?.(id, next);
+                    handleSettingsDependencies(
+                        'admin_bar__admins_online_counter,' +
+                        'admin_bar__brute_force_counter,' +
+                        'admin_bar__firewall_counter',
+                    )(e);
+                }}
+            />
+            <label
+                htmlFor={'spbc_setting_' + id}
+                className="spbc_setting-field_title--field"
+            >
+                {__('Show statistics in admin bar', 'security-malware-firewall')}
+            </label>
+            <div className="spbc_settings_description">{
+                sprintf(
+                    __('Show/hide the %s drop-down menu at the top bar of the WordPress backend.', 'security-malware-firewall'),
+                    wlCompanyName ?? __('CleanTalk', 'security-malware-firewall'),
+                )
+            }</div>
+        </>
+    );
+}

js/src/react/components/TabContent/TabSettingsGeneral/Settings/DataAdditionalHeaders.js

@@ -0,0 +1,32 @@
+import React from 'react';
+const {__} = wp.i18n;
+
+export default function DataAdditionalHeaders(props) {
+    const {id, name, value, onSettingChange} = props;
+
+    return (
+        <>
+            <input
+                type="checkbox"
+                id={'spbc_setting_' + id}
+                name={name}
+                value={value}
+                checked={value === 1 || value === '1' || value === true}
+                onChange={(e) => {
+                    const next = e.target.checked ? 1 : 0;
+                    onSettingChange?.(id, next);
+                }}
+            />
+            <label
+                htmlFor={'spbc_setting_' + id}
+                className="spbc_setting-field_title--field"
+            >
+                {__('Send additional HTTP headers', 'security-malware-firewall')}
+            </label>
+            <i data-setting={id} className="spbc_long_description__show spbc-icon-help-circled"></i>
+            <div className="spbc_settings_description">{
+                __('Add these headers to the HTTP responses on the public pages: X-Content-Type-Options, X-XSS-Protection to get protection from XSS and drive-by download attacks.', 'security-malware-firewall')
+            }</div>
+        </>
+    );
+}

js/src/react/components/TabContent/TabSettingsGeneral/Settings/DataSetCookies.js

@@ -0,0 +1,52 @@
+import ReactZ from 'react';
+import InputRadioGroup from '../../../FormElements/InputRadioGroup';
+
+const {__} = wp.i18n;
+
+/**
+ * @param {object} props
+ * @param {string} props.id
+ * @param {string} props.name
+ * @param {string|number} props.value
+ * @param {function(string, *): void} [props.onSettingChange]
+ * @return {JSX.Element}
+ */
+export default function DataSetCookies(props) {
+    const {id, name, value, onSettingChange} = props;
+
+    const options = [
+        {value: '1', label: __('On', 'security-malware-firewall')},
+        {value: '0', label: __('Off', 'security-malware-firewall')},
+        {value: '2', label: __('Alternative mechanism', 'security-malware-firewall')},
+    ];
+
+    return (
+        <>
+            <span className="spbc_settings-field_title spbc_settings-field_title--field">
+                {__('Set cookies', 'security-malware-firewall')}
+            </span>
+            <i data-setting="data_set_cookies" className="spbc_long_description__show spbc-icon-help-circled"></i>
+            <div style={{marginBottom: 10}} className="spbc_settings_description">
+                <span>
+                    <>
+                        {__('Turn this option off or use the alternative mechanism for cookies to forbid the plugin generate any cookies on the website\'s front-end.', 'security-malware-firewall')}
+                        <br/>
+                        {__('Alternative mechanism will store data in the website database and will not set cookies in browsers, so any cache solution will work just fine.', 'security-malware-firewall')}
+                    </>
+                </span>
+                <br/>
+            </div>
+            <InputRadioGroup
+                id={id}
+                name={name}
+                value={value ?? '0'}
+                options={options}
+                onChange={(e) => {
+                    const next = e.target.value;
+                    onSettingChange?.(id, next);
+                }}
+                disabled={false}
+            />
+        </>
+    );
+}

js/src/react/components/TabContent/TabSettingsGeneral/Settings/MiscBackendLogsEnable.js

@@ -0,0 +1,66 @@
+import React, {useContext} from 'react';
+import {DataRootContext} from '../../../App';
+const {__, sprintf} = wp.i18n;
+const {createInterpolateElement} = wp.element;
+
+export default function MiscBackendLogsEnable(props) {
+    const {id, name, value, onSettingChange, wlCompanyName} = props;
+    const {myBillingLink, backendLogsEnabled, backendLogsLink, wlModeEnabled} = useContext(DataRootContext) || {};
+
+    if (!backendLogsEnabled) {
+        return null;
+    }
+
+    return (
+        <>
+            <input
+                type="checkbox"
+                id={'spbc_setting_' + id}
+                name={name}
+                value={value}
+                checked={value === 1 || value === '1' || value === true}
+                onChange={(e) => {
+                    const next = e.target.checked ? 1 : 0;
+                    onSettingChange?.(id, next);
+                }}
+            />
+            <label
+                htmlFor={'spbc_setting_' + id}
+                className="spbc_setting-field_title--field"
+            >
+                {__('Collect and send PHP logs', 'security-malware-firewall')}
+            </label>
+            <i data-setting={id} className="spbc_long_description__show spbc-icon-help-circled"></i>
+
+            {(backendLogsEnabled || wlModeEnabled) ? (
+                <div className="spbc_settings_description">{
+                    sprintf(
+                        __('Collect and send PHP error logs to your %s Dashboard where you can list them.', 'security-malware-firewall'),
+                        wlModeEnabled && wlCompanyName ? wlCompanyName : __('CleanTalk', 'security-malware-firewall'),
+                    )
+                }</div>
+            ) : (
+                <div className="spbc_settings_description">
+                    {createInterpolateElement(
+                        __(
+                            'To see the collected logs please use the <a1>Backend PHP log</a1>. The <a2>extra package</a2> is required to start the collection, please click "Synchronize with the Cloud" in the plugin settings after purchasing the Extra package.',
+                            'security-malware-firewall',
+                        ),
+                        {
+                            a1: <a
+                                href={backendLogsLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            />,
+                            a2: <a
+                                href={myBillingLink}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            />,
+                        },
+                    )}
+                </div>
+            )}
+        </>
+    );
+}