Merge: Print DOH/DOT addresses if it's configured

Close #761

* commit '387783cf91acb8a78b9c9b22f5373187e4dfc16b':
  * client: remove /dns-query from string on client
  * client: fix description
  - client: fix page lang issue with Portuguese
  * client: show DNS-over-HTTPS and DNS-over-TLS addresses
  + client: add DNS privacy tab to setup guide
  + /status: "dns_addresses": add "tls://" or "https://" prefix
  * /status: "dns_addresses": add port if not 53
This commit is contained in:
Simon Zolin 2019-07-05 15:49:55 +03:00
commit 2897bb983f
12 changed files with 453 additions and 98 deletions

View File

@ -201,12 +201,12 @@
"install_auth_password_enter": "Enter password",
"install_step": "Step",
"install_devices_title": "Configure your devices",
"install_devices_desc": "In order for AdGuard Home to start working, you need to configure your devices to use it.",
"install_devices_desc": "To start using AdGuard Home, you need to configure your devices to use it.",
"install_submit_title": "Congratulations!",
"install_submit_desc": "The setup procedure is finished and you are ready to start using AdGuard Home.",
"install_devices_router": "Router",
"install_devices_router_desc": "This setup will automatically cover all the devices connected to your home router and you will not need to configure each of them manually.",
"install_devices_address": "AdGuard Home DNS server is listening to the following addresses",
"install_devices_address": "AdGuard Home DNS server is listening on the following addresses",
"install_devices_router_list_1": "Open the preferences for your router. Usually, you can access it from your browser via a URL (like http:\/\/192.168.0.1\/ or http:\/\/192.168.1.1\/). You may be asked to enter the password. If you don't remember it, you can often reset the password by pressing a button on the router itself. Some routers require a specific application, which in that case should be already installed on your computer\/phone.",
"install_devices_router_list_2": "Find the DHCP\/DNS settings. Look for the DNS letters next to a field which allows two or three sets of numbers, each broken into four groups of one to three digits.",
"install_devices_router_list_3": "Enter your AdGuard Home server addresses there.",
@ -314,5 +314,21 @@
"access_blocked_desc": "Don't confuse this with filters. AdGuard Home will drop DNS queries with these domains in query's question.",
"access_settings_saved": "Access settings successfully saved",
"updates_checked": "Updates successfully checked",
"check_updates_now": "Check updates now"
"check_updates_now": "Check for updates now",
"dns_privacy": "DNS Privacy",
"setup_dns_privacy_1": "<0>DNS-over-TLS:</0> Use <1>{{address}}</1> string.",
"setup_dns_privacy_2": "<0>DNS-over-HTTPS:</0> Use <1>{{address}}</1> string.",
"setup_dns_privacy_3": "<0>Please note that encrypted DNS protocols are supported only on Android 9. So you need to install additional software for other operating systems.</0><0>Here's a list of software you can use.</0>",
"setup_dns_privacy_android_1": "Android 9 supports DNS-over-TLS natively. To configure it, go to Settings → Network & internet → Advanced → Private DNS and enter your domain name there.",
"setup_dns_privacy_android_2": "<0>AdGuard for Android</0> supports <1>DNS-over-HTTPS</1> and <1>DNS-over-TLS</1>.",
"setup_dns_privacy_android_3": "<0>Intra</0> adds <1>DNS-over-HTTPS</1> support to Android.",
"setup_dns_privacy_ios_1": "<0>DNSCloak</0> supports <1>DNS-over-HTTPS</1>, but in order to configure it to use your own server, you'll need to generate a <2>DNS Stamp</2> for it.",
"setup_dns_privacy_ios_2": "<0>AdGuard for iOS</0> supports <1>DNS-over-HTTPS</1> and <1>DNS-over-TLS</1> setup.",
"setup_dns_privacy_other_title": "Other implementations",
"setup_dns_privacy_other_1": "AdGuard Home itself can be a secure DNS client on any platform.",
"setup_dns_privacy_other_2": "<0>dnsproxy</0> supports all known secure DNS protocols.",
"setup_dns_privacy_other_3": "<0>dnscrypt-proxy</0> supports <1>DNS-over-HTTPS</1>.",
"setup_dns_privacy_other_4": "<0>Mozilla Firefox</0> supports <1>DNS-over-HTTPS</1>.",
"setup_dns_privacy_other_5": "You will find more implementations <0>here</0> and <1>here</1>.",
"setup_dns_notice": "In order to use <1>DNS-over-HTTPS</1> or <1>DNS-over-TLS</1>, you need to <0>configure Encryption</0> in AdGuard Home settings."
}

