a
/
badguardhome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

* client: show DNS-over-HTTPS and DNS-over-TLS addresses

This commit is contained in:
Ildar Kamalov 2019-07-05 14:54:52 +03:00 committed by Simon Zolin
parent 5c7c9964b8
commit 531ee20988
5 changed files with 376 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/__locales/en.json
View File

@ -201,12 +201,12 @@
"install_auth_password_enter": "Enter password",
"install_step": "Step",
"install_devices_title": "Configure your devices",
"install_devices_desc": "In order for AdGuard Home to start working, you need to configure your devices to use it.",
"install_devices_desc": "To start using AdGuard Home, you need to configure your devices to use it.",
"install_submit_title": "Congratulations!",
"install_submit_desc": "The setup procedure is finished and you are ready to start using AdGuard Home.",
"install_devices_router": "Router",
"install_devices_router_desc": "This setup will automatically cover all the devices connected to your home router and you will not need to configure each of them manually.",
"install_devices_address": "AdGuard Home DNS server is listening to the following addresses",
"install_devices_address": "AdGuard Home DNS server is listening on the following addresses",
"install_devices_router_list_1": "Open the preferences for your router. Usually, you can access it from your browser via a URL (like http:\/\/192.168.0.1\/ or http:\/\/192.168.1.1\/). You may be asked to enter the password. If you don't remember it, you can often reset the password by pressing a button on the router itself. Some routers require a specific application, which in that case should be already installed on your computer\/phone.",
"install_devices_router_list_2": "Find the DHCP\/DNS settings. Look for the DNS letters next to a field which allows two or three sets of numbers, each broken into four groups of one to three digits.",
"install_devices_router_list_3": "Enter your AdGuard Home server addresses there.",
@ -329,5 +329,6 @@
"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>."
"setup_dns_privacy_other_5": "You will find more implementations <0>here</0> and <1>here</1>.",
"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."
}

4
client/src/components/Settings/Encryption/Form.js
View File

