* client: upstream form

client/src/components/Settings/Upstream.js

@@ -1,97 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Trans, withNamespaces } from 'react-i18next';
-import Card from '../ui/Card';
-
-class Upstream extends Component {
-    handleChange = (e) => {
-        const { value } = e.currentTarget;
-        this.props.handleUpstreamChange(value);
-    };
-
-    handleSubmit = (e) => {
-        e.preventDefault();
-        this.props.handleUpstreamSubmit();
-    };
-
-    handleTest = () => {
-        this.props.handleUpstreamTest();
-    }
-
-    render() {
-        const testButtonClass = classnames({
-            'btn btn-primary btn-standard mr-2': true,
-            'btn btn-primary btn-standard mr-2 btn-loading': this.props.processingTestUpstream,
-        });
-        const { t } = this.props;
-
-        return (
-            <Card
-                title={ t('upstream_dns') }
-                subtitle={ t('upstream_dns_hint') }
-                bodyType="card-body box-body--settings"
-            >
-                <div className="row">
-                    <div className="col">
-                        <form>
-                            <textarea
-                                className="form-control form-control--textarea"
-                                value={this.props.upstreamDns}
-                                onChange={this.handleChange}
-                            />
-                            <div className="card-actions">
-                                <button
-                                    className={testButtonClass}
-                                    type="button"
-                                    onClick={this.handleTest}
-                                >
-                                    <Trans>test_upstream_btn</Trans>
-                                </button>
-                                <button
-                                    className="btn btn-success btn-standard"
-                                    type="submit"
-                                    onClick={this.handleSubmit}
-                                >
-                                    <Trans>apply_btn</Trans>
-                                </button>
-                            </div>
-                        </form>
-                        <hr/>
-                        <div className="list leading-loose">
-                            <Trans>examples_title</Trans>:
-                            <ol className="leading-loose">
-                                <li>
-                                    <code>1.1.1.1</code> - { t('example_upstream_regular') }
-                                </li>
-                                <li>
-                                    <code>tls://1dot1dot1dot1.cloudflare-dns.com</code> - <span dangerouslySetInnerHTML={{ __html: t('example_upstream_dot') }} />
-                                </li>
-                                <li>
-                                    <code>https://cloudflare-dns.com/dns-query</code> - <span dangerouslySetInnerHTML={{ __html: t('example_upstream_doh') }} />
-                                </li>
-                                <li>
-                                    <code>tcp://1.1.1.1</code> - { t('example_upstream_tcp') }
-                                </li>
-                                <li>
-                                    <code>sdns://...</code> - <span dangerouslySetInnerHTML={{ __html: t('example_upstream_sdns') }} />
-                                </li>
-                            </ol>
-                        </div>
-                    </div>
-                </div>
-            </Card>
-        );
-    }
-}
-
-Upstream.propTypes = {
-    upstreamDns: PropTypes.string,
-    processingTestUpstream: PropTypes.bool,
-    handleUpstreamChange: PropTypes.func,
-    handleUpstreamSubmit: PropTypes.func,
-    handleUpstreamTest: PropTypes.func,
-    t: PropTypes.func,
-};
-
-export default withNamespaces()(Upstream);

client/src/components/Settings/Upstream/Examples.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
+
+const Examples = props => (
+    <div className="list leading-loose">
+        <Trans>examples_title</Trans>:
+        <ol className="leading-loose">
+            <li>
+                <code>1.1.1.1</code> - { props.t('example_upstream_regular') }
+            </li>
+            <li>
+                <code>tls://1dot1dot1dot1.cloudflare-dns.com</code> - <span dangerouslySetInnerHTML={{ __html: props.t('example_upstream_dot') }} />
+            </li>
+            <li>
+                <code>https://cloudflare-dns.com/dns-query</code> - <span dangerouslySetInnerHTML={{ __html: props.t('example_upstream_doh') }} />
+            </li>
+            <li>
+                <code>tcp://1.1.1.1</code> - { props.t('example_upstream_tcp') }
+            </li>
+            <li>
+                <code>sdns://...</code> - <span dangerouslySetInnerHTML={{ __html: props.t('example_upstream_sdns') }} />
+            </li>
+        </ol>
+    </div>
+);
+
+Examples.propTypes = {
+    t: PropTypes.func.isRequired,
+};
+
+export default withNamespaces()(Examples);

