Merge pull request #692 from CleanTalk/mod_react_15_av

Mod. Settings. Moving settings to React

Author: AntonV1211

css/spbc-settings.min.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;

css/src/spbc-settings.css

@@ -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,61 +50,56 @@ 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 <>
         {settingKeys.map((sectionGroupId) => {
-            if (
-                sectionGroupId === 'apikey'
-            ) {
-                return <SettingsGroup
-                    key={sectionGroupId}
-                    groupTitle={SETTINGS_SECTIONS_TITLES[sectionGroupId].title}
-                    groupDescription={SETTINGS_SECTIONS_TITLES[sectionGroupId].description}
-                    groupId={sectionGroupId}
-                    settingsSlug={settingsSlug}
-                    settings={settings[sectionGroupId]}
-                    keyIsOk={keyIsOk}
-                    wpUserRolesOptions={wpUserRolesOptions}
-                    verificationEmail={verificationEmail}
-                    authLoginPageUrl={authLoginPageUrl}
-                    techSupportUrlPrefix={techSupportUrlPrefix}
-                    loginRenameNotifyAdminEmail={loginRenameNotifyAdminEmail}
-                    canActivatePlugins={canActivatePlugins}
-                    shuffleSaltsUnlocked={shuffleSaltsUnlocked}
-                />;
+            if (!SETTINGS_SECTIONS_TITLES[sectionGroupId]) {
+                return null;
             }
-            if (
-                sectionGroupId === 'auth_and_logging_in' ||
-                sectionGroupId === 'scanner_settings' ||
-                sectionGroupId === 'firewall'
-            ) {
-                // todo: AG needs to be reduced in context
-                return <SettingsGroup
-                    key={sectionGroupId}
-                    groupTitle={SETTINGS_SECTIONS_TITLES[sectionGroupId].title}
-                    groupDescription={SETTINGS_SECTIONS_TITLES[sectionGroupId].description}
-                    groupId={sectionGroupId}
-                    settingsSlug={settingsSlug}
-                    settings={settings[sectionGroupId]}
-                    keyIsOk={keyIsOk}
-                    wpUserRolesOptions={wpUserRolesOptions}
-                    verificationEmail={verificationEmail}
-                    authLoginPageUrl={authLoginPageUrl}
-                    techSupportUrlPrefix={techSupportUrlPrefix}
-                    loginRenameNotifyAdminEmail={loginRenameNotifyAdminEmail}
-                    canActivatePlugins={canActivatePlugins}
-                    shuffleSaltsUnlocked={shuffleSaltsUnlocked}
-                    visitorIpSources={visitorIpSources}
-                    scannerExclusionsDir={scannerExclusionsDir}
-                    scannerExclusionsURL={scannerExclusionsURL}
-                    visitorCurrentIp={visitorCurrentIp}
-                    nextScheduledScanDescription={nextScheduledScanDescription}
-                    scannerAutoStartManualTimezone={scannerAutoStartManualTimezone}
-                    wlCompanyName={wlCompanyName}
-                />;
+            if (sectionGroupId === 'spbc_trusted_and_affiliate' && wlModeEnabled) {
+                return null;
             }
-            return null;
+
+            return <SettingsGroup
+                key={sectionGroupId}
+                groupTitle={SETTINGS_SECTIONS_TITLES[sectionGroupId].title}
+                groupDescription={SETTINGS_SECTIONS_TITLES[sectionGroupId].description}
+                groupId={sectionGroupId}
+                settingsSlug={settingsSlug}
+                settings={settings[sectionGroupId]}
+                keyIsOk={keyIsOk}
+                wpUserRolesOptions={wpUserRolesOptions}
+                verificationEmail={verificationEmail}
+                authLoginPageUrl={authLoginPageUrl}
+                techSupportUrlPrefix={techSupportUrlPrefix}
+                loginRenameNotifyAdminEmail={loginRenameNotifyAdminEmail}
+                canActivatePlugins={canActivatePlugins}
+                shuffleSaltsUnlocked={shuffleSaltsUnlocked}
+                visitorIpSources={visitorIpSources}
+                scannerExclusionsDir={scannerExclusionsDir}
+                scannerExclusionsURL={scannerExclusionsURL}
+                visitorCurrentIp={visitorCurrentIp}
+                nextScheduledScanDescription={nextScheduledScanDescription}
+                scannerAutoStartManualTimezone={scannerAutoStartManualTimezone}
+                wlCompanyName={wlCompanyName}
+            />;
         })}
     </>;
 };

inc/spbc-settings.php

@@ -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/public/spbct-react-bundle.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.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/AdminBarAdminsOnlineCounter.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/AdminBarBruteForceCounter.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>
+        </>
+    );
+}