+ client: Add experimental DNS-over-QUIC support

client/src/__locales/en.json

@@ -186,6 +186,7 @@
     "example_upstream_regular": "regular DNS (over UDP)",
     "example_upstream_dot": "encrypted <0>DNS-over-TLS</0>",
     "example_upstream_doh": "encrypted <0>DNS-over-HTTPS</0>",
+    "example_upstream_doq": "encrypted <0>DNS-over-QUIC</0>",
     "example_upstream_sdns": "you can use <0>DNS Stamps</0> for <1>DNSCrypt</1> or <2>DNS-over-HTTPS</2> resolvers",
     "example_upstream_tcp": "regular DNS (over TCP)",
     "all_lists_up_to_date_toast": "All lists are already up-to-date",
@@ -330,6 +331,8 @@
     "encryption_https_desc": "If HTTPS port is configured, AdGuard Home admin interface will be accessible via HTTPS, and it will also provide DNS-over-HTTPS on '/dns-query' location.",
     "encryption_dot": "DNS-over-TLS port",
     "encryption_dot_desc": "If this port is configured, AdGuard Home will run a DNS-over-TLS server on this port.",
+    "encryption_doq": "DNS-over-QUIC port",
+    "encryption_doq_desc": "If this port is configured, AdGuard Home will run a DNS-over-QUIC server on this port. It's experimental and may not be reliable at the moment. The only DNS provider that supports it now is AdGuard DNS",
     "encryption_certificates": "Certificates",
     "encryption_certificates_desc": "In order to use encryption, you need to provide a valid SSL certificates chain for your domain. You can get a free certificate on <0>{{link}}</0> or you can buy it from one of the trusted Certificate Authorities.",
     "encryption_certificates_input": "Copy/paste your PEM-encoded certificates here.",
@@ -574,5 +577,10 @@
     "original_response": "Original response",
     "click_to_view_queries": "Click to view queries",
     "port_53_faq_link": "Port 53 is often occupied by \"DNSStubListener\" or \"systemd-resolved\" services. Please read <0>this instruction</0> on how to resolve this.",
+<<<<<<< Updated upstream
     "adg_will_drop_dns_queries": "AdGuard Home will be dropping all DNS queries from this client."
+=======
+    "adg_will_drop_dns_queries": "AdGuard Home will be dropping all DNS queries from this client.",
+    "experimental": "Experimental"
+>>>>>>> Stashed changes
 }

client/src/actions/encryption.js

@@ -34,6 +34,7 @@ export const setTlsConfig = (config) => async (dispatch, getState) => {
         values.private_key = btoa(values.private_key);
         values.port_https = values.port_https || 0;
         values.port_dns_over_tls = values.port_dns_over_tls || 0;
+        values.port_dns_over_quic = values.port_dns_over_quic || 0;
 
         const response = await apiClient.setTlsConfig(values);
         response.certificate_chain = atob(response.certificate_chain);
@@ -59,6 +60,7 @@ export const validateTlsConfig = (config) => async (dispatch) => {
         values.private_key = btoa(values.private_key);
         values.port_https = values.port_https || 0;
         values.port_dns_over_tls = values.port_dns_over_tls || 0;
+        values.port_dns_over_quic = values.port_dns_over_quic || 0;
 
         const response = await apiClient.validateTlsConfig(values);
         response.certificate_chain = atob(response.certificate_chain);

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

@@ -63,6 +63,25 @@ const Examples = (props) => (
                     </Trans>
                 </span>
             </li>
+            <li>
+                <code>quic://dns-unfiltered.adguard.com:784</code> –&nbsp;
+                <span>
+                    <Trans
+                        components={[
+                            <a
+                                href="https://wikipedia.org/wiki/QUIC"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                key="0"
+                            >
+                                DNS-over-QUIC
+                            </a>,
+                        ]}
+                    >
+                        example_upstream_doq
+                    </Trans>
+                </span>
+            </li>
             <li>
                 <code>tcp://9.9.9.9</code> – <Trans>example_upstream_tcp</Trans>
             </li>

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

@@ -11,11 +11,15 @@ import {
     renderRadioField,
     toNumber,
 } from '../../../helpers/form';
-import { validateIsSafePort, validatePort, validatePortTLS } from '../../../helpers/validators';
+import {
+    validateIsSafePort, validatePort, validatePortQuic, validatePortTLS,
+} from '../../../helpers/validators';
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
 import CertificateStatus from './CertificateStatus';
-import { DNS_OVER_TLS_PORT, FORM_NAME, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
+import {
+    DNS_OVER_QUIC_PORT, DNS_OVER_TLS_PORT, FORM_NAME, STANDARD_HTTPS_PORT,
+} from '../../../helpers/constants';
 
 const validate = (values) => {
     const errors = {};
@@ -38,6 +42,7 @@ const clearFields = (change, setTlsConfig, t) => {
         certificate_path: '',
         port_https: STANDARD_HTTPS_PORT,
         port_dns_over_tls: DNS_OVER_TLS_PORT,
+        port_dns_over_quic: DNS_OVER_QUIC_PORT,
         server_name: '',
         force_https: false,
         enabled: false,
@@ -189,6 +194,30 @@ let Form = (props) => {
                         </div>
                     </div>
                 </div>
+                <div className="col-lg-6">
+                    <div className="form__group form__group--settings">
+                        <label className="form__label" htmlFor="port_dns_over_quic">
+                            <Trans>encryption_doq</Trans>
+                            &nbsp;
+                            (<Trans>experimental</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}
+                        />
+                        <div className="form__desc">
+                            <Trans>encryption_doq_desc</Trans>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div className="row">
                 <div className="col-12">

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

@@ -66,6 +66,7 @@ class Encryption extends Component {
             force_https,
             port_https,
             port_dns_over_tls,
+            port_dns_over_quic,
             certificate_chain,
             private_key,
             certificate_path,
@@ -78,6 +79,7 @@ class Encryption extends Component {
             force_https,
             port_https,
             port_dns_over_tls,
+            port_dns_over_quic,
             certificate_chain,
             private_key,
             certificate_path,

client/src/components/Settings/Settings.css

@@ -54,7 +54,7 @@
 }
 
 .form__message--error {
-    color: var(--red);
+    color: #cd201f;
 }
 
 .form__message--left-pad {

client/src/helpers/constants.js

@@ -69,6 +69,7 @@ export const STANDARD_DNS_PORT = 53;
 export const STANDARD_WEB_PORT = 80;
 export const STANDARD_HTTPS_PORT = 443;
 export const DNS_OVER_TLS_PORT = 853;
+export const DNS_OVER_QUIC_PORT = 784;
 export const MAX_PORT = 65535;
 
 export const EMPTY_DATE = '0001-01-01T00:00:00Z';

client/src/helpers/validators.js

@@ -180,6 +180,12 @@ export const validatePortTLS = (value) => {
     return undefined;
 };
 
+/**
+ * @param value {number}
+ * @returns {undefined|string}
+ */
+export const validatePortQuic = validatePortTLS;
+
 /**
  * @param value {number}
  * @returns {undefined|string}