From 5d6c980ac7a33e5a4b8d3c376d8984e36cba1f83 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Wed, 6 Mar 2019 14:45:21 +0300
Subject: [PATCH] * client: upstream form

---
 client/src/__locales/en.json                  |   5 +-
 client/src/actions/index.js                   |  13 +-
 client/src/api/Api.js                         |   6 +-
 client/src/components/Settings/Upstream.js    |  97 --------------
 .../components/Settings/Upstream/Examples.js  |  32 +++++
 .../src/components/Settings/Upstream/Form.js  | 120 ++++++++++++++++++
 .../src/components/Settings/Upstream/index.js |  67 ++++++++++
 client/src/components/Settings/index.js       |  29 +----
 client/src/components/ui/Checkbox.css         |   4 +
 client/src/helpers/form.js                    |   2 +-
 client/src/helpers/helpers.js                 |   2 +
 client/src/reducers/index.js                  |   8 +-
 12 files changed, 256 insertions(+), 129 deletions(-)
 delete mode 100644 client/src/components/Settings/Upstream.js
 create mode 100644 client/src/components/Settings/Upstream/Examples.js
 create mode 100644 client/src/components/Settings/Upstream/Form.js
 create mode 100644 client/src/components/Settings/Upstream/index.js

diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index 45c33828..b70cdd37 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -246,5 +246,8 @@
     "form_error_equal": "Shouldn't be equal",
     "form_error_password": "Password mismatched",
     "reset_settings": "Reset settings",
-    "update_announcement": "AdGuard Home {{version}} is now available! <0>Click here</0> for more info."
+    "update_announcement": "AdGuard Home {{version}} is now available! <0>Click here</0> for more info.",
+    "upstream_parallel": "Use parallel queries to speed up resolving by simultaneously querying all upstream servers",
+    "bootstrap_dns": "Bootstrap DNS",
+    "bootstrap_dns_desc": "Bootstrap DNS for DNS-over-HTTPS and DNS-over-TLS servers"
 }
diff --git a/client/src/actions/index.js b/client/src/actions/index.js
index 1bb99064..0bb99940 100644
--- a/client/src/actions/index.js
+++ b/client/src/actions/index.js
@@ -3,7 +3,7 @@ import round from 'lodash/round';
 import { t } from 'i18next';
 import { showLoading, hideLoading } from 'react-redux-loading-bar';
 
-import { normalizeHistory, normalizeFilteringStatus, normalizeLogs } from '../helpers/helpers';
+import { normalizeHistory, normalizeFilteringStatus, normalizeLogs, normalizeTextarea } from '../helpers/helpers';
 import { SETTINGS_NAMES } from '../helpers/constants';
 import Api from '../api/Api';
 
@@ -452,10 +452,14 @@ export const setUpstreamRequest = createAction('SET_UPSTREAM_REQUEST');
 export const setUpstreamFailure = createAction('SET_UPSTREAM_FAILURE');
 export const setUpstreamSuccess = createAction('SET_UPSTREAM_SUCCESS');
 
