daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into fix/2152

Browse Source
This commit is contained in:
ArtemBaskal
2020-10-08 11:35:06 +03:00
parent eb91c6cfe4 398da7e2d3
commit be82502ba7
12 changed files with 568 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
client/src/components/ui/Guide.js
View File

@@ -1,10 +1,43 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Trans, withTranslation } from 'react-i18next';
import { Trans, useTranslation } from 'react-i18next';
import i18next from 'i18next';
import Tabs from './Tabs';
import Icons from './Icons';
const MOBILE_CONFIG_LINKS = {
DOT: '/apple/dot.mobileconfig',
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: [
@@ -36,6 +69,23 @@ const dnsPrivacyList = [{
{
title: 'iOS',
list: [
{
label: 'setup_dns_privacy_ios_2',
components: [
{
key: 0,
href: 'https://adguard.com/adguard-ios/overview.html',
},
<code key="1">text</code>,
],
},
{
label: 'setup_dns_privacy_4',
components: {
highlight: <code />,
},
renderComponent: renderMobileconfigInfo,
},
{
label: 'setup_dns_privacy_ios_1',
components: [
@@ -51,16 +101,6 @@ const dnsPrivacyList = [{
],
},
{
label: 'setup_dns_privacy_ios_2',
components: [
{
key: 0,
href: 'https://adguard.com/adguard-ios/overview.html',
},
<code key="1">text</code>,
],
},
],
},
{
@@ -116,26 +156,15 @@ 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>;
@@ -195,8 +224,8 @@ const getTabs = ({
},
dns_privacy: {
title: 'dns_privacy',
// eslint-disable-next-line react/display-name
getTitle: () => <div label="dns_privacy" title={t('dns_privacy')}>
getTitle: function Title() {
return <div label="dns_privacy" title={t('dns_privacy')}>
<div className="tab__text">
{tlsAddress?.length > 0 && (
<div className="tab__paragraph">
@@ -251,14 +280,15 @@ const getTabs = ({
{dnsPrivacyList.map(renderDnsPrivacyList)}
</>}
</div>
</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>
@@ -267,9 +297,10 @@ const renderContent = ({ title, list, getTitle }, t) => <div key={title} label={
</div>
</div>;
const Guide = ({ dnsAddresses, t }) => {
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');
@@ -281,7 +312,7 @@ const Guide = ({ dnsAddresses, t }) => {
t,
});
const activeTab = renderContent(tabs[activeTabLabel], t);
const activeTab = renderContent(tabs[activeTabLabel]);
return (
<div>
@@ -298,12 +329,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 = {
@@ -312,4 +343,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;