Skip to content

react-14.ag #668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alexandergull wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

react-14.ag #668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26baf9c
Upd. Settings. Upload checker now is react-based.
alexandergull Jun 9, 2026
38e7430
Upd. Settings. Traffic control now is react-based.
alexandergull Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 0 additions & 74 deletions inc/spbc-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,80 +212,6 @@ function spbc_settings__register()
'description' => __('Any IP addresses of the logged in administrators will be automatically added to your Personal Lists and will be approved all the time.', 'security-malware-firewall'),
'react_managed' => true, // Header is rendered by React SettingsGroup component. A temporary solution until the entire settings group is switched to React
'fields' => array(
'upload_checker__file_check' => array(
'type' => 'field',
'title' => __('Run the Upload Checker module for uploaded files', 'security-malware-firewall'),
'description' => __('The plugin will scan files uploaded to the WordPress media library for known malicious code with heuristic and signature analysis. If malware found, upload will stop.', 'security-malware-firewall'),
'long_description' => true,
'children' => array('upload_checker__do_check_wordpress_modules')
),
'upload_checker__do_check_wordpress_modules' => array(
'type' => 'field',
'title' => __('Check plugins and themes archives before install', 'security-malware-firewall'),
'description' => __('Check the plugins and themes uploaded via WordPress built in interface with signature analysis.', 'security-malware-firewall'),
'parent' => 'upload_checker__file_check',
'class' => 'spbc_sub2_setting',
),
'traffic_control__enabled' => array(
'type' => 'field',
'title' => __('Traffic Control', 'security-malware-firewall'),
'description' => __('This feature shows a list of visits and hits of everyone who tried to go to your website. Allows you to ban any visitor, a whole country or a network.', 'security-malware-firewall')
. '<br>'
. __('Please note: a single visit (session) can generate multiple entries. This is because the system captures not only the initial page load but also all subsequent background requests (e.g., AJAX) that occur during the session.', 'security-malware-firewall'),
'long_description' => true,
'children' => array(
'traffic_control__autoblock_timeframe',
'traffic_control__autoblock_amount',
'traffic_control__autoblock_period',
'traffic_control__exclude_authorised_users'
),
),
'traffic_control__autoblock_timeframe' => array(
'type' => 'field',
'input_type' => 'select',
'options' => array(
array('val' => 60, 'label' => __('1 minute', 'security-malware-firewall'),),
array('val' => 180, 'label' => __('3 minutes', 'security-malware-firewall'),),
array('val' => 300, 'label' => __('5 minutes', 'security-malware-firewall'),),
array('val' => 600, 'label' => __('10 minutes', 'security-malware-firewall'),),
array('val' => 900, 'label' => __('15 minutes', 'security-malware-firewall'),),
array('val' => 1800, 'label' => __('30 minutes', 'security-malware-firewall'),),
array('val' => 3600, 'label' => __('60 minutes', 'security-malware-firewall'),),
),
'title_first' => true,
'title' => __('Time frame to measure page hits', 'security-malware-firewall'),
'class' => 'spbc_short_text_field',
'parent' => 'traffic_control__enabled',
),
'traffic_control__autoblock_amount' => array(
'input_type' => 'text',
'type' => 'field',
'title_first' => true,
'title' => __('Block a visitor if count of the opened pages in the Time frame more than', 'security-malware-firewall'),
'class' => 'spbc_short_text_field',
'parent' => 'traffic_control__enabled',
),
'traffic_control__autoblock_period' => array(
'type' => 'field',
'input_type' => 'select',
'options' => array(
array('val' => 60, 'label' => __('1 minute', 'security-malware-firewall'),),
array('val' => 300, 'label' => __('5 minutes', 'security-malware-firewall'),),
array('val' => 900, 'label' => __('15 minutes', 'security-malware-firewall'),),
array('val' => 3600, 'label' => __('1 hour', 'security-malware-firewall'),),
array('val' => 43200, 'label' => __('12 hours', 'security-malware-firewall'),),
array('val' => 86400, 'label' => __('24 hours', 'security-malware-firewall'),),
array('val' => 259200, 'label' => __('3 days', 'security-malware-firewall'),),
),
'title' => __('Block a visitor if they exceeded the limit of opened pages for', 'security-malware-firewall'),
'parent' => 'traffic_control__enabled',
),
'traffic_control__exclude_authorised_users' => array(
'type' => 'field',
'title' => esc_html__('Ignore logged in users', 'security-malware-firewall'),
'description' => esc_html__('Enable this option for Traffic Control to stop watching logged in users and keep watching website guests only.', 'security-malware-firewall'),
'parent' => 'traffic_control__enabled',
),
'secfw__get_ip' => array(
'type' => 'field',
'input_type' => 'select',
Expand Down
1,536 changes: 806 additions & 730 deletions js/public/spbct-react-bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 38 additions & 0 deletions .../react/components/TabContent/TabSettingsGeneral/Settings/TrafficControlAutoblockAmount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React, {useState, useEffect} from 'react';
const {__} = wp.i18n;

export default function TrafficControlAutoblockAmount(props) {
const {id, name, value, groupSettings, techSupportUrlPrefix, onSettingChange} = props;

const [inputValue, setInputValue] = useState(
value !== undefined && value !== null ? String(value) : '',
);

useEffect(() => {
setInputValue(value !== undefined && value !== null ? String(value) : '');
}, [value]);

return (
<div className="spbc_wrapper_field spbc_short_text_field spbc_sub_setting">
<label
htmlFor={'spbc_setting_' + id}
className="spbc_settings-field_title spbc_settings-field_title--field"
>
<span>{__('Block a visitor if count of the opened pages in the Time frame more than', 'security-malware-firewall')}</span>
</label>
&nbsp;
<input
type="text"
id={'spbc_setting_' + id}
name={name}
value={inputValue}
disabled={false}
className="spbc_short_text_field spbc_setting_field "
onChange={(e) => {
setInputValue(e.target.value);
onSettingChange?.(id, e.target.value);
}}
/>
</div>
);
}
35 changes: 35 additions & 0 deletions .../react/components/TabContent/TabSettingsGeneral/Settings/TrafficControlAutoblockPeriod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import Select from '../../../FormElements/Select';
const {__} = wp.i18n;

export default function TrafficControlAutoblockPeriod(props) {
const {id, name, value} = props;

const options = [
{value: '60', label: __('1 minute', 'security-malware-firewall')},
{value: '300', label: __('5 minutes', 'security-malware-firewall')},
{value: '900', label: __('15 minutes', 'security-malware-firewall')},
{value: '3600', label: __('1 hour', 'security-malware-firewall')},
{value: '43200', label: __('12 hours', 'security-malware-firewall')},
{value: '86400', label: __('24 hours', 'security-malware-firewall')},
{value: '259200', label: __('3 days', 'security-malware-firewall')},
];

return (
<div className="spbc_middle_text_field spbc_sub_setting">
<label
htmlFor={'spbc_setting_' + id}
className="spbc_settings-field_title spbc_settings-field_title--field"
>
<span>{__('Block a visitor if they exceeded the limit of opened pages for', 'security-malware-firewall')}</span>
</label>&nbsp;
<Select
id={'spbc_setting_' + id}
name={name}
value={String(value)}
options={options}
className="spbc_setting_field"
/>
</div>
);
}
35 changes: 35 additions & 0 deletions ...act/components/TabContent/TabSettingsGeneral/Settings/TrafficControlAutoblockTimeframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import Select from '../../../FormElements/Select';
const {__} = wp.i18n;

export default function TrafficControlAutoblockTimeframe(props) {
const {id, name, value} = props;

const options = [
{value: '60', label: __('1 minute', 'security-malware-firewall')},
{value: '180', label: __('3 minutes', 'security-malware-firewall')},
{value: '300', label: __('5 minutes', 'security-malware-firewall')},
{value: '600', label: __('10 minutes', 'security-malware-firewall')},
{value: '900', label: __('15 minutes', 'security-malware-firewall')},
{value: '1800', label: __('30 minutes', 'security-malware-firewall')},
{value: '3600', label: __('60 minutes', 'security-malware-firewall')},
];

return (
<div className="spbc_middle_text_field spbc_sub_setting">
<label
htmlFor={'spbc_setting_' + id}
className="spbc_settings-field_title spbc_settings-field_title--field"
>
<span>{__('Time frame to measure page hits', 'security-malware-firewall')}</span>
</label>&nbsp;
<Select
id={'spbc_setting_' + id}
name={name}
value={String(value)}
options={options}
className="spbc_setting_field"
/>
</div>
);
}
52 changes: 52 additions & 0 deletions js/src/react/components/TabContent/TabSettingsGeneral/Settings/TrafficControlEnabled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react';
import useSettingsDependencies from '../../../../hooks/useSettingsDependencies';
const {__} = wp.i18n;

export default function TrafficControlEnabled(props) {
const {id, name, value, onSettingChange} = props;
const handleSettingsDependencies = useSettingsDependencies();

return (
<>
<input
type="checkbox"
id={'spbc_setting_' + id}
name={name}
value="1"
checked={value === 1 || value === '1' || value === true}
className="spbc_setting_field"
onChange={(e) => {
const next = e.target.checked ? 1 : 0;
onSettingChange?.(id, next);
handleSettingsDependencies(
'traffic_control__autoblock_timeframe,' +
'traffic_control__autoblock_amount,' +
'traffic_control__autoblock_period,' +
'traffic_control__exclude_authorised_users'
)(e);
}}
/>
<label
htmlFor={'spbc_setting_' + id}
className="spbc_setting-field_title--field"
>
<span>
{__('Traffic Control', 'security-malware-firewall')}
</span>
</label>
<i
data-setting={id}
className="spbc_long_description__show spbc-icon-help-circled"
></i>
<div className="spbc_settings_description">
<span>
{__(
'This feature shows a list of visits and hits of everyone who tried to go to your website. Allows you to ban any visitor, a whole country or a network.\n' +
'Please note: a single visit (session) can generate multiple entries. This is because the system captures not only the initial page load but also all subsequent background requests (e.g., AJAX) that occur during the session.',
'security-malware-firewall',
)}
</span>
</div>
</>
);
}
32 changes: 32 additions & 0 deletions ...components/TabContent/TabSettingsGeneral/Settings/TrafficControlExcludeAuthorizedUsers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';

const {__} = wp.i18n;

export default function TrafficControlExcludeAuthorizedUsers(props) {
const {id, name, value, onSettingChange} = props;

return (
<div className="spbc_wrapper_field spbc_sub_setting">
<input
type="checkbox"
id={'spbc_setting_' + id}
name={name}
value="1"
checked={value === 1 || value === '1' || value === true}
className="spbc_setting_field"
onChange={(e) => {
const next = e.target.checked ? 1 : 0;
onSettingChange?.(id, next);
}}
/>
<label
htmlFor={'spbc_setting_' + id}
className="spbc_setting-field_title--field"
>
<span>
{__('Ignore logged in users', 'security-malware-firewall')}
</span>
</label>
</div>
);
}
48 changes: 48 additions & 0 deletions js/src/react/components/TabContent/TabSettingsGeneral/Settings/UploadCheckerFiles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import useSettingsDependencies from '../../../../hooks/useSettingsDependencies';
const {__} = wp.i18n;

export default function UploadCheckerFiles(props) {
const {id, name, value, onSettingChange} = props;
const handleSettingsDependencies = useSettingsDependencies();

return (
<>
<input
type="checkbox"
id={'spbc_setting_' + id}
name={name}
value="1"
checked={value === 1 || value === '1' || value === true}
className="spbc_setting_field"
onChange={(e) => {
const next = e.target.checked ? 1 : 0;
onSettingChange?.(id, next);
handleSettingsDependencies(
'upload_checker__do_check_wordpress_modules'
)(e);
}}
/>
<label
htmlFor={'spbc_setting_' + id}
className="spbc_setting-field_title--field"
>
<span>
{__('Run the Upload Checker module for uploaded files', 'security-malware-firewall')}
</span>
</label>
<i
data-setting={id}
className="spbc_long_description__show spbc-icon-help-circled"
></i>
<div className="spbc_settings_description">
<span>
{__(
'The plugin will scan files uploaded to the WordPress media library for known malicious code with heuristic and signature analysis. If malware found, upload will stop.',
'security-malware-firewall',
)}
</span>
</div>
</>
);
}
40 changes: 40 additions & 0 deletions js/src/react/components/TabContent/TabSettingsGeneral/Settings/UploadCheckerModules.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';

const {__} = wp.i18n;

export default function UploadCheckerModules(props) {
const {id, name, value, onSettingChange} = props;

return (
<div className="spbc_wrapper_field spbc_sub_setting">
<input
type="checkbox"
id={'spbc_setting_' + id}
name={name}
value="1"
checked={value === 1 || value === '1' || value === true}
className="spbc_setting_field"
onChange={(e) => {
const next = e.target.checked ? 1 : 0;
onSettingChange?.(id, next);
}}
/>
<label
htmlFor={'spbc_setting_' + id}
className="spbc_setting-field_title--field"
>
<span>
{__('Check plugins and themes archives before install', 'security-malware-firewall')}
</span>
</label>
<div className="spbc_settings_description">
<span>
{__(
'Check the plugins and themes uploaded via WordPress built in interface with signature analysis.',
'security-malware-firewall',
)}
</span>
</div>
</div>
);
}
14 changes: 14 additions & 0 deletions js/src/react/components/TabContent/TabSettingsGeneral/SettingsGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,13 @@ import WafXssCheck from './Settings/WafXssCheck';
import WafSqlCheck from './Settings/WafSqlCheck';
import WafExploitCheck from './Settings/WafExploitCheck';
import WafBlockerEnabled from './Settings/WafBlockerEnabled';
import UploadCheckerFiles from "./Settings/UploadCheckerFiles";
import UploadCheckerModules from "./Settings/UploadCheckerModules";
import TrafficControlEnabled from "./Settings/TrafficControlEnabled";
import TrafficControlAutoblockTimeframe from "./Settings/TrafficControlAutoblockTimeframe";
import TrafficControlAutoblockAmount from "./Settings/TrafficControlAutoblockAmount";
import TrafficControlAutoblockPeriod from "./Settings/TrafficControlAutoblockPeriod";
import TrafficControlExcludeAuthorizedUsers from "./Settings/TrafficControlExcludeAuthorizedUsers";

export default function SettingsGroup(props) {
const {
Expand Down Expand Up @@ -96,6 +103,13 @@ export default function SettingsGroup(props) {
'waf__sql_check': WafSqlCheck,
'waf__exploit_check': WafExploitCheck,
'waf_blocker__enabled': WafBlockerEnabled,
'upload_checker__file_check': UploadCheckerFiles,
'upload_checker__do_check_wordpress_modules': UploadCheckerModules,
'traffic_control__enabled': TrafficControlEnabled,
'traffic_control__autoblock_timeframe': TrafficControlAutoblockTimeframe,
'traffic_control__autoblock_amount': TrafficControlAutoblockAmount,
'traffic_control__autoblock_period': TrafficControlAutoblockPeriod,
'traffic_control__exclude_authorised_users': TrafficControlExcludeAuthorizedUsers,
// ... other different types
};

Expand Down
Loading