-export const setUpstream = url => async (dispatch) => {
+export const setUpstream = config => async (dispatch) => {
     dispatch(setUpstreamRequest());
     try {
-        await apiClient.setUpstream(url);
+        const values = { ...config };
+        values.bootstrap_dns = (values.bootstrap_dns && normalizeTextarea(values.bootstrap_dns)) || '';
+        values.upstream_dns = (values.upstream_dns && normalizeTextarea(values.upstream_dns)) || '';
+
+        await apiClient.setUpstream(values);
         dispatch(addSuccessToast('updated_upstream_dns_toast'));
         dispatch(setUpstreamSuccess());
     } catch (error) {
@@ -468,9 +472,10 @@ export const testUpstreamRequest = createAction('TEST_UPSTREAM_REQUEST');
 export const testUpstreamFailure = createAction('TEST_UPSTREAM_FAILURE');
 export const testUpstreamSuccess = createAction('TEST_UPSTREAM_SUCCESS');
 
-export const testUpstream = servers => async (dispatch) => {
+export const testUpstream = values => async (dispatch) => {
     dispatch(testUpstreamRequest());
     try {
+        const servers = normalizeTextarea(values);
         const upstreamResponse = await apiClient.testUpstream(servers);
 
         const testMessages = Object.keys(upstreamResponse).map((key) => {
diff --git a/client/src/api/Api.js b/client/src/api/Api.js
index d20a334a..17df1221 100644
--- a/client/src/api/Api.js
+++ b/client/src/api/Api.js
@@ -34,7 +34,7 @@ export default class Api {
     GLOBAL_QUERY_LOG = { path: 'querylog', method: 'GET' };
     GLOBAL_QUERY_LOG_ENABLE = { path: 'querylog_enable', method: 'POST' };
     GLOBAL_QUERY_LOG_DISABLE = { path: 'querylog_disable', method: 'POST' };
-    GLOBAL_SET_UPSTREAM_DNS = { path: 'set_upstream_dns', method: 'POST' };
+    GLOBAL_SET_UPSTREAM_DNS = { path: 'set_upstreams_config', method: 'POST' };
     GLOBAL_TEST_UPSTREAM_DNS = { path: 'test_upstream_dns', method: 'POST' };
     GLOBAL_VERSION = { path: 'version.json', method: 'GET' };
     GLOBAL_ENABLE_PROTECTION = { path: 'enable_protection', method: 'POST' };
@@ -110,7 +110,7 @@ export default class Api {
         const { path, method } = this.GLOBAL_SET_UPSTREAM_DNS;
         const config = {
             data: url,
-            header: { 'Content-Type': 'text/plain' },
+            headers: { 'Content-Type': 'application/json' },
         };
         return this.makeRequest(path, method, config);
     }
@@ -119,7 +119,7 @@ export default class Api {
         const { path, method } = this.GLOBAL_TEST_UPSTREAM_DNS;
         const config = {
             data: servers,
-            header: { 'Content-Type': 'text/plain' },
+            headers: { 'Content-Type': 'application/json' },
         };
         return this.makeRequest(path, method, config);
     }
diff --git a/client/src/components/Settings/Upstream.js b/client/src/components/Settings/Upstream.js
deleted file mode 100644
index fe24c4d7..00000000
--- a/client/src/components/Settings/Upstream.js
+++ /dev/null
@@ -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);
diff --git a/client/src/components/Settings/Upstream/Examples.js b/client/src/components/Settings/Upstream/Examples.js
new file mode 100644
index 00000000..4ba54852
--- /dev/null
+++ b/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);
diff --git a/client/src/components/Settings/Upstream/Form.js b/client/src/components/Settings/Upstream/Form.js
new file mode 100644
index 00000000..7a38b31a
--- /dev/null
+++ b/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);
diff --git a/client/src/components/Settings/Upstream/index.js b/client/src/components/Settings/Upstream/index.js
new file mode 100644
index 00000000..f622268c
--- /dev/null
+++ b/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);
diff --git a/client/src/components/Settings/index.js b/client/src/components/Settings/index.js
index efa49bdd..6f0be6b1 100644
--- a/client/src/components/Settings/index.js
+++ b/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}
diff --git a/client/src/components/ui/Checkbox.css b/client/src/components/ui/Checkbox.css
index 9d483a5d..0d596a77 100644
--- a/client/src/components/ui/Checkbox.css
+++ b/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;
diff --git a/client/src/helpers/form.js b/client/src/helpers/form.js
index 1f0a339a..c9703033 100644
--- a/client/src/helpers/form.js
+++ b/client/src/helpers/form.js
@@ -32,7 +32,7 @@ export const renderSelectField = ({
                 disabled={disabled}
             />
             <span className="checkbox__label">
-                <span className="checkbox__label-text">
+                <span className="checkbox__label-text checkbox__label-text--long">
                     <span className="checkbox__label-title">{placeholder}</span>
                 </span>
             </span>
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index eb7c7db2..def63dce 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -201,3 +201,5 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => {
         window.location.replace(`http://${hostname}:${httpPort}/${hash}`);
     }
 };
+
+export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n');
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
index e83f48a1..90ace4d6 100644
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@@ -51,6 +51,8 @@ const dashboard = handleActions({
             dns_address: dnsAddress,
             querylog_enabled: queryLogEnabled,
             upstream_dns: upstreamDns,
+            bootstrap_dns: bootstrapDns,
+            all_servers: allServers,
             protection_enabled: protectionEnabled,
             language,
             http_port: httpPort,
@@ -64,6 +66,8 @@ const dashboard = handleActions({
             dnsAddress,
             queryLogEnabled,
             upstreamDns: upstreamDns.join('\n'),
+            bootstrapDns: bootstrapDns.join('\n'),
+            allServers,
             protectionEnabled,
             language,
             httpPort,
@@ -171,7 +175,9 @@ const dashboard = handleActions({
     logStatusProcessing: false,
     processingVersion: true,
     processingFiltering: true,
-    upstreamDns: [],
+    upstreamDns: '',
+    bootstrapDns: '',
+    allServers: false,
     protectionEnabled: false,
     processingProtection: false,
     httpPort: 80,