client: handle plain dns setting

client/src/__locales/en.json

@@ -423,6 +423,8 @@
     "encryption_hostnames": "Hostnames",
     "encryption_reset": "Are you sure you want to reset encryption settings?",
     "encryption_warning": "Warning",
+    "encryption_serve_plain_dns": "Serve plain DNS",
+    "encryption_plain_dns_error": "Plain DNS is required in case encryption protocols are disabled",
     "topline_expiring_certificate": "Your SSL certificate is about to expire. Update <0>Encryption settings</0>.",
     "topline_expired_certificate": "Your SSL certificate is expired. Update <0>Encryption settings</0>.",
     "form_error_port_range": "Enter port number in the range of 80-65535",

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';
@@ -83,6 +83,7 @@ let Form = (props) => {
         handleSubmit,
         handleChange,
         isEnabled,
+        servePlainDns,
         certificateChain,
         privateKey,
         certificatePath,
@@ -109,21 +110,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 +139,16 @@ let Form = (props) => {
                     <div className="form__desc">
                         <Trans>encryption_enable_desc</Trans>
                     </div>
+                    <div className="form__group mb-0 mt-5">
+                        <Field
+                            name="serve_plain_dns"
+                            type="checkbox"
+                            component={CheckboxField}
+                            placeholder={t('encryption_serve_plain_dns')}
+                            onChange={handleChange}
+                            validate={validatePlainDns}
+                        />
+                    </div>
                     <hr />
                 </div>
                 <div className="col-12">
@@ -227,16 +241,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 +426,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 +448,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 +482,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 +492,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 (

client/src/helpers/form.js

@@ -180,7 +180,7 @@ export const CheckboxField = ({
     {!disabled
     && touched
     && error
-    && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
+    && <div className="form__message form__message--error mt-1"><Trans>{error}</Trans></div>}
 </>;
 
 CheckboxField.propTypes = {

client/src/helpers/validators.js

@@ -389,3 +389,18 @@ export const validateIPv6Subnet = (value) => {
     }
     return undefined;
 };
+
+/**
+ * @returns {undefined|string}
+ * @param value
+ * @param allValues
+ */
+export const validatePlainDns = (value, allValues) => {
+    const { enabled } = allValues;
+
+    if (!enabled && !value) {
+        return 'encryption_plain_dns_error';
+    }
+
+    return undefined;
+};

client/src/reducers/encryption.js

@@ -62,6 +62,7 @@ const encryption = handleActions({
     processingConfig: false,
     processingValidate: false,
     enabled: false,
+    serve_plain_dns: false,
     dns_names: null,
     force_https: false,
     issuer: '',