Fix. Settings. React - Settings Api key implemented.

css/src/spbc-settings.css

@@ -221,14 +221,6 @@ div.pagination{
 					width: 500px;
 				}
 
-
-/* Show/hide key link */
-#showHideLink{
-	display: inline-block;
-	margin-top: 5px;
-	color: #777;
-}
-
 /* Log button */
 .spbc__wrapper--center{margin: 10px 0 10px 0; text-align: center;}
 
@@ -805,47 +797,6 @@ button#spbc_setting_get_key_auto:disabled {
 	flex-grow: 1;
 }
 
-.spbc-quicknav--bar_wrapper {
-	display: flex;
-	flex-direction: column;
-	flex-wrap: nowrap;
-	justify-content: flex-start;
-	height: fit-content;
-	position: sticky;
-	top: 5vh;
-}
-
-.spbc-quicknav--links_wrapper {
-	display: flex;
-	flex-direction: column;
-	flex-wrap: nowrap;
-	justify-content: center;
-	padding: 3px;
-	border: 1px solid #e5e5e5;
-	margin: 10px;
-}
-
-.spbc-quicknav--link{
-	margin: 3px;
-	width: -webkit-fill-available;
-	width: -moz-available;
-	text-align: left;
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-}
-
-#spbc_quicknav--header {
-	color: #026E88;
-	text-align: center;
-	margin: 5px 0;
-}
-
-.spbc_quicknav--save_button {
-	margin: 10px 5px !important;
-	height: 40px;
-}
-
 .spbc_settings--save_button_custom {
 	position: sticky;
 	bottom: 0;

inc/spbc-admin.php

@@ -6,6 +6,7 @@
 use CleantalkSP\SpbctWP\DTO\ReactDataDTO;
 use CleantalkSP\SpbctWP\Escape;
 use CleantalkSP\SpbctWP\Scanner\DBTrigger\DBTriggerService;
+use CleantalkSP\SpbctWP\Settings\SettingsGeneralReact;
 use CleantalkSP\SpbctWP\VulnerabilityAlarm\Dto\PluginReport;
 use CleantalkSP\SpbctWP\Firewall\View as FirewallView;
 use CleantalkSP\SpbctWP\VulnerabilityAlarm\Dto\ThemeReport;
@@ -226,6 +227,9 @@ function spbct_get_tab_data()
         case 'traffic_control':
             wp_send_json(FirewallView::getReactData($data));
             break;
+        case 'settings_general':
+            wp_send_json(SettingsGeneralReact::getReactData());
+            break;
         case 'spbct_settings_overview':
             wp_send_json(spbc_field_options_overview_traffic_light());
             break;

inc/spbc-settings.php

@@ -203,71 +203,6 @@ function spbc_settings__register()
                 'ajax'         => true,
                 'after'        => 'spbc_settings_draw_save_button_bottom_block',
                 'sections'     => array(
-                    'section_top_banner' => array(
-                        'type'   => 'section_banner',
-                        'fields' => array(
-                            'security_log' => array(
-                                'type'     => 'field',
-                            ),
-                        ),
-                    ),
-                    'apikey'          => array(
-                        'type'   => 'section',
-                        'title'  => __('Access Key', 'security-malware-firewall'),
-                        'anchor'      => 'apikey',
-                        'fields' => array(
-                            'apikey'                  => array(
-                                'type'     => 'field',
-                                'callback' => 'spbc_field_key'
-                            ),
-                            'ms__work_mode'           => array(
-                                'type'             => 'field',
-                                'input_type'       => 'select',
-                                'options'          => array(
-                                    array(
-                                        'val'             => 1,
-                                        'label'           => __('Mutual Account, Individual Access Keys', 'security-malware-firewall'),
-                                        'children_enable' => 1,
-                                    ),
-                                    array(
-                                        'val'             => 2,
-                                        'label'           => __('Mutual Account, Mutual Access Key', 'security-malware-firewall'),
-                                        'children_enable' => 0,
-                                    ),
-                                    array(
-                                        'val'             => 3,
-                                        'label'           => __('Individual accounts, individual Access keys', 'security-malware-firewall'),
-                                        'children_enable' => 0,
-                                    ),
-                                ),
-                                'title'            => __('WordPress Multisite Work Mode', 'security-malware-firewall'),
-                                'description'      => __('You can choose the work mode here for the child blogs and how they will operate with the CleanTalk Cloud. Press "?" for the detailed description.', 'security-malware-firewall'),
-                                'long_description' => true,
-                                'display'          => $spbc->is_network && $spbc->is_mainsite,
-                                'children'         => array('ms__hoster_api_key'),
-                                'value_source'     => 'network_settings',
-                            ),
-                            'ms__hoster_api_key'      => array(
-                                'type'                => 'field',
-                                'input_type'          => 'text',
-                                'title'               => __('Hoster access key', 'security-malware-firewall'),
-                                'description'         => __('Another API allowing you to hold multiple blogs on on account.', 'security-malware-firewall'),
-                                'class'               => 'spbc_middle_text_field',
-                                'title_first'         => true,
-                                'long_description'    => true,
-                                'display'             => $spbc->is_network && $spbc->is_mainsite,
-                                'disabled'            => ! isset($spbc->network_settings['ms__work_mode']) || $spbc->network_settings['ms__work_mode'] != 1,
-                                'value_source'        => 'network_settings',
-                                'parent_value_source' => 'network_settings',
-                                'parent'              => 'ms__work_mode',
-                            ),
-                            'ms__service_utilization' => array(
-                                'type'     => 'field',
-                                'callback' => 'spbc_field_service_utilization',
-                                'display'  => $spbc->is_network && $spbc->is_mainsite && $spbc->ms__work_mode == 1,
-                            ),
-                        ),
-                    ),
                     'auth'            => array(
                         'type'   => 'section',
                         'title'  => __('Authentication and Logging In', 'security-malware-firewall'),
@@ -1395,32 +1330,7 @@ function spbct_settings__the_settings_tab_draw($elem)
     $settings_content = ob_get_clean();
     // End buffer
 
-    $template = '
-    <div id="spbc-settings-general-wrapper" class="spbc-settings-general-wrapper">
-        <div id="spbc-settings-general-wrapper-settings">
-            %s
-        </div>
-        <div id="spbc-quicknav--bar_wrapper" class="spbc-quicknav--bar_wrapper">
-            %s
-        </div>
-    </div>
-    ';
-
-    // Settings form elements here
-    echo '<form id="spbc_settings_form" method="post" action="options.php" style="margin-right: 12px; margin-top: -9px;">';
-
-    // Service fields
-    echo "<input type='hidden' name='option_page' value='" . esc_attr(SPBC_SETTINGS) . "' />";
-    echo '<input type="hidden" name="action" value="update" />';
-    wp_nonce_field(SPBC_SETTINGS . '-options', '_wpnonce', false);
-
-    echo sprintf(
-        $template,
-        $settings_content,
-        spbc_settings__get_quick_navbar_html($elem)
-    );
-
-    echo '</form>';
+    echo $settings_content;
 }
 
 /**

js/src/react/components/App.js

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, {createContext} from 'react';
 import Header from '../pageElements/Header/Header';
 import ServiceButtons from '../pageElements/ServiceButtons/ServiceButtons';
 import HiddenElements from '../pageElements/HiddenElements/HiddenElements';
 import Tabs from '../pageElements/Tabs/Tabs';
 
+export const DataRootContext = createContext(null);
+export const DataTabsContext = createContext(null);
+
 export default function App({dataRoot, dataTabs}) {
     if (!dataRoot) {
         return <div>Loading...</div>;
@@ -20,11 +23,13 @@ export default function App({dataRoot, dataTabs}) {
     }
 
     return (
-        <>
-            <Header data={dataRoot} />
-            <ServiceButtons />
-            <HiddenElements data={dataRoot} />
-            <Tabs data={dataTabs} />
-        </>
+        <DataRootContext.Provider value={dataRoot}>
+            <DataTabsContext.Provider value={dataTabs}>
+                <Header data={dataRoot} />
+                <ServiceButtons />
+                <HiddenElements data={dataRoot} />
+                <Tabs data={dataTabs} />
+            </DataTabsContext.Provider>
+        </DataRootContext.Provider>
     );
 }

js/src/react/components/FormElements/InputHidden.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function InputHidden(props) {
+    const {id, name, value} = props;
+    const sanitize = (str) => {
+        if (typeof str !== 'string') return str;
+        return str
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#x27;')
+            .replace(/\//g, '&#x2F;');
+    };
+    return <input
+        type='hidden'
+        id={sanitize(id)}
+        name={sanitize(name)}
+        value={sanitize(value)}
+    />;
+}

js/src/react/components/FormElements/InputText.js

@@ -0,0 +1,33 @@
+import React, {useState} from "react";
+
+export default function InputText(props) {
+    const {id, name, value: initialValue = '', placeholder, onChange, style} = props;
+    const [inputValue, setInputValue] = useState(initialValue);
+    const sanitize = (str) => {
+        if (typeof str !== 'string') return str;
+        return str
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#x27;')
+            .replace(/\//g, '&#x2F;');
+    };
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        // Call `onChange` from props, if exists
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return <input
+        type='text'
+        id={sanitize(id)}
+        name={sanitize(name)}
+        value={inputValue}
+        placeholder={sanitize(placeholder) || ''}
+        style={style || {}}
+        onChange={handleChange}
+    />;
+}

js/src/react/components/FormElements/Select.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+
+export default function Select({
+                                   id,
+                                   name,
+                                   value: initialValue,
+                                   options = [],
+                                   onChange,
+                                   className = '',
+                                   disabled = false,
+                                   placeholder = '',
+                                   ...props
+                               }) {
+    const [selectedValue, setSelectedValue] = useState(initialValue || '');
+
+    useEffect(() => {
+        if (initialValue !== undefined) {
+            setSelectedValue(initialValue);
+        }
+    }, [initialValue]);
+
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        setSelectedValue(newValue);
+
+        // Call `onChange` from props, if exists
+        if (onChange) {
+            onChange(event);
+        }
+    };
+
+    return (
+        <select
+            id={id}
+            name={name}
+            value={selectedValue}
+            onChange={handleChange}
+            className={className}
+            disabled={disabled}
+            {...props}
+        >
+            {placeholder && (
+                <option value="" disabled>
+                    {placeholder}
+                </option>
+            )}
+
+            {options.map((option) => (
+                <option
+                    key={option.value}
+                    value={option.value}
+                    disabled={option.disabled}
+                    {...option.dataAttributes}
+                >
+                    {option.label}
+                </option>
+            ))}
+        </select>
+    );
+}

js/src/react/components/SettingsOverview/SettingsOverview.js

@@ -4,12 +4,13 @@ import './styles.css';
 import Preloader from "../Preloader/Preloader";
 import {sendAjaxRequest} from "../../modules/Http/Ajax";
 
-export default  function SettingsOverview() {
+export default  function SettingsOverview({settings}) {
     const [settingsOverviewFetched, setSettingsOverviewFetched] = useState(false);
     const [settingsOverview, setSettingsOverview] = useState(null);
 
     useEffect(() => {
         if ( ! settingsOverview ) {
+            // @ToDo use settings property instead of separate ajax-call
             fetchSettingsOverview();
         }
     }, []);
@@ -92,4 +93,4 @@ export default  function SettingsOverview() {
             </div>
         </div>
     </div>;
-}
+}

js/src/react/components/TabContent/TabContent.js

@@ -4,12 +4,17 @@ import Preloader from '../Preloader/Preloader';
 import {sendAjaxRequest} from '../../modules/Http/Ajax';
 import TabDefault from './TabDefault/TabDefault';
 
-export default function TabContent({sectionId, isActive, tabComponent}) {
+export default function TabContent({sectionId, isActive, tabComponent, tabsData}) {
     const [sectionData, setSectionData] = useState(null);
 
     useEffect(() => {
         if (isActive && !sectionData) {
-            if ( sectionId === 'critical_updates' || sectionId === 'fswatcher' || sectionId === 'traffic_control' ) {
+            if (
+                sectionId === 'critical_updates' ||
+                sectionId === 'fswatcher' ||
+                sectionId === 'traffic_control' ||
+                sectionId === 'general_settings'
+            ) {
                 fetchContent();
             } else {
                 fetchContentOld();