@@ -291,15 +301,7 @@ let Form = (props) => {
@@ -334,6 +336,7 @@ Form.propTypes = {
valid_chain: PropTypes.bool,
valid_key: PropTypes.bool,
valid_cert: PropTypes.bool,
+ valid_pair: PropTypes.bool,
dns_names: PropTypes.string,
key_type: PropTypes.string,
issuer: PropTypes.string,
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 (
-
-
-
-
-
-
-
examples_title:
-
- -
-
1.1.1.1 - { t('example_upstream_regular') }
-
- -
-
tls://1dot1dot1dot1.cloudflare-dns.com -
-
- -
-
https://cloudflare-dns.com/dns-query -
-
- -
-
tcp://1.1.1.1 - { t('example_upstream_tcp') }
-
- -
-
sdns://... -
-
-
-
-
-
- );
- }
-}
-
-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..b289112d
--- /dev/null
+++ b/client/src/components/Settings/Upstream/Examples.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
+
+const Examples = props => (
+
+
examples_title:
+
+ -
+
1.1.1.1 - { props.t('example_upstream_regular') }
+
+ -
+
tls://1dot1dot1dot1.cloudflare-dns.com –
+
+
+ DNS-over-TLS
+ ,
+ ]}
+ >
+ example_upstream_dot
+
+
+
+ -
+
https://cloudflare-dns.com/dns-query –
+
+
+ DNS-over-HTTPS
+ ,
+ ]}
+ >
+ example_upstream_doh
+
+
+
+ -
+
tcp://1.1.1.1 – example_upstream_tcp
+
+ -
+
sdns://... –
+
+
+ DNS Stamps
+ ,
+
+ DNSCrypt
+ ,
+
+ DNS-over-HTTPS
+ ,
+ ]}
+ >
+ example_upstream_sdns
+
+
+
+ -
+
[/example.local/]1.1.1.1 –
+
+
+ Link
+ ,
+ ]}
+ >
+ example_upstream_reserved
+
+
+
+
+
+);
+
+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..8ef916f5
--- /dev/null
+++ b/client/src/components/Settings/Upstream/Form.js
@@ -0,0 +1,144 @@
+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';
+import Examples from './Examples';
+
+let Form = (props) => {
+ const {
+ t,
+ handleSubmit,
+ testUpstream,
+ upstreamDns,
+ bootstrapDns,
+ allServers,
+ 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.propTypes = {
+ handleSubmit: PropTypes.func,
+ testUpstream: PropTypes.func,
+ submitting: PropTypes.bool,
+ invalid: PropTypes.bool,
+ initialValues: PropTypes.object,
+ upstreamDns: PropTypes.string,
+ bootstrapDns: PropTypes.string,
+ allServers: PropTypes.bool,
+ processingTestUpstream: PropTypes.bool,
+ processingSetUpstream: PropTypes.bool,
+ t: PropTypes.func,
+};
+
+const selector = formValueSelector('upstreamForm');
+
+Form = connect((state) => {
+ const upstreamDns = selector(state, 'upstream_dns');
+ const bootstrapDns = selector(state, 'bootstrap_dns');
+ const allServers = selector(state, 'all_servers');
+ return {
+ upstreamDns,
+ bootstrapDns,
+ allServers,
+ };
+})(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..7ae4ea4d
--- /dev/null
+++ b/client/src/components/Settings/Upstream/index.js
@@ -0,0 +1,64 @@
+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 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 (
+
+
+
+ );
+ }
+}
+
+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..e6c39cf7 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 (
@@ -91,11 +74,13 @@ class Settings extends Component {