@ -6,7 +6,7 @@ import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import format from 'date-fns/format';
import { renderField, renderSelectField, toNumber, port, isSafePort } from '../../../helpers/form';
import { renderField, renderSelectField, toNumber, port, portTLS, isSafePort } from '../../../helpers/form';
import { EMPTY_DATE } from '../../../helpers/constants';
import i18n from '../../../i18n';
@ -167,7 +167,7 @@ let Form = (props) => {
type="number"
className="form-control"
placeholder={t('encryption_dot')}
validate={[port]}
validate={[portTLS]}
normalize={toNumber}
onChange={handleChange}
disabled={!isEnabled}

2
client/src/components/SetupGuide/index.js
View File

@ -28,7 +28,7 @@ const SetupGuide = ({
{dnsAddresses.map(ip => <li key={ip}>{ip}</li>)}
</div>
</div>
<Guide />
<Guide dnsAddresses={dnsAddresses} />
</Card>
</div>
);

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

@ -1,11 +1,18 @@
import React from 'react';
import React, { Fragment } 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 = props => (
const Guide = (props) => {
const { dnsAddresses } = props;
const tlsAddress = (dnsAddresses && dnsAddresses.filter(item => item.includes('tls://'))) || '';
const httpsAddress =
(dnsAddresses && dnsAddresses.filter(item => item.includes('https://'))) || '';
const showDnsPrivacyNotice = httpsAddress.length < 1 && tlsAddress.length < 1;
return (
<div>
<Icons />
<Tabs>
@ -14,66 +21,104 @@ const Guide = props => (
<Trans>install_devices_router</Trans>
</div>
<div className="tab__text">
<p><Trans>install_devices_router_desc</Trans></p>
<p>
<Trans>install_devices_router_desc</Trans>
</p>
<ol>
<li><Trans>install_devices_router_list_1</Trans></li>
<li><Trans>install_devices_router_list_2</Trans></li>
<li><Trans>install_devices_router_list_3</Trans></li>
<li>
<Trans>install_devices_router_list_1</Trans>
</li>
<li>
<Trans>install_devices_router_list_2</Trans>
</li>
<li>
<Trans>install_devices_router_list_3</Trans>
</li>
</ol>
</div>
</div>
<div label="Windows">
<div className="tab__title">
Windows
</div>
<div className="tab__title">Windows</div>
<div className="tab__text">
<ol>
<li><Trans>install_devices_windows_list_1</Trans></li>
<li><Trans>install_devices_windows_list_2</Trans></li>
<li><Trans>install_devices_windows_list_3</Trans></li>
<li><Trans>install_devices_windows_list_4</Trans></li>
<li><Trans>install_devices_windows_list_5</Trans></li>
<li><Trans>install_devices_windows_list_6</Trans></li>
<li>
<Trans>install_devices_windows_list_1</Trans>
</li>
<li>
<Trans>install_devices_windows_list_2</Trans>
</li>
<li>
<Trans>install_devices_windows_list_3</Trans>
</li>
<li>
<Trans>install_devices_windows_list_4</Trans>
</li>
<li>
<Trans>install_devices_windows_list_5</Trans>
</li>
<li>
<Trans>install_devices_windows_list_6</Trans>
</li>
</ol>
</div>
</div>
<div label="macOS">
<div className="tab__title">
macOS
</div>
<div className="tab__title">macOS</div>
<div className="tab__text">
<ol>
<li><Trans>install_devices_macos_list_1</Trans></li>
<li><Trans>install_devices_macos_list_2</Trans></li>
<li><Trans>install_devices_macos_list_3</Trans></li>
<li><Trans>install_devices_macos_list_4</Trans></li>
<li>
<Trans>install_devices_macos_list_1</Trans>
</li>
<li>
<Trans>install_devices_macos_list_2</Trans>
</li>
<li>
<Trans>install_devices_macos_list_3</Trans>
</li>
<li>
<Trans>install_devices_macos_list_4</Trans>
</li>
</ol>
</div>
</div>
<div label="Android">
<div className="tab__title">
Android
</div>
<div className="tab__title">Android</div>
<div className="tab__text">
<ol>
<li><Trans>install_devices_android_list_1</Trans></li>
<li><Trans>install_devices_android_list_2</Trans></li>
<li><Trans>install_devices_android_list_3</Trans></li>
<li><Trans>install_devices_android_list_4</Trans></li>
<li><Trans>install_devices_android_list_5</Trans></li>
<li>
<Trans>install_devices_android_list_1</Trans>
</li>
<li>
<Trans>install_devices_android_list_2</Trans>
</li>
<li>
<Trans>install_devices_android_list_3</Trans>
</li>
<li>
<Trans>install_devices_android_list_4</Trans>
</li>
<li>
<Trans>install_devices_android_list_5</Trans>
</li>
</ol>
</div>
</div>
<div label="iOS">
<div className="tab__title">
iOS
</div>
<div className="tab__title">iOS</div>
<div className="tab__text">
<ol>
<li><Trans>install_devices_ios_list_1</Trans></li>
<li><Trans>install_devices_ios_list_2</Trans></li>
<li><Trans>install_devices_ios_list_3</Trans></li>
<li><Trans>install_devices_ios_list_4</Trans></li>
<li>
<Trans>install_devices_ios_list_1</Trans>
</li>
<li>
<Trans>install_devices_ios_list_2</Trans>
</li>
<li>
<Trans>install_devices_ios_list_3</Trans>
</li>
<li>
<Trans>install_devices_ios_list_4</Trans>
</li>
</ol>
</div>
</div>
@ -82,9 +127,10 @@ const Guide = props => (
<Trans>dns_privacy</Trans>
</div>
<div className="tab__text">
{tlsAddress && tlsAddress.length > 0 && (
<div className="tab__paragraph">
<Trans
values={{ address: window.location.hostname }}
values={{ address: tlsAddress[0] }}
components={[
<strong key="0">text</strong>,
<code key="1">text</code>,
@ -93,9 +139,11 @@ const Guide = props => (
setup_dns_privacy_1
</Trans>
</div>
)}
{httpsAddress && httpsAddress.length > 0 && (
<div className="tab__paragraph">
<Trans
values={{ address: `https://${window.location.hostname}/dns-query` }}
values={{ address: `${httpsAddress[0]}/dns-query` }}
components={[
<strong key="0">text</strong>,
<code key="1">text</code>,
@ -104,12 +152,30 @@ const Guide = props => (
setup_dns_privacy_2
</Trans>
</div>
)}
{showDnsPrivacyNotice && (
<div className="tab__paragraph">
<Trans
components={[
<p key="0">text</p>,
<a
href="https://github.com/AdguardTeam/AdguardHome/wiki/Encryption"
target="_blank"
rel="noopener noreferrer"
key="0"
>
link
</a>,
<code key="1">text</code>,
]}
>
setup_dns_notice
</Trans>
</div>
)}
{!showDnsPrivacyNotice && (
<Fragment>
<div className="tab__paragraph">
<Trans components={[<p key="0">text</p>]}>
setup_dns_privacy_3
</Trans>
</div>
@ -286,14 +352,21 @@ const Guide = props => (
</li>
</ul>
</div>
</Fragment>
)}
</div>
</div>
</Tabs>
</div>
);
};
Guide.defaultProps = {
dnsAddresses: [],
};
Guide.propTypes = {
dnsAddresses: PropTypes.array,
t: PropTypes.func.isRequired,
};

9
client/src/helpers/form.js
View File

@ -76,6 +76,15 @@ export const port = (value) => {
return false;
};
export const portTLS = (value) => {
if (value === 0) {
return false;
} else if (value && (value < 80 || value > 65535)) {
return <Trans>form_error_port_range</Trans>;
}
return false;
};
export const isSafePort = (value) => {
if (UNSAFE_PORTS.includes(value)) {
return <Trans>form_error_port_unsafe</Trans>;