* client: move access settings to DNS settings page

client/src/components/Settings/Clients/index.js

@@ -9,12 +9,20 @@ import Loading from '../../ui/Loading';
 
 class Clients extends Component {
     render() {
-        const { dashboard, clients, t } = this.props;
+        const {
+            t,
+            dashboard,
+            clients,
+            addClient,
+            updateClient,
+            deleteClient,
+            toggleClientModal,
+        } = this.props;
 
         return (
             <Fragment>
                 <PageTitle title={t('clients_settings')} />
-                {!dashboard.processingTopStats || (!dashboard.processingClients && <Loading />)}
+                {(dashboard.processingTopStats || dashboard.processingClients) && <Loading />}
                 {!dashboard.processingTopStats && !dashboard.processingClients && (
                     <Fragment>
                         <ClientsTable
@@ -23,10 +31,10 @@ class Clients extends Component {
                             isModalOpen={clients.isModalOpen}
                             modalClientName={clients.modalClientName}
                             modalType={clients.modalType}
-                            addClient={this.props.addClient}
-                            updateClient={this.props.updateClient}
-                            deleteClient={this.props.deleteClient}
-                            toggleClientModal={this.props.toggleClientModal}
+                            addClient={addClient}
+                            updateClient={updateClient}
+                            deleteClient={deleteClient}
+                            toggleClientModal={toggleClientModal}
                             processingAdding={clients.processingAdding}
                             processingDeleting={clients.processingDeleting}
                             processingUpdating={clients.processingUpdating}
@@ -45,18 +53,12 @@ class Clients extends Component {
 Clients.propTypes = {
     t: PropTypes.func.isRequired,
     dashboard: PropTypes.object.isRequired,
-    clients: PropTypes.array.isRequired,
-    topStats: PropTypes.object.isRequired,
+    clients: PropTypes.object.isRequired,
     toggleClientModal: PropTypes.func.isRequired,
     deleteClient: PropTypes.func.isRequired,
     addClient: PropTypes.func.isRequired,
     updateClient: PropTypes.func.isRequired,
-    isModalOpen: PropTypes.bool.isRequired,
-    modalType: PropTypes.string.isRequired,
-    modalClientName: PropTypes.string.isRequired,
-    processingAdding: PropTypes.bool.isRequired,
-    processingDeleting: PropTypes.bool.isRequired,
-    processingUpdating: PropTypes.bool.isRequired,
+    topStats: PropTypes.object,
 };
 
 export default withNamespaces()(Clients);

client/src/components/Settings/Dns/Access/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withNamespaces } from 'react-i18next';
 
 import Form from './Form';
-import Card from '../../ui/Card';
+import Card from '../../../ui/Card';
 
 class Access extends Component {
     handleFormSubmit = (values) => {

client/src/components/Settings/Dns/index.js

@@ -1,34 +1,59 @@
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withNamespaces } from 'react-i18next';
 
 import Upstream from './Upstream';
+import Access from './Access';
 import PageTitle from '../../ui/PageTitle';
+import Loading from '../../ui/Loading';
 
-const Dns = (props) => {
-    const { dashboard, settings, t } = props;
+class Dns extends Component {
+    componentDidMount() {
+        this.props.getAccessList();
+    }
 
-    return (
-        <Fragment>
-            <PageTitle title={t('dns_settings')} />
-            <Upstream
-                upstreamDns={dashboard.upstreamDns}
-                bootstrapDns={dashboard.bootstrapDns}
-                allServers={dashboard.allServers}
-                setUpstream={props.setUpstream}
-                testUpstream={props.testUpstream}
-                processingTestUpstream={settings.processingTestUpstream}
-                processingSetUpstream={settings.processingSetUpstream}
-            />
-        </Fragment>
-    );
-};
+    render() {
+        const {
+            t,
+            dashboard,
+            settings,
+            access,
+            setAccessList,
+            testUpstream,
+            setUpstream,
+        } = this.props;
+
+        return (
+            <Fragment>
+                <PageTitle title={t('dns_settings')} />
+                {(dashboard.processing || access.processing) && <Loading />}
+                {!dashboard.processing && !access.processing && (
+                    <Fragment>
+                        <Upstream
+                            upstreamDns={dashboard.upstreamDns}
+                            bootstrapDns={dashboard.bootstrapDns}
+                            allServers={dashboard.allServers}
+                            processingTestUpstream={settings.processingTestUpstream}
+                            processingSetUpstream={settings.processingSetUpstream}
+                            setUpstream={setUpstream}
+                            testUpstream={testUpstream}
+                        />
+                        <Access access={access} setAccessList={setAccessList} />
+                    </Fragment>
+                )}
+            </Fragment>
+        );
+    }
+}
 
 Dns.propTypes = {
     dashboard: PropTypes.object.isRequired,
     settings: PropTypes.object.isRequired,
     setUpstream: PropTypes.func.isRequired,
     testUpstream: PropTypes.func.isRequired,
+    getAccessList: PropTypes.func.isRequired,
+    setAccessList: PropTypes.func.isRequired,
+    access: PropTypes.object.isRequired,
     t: PropTypes.func.isRequired,
 };
 

client/src/containers/Dns.js

@@ -1,12 +1,14 @@
 import { connect } from 'react-redux';
 import { handleUpstreamChange, setUpstream, testUpstream, addErrorToast } from '../actions';
+import { getAccessList, setAccessList } from '../actions/access';
 import Dns from '../components/Settings/Dns';
 
 const mapStateToProps = (state) => {
-    const { dashboard, settings } = state;
+    const { dashboard, settings, access } = state;
     const props = {
         dashboard,
         settings,
+        access,
     };
     return props;
 };
@@ -16,6 +18,8 @@ const mapDispatchToProps = {
     setUpstream,
     testUpstream,
     addErrorToast,
+    getAccessList,
+    setAccessList,
 };
 
 export default connect(

client/src/containers/Settings.js

@@ -1,53 +1,11 @@
 import { connect } from 'react-redux';
-import {
-    initSettings,
-    toggleSetting,
-    handleUpstreamChange,
-    setUpstream,
-    testUpstream,
-    addErrorToast,
-    toggleDhcp,
-    getDhcpStatus,
-    getDhcpInterfaces,
-    setDhcpConfig,
-    findActiveDhcp,
-    addStaticLease,
-    removeStaticLease,
-    toggleLeaseModal,
-} from '../actions';
-import {
-    getTlsStatus,
-    setTlsConfig,
-    validateTlsConfig,
-} from '../actions/encryption';
-import {
-    addClient,
-    updateClient,
-    deleteClient,
-    toggleClientModal,
-} from '../actions/clients';
-import {
-    getAccessList,
-    setAccessList,
-} from '../actions/access';
+import { initSettings, toggleSetting, addErrorToast } from '../actions';
 import Settings from '../components/Settings';
 
 const mapStateToProps = (state) => {
-    const {
-        settings,
-        dashboard,
-        dhcp,
-        encryption,
-        clients,
-        access,
-    } = state;
+    const { settings } = state;
     const props = {
         settings,
-        dashboard,
-        dhcp,
-        encryption,
-        clients,
-        access,
     };
     return props;
 };
@@ -55,27 +13,7 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = {
     initSettings,
     toggleSetting,
-    handleUpstreamChange,
-    setUpstream,
-    testUpstream,
     addErrorToast,
-    toggleDhcp,
-    getDhcpStatus,
-    getDhcpInterfaces,
-    setDhcpConfig,
-    findActiveDhcp,
-    getTlsStatus,
-    setTlsConfig,
-    validateTlsConfig,
-    addClient,
-    updateClient,
-    deleteClient,
-    toggleClientModal,
-    addStaticLease,
-    removeStaticLease,
-    toggleLeaseModal,
-    getAccessList,
-    setAccessList,
 };
 
 export default connect(

client/src/reducers/access.js

@@ -17,6 +17,7 @@ const access = handleActions(
                 allowed_clients: allowed_clients.join('\n'),
                 disallowed_clients: disallowed_clients.join('\n'),
                 blocked_hosts: blocked_hosts.join('\n'),
+                processing: false,
             };
             return newState;
         },