* client: move access settings to DNS settings page

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, withNamespaces } from 'react-i18next';
+import flow from 'lodash/flow';
+
+const Form = (props) => {
+    const { handleSubmit, submitting, invalid } = props;
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="form__group mb-5">
+                <label className="form__label form__label--with-desc" htmlFor="allowed_clients">
+                    <Trans>access_allowed_title</Trans>
+                </label>
+                <div className="form__desc form__desc--top">
+                    <Trans>access_allowed_desc</Trans>
+                </div>
+                <Field
+                    id="allowed_clients"
+                    name="allowed_clients"
+                    component="textarea"
+                    type="text"
+                    className="form-control form-control--textarea"
+                />
+            </div>
+            <div className="form__group mb-5">
+                <label className="form__label form__label--with-desc" htmlFor="disallowed_clients">
+                    <Trans>access_disallowed_title</Trans>
+                </label>
+                <div className="form__desc form__desc--top">
+                    <Trans>access_disallowed_desc</Trans>
+                </div>
+                <Field
+                    id="disallowed_clients"
+                    name="disallowed_clients"
+                    component="textarea"
+                    type="text"
+                    className="form-control form-control--textarea"
+                />
+            </div>
+            <div className="form__group mb-5">
+                <label className="form__label form__label--with-desc" htmlFor="blocked_hosts">
+                    <Trans>access_blocked_title</Trans>
+                </label>
+                <div className="form__desc form__desc--top">
+                    <Trans>access_blocked_desc</Trans>
+                </div>
+                <Field
+                    id="blocked_hosts"
+                    name="blocked_hosts"
+                    component="textarea"
+                    type="text"
+                    className="form-control form-control--textarea"
+                />
+            </div>
+            <div className="card-actions">
+                <div className="btn-list">
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-standard"
+                        disabled={submitting || invalid}
+                    >
+                        <Trans>save_config</Trans>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    handleSubmit: PropTypes.func,
+    submitting: PropTypes.bool,
+    invalid: PropTypes.bool,
+    initialValues: PropTypes.object,
+    t: PropTypes.func,
+};
+
+export default flow([withNamespaces(), reduxForm({ form: 'accessForm' })])(Form);

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

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withNamespaces } from 'react-i18next';
+
+import Form from './Form';
+import Card from '../../../ui/Card';
+
+class Access extends Component {
+    handleFormSubmit = (values) => {
+        this.props.setAccessList(values);
+    };
+
+    render() {
+        const { t, access } = this.props;
+
+        const {
+            processing,
+            processingSet,
+            ...values
+        } = access;
+
+        return (
+            <Card
+                title={t('access_title')}
+                subtitle={t('access_desc')}
+                bodyType="card-body box-body--settings"
+            >
+                <Form
+                    initialValues={values}
+                    onSubmit={this.handleFormSubmit}
+                />
+            </Card>
+        );
+    }
+}
+
+Access.propTypes = {
+    access: PropTypes.object.isRequired,
+    setAccessList: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default withNamespaces()(Access);

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,
 };