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_auth_password_enter": "Enter password",
"install_step": "Step", "install_step": "Step",
"install_devices_title": "Configure your devices", "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_title": "Congratulations!",
"install_submit_desc": "The setup procedure is finished and you are ready to start using AdGuard Home.", "install_submit_desc": "The setup procedure is finished and you are ready to start using AdGuard Home.",
"install_devices_router": "Router", "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_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_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_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.", "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_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_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_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 flow from 'lodash/flow';
import format from 'date-fns/format'; 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 { EMPTY_DATE } from '../../../helpers/constants';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
@ -167,7 +167,7 @@ let Form = (props) => {
type="number" type="number"
className="form-control" className="form-control"
placeholder={t('encryption_dot')} placeholder={t('encryption_dot')}
validate={[port]} validate={[portTLS]}
normalize={toNumber} normalize={toNumber}
onChange={handleChange} onChange={handleChange}
disabled={!isEnabled} 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>)} {dnsAddresses.map(ip => <li key={ip}>{ip}</li>)}
</div> </div>
</div> </div>
<Guide /> <Guide dnsAddresses={dnsAddresses} />
</Card> </Card>
</div> </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 PropTypes from 'prop-types';
import { Trans, withNamespaces } from 'react-i18next'; import { Trans, withNamespaces } from 'react-i18next';
import Tabs from '../ui/Tabs'; import Tabs from '../ui/Tabs';
import Icons from '../ui/Icons'; 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> <div>
<Icons /> <Icons />
<Tabs> <Tabs>
@ -14,66 +21,104 @@ const Guide = props => (
<Trans>install_devices_router</Trans> <Trans>install_devices_router</Trans>
</div> </div>
<div className="tab__text"> <div className="tab__text">
<p><Trans>install_devices_router_desc</Trans></p> <p>
<Trans>install_devices_router_desc</Trans>
</p>
<ol> <ol>
<li><Trans>install_devices_router_list_1</Trans></li> <li>
<li><Trans>install_devices_router_list_2</Trans></li> <Trans>install_devices_router_list_1</Trans>
<li><Trans>install_devices_router_list_3</Trans></li> </li>
<li>
<Trans>install_devices_router_list_2</Trans>
</li>
<li>
<Trans>install_devices_router_list_3</Trans>
</li>
</ol> </ol>
</div> </div>
</div> </div>
<div label="Windows"> <div label="Windows">
<div className="tab__title"> <div className="tab__title">Windows</div>
Windows
</div>
<div className="tab__text"> <div className="tab__text">
<ol> <ol>
<li><Trans>install_devices_windows_list_1</Trans></li> <li>
<li><Trans>install_devices_windows_list_2</Trans></li> <Trans>install_devices_windows_list_1</Trans>
<li><Trans>install_devices_windows_list_3</Trans></li> </li>
<li><Trans>install_devices_windows_list_4</Trans></li> <li>
<li><Trans>install_devices_windows_list_5</Trans></li> <Trans>install_devices_windows_list_2</Trans>
<li><Trans>install_devices_windows_list_6</Trans></li> </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> </ol>
</div> </div>
</div> </div>
<div label="macOS"> <div label="macOS">
<div className="tab__title"> <div className="tab__title">macOS</div>
macOS
</div>
<div className="tab__text"> <div className="tab__text">
<ol> <ol>
<li><Trans>install_devices_macos_list_1</Trans></li> <li>
<li><Trans>install_devices_macos_list_2</Trans></li> <Trans>install_devices_macos_list_1</Trans>
<li><Trans>install_devices_macos_list_3</Trans></li> </li>
<li><Trans>install_devices_macos_list_4</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> </ol>
</div> </div>
</div> </div>
<div label="Android"> <div label="Android">
<div className="tab__title"> <div className="tab__title">Android</div>
Android
</div>
<div className="tab__text"> <div className="tab__text">
<ol> <ol>
<li><Trans>install_devices_android_list_1</Trans></li> <li>
<li><Trans>install_devices_android_list_2</Trans></li> <Trans>install_devices_android_list_1</Trans>
<li><Trans>install_devices_android_list_3</Trans></li> </li>
<li><Trans>install_devices_android_list_4</Trans></li> <li>
<li><Trans>install_devices_android_list_5</Trans></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> </ol>
</div> </div>
</div> </div>
<div label="iOS"> <div label="iOS">
<div className="tab__title"> <div className="tab__title">iOS</div>
iOS
</div>
<div className="tab__text"> <div className="tab__text">
<ol> <ol>
<li><Trans>install_devices_ios_list_1</Trans></li> <li>
<li><Trans>install_devices_ios_list_2</Trans></li> <Trans>install_devices_ios_list_1</Trans>
<li><Trans>install_devices_ios_list_3</Trans></li> </li>
<li><Trans>install_devices_ios_list_4</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> </ol>
</div> </div>
</div> </div>
@ -82,9 +127,10 @@ const Guide = props => (
<Trans>dns_privacy</Trans> <Trans>dns_privacy</Trans>
</div> </div>
<div className="tab__text"> <div className="tab__text">
{tlsAddress && tlsAddress.length > 0 && (
<div className="tab__paragraph"> <div className="tab__paragraph">
<Trans <Trans
values={{ address: window.location.hostname }} values={{ address: tlsAddress[0] }}
components={[ components={[
<strong key="0">text</strong>, <strong key="0">text</strong>,
<code key="1">text</code>, <code key="1">text</code>,
@ -93,9 +139,11 @@ const Guide = props => (
setup_dns_privacy_1 setup_dns_privacy_1
</Trans> </Trans>
</div> </div>
)}
{httpsAddress && httpsAddress.length > 0 && (
<div className="tab__paragraph"> <div className="tab__paragraph">
<Trans <Trans
values={{ address: `https://${window.location.hostname}/dns-query` }} values={{ address: `${httpsAddress[0]}/dns-query` }}
components={[ components={[
<strong key="0">text</strong>, <strong key="0">text</strong>,
<code key="1">text</code>, <code key="1">text</code>,
@ -104,12 +152,30 @@ const Guide = props => (
setup_dns_privacy_2 setup_dns_privacy_2
</Trans> </Trans>
</div> </div>
)}
{showDnsPrivacyNotice && (
<div className="tab__paragraph"> <div className="tab__paragraph">
<Trans <Trans
components={[ 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 setup_dns_privacy_3
</Trans> </Trans>
</div> </div>
@ -286,14 +352,21 @@ const Guide = props => (
</li> </li>
</ul> </ul>
</div> </div>
</Fragment>
)}
</div> </div>
</div> </div>
</Tabs> </Tabs>
</div> </div>
); );
};
Guide.defaultProps = {
dnsAddresses: [],
};
Guide.propTypes = { Guide.propTypes = {
dnsAddresses: PropTypes.array,
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
}; };

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

@ -76,6 +76,15 @@ export const port = (value) => {
return false; 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) => { export const isSafePort = (value) => {
if (UNSAFE_PORTS.includes(value)) { if (UNSAFE_PORTS.includes(value)) {
return <Trans>form_error_port_unsafe</Trans>; return <Trans>form_error_port_unsafe</Trans>;