Fix .mobileconfig display on SetupGuide

AdguardTeam · Sep 28, 2020 · c8c4cf8 · c8c4cf8
1 parent 9e4fad3
commit c8c4cf8
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 55 deletions.
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
@@ -249,6 +249,8 @@
     "blocking_ipv6": "Blocking IPv6",
     "dns_over_https": "DNS-over-HTTPS",
     "dns_over_tls": "DNS-over-TLS",
+    "download_mobileconfig_doh": "Download .mobileconfig for DNS-over-HTTPS",
+    "download_mobileconfig_dot": "Download .mobileconfig for DNS-over-TLS",
     "plain_dns": "Plain DNS",
     "form_enter_rate_limit": "Enter rate limit",
     "rate_limit": "Rate limit",
@@ -415,7 +417,8 @@
     "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_3": "<0>Here's a list of software you can use.</0>",
+    "setup_dns_privacy_4": "On an iOS 14 or MacOS Big Sur device you can download special '.mobileconfig' file that adds <doh>DNS-over-HTTPS</doh> or <dot>DNS-over-TLS</dot> servers to the DNS settings.",
     "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.",
@@ -583,6 +586,5 @@
     "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.",
     "adg_will_drop_dns_queries": "AdGuard Home will be dropping all DNS queries from this client.",
     "client_not_in_allowed_clients": "The client is not allowed because it is not in the \"Allowed clients\" list.",
-    "experimental": "Experimental",
-    "download_mobileconfig": "Download .mobileconfig:"
+    "experimental": "Experimental"
 }
diff --git a/client/src/components/ui/Guide.js b/client/src/components/ui/Guide.js
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withTranslation } from 'react-i18next';
-
-import { useSelector } from 'react-redux';
+import { Trans, useTranslation } from 'react-i18next';
+import i18next from 'i18next';
 import Tabs from './Tabs';
 import Icons from './Icons';
 
@@ -11,6 +10,34 @@ const MOBILE_CONFIG_LINKS = {
     DOH: '/apple/doh.mobileconfig',
 };
 
