Skip to content

Commit

Permalink
+ client: add form to download mobileconfig
Browse files Browse the repository at this point in the history
  • Loading branch information
@IldarKamalov
IldarKamalov committed Jan 25, 2021
1 parent 3d12ae6 commit b1aec04
Show file tree
Hide file tree
Showing 6 changed files with 245 additions and 99 deletions.
7 changes: 6 additions & 1 deletion client/src/__locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
"form_error_ip_format": "Invalid IP format",
"form_error_mac_format": "Invalid MAC format",
"form_error_client_id_format": "Invalid client ID format",
"form_error_server_name": "Invalid server name or wildcard certificate",
"form_error_server_name": "Invalid server name",
"form_error_positive": "Must be greater than 0",
"form_error_negative": "Must be equal to 0 or greater",
"range_end_error": "Must be greater than range start",
Expand Down Expand Up @@ -251,8 +251,12 @@
"dns_over_https": "DNS-over-HTTPS",
"dns_over_tls": "DNS-over-TLS",
"dns_over_quic": "DNS-over-QUIC",
"client_id": "Client ID",
"client_id_placeholder": "Enter client ID",
"client_id_desc": "Different clients can be identified by a special client ID. <a>Here</a> you can learn more about how to identify clients.",
"download_mobileconfig_doh": "Download .mobileconfig for DNS-over-HTTPS",
"download_mobileconfig_dot": "Download .mobileconfig for DNS-over-TLS",
"download_mobileconfig": "Download configuration file",
"plain_dns": "Plain DNS",
"form_enter_rate_limit": "Enter rate limit",
"rate_limit": "Rate limit",
Expand Down Expand Up @@ -432,6 +436,7 @@
"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_privacy_ioc_mac": "iOS and macOS configuration",
"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.",
"rewrite_added": "DNS rewrite for \"{{key}}\" successfully added",
"rewrite_deleted": "DNS rewrite for \"{{key}}\" successfully deleted",
Expand Down
4 changes: 4 additions & 0 deletions client/src/components/App/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,7 @@ body {
.ReactModal__Body--open {
overflow: hidden;
}

a.btn-success.disabled {
color: #fff;
}
193 changes: 96 additions & 97 deletions client/src/components/ui/Guide.js → client/src/components/ui/Guide/Guide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,12 @@ import PropTypes from 'prop-types';
import { Trans, useTranslation } from 'react-i18next';
import i18next from 'i18next';
import { useSelector } from 'react-redux';
import Tabs from './Tabs';
import Icons from './Icons';
import { getPathWithQueryString } from '../../helpers/helpers';

const MOBILE_CONFIG_LINKS = {
DOT: '/apple/dot.mobileconfig',
DOH: '/apple/doh.mobileconfig',
};
import { MOBILE_CONFIG_LINKS } from '../../../helpers/constants';

/* FIXME: find out `client_id` */
const renderMobileconfigInfo = ({ label, components, server_name }) => <li key={label}>
<Trans components={components}>{label}</Trans>
<ul>
<li>
<a href={getPathWithQueryString(MOBILE_CONFIG_LINKS.DOT, { host: server_name, client_id: 'client_id' })}
download>{i18next.t('download_mobileconfig_dot')}</a>
</li>
<li>
<a href={getPathWithQueryString(MOBILE_CONFIG_LINKS.DOH, { host: server_name, client_id: 'client_id' })}
download>{i18next.t('download_mobileconfig_doh')}</a>
</li>
</ul>
</li>;
import Tabs from '../Tabs';
import Icons from '../Icons';
import MobileConfigForm from './MobileConfigForm';

const renderLi = ({ label, components }) => <li key={label}>
<Trans components={components?.map((props) => {
Expand All @@ -43,49 +26,8 @@ const renderLi = ({ label, components }) => <li key={label}>
</Trans>
</li>;

const getDnsPrivacyList = (server_name) => {
const iosList = [
{
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_ios_1',
components: [
{
key: 0,
href: 'https://itunes.apple.com/app/id1452162351',
},
<code key="1">text</code>,
{
key: 2,
href: 'https://dnscrypt.info/stamps',
},

],
}];
/* Insert second element if can generate .mobileconfig links */
if (server_name) {
iosList.splice(1, 0, {
label: 'setup_dns_privacy_4',
components: {
highlight: <code />,
},
renderComponent: ({ label, components }) => renderMobileconfigInfo({
label,
components,
server_name,
}),
});
}

return [{
const getDnsPrivacyList = () => [
{
title: 'Android',
list: [
{
Expand Down Expand Up @@ -115,7 +57,32 @@ const getDnsPrivacyList = (server_name) => {
},
{
title: 'iOS',
list: iosList,
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_ios_1',
components: [
{
key: 0,
href: 'https://itunes.apple.com/app/id1452162351',
},
<code key="1">text</code>,
{
key: 2,
href: 'https://dnscrypt.info/stamps',
},
],
},
],
},
{
title: 'setup_dns_privacy_other_title',
Expand Down Expand Up @@ -168,20 +135,20 @@ const getDnsPrivacyList = (server_name) => {
},
],
},
];
};
];

const renderDnsPrivacyList = ({ title, list }) => <div className="tab__paragraph" key={title}>
<strong><Trans>{title}</Trans></strong>
<ul>{list.map(
({
label,
components,
renderComponent = renderLi,
}) => renderComponent({ label, components }),
)}
</ul>
</div>;
const renderDnsPrivacyList = ({ title, list }) => (
<div className="tab__paragraph" key={title}>
<strong>
<Trans>{title}</Trans>
</strong>
<ul>
{list.map(({ label, components, renderComponent = renderLi }) => (
renderComponent({ label, components })
))}
</ul>
</div>
);

const getTabs = ({
tlsAddress,
Expand Down Expand Up @@ -269,8 +236,8 @@ const getTabs = ({
</Trans>
</div>
)}
{showDnsPrivacyNotice
? <div className="tab__paragraph">
{showDnsPrivacyNotice ? (
<div className="tab__paragraph">
<Trans
components={[
<a
Expand All @@ -287,31 +254,60 @@ const getTabs = ({
setup_dns_notice
</Trans>
</div>
: <>
) : (
<>
<div className="tab__paragraph">
<Trans components={[<p key="0">text</p>]}>
setup_dns_privacy_3
</Trans>
</div>
{getDnsPrivacyList(server_name).map(renderDnsPrivacyList)}
</>}
{getDnsPrivacyList().map(renderDnsPrivacyList)}
<div>
<strong>
<Trans>
setup_dns_privacy_ioc_mac
</Trans>
</strong>
</div>
<div className="mb-3">
<Trans components={{ highlight: <code /> }}>
setup_dns_privacy_4
</Trans>
</div>
<MobileConfigForm
initialValues={{
host: server_name,
clientId: '',
protocol: MOBILE_CONFIG_LINKS.DOH,
}}
/>
</>
)}
</div>
</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">
{getTitle?.()}
{list
&& <ol>{list.map((item) => <li key={item}>
<Trans>{item}</Trans>
</li>)}
</ol>}
const renderContent = ({ title, list, getTitle }) => (
<div key={title} label={i18next.t(title)}>
<div className="tab__title">
{i18next.t(title)}
</div>
<div className="tab__text">
{getTitle?.()}
{list && (
<ol>
{list.map((item) => (
<li key={item}>
<Trans>{item}</Trans>
</li>
))}
</ol>
)}
</div>
</div>
</div>;
);

const Guide = ({ dnsAddresses }) => {
const { t } = useTranslation();
Expand All @@ -334,9 +330,14 @@ const Guide = ({ dnsAddresses }) => {

return (
<div>
<Tabs
tabs={tabs}
activeTabLabel={activeTabLabel}
setActiveTabLabel={setActiveTabLabel}
>
{activeTab}
</Tabs>
<Icons />
<Tabs tabs={tabs} activeTabLabel={activeTabLabel}
setActiveTabLabel={setActiveTabLabel}>{activeTab}</Tabs>
</div>
);
};
Expand Down Expand Up @@ -366,6 +367,4 @@ renderLi.propTypes = {
components: PropTypes.string,
};

renderMobileconfigInfo.propTypes = renderLi.propTypes;

export default Guide;
Loading

0 comments on commit b1aec04

Please sign in to comment.