client/src/components/Settings/Upstream/Form.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Field, reduxForm, formValueSelector } from 'redux-form';
+import { Trans, withNamespaces } from 'react-i18next';
+import flow from 'lodash/flow';
+import classnames from 'classnames';
+
+import { renderSelectField } from '../../../helpers/form';
+
+let Form = (props) => {
+    const {
+        t,
+        handleSubmit,
+        testUpstream,
+        upstreamDns,
+        submitting,
+        invalid,
+        processingSetUpstream,
+        processingTestUpstream,
+    } = props;
+
+    const testButtonClass = classnames({
+        'btn btn-primary btn-standard mr-2': true,
+        'btn btn-primary btn-standard mr-2 btn-loading': processingTestUpstream,
+    });
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="row">
+                <div className="col-12">
+                    <div className="form__group form__group--settings">
+                        <label>{t('upstream_dns')}</label>
+                        <Field
+                            id="upstream_dns"
+                            name="upstream_dns"
+                            component="textarea"
+                            type="text"
+                            className="form-control form-control--textarea"
+                            placeholder={t('upstream_dns')}
+                        />
+                    </div>
+                </div>
+                <div className="col-12">
+                    <div className="form__group form__group--settings">
+                        <Field
+                            name="all_servers"
+                            type="checkbox"
+                            component={renderSelectField}
+                            placeholder={t('upstream_parallel')}
+                        />
+                    </div>
+                </div>
+                <div className="col-12">
+                    <div className="form__group">
+                        <label>{t('bootstrap_dns')}</label>
+                        <Field
+                            id="bootstrap_dns"
+                            name="bootstrap_dns"
+                            component="textarea"
+                            type="text"
+                            className="form-control"
+                            placeholder={t('bootstrap_dns_desc')}
+                        />
+                    </div>
+                </div>
+            </div>
+            <div className="card-actions">
+                <div className="btn-list">
+                    <button
+                        type="button"
+                        className={testButtonClass}
+                        onClick={() => testUpstream(upstreamDns)}
+                        disabled={!upstreamDns || processingTestUpstream}
+                    >
+                        <Trans>test_upstream_btn</Trans>
+                    </button>
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-standard"
+                        disabled={
+                            submitting
+                            || invalid
+                            || processingSetUpstream
+                            || processingTestUpstream
+                        }
+                    >
+                        <Trans>apply_btn</Trans>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    handleSubmit: PropTypes.func,
+    testUpstream: PropTypes.func,
+    submitting: PropTypes.bool,
+    invalid: PropTypes.bool,
+    initialValues: PropTypes.object,
+    upstreamDns: PropTypes.string,
+    processingTestUpstream: PropTypes.bool,
+    processingSetUpstream: PropTypes.bool,
+    t: PropTypes.func,
+};
+
+const selector = formValueSelector('upstreamForm');
+
+Form = connect((state) => {
+    const upstreamDns = selector(state, 'upstream_dns');
+    return {
+        upstreamDns,
+    };
+})(Form);
+
+export default flow([
+    withNamespaces(),
+    reduxForm({ form: 'upstreamForm' }),
+])(Form);

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

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withNamespaces } from 'react-i18next';
+
+import Form from './Form';
+import Examples from './Examples';
+import Card from '../../ui/Card';
+
+class Upstream extends Component {
+    handleSubmit = (values) => {
+        this.props.setUpstream(values);
+    };
+
+    handleTest = (values) => {
+        this.props.testUpstream(values);
+    }
+
+    render() {
+        const {
+            t,
+            upstreamDns: upstream_dns,
+            bootstrapDns: bootstrap_dns,
+            allServers: all_servers,
+            processingSetUpstream,
+            processingTestUpstream,
+        } = this.props;
+
+        return (
+            <Card
+                title={ t('upstream_dns') }
+                subtitle={ t('upstream_dns_hint') }
+                bodyType="card-body box-body--settings"
+            >
+                <div className="row">
+                    <div className="col">
+                        <Form
+                            initialValues={{
+                                upstream_dns,
+                                bootstrap_dns,
+                                all_servers,
+                            }}
+                            testUpstream={this.handleTest}
+                            onSubmit={this.handleSubmit}
+                            processingTestUpstream={processingTestUpstream}
+                            processingSetUpstream={processingSetUpstream}
+                        />
+                        <hr/>
+                        <Examples />
+                    </div>
+                </div>
+            </Card>
+        );
+    }
+}
+
+Upstream.propTypes = {
+    upstreamDns: PropTypes.string,
+    bootstrapDns: PropTypes.string,
+    allServers: PropTypes.bool,
+    setUpstream: PropTypes.func.isRequired,
+    testUpstream: PropTypes.func.isRequired,
+    processingSetUpstream: PropTypes.bool.isRequired,
+    processingTestUpstream: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default withNamespaces()(Upstream);

client/src/components/Settings/index.js

@@ -41,22 +41,6 @@ class Settings extends Component {
         this.props.getTlsStatus();
     }
 
-    handleUpstreamChange = (value) => {
-        this.props.handleUpstreamChange({ upstreamDns: value });
-    };
-
-    handleUpstreamSubmit = () => {
-        this.props.setUpstream(this.props.dashboard.upstreamDns);
-    };
-
-    handleUpstreamTest = () => {
-        if (this.props.dashboard.upstreamDns.length > 0) {
-            this.props.testUpstream(this.props.dashboard.upstreamDns);
-        } else {
-            this.props.addErrorToast({ error: this.props.t('no_servers_specified') });
-        }
-    };
-
     renderSettings = (settings) => {
         if (Object.keys(settings).length > 0) {
             return Object.keys(settings).map((key) => {
@@ -75,8 +59,7 @@ class Settings extends Component {
     }
 
     render() {
-        const { settings, t } = this.props;
-        const { upstreamDns } = this.props.dashboard;
+        const { settings, dashboard, t } = this.props;
         return (
             <Fragment>
                 <PageTitle title={ t('settings') } />
@@ -91,11 +74,13 @@ class Settings extends Component {
                                     </div>
                                 </Card>
                                 <Upstream
-                                    upstreamDns={upstreamDns}
+                                    upstreamDns={dashboard.upstreamDns}
+                                    boostrapDns={dashboard.boostrapDns}
+                                    allServers={dashboard.allServers}
+                                    setUpstream={this.props.setUpstream}
+                                    testUpstream={this.props.testUpstream}
                                     processingTestUpstream={settings.processingTestUpstream}
-                                    handleUpstreamChange={this.handleUpstreamChange}
-                                    handleUpstreamSubmit={this.handleUpstreamSubmit}
-                                    handleUpstreamTest={this.handleUpstreamTest}
+                                    processingSetUpstream={settings.processingSetUpstream}
                                 />
                                 <Encryption
                                     encryption={this.props.encryption}

client/src/components/ui/Checkbox.css

@@ -91,6 +91,10 @@
     line-height: 1.5;
 }
 
+.checkbox__label-text--long {
+    max-width: initial;
+}
+
 .checkbox__label-title {
     display: block;
     line-height: 1.5;