diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index 1e66a0e8..7830de81 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -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_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: Use <1>{{address}} string.", + "setup_dns_privacy_2": "<0>DNS-over-HTTPS: Use <1>{{address}} 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>Here's a list of software you can use.", + "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 supports <1>DNS-over-HTTPS and <1>DNS-over-TLS.", + "setup_dns_privacy_android_3": "<0>Intra adds <1>DNS-over-HTTPS support to Android.", + "setup_dns_privacy_ios_1": "<0>DNSCloak supports <1>DNS-over-HTTPS, but in order to configure it to use your own server, you'll need to generate a <2>DNS Stamp for it.", + "setup_dns_privacy_ios_2": "<0>AdGuard for iOS supports <1>DNS-over-HTTPS and <1>DNS-over-TLS 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 supports all known secure DNS protocols.", + "setup_dns_privacy_other_3": "<0>dnscrypt-proxy supports <1>DNS-over-HTTPS.", + "setup_dns_privacy_other_4": "<0>Mozilla Firefox supports <1>DNS-over-HTTPS.", + "setup_dns_privacy_other_5": "You will find more implementations <0>here and <1>here." } \ No newline at end of file diff --git a/client/src/components/Header/Version.js b/client/src/components/Header/Version.js index 6ac4f1ab..042b47a9 100644 --- a/client/src/components/Header/Version.js +++ b/client/src/components/Header/Version.js @@ -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) => {
- {dnsAddresses.map(ip => ( -
  • {getDnsAddress(ip, dnsPort)}
    • - ))} + {dnsAddresses.map(ip =>
  • {ip}
    • )}
    diff --git a/client/src/components/SetupGuide/index.js b/client/src/components/SetupGuide/index.js index bea2bbb1..103f9fa5 100644 --- a/client/src/components/SetupGuide/index.js +++ b/client/src/components/SetupGuide/index.js @@ -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, }, }) => (
    @@ -28,9 +25,7 @@ const SetupGuide = ({ install_devices_address:
    - {dnsAddresses - .map(ip =>
  • {getDnsAddress(ip, dnsPort)}
    • ) - } + {dnsAddresses.map(ip =>
  • {ip}
    • )}
    diff --git a/client/src/components/ui/Guide.js b/client/src/components/ui/Guide.js index 9e89f7ec..640b114d 100644 --- a/client/src/components/ui/Guide.js +++ b/client/src/components/ui/Guide.js @@ -1,10 +1,11 @@ import React 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 = () => ( +const Guide = props => (
    @@ -76,8 +77,224 @@ const Guide = () => (
    +
    +
    + dns_privacy +
    +
    +
    + text, + text, + ]} + > + setup_dns_privacy_1 + +
    +
    + text, + text, + ]} + > + setup_dns_privacy_2 + +
    +
    + text

    , + ]} + > + setup_dns_privacy_3 +     +
    +
    + Android +
      +
    • + setup_dns_privacy_android_1 +
      • +
    • + + link + , + text, + ]} + > + setup_dns_privacy_android_2 + +
      • +
    • + + link + , + text, + ]} + > + setup_dns_privacy_android_3 + +
      • +
    +
    +
    + iOS +
      +
    • + + link + , + text, + + link + , + ]} + > + setup_dns_privacy_ios_1 + +
      • +
    • + + link + , + text, + ]} + > + setup_dns_privacy_ios_2 + +
      • +
    +
    +
    + + setup_dns_privacy_other_title + +
      +
    • + setup_dns_privacy_other_1 +
      • +
    • + + link + , + ]} + > + setup_dns_privacy_other_2 + +
      • +
    • + + link + , + text, + ]} + > + setup_dns_privacy_other_3 + +
      • +
    • + + link + , + text, + ]} + > + setup_dns_privacy_other_4 + +
      • +
    • + + link + , + + link + , + ]} + > + setup_dns_privacy_other_5 + +
      • +
    +
    +
    +
    ); + +Guide.propTypes = { + t: PropTypes.func.isRequired, +}; + export default withNamespaces()(Guide); diff --git a/client/src/components/ui/Icons.js b/client/src/components/ui/Icons.js index 92a9efa4..ac9a2a5b 100644 --- a/client/src/components/ui/Icons.js +++ b/client/src/components/ui/Icons.js @@ -59,6 +59,10 @@ const Icons = () => ( + + + + ); diff --git a/client/src/components/ui/Tab.js b/client/src/components/ui/Tab.js index 1498e3ab..cce9b132 100644 --- a/client/src/components/ui/Tab.js +++ b/client/src/components/ui/Tab.js @@ -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 { - {label} + {title || label} ); } @@ -36,6 +37,7 @@ Tab.propTypes = { activeTab: PropTypes.string.isRequired, label: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, + title: PropTypes.string, }; export default Tab; diff --git a/client/src/components/ui/Tabs.css b/client/src/components/ui/Tabs.css index 9c7c567f..cd1671e9 100644 --- a/client/src/components/ui/Tabs.css +++ b/client/src/components/ui/Tabs.css @@ -49,3 +49,12 @@ .tab__text p { margin-bottom: 5px; } + +.tab__text ul, +.tab__text ol { + padding-left: 25px; +} + +.tab__paragraph { + margin-bottom: 10px; +} diff --git a/client/src/components/ui/Tabs.js b/client/src/components/ui/Tabs.js index f376e825..a15b0ee6 100644 --- a/client/src/components/ui/Tabs.js +++ b/client/src/components/ui/Tabs.js @@ -27,12 +27,13 @@ class Tabs extends Component {
    {children.map((child) => { - const { label } = child.props; + const { label, title } = child.props; return (