all: sync with master

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

@@ -12,7 +12,7 @@ import {
     toNumber,
 } from '../../../helpers/form';
 import {
-    validateServerName, validateIsSafePort, validatePort, validatePortQuic, validatePortTLS,
+    validateServerName, validateIsSafePort, validatePort, validatePortQuic, validatePortTLS, validatePlainDns,
 } from '../../../helpers/validators';
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
@@ -47,6 +47,7 @@ const clearFields = (change, setTlsConfig, validateTlsConfig, t) => {
         force_https: false,
         enabled: false,
         private_key_saved: false,
+        serve_plain_dns: true,
     };
     // eslint-disable-next-line no-alert
     if (window.confirm(t('encryption_reset'))) {
@@ -83,6 +84,7 @@ let Form = (props) => {
         handleSubmit,
         handleChange,
         isEnabled,
+        servePlainDns,
         certificateChain,
         privateKey,
         certificatePath,
@@ -109,21 +111,24 @@ let Form = (props) => {
         privateKeySaved,
     } = props;
 
-    const isSavingDisabled = invalid
-        || submitting
-        || processingConfig
-        || processingValidate
-        || !valid_key
-        || !valid_cert
-        || !valid_pair;
+    const isSavingDisabled = () => {
+        const processing = submitting || processingConfig || processingValidate;
 
+        if (servePlainDns && !isEnabled) {
+            return invalid || processing;
+        }
+
+        return invalid || processing || !valid_key || !valid_cert || !valid_pair;
+    };
+
+    const isDisabled = isSavingDisabled();
     const isWarning = valid_key && valid_cert && valid_pair;
 
     return (
         <form onSubmit={handleSubmit}>
             <div className="row">
                 <div className="col-12">
-                    <div className="form__group form__group--settings">
+                    <div className="form__group form__group--settings mb-3">
                         <Field
                             name="enabled"
                             type="checkbox"
@@ -135,6 +140,19 @@ let Form = (props) => {
                     <div className="form__desc">
                         <Trans>encryption_enable_desc</Trans>
                     </div>
+                    <div className="form__group mb-3 mt-5">
+                        <Field
+                            name="serve_plain_dns"
+                            type="checkbox"
+                            component={CheckboxField}
+                            placeholder={t('encryption_plain_dns_enable')}
+                            onChange={handleChange}
+                            validate={validatePlainDns}
+                        />
+                    </div>
+                    <div className="form__desc">
+                        <Trans>encryption_plain_dns_desc</Trans>
+                    </div>
                     <hr />
                 </div>
                 <div className="col-12">
@@ -227,16 +245,16 @@ let Form = (props) => {
                             <Trans>encryption_doq</Trans>
                         </label>
                         <Field
-                                id="port_dns_over_quic"
-                                name="port_dns_over_quic"
-                                component={renderInputField}
-                                type="number"
-                                className="form-control"
-                                placeholder={t('encryption_doq')}
-                                validate={[validatePortQuic]}
-                                normalize={toNumber}
-                                onChange={handleChange}
-                                disabled={!isEnabled}
+                            id="port_dns_over_quic"
+                            name="port_dns_over_quic"
+                            component={renderInputField}
+                            type="number"
+                            className="form-control"
+                            placeholder={t('encryption_doq')}
+                            validate={[validatePortQuic]}
+                            normalize={toNumber}
+                            onChange={handleChange}
+                            disabled={!isEnabled}
                         />
                         <div className="form__desc">
                             <Trans>encryption_doq_desc</Trans>
@@ -412,8 +430,8 @@ let Form = (props) => {
             <div className="btn-list mt-2">
                 <button
                     type="submit"
+                    disabled={isDisabled}
                     className="btn btn-success btn-standart"
-                    disabled={isSavingDisabled}
                 >
                     <Trans>save_config</Trans>
                 </button>
@@ -434,6 +452,7 @@ Form.propTypes = {
     handleSubmit: PropTypes.func.isRequired,
     handleChange: PropTypes.func,
     isEnabled: PropTypes.bool.isRequired,
+    servePlainDns: PropTypes.bool.isRequired,
     certificateChain: PropTypes.string.isRequired,
     privateKey: PropTypes.string.isRequired,
     certificatePath: PropTypes.string.isRequired,
@@ -467,6 +486,7 @@ const selector = formValueSelector(FORM_NAME.ENCRYPTION);
 
 Form = connect((state) => {
     const isEnabled = selector(state, 'enabled');
+    const servePlainDns = selector(state, 'serve_plain_dns');
     const certificateChain = selector(state, 'certificate_chain');
     const privateKey = selector(state, 'private_key');
     const certificatePath = selector(state, 'certificate_path');
@@ -476,6 +496,7 @@ Form = connect((state) => {
     const privateKeySaved = selector(state, 'private_key_saved');
     return {
         isEnabled,
+        servePlainDns,
         certificateChain,
         privateKey,
         certificatePath,

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

@@ -25,7 +25,8 @@ class Encryption extends Component {
 
     handleFormChange = debounce((values) => {
         const submitValues = this.getSubmitValues(values);
-        if (submitValues.enabled) {
+
+        if (submitValues.enabled || submitValues.serve_plain_dns) {
             this.props.validateTlsConfig(submitValues);
         }
     }, DEBOUNCE_TIMEOUT);
@@ -85,6 +86,7 @@ class Encryption extends Component {
             certificate_path,
             private_key_path,
             private_key_saved,
+            serve_plain_dns,
         } = encryption;
 
         const initialValues = this.getInitialValues({
@@ -99,6 +101,7 @@ class Encryption extends Component {
             certificate_path,
             private_key_path,
             private_key_saved,
+            serve_plain_dns,
         });
 
         return (