View File

@ -2,11 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Trans, withNamespaces } from 'react-i18next';
import { getDnsAddress } from '../../helpers/helpers';
const Version = (props) => {
const {
dnsVersion, dnsAddresses, dnsPort, processingVersion, t,
dnsVersion, dnsAddresses, processingVersion, t,
} = props;
return (
@ -31,9 +29,7 @@ const Version = (props) => {
</div>
<div className="popover__body popover__body--address">
<div className="popover__list">
{dnsAddresses.map(ip => (
<li key={ip}>{getDnsAddress(ip, dnsPort)}</li>
))}
{dnsAddresses.map(ip => <li key={ip}>{ip}</li>)}
</div>
</div>
</div>

View File

@ -6,7 +6,7 @@ import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import format from 'date-fns/format';
import { renderField, renderSelectField, toNumber, port, isSafePort } from '../../../helpers/form';
import { renderField, renderSelectField, toNumber, port, portTLS, isSafePort } from '../../../helpers/form';
import { EMPTY_DATE } from '../../../helpers/constants';
import i18n from '../../../i18n';
@ -167,7 +167,7 @@ let Form = (props) => {
type="number"
className="form-control"
placeholder={t('encryption_dot')}
validate={[port]}
validate={[portTLS]}
normalize={toNumber}
onChange={handleChange}
disabled={!isEnabled}

View File

@ -2,8 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Trans, withNamespaces } from 'react-i18next';
import { getDnsAddress } from '../../helpers/helpers';
import Guide from '../ui/Guide';
import Card from '../ui/Card';
import PageTitle from '../ui/PageTitle';
@ -13,7 +11,6 @@ const SetupGuide = ({
t,
dashboard: {
dnsAddresses,
dnsPort,
},
}) => (
<div className="guide">
@ -28,12 +25,10 @@ const SetupGuide = ({
<Trans>install_devices_address</Trans>:
</div>
<div className="mt-2 font-weight-bold">
{dnsAddresses
.map(ip => <li key={ip}>{getDnsAddress(ip, dnsPort)}</li>)
}
{dnsAddresses.map(ip => <li key={ip}>{ip}</li>)}
</div>
</div>
<Guide />
<Guide dnsAddresses={dnsAddresses} />
</Card>
</div>
);

View File

@ -1,83 +1,373 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Trans, withNamespaces } from 'react-i18next';
import Tabs from '../ui/Tabs';
import Icons from '../ui/Icons';
const Guide = () => (
<div>
<Icons />
<Tabs>
<div label="Router">
<div className="tab__title">
<Trans>install_devices_router</Trans>
const Guide = (props) => {
const { dnsAddresses } = props;
const tlsAddress = (dnsAddresses && dnsAddresses.filter(item => item.includes('tls://'))) || '';
const httpsAddress =
(dnsAddresses && dnsAddresses.filter(item => item.includes('https://'))) || '';
const showDnsPrivacyNotice = httpsAddress.length < 1 && tlsAddress.length < 1;
return (
<div>
<Icons />
<Tabs>
<div label="Router">
<div className="tab__title">
<Trans>install_devices_router</Trans>
</div>
<div className="tab__text">
<p>
<Trans>install_devices_router_desc</Trans>
</p>
<ol>
<li>
<Trans>install_devices_router_list_1</Trans>
</li>
<li>
<Trans>install_devices_router_list_2</Trans>
</li>
<li>
<Trans>install_devices_router_list_3</Trans>
</li>
</ol>
</div>
</div>
<div className="tab__text">
<p><Trans>install_devices_router_desc</Trans></p>
<ol>
<li><Trans>install_devices_router_list_1</Trans></li>
<li><Trans>install_devices_router_list_2</Trans></li>
<li><Trans>install_devices_router_list_3</Trans></li>
</ol>
<div label="Windows">
<div className="tab__title">Windows</div>
<div className="tab__text">
<ol>
<li>
<Trans>install_devices_windows_list_1</Trans>
</li>
<li>
<Trans>install_devices_windows_list_2</Trans>
</li>
<li>
<Trans>install_devices_windows_list_3</Trans>
</li>
<li>
<Trans>install_devices_windows_list_4</Trans>
</li>
<li>
<Trans>install_devices_windows_list_5</Trans>
</li>
<li>
<Trans>install_devices_windows_list_6</Trans>
</li>
</ol>
</div>
</div>
</div>
<div label="Windows">
<div className="tab__title">
Windows
<div label="macOS">
<div className="tab__title">macOS</div>
<div className="tab__text">
<ol>
<li>
<Trans>install_devices_macos_list_1</Trans>
</li>
<li>
<Trans>install_devices_macos_list_2</Trans>
</li>
<li>
<Trans>install_devices_macos_list_3</Trans>
</li>
<li>
<Trans>install_devices_macos_list_4</Trans>
</li>
</ol>
</div>
</div>
<div className="tab__text">
<ol>
<li><Trans>install_devices_windows_list_1</Trans></li>
<li><Trans>install_devices_windows_list_2</Trans></li>
<li><Trans>install_devices_windows_list_3</Trans></li>
<li><Trans>install_devices_windows_list_4</Trans></li>
<li><Trans>install_devices_windows_list_5</Trans></li>
<li><Trans>install_devices_windows_list_6</Trans></li>
</ol>
<div label="Android">
<div className="tab__title">Android</div>
<div className="tab__text">
<ol>
<li>
<Trans>install_devices_android_list_1</Trans>
</li>
<li>
<Trans>install_devices_android_list_2</Trans>
</li>
<li>
<Trans>install_devices_android_list_3</Trans>
</li>
<li>
<Trans>install_devices_android_list_4</Trans>
</li>
<li>
<Trans>install_devices_android_list_5</Trans>
</li>
</ol>
</div>
</div>
</div>
<div label="macOS">
<div className="tab__title">
macOS
<div label="iOS">
<div className="tab__title">iOS</div>
<div className="tab__text">
<ol>
<li>
<Trans>install_devices_ios_list_1</Trans>
</li>
<li>
<Trans>install_devices_ios_list_2</Trans>
</li>
<li>
<Trans>install_devices_ios_list_3</Trans>
</li>
<li>
<Trans>install_devices_ios_list_4</Trans>
</li>
</ol>
</div>
</div>
<div className="tab__text">
<ol>
<li><Trans>install_devices_macos_list_1</Trans></li>
<li><Trans>install_devices_macos_list_2</Trans></li>
<li><Trans>install_devices_macos_list_3</Trans></li>
<li><Trans>install_devices_macos_list_4</Trans></li>
</ol>
<div label="dns_privacy" title={props.t('dns_privacy')}>
<div className="tab__title">
<Trans>dns_privacy</Trans>
</div>
<div className="tab__text">
{tlsAddress && tlsAddress.length > 0 && (
<div className="tab__paragraph">
<Trans
values={{ address: tlsAddress[0] }}
components={[
<strong key="0">text</strong>,
<code key="1">text</code>,
]}
>
setup_dns_privacy_1
</Trans>
</div>
)}
{httpsAddress && httpsAddress.length > 0 && (
<div className="tab__paragraph">
<Trans
values={{ address: httpsAddress[0] }}
components={[
<strong key="0">text</strong>,
<code key="1">text</code>,
]}
>
setup_dns_privacy_2
</Trans>
</div>
)}
{showDnsPrivacyNotice && (
<div className="tab__paragraph">
<Trans
components={[
<a
href="https://github.com/AdguardTeam/AdguardHome/wiki/Encryption"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<code key="1">text</code>,
]}
>
setup_dns_notice
</Trans>
</div>
)}
{!showDnsPrivacyNotice && (
<Fragment>
<div className="tab__paragraph">
<Trans components={[<p key="0">text</p>]}>
setup_dns_privacy_3
</Trans>
</div>
<div className="tab__paragraph">
<strong>Android</strong>
<ul>
<li>
<Trans>setup_dns_privacy_android_1</Trans>
</li>
<li>
<Trans
components={[
<a
href="https://adguard.com/adguard-android/overview.html"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<code key="1">text</code>,
]}
>
setup_dns_privacy_android_2
</Trans>
</li>
<li>
<Trans
components={[
<a
href="https://getintra.org/"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<code key="1">text</code>,
]}
>
setup_dns_privacy_android_3
</Trans>
</li>
</ul>
</div>
<div className="tab__paragraph">
<strong>iOS</strong>
<ul>
<li>
<Trans
components={[
<a
href="https://itunes.apple.com/app/id1452162351"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<code key="1">text</code>,
<a
href="https://dnscrypt.info/stamps"
target="_blank"
rel="noopener noreferrer"
key="2"
>
link
</a>,
]}
>
setup_dns_privacy_ios_1
</Trans>
</li>
<li>
<Trans
components={[
<a
href="https://adguard.com/adguard-ios/overview.html"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<code key="1">text</code>,
]}
>
setup_dns_privacy_ios_2
</Trans>
</li>
</ul>
</div>
<div className="tab__paragraph">
<strong>
<Trans>setup_dns_privacy_other_title</Trans>
</strong>
<ul>
<li>
<Trans>setup_dns_privacy_other_1</Trans>
</li>
<li>
<Trans
components={[
<a
href="https://github.com/AdguardTeam/dnsproxy"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
]}
>
setup_dns_privacy_other_2
</Trans>
</li>
<li>
<Trans
components={[
<a
href="https://github.com/jedisct1/dnscrypt-proxy"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<code key="1">text</code>,
]}
>
setup_dns_privacy_other_3
</Trans>
</li>
<li>
<Trans
components={[
<a
href="https://www.mozilla.org/firefox/"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<code key="1">text</code>,
]}
>
setup_dns_privacy_other_4
</Trans>
</li>
<li>
<Trans
components={[
<a
href="https://dnscrypt.info/implementations"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<a
href="https://dnsprivacy.org/wiki/display/DP/DNS+Privacy+Clients"
target="_blank"
rel="noopener noreferrer"
key="1"
>
link
</a>,
]}
>
setup_dns_privacy_other_5
</Trans>
</li>
</ul>
</div>
</Fragment>
)}
</div>
</div>
</div>
<div label="Android">
<div className="tab__title">
Android
</div>
<div className="tab__text">
<ol>
<li><Trans>install_devices_android_list_1</Trans></li>
<li><Trans>install_devices_android_list_2</Trans></li>
<li><Trans>install_devices_android_list_3</Trans></li>
<li><Trans>install_devices_android_list_4</Trans></li>
<li><Trans>install_devices_android_list_5</Trans></li>
</ol>
</div>
</div>
<div label="iOS">
<div className="tab__title">
iOS
</div>
<div className="tab__text">
<ol>
<li><Trans>install_devices_ios_list_1</Trans></li>
<li><Trans>install_devices_ios_list_2</Trans></li>
<li><Trans>install_devices_ios_list_3</Trans></li>
<li><Trans>install_devices_ios_list_4</Trans></li>
</ol>
</div>
</div>
</Tabs>
</div>
);
</Tabs>
</div>
);
};
Guide.defaultProps = {
dnsAddresses: [],
};
Guide.propTypes = {
dnsAddresses: PropTypes.array,
t: PropTypes.func.isRequired,
};
export default withNamespaces()(Guide);

View File

@ -59,6 +59,10 @@ const Icons = () => (
<symbol id="refresh" viewBox="0 0 24 24" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
<path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
</symbol>
<symbol id="dns_privacy" viewBox="0 0 30 30" stroke="none" fill="currentColor" strokeLinecap="round" strokeLinejoin="round">
<path d="M15 3C10.57 3 6.701 5.419 4.623 9h2.39a10.063 10.063 0 0 1 4.05-3.19c-.524.89-.961 1.973-1.3 3.19h2.108c.79-2.459 1.998-4 3.129-4s2.339 1.541 3.129 4h2.107c-.338-1.217-.774-2.3-1.299-3.19A10.062 10.062 0 0 1 22.989 9h2.389C23.298 5.419 19.43 3 15 3zm7.035 9.129c-1.372 0-2.264.73-2.264 1.842 0 .896.538 1.463 1.579 1.66l.75.15c.65.13.898.3.898.615 0 .375-.37.635-.91.635-.6 0-1.014-.265-1.049-.68h-1.38c.023 1.097.93 1.776 2.37 1.776 1.491 0 2.399-.717 2.399-1.904 0-.903-.504-1.412-1.63-1.63l-.734-.142c-.6-.118-.851-.3-.851-.611 0-.378.336-.62.844-.62.509 0 .891.28.923.682h1.336c-.024-1.053-.948-1.773-2.28-1.773zm-16.185.148v5.696h2.39c1.712 0 2.662-1.033 2.662-2.903 0-1.779-.966-2.793-2.662-2.793H5.85zm6.933.004v5.692h1.373v-3.235h.076l2.377 3.235h1.149V12.28h-1.373v3.203h-.076l-2.372-3.203h-1.154zm-5.486 1.16h.682c.912 0 1.449.596 1.449 1.657 0 1.128-.51 1.713-1.45 1.713h-.681v-3.37zM4.623 21C6.701 24.581 10.57 27 15 27c4.43 0 8.299-2.419 10.377-6h-2.389a10.063 10.063 0 0 1-4.049 3.19c.524-.89.96-1.973 1.297-3.19H18.13c-.79 2.459-1.996 4-3.127 4-1.131 0-2.339-1.541-3.129-4h-2.11c.339 1.217.776 2.3 1.3 3.19A10.056 10.056 0 0 1 7.013 21h-2.39z"></path>
</symbol>
</svg>
);

View File

@ -11,6 +11,7 @@ class Tab extends Component {
const {
activeTab,
label,
title,
} = this.props;
const tabClass = classnames({
@ -26,7 +27,7 @@ class Tab extends Component {
<svg className="tab__icon">
<use xlinkHref={`#${label.toLowerCase()}`} />
</svg>
{label}
{title || label}
</div>
);
}
@ -36,6 +37,7 @@ Tab.propTypes = {
activeTab: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
title: PropTypes.string,
};
export default Tab;

View File

@ -49,3 +49,12 @@
.tab__text p {
margin-bottom: 5px;
}
.tab__text ul,
.tab__text ol {
padding-left: 25px;
}
.tab__paragraph {
margin-bottom: 10px;
}

View File

@ -27,12 +27,13 @@ class Tabs extends Component {
<div className="tabs">
<div className="tabs__controls">
{children.map((child) => {
const { label } = child.props;
const { label, title } = child.props;
return (
<Tab
key={label}
label={label}
title={title}
activeTab={activeTab}
onClick={this.onClickTabControl}
/>

View File

@ -41,7 +41,7 @@ export const LANGUAGES = [
},
{
key: 'pt-br',
name: 'Português (BR)',
name: 'Portuguese (BR)',
},
{
key: 'sv',

View File

@ -76,6 +76,15 @@ export const port = (value) => {
return false;
};
export const portTLS = (value) => {
if (value === 0) {
return false;
} else if (value && (value < 80 || value > 65535)) {
return <Trans>form_error_port_range</Trans>;
}
return false;
};
export const isSafePort = (value) => {
if (UNSAFE_PORTS.includes(value)) {
return <Trans>form_error_port_unsafe</Trans>;

View File

@ -80,27 +80,60 @@ func httpUpdateConfigReloadDNSReturnOK(w http.ResponseWriter, r *http.Request) {
returnOK(w)
}
func handleStatus(w http.ResponseWriter, r *http.Request) {
log.Tracef("%s %v", r.Method, r.URL)
func addDNSAddress(dnsAddresses *[]string, addr string) {
if config.DNS.Port != 53 {
addr = fmt.Sprintf("%s:%d", addr, config.DNS.Port)
}
*dnsAddresses = append(*dnsAddresses, addr)
}
// Get the list of DNS addresses the server is listening on
func getDNSAddresses() []string {
dnsAddresses := []string{}
if config.DNS.BindHost == "0.0.0.0" {
ifaces, e := getValidNetInterfacesForWeb()
if e != nil {
log.Error("Couldn't get network interfaces: %v", e)
return []string{}
}
for _, iface := range ifaces {
for _, addr := range iface.Addresses {
dnsAddresses = append(dnsAddresses, addr)
addDNSAddress(&dnsAddresses, addr)
}
}
}
if len(dnsAddresses) == 0 {
dnsAddresses = append(dnsAddresses, config.DNS.BindHost)
} else {
addDNSAddress(&dnsAddresses, config.DNS.BindHost)
}
if config.TLS.Enabled && len(config.TLS.ServerName) != 0 {
if config.TLS.PortHTTPS != 0 {
addr := config.TLS.ServerName
if config.TLS.PortHTTPS != 443 {
addr = fmt.Sprintf("%s:%d", addr, config.TLS.PortHTTPS)
}
addr = fmt.Sprintf("https://%s/dns-query", addr)
dnsAddresses = append(dnsAddresses, addr)
}
if config.TLS.PortDNSOverTLS != 0 {
addr := fmt.Sprintf("tls://%s:%d", config.TLS.ServerName, config.TLS.PortDNSOverTLS)
dnsAddresses = append(dnsAddresses, addr)
}
}
return dnsAddresses
}
func handleStatus(w http.ResponseWriter, r *http.Request) {
log.Tracef("%s %v", r.Method, r.URL)
data := map[string]interface{}{
"dns_addresses": dnsAddresses,
"dns_addresses": getDNSAddresses(),
"http_port": config.BindPort,
"dns_port": config.DNS.Port,
"protection_enabled": config.DNS.ProtectionEnabled,