+const renderMobileconfigInfo = ({ label, components }) => <li key={label}>
+    <Trans components={components}>{label}</Trans>
+    <ul>
+        <li>
+            <a href={MOBILE_CONFIG_LINKS.DOT} download>{i18next.t('download_mobileconfig_dot')}</a>
+        </li>
+        <li>
+            <a href={MOBILE_CONFIG_LINKS.DOH} download>{i18next.t('download_mobileconfig_doh')}</a>
+        </li>
+    </ul>
+</li>;
+
+const renderLi = ({ label, components }) => <li key={label}>
+    <Trans components={components?.map((props) => {
+        if (React.isValidElement(props)) {
+            return props;
+        }
+        const {
+            // eslint-disable-next-line react/prop-types
+            href, target = '_blank', rel = 'noopener noreferrer', key = '0',
+        } = props;
+
+        return <a href={href} target={target} rel={rel} key={key}>link</a>;
+    })}>
+        {label}
+    </Trans>
+</li>;
+
 const dnsPrivacyList = [{
     title: 'Android',
     list: [
@@ -43,28 +70,36 @@ const dnsPrivacyList = [{
     title: 'iOS',
     list: [
         {
-            label: 'setup_dns_privacy_ios_1',
+            label: 'setup_dns_privacy_ios_2',
             components: [
                 {
                     key: 0,
-                    href: 'https://itunes.apple.com/app/id1452162351',
+                    href: 'https://adguard.com/adguard-ios/overview.html',
                 },
-                    <code key="1">text</code>,
-                    {
-                        key: 2,
-                        href: 'https://dnscrypt.info/stamps',
-                    },
-
+                <code key="1">text</code>,
             ],
         },
         {
-            label: 'setup_dns_privacy_ios_2',
+            label: 'setup_dns_privacy_4',
+            components: {
+                dot: <code />,
+                doh: <code />,
+            },
+            renderComponent: renderMobileconfigInfo,
+        },
+        {
+            label: 'setup_dns_privacy_ios_1',
             components: [
                 {
                     key: 0,
-                    href: 'https://adguard.com/adguard-ios/overview.html',
+                    href: 'https://itunes.apple.com/app/id1452162351',
                 },
                     <code key="1">text</code>,
+                    {
+                        key: 2,
+                        href: 'https://dnscrypt.info/stamps',
+                    },
+
             ],
         },
     ],
@@ -122,34 +157,22 @@ const dnsPrivacyList = [{
 },
 ];
 
-const renderDnsPrivacyList = ({ title, list }) => <div className="tab__paragraph">
+const renderDnsPrivacyList = ({ title, list }) => <div className="tab__paragraph" key={title}>
     <strong><Trans>{title}</Trans></strong>
-    <ul>{list.map(({ label, components }) => <li key={label}>
-        <Trans
-            components={components?.map((props) => {
-                if (React.isValidElement(props)) {
-                    return props;
-                }
-                const {
-                    // eslint-disable-next-line react/prop-types
-                    href, target = '_blank', rel = 'noopener noreferrer', key = '0',
-                } = props;
-
-                return <a
-                    href={href} target={target}
-                    rel={rel} key={key}>link</a>;
-            })}>
-            {label}
-        </Trans>
-    </li>)}
+    <ul>{list.map(
+        ({
+            label,
+            components,
+            renderComponent = renderLi,
+        }) => renderComponent({ label, components }),
+    )}
     </ul>
 </div>;
 
 const getTabs = ({
     tlsAddress,
     httpsAddress,
     showDnsPrivacyNotice,
-    encryptionEnabled,
     t,
 }) => ({
     Router: {
@@ -257,24 +280,16 @@ const getTabs = ({
                         </div>
                         {dnsPrivacyList.map(renderDnsPrivacyList)}
                     </>}
-                {encryptionEnabled && <>
-                    <Trans>download_mobileconfig</Trans>
-                    <ul>
-                        <li><a href={MOBILE_CONFIG_LINKS.DOT} download>{t('dns_over_tls')}</a></li>
-                        <li><a href={MOBILE_CONFIG_LINKS.DOH} download>{t('dns_over_https')}</a>
-                        </li>
-                    </ul>
-                </>}
             </div>
         </div>;
         },
     },
 });
 
-const renderContent = ({ title, list, getTitle }, t) => <div key={title} label={t(title)}>
-    <div className="tab__title">{t(title)}</div>
+const renderContent = ({ title, list, getTitle }) => <div key={title} label={i18next.t(title)}>
+    <div className="tab__title">{i18next.t(title)}</div>
     <div className="tab__text">
-        {typeof getTitle === 'function' && getTitle()}
+        {getTitle?.()}
         {list
         && <ol>{list.map((item) => <li key={item}>
             <Trans>{item}</Trans>
@@ -283,10 +298,10 @@ const renderContent = ({ title, list, getTitle }, t) => <div key={title} label={
     </div>
 </div>;
 
-const Guide = ({ dnsAddresses, t }) => {
-    const encryptionEnabled = useSelector((state) => state.encryption.enabled);
-    const tlsAddress = (dnsAddresses && dnsAddresses.filter((item) => item.includes('tls://'))) || '';
-    const httpsAddress = (dnsAddresses && dnsAddresses.filter((item) => item.includes('https://'))) || '';
+const Guide = ({ dnsAddresses }) => {
+    const { t } = useTranslation();
+    const tlsAddress = dnsAddresses?.filter((item) => item.includes('tls://')) ?? '';
+    const httpsAddress = dnsAddresses?.filter((item) => item.includes('https://')) ?? '';
     const showDnsPrivacyNotice = httpsAddress.length < 1 && tlsAddress.length < 1;
 
     const [activeTabLabel, setActiveTabLabel] = useState('Router');
@@ -295,11 +310,10 @@ const Guide = ({ dnsAddresses, t }) => {
         tlsAddress,
         httpsAddress,
         showDnsPrivacyNotice,
-        encryptionEnabled,
         t,
     });
 
-    const activeTab = renderContent(tabs[activeTabLabel], t);
+    const activeTab = renderContent(tabs[activeTabLabel]);
 
     return (
         <div>
@@ -316,12 +330,12 @@ Guide.defaultProps = {
 
 Guide.propTypes = {
     dnsAddresses: PropTypes.array,
-    t: PropTypes.func.isRequired,
 };
 
 renderDnsPrivacyList.propTypes = {
     title: PropTypes.string.isRequired,
     list: PropTypes.array.isRequired,
+    renderList: PropTypes.func,
 };
 
 renderContent.propTypes = {
@@ -330,4 +344,11 @@ renderContent.propTypes = {
     getTitle: PropTypes.func,
 };
 
-export default withTranslation()(Guide);
+renderLi.propTypes = {
+    label: PropTypes.string,
+    components: PropTypes.string,
+};
+
+renderMobileconfigInfo.propTypes = renderLi.propTypes;
+
+export default Guide;