- {dashboard.processing &&
-
+ <>
+ {updateAvailable && <>
+
+
+
-
+ const reloadPage = () => {
+ window.location.reload();
+ };
+
+ return (
+
+ {processing &&
+ )}
+ {!processing && isCoreRunning && ROUTES.map(renderRoute)}
+
+
-
-
+
- )}
- {!dashboard.processing && dashboard.isCoreRunning && (
- <>
-
-
-
-
-
-
-
-
-
- 
-
- {!dashboard.processing && dashboard.isCoreRunning && (
-
- {dashboard.protectionEnabled ? 'on' : 'off'}
+ return (
+
-
+
+ );
};
-export default withTranslation()(Header);
+export default Header;
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 13d4cb88..9df0a31b 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -437,7 +437,7 @@
}
.custom-select__arrow--left {
- background: #fff url('./chevron-down.svg') no-repeat;
+ background: var(--white) url('../ui/svg/chevron-down.svg') no-repeat;
background-position: 5px 9px;
background-size: 22px;
}
diff --git a/client/src/components/Logs/chevron-down.svg b/client/src/components/Logs/chevron-down.svg
deleted file mode 100644
index e7851196..00000000
--- a/client/src/components/Logs/chevron-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/client/src/components/Settings/Dhcp/index.js b/client/src/components/Settings/Dhcp/index.js
index b08b1094..061cde39 100644
--- a/client/src/components/Settings/Dhcp/index.js
+++ b/client/src/components/Settings/Dhcp/index.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Trans, withTranslation } from 'react-i18next';
@@ -34,13 +34,14 @@ class Dhcp extends Component {
} = this.props.dhcp;
const otherDhcpFound = check?.otherServer
&& check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
- const filledConfig = Object.keys(config).every((key) => {
- if (key === 'enabled' || key === 'icmp_timeout_msec') {
- return true;
- }
+ const filledConfig = Object.keys(config)
+ .every((key) => {
+ if (key === 'enabled' || key === 'icmp_timeout_msec') {
+ return true;
+ }
- return config[key];
- });
+ return config[key];
+ });
if (config.enabled) {
return (
@@ -114,40 +115,35 @@ class Dhcp extends Component {
getStaticIpWarning = (t, check, interfaceName) => {
if (check.staticIP.static === DHCP_STATUS_RESPONSE.ERROR) {
- return (
-
+
- );
- }
-}
-
-Header.propTypes = {
- dashboard: PropTypes.object.isRequired,
- location: PropTypes.object.isRequired,
- getVersion: PropTypes.func.isRequired,
- t: PropTypes.func.isRequired,
+
+
+
+
+
+
-
-
+
+
+
+ {!processing && isCoreRunning && (
+
+ {protectionEnabled ? 'on' : 'off'}
- )}
-
+ )}
-
+
+
- {!dashboard.processingProfile && dashboard.name
- &&
- sign_out
-
- }
-
+
+
+ {!processingProfile && name
+ &&
+ sign_out
+ }
- dhcp_static_ip_error
-
+ ; + } + if (check.staticIP.static === DHCP_STATUS_RESPONSE.NO && check.staticIP.ip - && interfaceName - ) { - return ( -
-
-
- );
+ && interfaceName) {
+ return <>
+
+ ; } return ''; @@ -163,104 +159,101 @@ class Dhcp extends Component { removeStaticLease, toggleLeaseModal, } = this.props; + const statusButtonClass = classnames({ 'btn btn-primary btn-standard': true, 'btn btn-primary btn-standard btn-loading': dhcp.processingStatus, }); const { enabled, interface_name, ...values } = dhcp.config; - return ( -
-
-
-
-
- {check.staticIP.error}
-
-
+ return <>
+
+ dhcp_static_ip_error
+
- - ); - } if ( - check.staticIP.static === DHCP_STATUS_RESPONSE.NO +
+
+
+ {check.staticIP.error}
+
- - - ); - } if ( - check.staticIP.static === DHCP_STATUS_RESPONSE.NO +
+ ; + } + if (check.staticIP.static === DHCP_STATUS_RESPONSE.NO && check.staticIP.ip - && interfaceName - ) { - return ( -
- example]}
- values={{
- interfaceName,
- ipAddress: check.staticIP.ip,
- }}
- >
- dhcp_dynamic_ip_found
-
-
- -
+ example]}
+ values={{
+ interfaceName,
+ ipAddress: check.staticIP.ip,
+ }}
+ >
+ dhcp_dynamic_ip_found
+
+
+ + ; } return ''; @@ -163,104 +159,101 @@ class Dhcp extends Component { removeStaticLease, toggleLeaseModal, } = this.props; + const statusButtonClass = classnames({ 'btn btn-primary btn-standard': true, 'btn btn-primary btn-standard btn-loading': dhcp.processingStatus, }); const { enabled, interface_name, ...values } = dhcp.config; - return ( -
-
-
-
-
- {this.getStaticIpWarning(t, dhcp.check, interface_name)}
- {this.getActiveDhcpMessage(t, dhcp.check)}
- {this.getDhcpWarning(dhcp.check)}
-
- )}
-
+ return <>
+
+
-
- {this.getToggleDhcpButton()}
-
-
- {!enabled && dhcp.check && (
-
+ <>
+
+
+
-
- )}
-
-
+ {dhcp.config.enabled && (
+
+
)}
-
- );
+
+
+ }
+ ;
}
}
diff --git a/client/src/components/Settings/Dns/Access/index.js b/client/src/components/Settings/Dns/Access/index.js
index acceef48..a1c263aa 100644
--- a/client/src/components/Settings/Dns/Access/index.js
+++ b/client/src/components/Settings/Dns/Access/index.js
@@ -1,40 +1,36 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import Form from './Form';
import Card from '../../../ui/Card';
+import { setAccessList } from '../../../../actions/access';
-class Access extends Component {
- handleFormSubmit = (values) => {
- this.props.setAccessList(values);
+const Access = () => {
+ const { t } = useTranslation();
+ const dispatch = useDispatch();
+ const {
+ processing,
+ processingSet,
+ ...values
+ } = useSelector((state) => state.access, shallowEqual);
+
+ const handleFormSubmit = (values) => {
+ dispatch(setAccessList(values));
};
- render() {
- const { t, access } = this.props;
-
- const { processing, processingSet, ...values } = access;
-
- return (
-
-
-
- );
- }
-}
-
-Access.propTypes = {
- access: PropTypes.object.isRequired,
- setAccessList: PropTypes.func.isRequired,
- t: PropTypes.func.isRequired,
+ return (
+
+
+
+ );
};
-export default withTranslation()(Access);
+export default Access;
diff --git a/client/src/components/Settings/Dns/Config/Form.js b/client/src/components/Settings/Dns/Config/Form.js
index 08514bc8..58b7d2c0 100644
--- a/client/src/components/Settings/Dns/Config/Form.js
+++ b/client/src/components/Settings/Dns/Config/Form.js
@@ -1,9 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
+import { shallowEqual, useSelector } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, useTranslation } from 'react-i18next';
import {
renderInputField,
renderRadioField,
@@ -18,32 +17,36 @@ import {
} from '../../../../helpers/validators';
import { BLOCKING_MODES, FORM_NAME } from '../../../../helpers/constants';
-const checkboxes = [{
- name: 'edns_cs_enabled',
- placeholder: 'edns_enable',
- subtitle: 'edns_cs_desc',
-},
-{
- name: 'dnssec_enabled',
- placeholder: 'dnssec_enable',
- subtitle: 'dnssec_enable_desc',
-},
-{
- name: 'disable_ipv6',
- placeholder: 'disable_ipv6',
- subtitle: 'disable_ipv6_desc',
-}];
+const checkboxes = [
+ {
+ name: 'edns_cs_enabled',
+ placeholder: 'edns_enable',
+ subtitle: 'edns_cs_desc',
+ },
+ {
+ name: 'dnssec_enabled',
+ placeholder: 'dnssec_enable',
+ subtitle: 'dnssec_enable_desc',
+ },
+ {
+ name: 'disable_ipv6',
+ placeholder: 'disable_ipv6',
+ subtitle: 'disable_ipv6_desc',
+ },
+];
-const customIps = [{
- description: 'blocking_ipv4_desc',
- name: 'blocking_ipv4',
- validateIp: validateIpv4,
-},
-{
- description: 'blocking_ipv6_desc',
- name: 'blocking_ipv6',
- validateIp: validateIpv6,
-}];
+const customIps = [
+ {
+ description: 'blocking_ipv4_desc',
+ name: 'blocking_ipv4',
+ validateIp: validateIpv4,
+ },
+ {
+ description: 'blocking_ipv6_desc',
+ name: 'blocking_ipv6',
+ validateIp: validateIpv6,
+ },
+];
const getFields = (processing, t) => Object.values(BLOCKING_MODES)
.map((mode) => (
@@ -58,114 +61,107 @@ const getFields = (processing, t) => Object.values(BLOCKING_MODES)
/>
));
-let Form = ({
- handleSubmit, submitting, invalid, processing, blockingMode, t,
-}) =>
+
+ {this.getToggleDhcpButton()}
+
-
- {dhcp.config.enabled && (
-
-
-
-
-
-
+
-
-
-
-
+ {!enabled && dhcp.check && (
+ <>
+ {this.getStaticIpWarning(t, dhcp.check, interface_name)}
+ {this.getActiveDhcpMessage(t, dhcp.check)}
+ {this.getDhcpWarning(dhcp.check)}
+
+ )}
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+