+ client: add DNS privacy tab to setup guide
This commit is contained in:
Ildar Kamalov
Simon Zolin
parent
425f3c87d0
commit
5c7c9964b8
@ -314,5 +314,20 @@
|
|||||||
"access_blocked_desc": "Don't confuse this with filters. AdGuard Home will drop DNS queries with these domains in query's question.",
|
"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",
|
"access_settings_saved": "Access settings successfully saved",
|
||||||
"updates_checked": "Updates successfully checked",
|
"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 not supported at the operating system level (except Android 9), so now the installation of additional software is required.</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>."
|
||||||
}
|
}
|
||||||
@ -2,11 +2,9 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Trans, withNamespaces } from 'react-i18next';
|
import { Trans, withNamespaces } from 'react-i18next';
|
||||||
|
|
||||||
import { getDnsAddress } from '../../helpers/helpers';
|
|
||||||
|
|
||||||
const Version = (props) => {
|
const Version = (props) => {
|
||||||
const {
|
const {
|
||||||
dnsVersion, dnsAddresses, dnsPort, processingVersion, t,
|
dnsVersion, dnsAddresses, processingVersion, t,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -31,9 +29,7 @@ const Version = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="popover__body popover__body--address">
|
<div className="popover__body popover__body--address">
|
||||||
<div className="popover__list">
|
<div className="popover__list">
|
||||||
{dnsAddresses.map(ip => (
|
{dnsAddresses.map(ip => <li key={ip}>{ip}</li>)}
|
||||||
<li key={ip}>{getDnsAddress(ip, dnsPort)}</li>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,8 +2,6 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Trans, withNamespaces } from 'react-i18next';
|
import { Trans, withNamespaces } from 'react-i18next';
|
||||||
|
|
||||||
import { getDnsAddress } from '../../helpers/helpers';
|
|
||||||
|
|
||||||
import Guide from '../ui/Guide';
|
import Guide from '../ui/Guide';
|
||||||
import Card from '../ui/Card';
|
import Card from '../ui/Card';
|
||||||
import PageTitle from '../ui/PageTitle';
|
import PageTitle from '../ui/PageTitle';
|
||||||
@ -13,7 +11,6 @@ const SetupGuide = ({
|
|||||||
t,
|
t,
|
||||||
dashboard: {
|
dashboard: {
|
||||||
dnsAddresses,
|
dnsAddresses,
|
||||||
dnsPort,
|
|
||||||
},
|
},
|
||||||
}) => (
|
}) => (
|
||||||
<div className="guide">
|
<div className="guide">
|
||||||
@ -28,9 +25,7 @@ const SetupGuide = ({
|
|||||||
<Trans>install_devices_address</Trans>:
|
<Trans>install_devices_address</Trans>:
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 font-weight-bold">
|
<div className="mt-2 font-weight-bold">
|
||||||
{dnsAddresses
|
{dnsAddresses.map(ip => <li key={ip}>{ip}</li>)}
|
||||||
.map(ip => <li key={ip}>{getDnsAddress(ip, dnsPort)}</li>)
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Guide />
|
<Guide />
|
||||||
|
|||||||
@ -1,10 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
import { Trans, withNamespaces } from 'react-i18next';
|
import { Trans, withNamespaces } from 'react-i18next';
|
||||||
|
|
||||||
import Tabs from '../ui/Tabs';
|
import Tabs from '../ui/Tabs';
|
||||||
import Icons from '../ui/Icons';
|
import Icons from '../ui/Icons';
|
||||||
|
|
||||||
const Guide = () => (
|
const Guide = props => (
|
||||||
<div>
|
<div>
|
||||||
<Icons />
|
<Icons />
|
||||||
<Tabs>
|
<Tabs>
|
||||||
@ -76,8 +77,224 @@ const Guide = () => (
|
|||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div label="dns_privacy" title={props.t('dns_privacy')}>
|
||||||
|
<div className="tab__title">
|
||||||
|
<Trans>dns_privacy</Trans>
|
||||||
|
</div>
|
||||||
|
<div className="tab__text">
|
||||||
|
<div className="tab__paragraph">
|
||||||
|
<Trans
|
||||||
|
values={{ address: window.location.hostname }}
|
||||||
|
components={[
|
||||||
|
<strong key="0">text</strong>,
|
||||||
|
<code key="1">text</code>,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
setup_dns_privacy_1
|
||||||
|
</Trans>
|
||||||
|
</div>
|
||||||
|
<div className="tab__paragraph">
|
||||||
|
<Trans
|
||||||
|
values={{ address: `https://${window.location.hostname}/dns-query` }}
|
||||||
|
components={[
|
||||||
|
<strong key="0">text</strong>,
|
||||||
|
<code key="1">text</code>,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
setup_dns_privacy_2
|
||||||
|
</Trans>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
Guide.propTypes = {
|
||||||
|
t: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
export default withNamespaces()(Guide);
|
export default withNamespaces()(Guide);
|
||||||
|
|||||||
Binary file not shown.
@ -11,6 +11,7 @@ class Tab extends Component {
|
|||||||
const {
|
const {
|
||||||
activeTab,
|
activeTab,
|
||||||
label,
|
label,
|
||||||
|
title,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const tabClass = classnames({
|
const tabClass = classnames({
|
||||||
@ -26,7 +27,7 @@ class Tab extends Component {
|
|||||||
<svg className="tab__icon">
|
<svg className="tab__icon">
|
||||||
<use xlinkHref={`#${label.toLowerCase()}`} />
|
<use xlinkHref={`#${label.toLowerCase()}`} />
|
||||||
</svg>
|
</svg>
|
||||||
{label}
|
{title || label}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -36,6 +37,7 @@ Tab.propTypes = {
|
|||||||
activeTab: PropTypes.string.isRequired,
|
activeTab: PropTypes.string.isRequired,
|
||||||
label: PropTypes.string.isRequired,
|
label: PropTypes.string.isRequired,
|
||||||
onClick: PropTypes.func.isRequired,
|
onClick: PropTypes.func.isRequired,
|
||||||
|
title: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Tab;
|
export default Tab;
|
||||||
|
|||||||
@ -49,3 +49,12 @@
|
|||||||
.tab__text p {
|
.tab__text p {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab__text ul,
|
||||||
|
.tab__text ol {
|
||||||
|
padding-left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab__paragraph {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|||||||
@ -27,12 +27,13 @@ class Tabs extends Component {
|
|||||||
<div className="tabs">
|
<div className="tabs">
|
||||||
<div className="tabs__controls">
|
<div className="tabs__controls">
|
||||||
{children.map((child) => {
|
{children.map((child) => {
|
||||||
const { label } = child.props;
|
const { label, title } = child.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tab
|
<Tab
|
||||||
key={label}
|
key={label}
|
||||||
label={label}
|
label={label}
|
||||||
|
title={title}
|
||||||
activeTab={activeTab}
|
activeTab={activeTab}
|
||||||
onClick={this.onClickTabControl}
|
onClick={this.onClickTabControl}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user