From 31b855f9ab094fd44f1fe94198e1af5c3276302d Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Mon, 4 Feb 2019 17:13:59 +0300 Subject: [PATCH] Show list of addresses --- client/src/__locales/en.json | 4 +- client/src/helpers/constants.js | 2 + client/src/helpers/helpers.js | 45 ++++++++++++++++- client/src/install/Setup/AddressList.js | 60 ++++++++++++++++++++++ client/src/install/Setup/Controls.js | 17 +------ client/src/install/Setup/Devices.js | 11 ++++- client/src/install/Setup/Settings.js | 66 ++++++++++++------------- client/src/install/Setup/Submit.js | 25 +++++----- client/src/install/Setup/index.js | 8 +-- 9 files changed, 166 insertions(+), 72 deletions(-) create mode 100644 client/src/install/Setup/AddressList.js diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index fc41fd85..3cdeddad 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -164,10 +164,10 @@ "install_settings_title": "Admin Web Interface", "install_settings_listen": "Listen interface", "install_settings_port": "Port", - "install_settings_interface_link": "Your AdGuard Home admin web interface will be available on the following addresses: <0>{{link}}", + "install_settings_interface_link": "Your AdGuard Home admin web interface will be available on the following addresses:", "form_error_port": "Enter valid port value", "install_settings_dns": "DNS server", - "install_settings_dns_desc": "You will need to configure your devices or router to use the DNS server at <0>{{ip}}", + "install_settings_dns_desc": "You will need to configure your devices or router to use the DNS server on the following addresses:", "install_settings_all_interfaces": "All interfaces", "install_auth_title": "Authentication", "install_auth_desc": "It is highly recommended to configure password authentication to your AdGuard Home admin web interface. Even if it is accessible only in your local network, it is still important to have it protected from unrestricted access.", diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index 3460c452..0372fb95 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -70,3 +70,5 @@ export const SETTINGS_NAMES = { parental: 'parental', safesearch: 'safesearch', }; + +export const STANDARD_DNS_PORT = 53; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 870d320f..ad6dcdca 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -4,7 +4,7 @@ import subHours from 'date-fns/sub_hours'; import addHours from 'date-fns/add_hours'; import round from 'lodash/round'; -import { STATS_NAMES } from './constants'; +import { STATS_NAMES, STANDARD_DNS_PORT } from './constants'; export const formatTime = (time) => { const parsedTime = dateParse(time); @@ -85,3 +85,46 @@ export const getPercent = (amount, number) => { }; export const captitalizeWords = text => text.split(/[ -_]/g).map(str => str.charAt(0).toUpperCase() + str.substr(1)).join(' '); + +export const getInterfaceIp = (option) => { + const onlyIPv6 = option.ip_addresses.every(ip => ip.includes(':')); + let interfaceIP = option.ip_addresses[0]; + + if (!onlyIPv6) { + option.ip_addresses.forEach((ip) => { + if (!ip.includes(':')) { + interfaceIP = ip; + } + }); + } + + return interfaceIP; +}; + +export const getIpList = (interfaces) => { + let list = []; + + Object.keys(interfaces).forEach((item) => { + list = [...list, ...interfaces[item].ip_addresses]; + }); + + return list.sort(); +}; + +export const getAddress = (ip, port = '', isDns = false) => { + if (!port) { + return isDns ? ip : `http://${ip}`; + } + + if (isDns) { + if (ip.includes(':') && port !== STANDARD_DNS_PORT) { + return `[${ip}]:${port}`; + } else if (port !== STANDARD_DNS_PORT) { + return `${ip}:${port}`; + } + + return ip; + } + + return ip.includes(':') ? `http://[${ip}]:${port}` : `http://${ip}:${port}`; +}; diff --git a/client/src/install/Setup/AddressList.js b/client/src/install/Setup/AddressList.js new file mode 100644 index 00000000..6654c2c4 --- /dev/null +++ b/client/src/install/Setup/AddressList.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { getIpList, getAddress } from '../../helpers/helpers'; + +const AddressList = (props) => { + let webAddress = getAddress(props.address, props.port); + let dnsAddress = getAddress(props.address, props.port, true); + + if (props.address === '0.0.0.0') { + return getIpList(props.interfaces).map((ip) => { + webAddress = getAddress(ip, props.port); + dnsAddress = getAddress(ip, props.port, true); + + if (props.isDns) { + return ( +
  • + + {dnsAddress} + +
    • + ); + } + + return ( +
  • + + {webAddress} + +
    • + ); + }); + } + + if (props.isDns) { + return ( + + {dnsAddress} + + ); + } + + return ( + + {webAddress} + + ); +}; + +AddressList.propTypes = { + interfaces: PropTypes.object.isRequired, + address: PropTypes.string.isRequired, + port: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + ]), + isDns: PropTypes.bool, +}; + +export default AddressList; diff --git a/client/src/install/Setup/Controls.js b/client/src/install/Setup/Controls.js index 7c6a7e30..7a70398e 100644 --- a/client/src/install/Setup/Controls.js +++ b/client/src/install/Setup/Controls.js @@ -4,26 +4,12 @@ import PropTypes from 'prop-types'; import { Trans } from 'react-i18next'; import * as actionCreators from '../../actions/install'; -import { INSTALL_FIRST_STEP, INSTALL_TOTAL_STEPS } from '../../helpers/constants'; class Controls extends Component { - nextStep = () => { - if (this.props.step < INSTALL_TOTAL_STEPS) { - this.props.nextStep(); - } - } - - prevStep = () => { - if (this.props.step > INSTALL_FIRST_STEP) { - this.props.prevStep(); - } - } - renderPrevButton(step) { switch (step) { case 2: case 3: - case 4: return ( @@ -106,6 +92,7 @@ Controls.propTypes = { submitting: PropTypes.bool, invalid: PropTypes.bool, pristine: PropTypes.bool, + address: PropTypes.string, }; const mapStateToProps = (state) => { diff --git a/client/src/install/Setup/Devices.js b/client/src/install/Setup/Devices.js index 1ce76bcc..4a5f7c13 100644 --- a/client/src/install/Setup/Devices.js +++ b/client/src/install/Setup/Devices.js @@ -8,6 +8,7 @@ import flow from 'lodash/flow'; import Tabs from '../../components/ui/Tabs'; import Icons from '../../components/ui/Icons'; import Controls from './Controls'; +import AddressList from './AddressList'; let Devices = props => (
    @@ -20,8 +21,13 @@ let Devices = props => (
    install_devices_address:
    -
    - {`${props.dnsIp}:${props.dnsPort}`} +
    +
    @@ -101,6 +107,7 @@ let Devices = props => ( ); Devices.propTypes = { + interfaces: PropTypes.object.isRequired, dnsIp: PropTypes.string.isRequired, dnsPort: PropTypes.number.isRequired, }; diff --git a/client/src/install/Setup/Settings.js b/client/src/install/Setup/Settings.js index 122465e1..9fc51c41 100644 --- a/client/src/install/Setup/Settings.js +++ b/client/src/install/Setup/Settings.js @@ -6,7 +6,9 @@ import { Trans, withNamespaces } from 'react-i18next'; import flow from 'lodash/flow'; import Controls from './Controls'; +import AddressList from './AddressList'; import renderField from './renderField'; +import { getInterfaceIp } from '../../helpers/helpers'; const required = (value) => { if (value || value === 0) { @@ -28,20 +30,11 @@ const renderInterfaces = (interfaces => ( Object.keys(interfaces).map((item) => { const option = interfaces[item]; const { name } = option; - const onlyIPv6 = option.ip_addresses.every(ip => ip.includes(':')); - let interfaceIP = option.ip_addresses[0]; - - if (!onlyIPv6) { - option.ip_addresses.forEach((ip) => { - if (!ip.includes(':')) { - interfaceIP = ip; - } - }); - } + const ip = getInterfaceIp(option); return ( - ); }) @@ -50,8 +43,8 @@ const renderInterfaces = (interfaces => ( let Settings = (props) => { const { handleSubmit, - interfaceIp, - interfacePort, + webIp, + webPort, dnsIp, dnsPort, interfaces, @@ -59,8 +52,6 @@ let Settings = (props) => { webWarning, dnsWarning, } = props; - const dnsAddress = dnsPort && dnsPort !== 53 ? `${dnsIp}:${dnsPort}` : dnsIp; - const interfaceAddress = interfacePort ? `http://${interfaceIp}:${interfacePort}` : `http://${interfaceIp}`; return (
    @@ -104,12 +95,14 @@ let Settings = (props) => {
    - link]} - values={{ link: interfaceAddress }} - > - install_settings_interface_link - + install_settings_interface_link +
    + +
    {webWarning &&
    {webWarning} @@ -132,7 +125,7 @@ let Settings = (props) => { component="select" className="form-control custom-select" > - {renderInterfaces(interfaces)} @@ -157,12 +150,15 @@ let Settings = (props) => {
    - ip]} - values={{ ip: dnsAddress }} - > - install_settings_dns_desc - + install_settings_dns_desc +
    + +
    {dnsWarning &&
    {dnsWarning} @@ -177,9 +173,9 @@ let Settings = (props) => { Settings.propTypes = { handleSubmit: PropTypes.func.isRequired, - interfaceIp: PropTypes.string.isRequired, + webIp: PropTypes.string.isRequired, dnsIp: PropTypes.string.isRequired, - interfacePort: PropTypes.oneOfType([ + webPort: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]), @@ -197,14 +193,14 @@ Settings.propTypes = { const selector = formValueSelector('install'); Settings = connect((state) => { - const interfaceIp = selector(state, 'web.ip'); - const interfacePort = selector(state, 'web.port'); + const webIp = selector(state, 'web.ip'); + const webPort = selector(state, 'web.port'); const dnsIp = selector(state, 'dns.ip'); const dnsPort = selector(state, 'dns.port'); return { - interfaceIp, - interfacePort, + webIp, + webPort, dnsIp, dnsPort, }; diff --git a/client/src/install/Setup/Submit.js b/client/src/install/Setup/Submit.js index 66d89331..23df3691 100644 --- a/client/src/install/Setup/Submit.js +++ b/client/src/install/Setup/Submit.js @@ -6,6 +6,7 @@ import { Trans, withNamespaces } from 'react-i18next'; import flow from 'lodash/flow'; import Controls from './Controls'; +import { getAddress } from '../../helpers/helpers'; let Submit = props => (
    @@ -17,33 +18,31 @@ let Submit = props => ( install_submit_desc

    - - - +
    ); Submit.propTypes = { - interfaceIp: PropTypes.string.isRequired, - interfacePort: PropTypes.number.isRequired, + webIp: PropTypes.string.isRequired, + webPort: PropTypes.number.isRequired, handleSubmit: PropTypes.func.isRequired, pristine: PropTypes.bool.isRequired, submitting: PropTypes.bool.isRequired, + openDashboard: PropTypes.func.isRequired, }; const selector = formValueSelector('install'); Submit = connect((state) => { - const interfaceIp = selector(state, 'web.ip'); - const interfacePort = selector(state, 'web.port'); + const webIp = selector(state, 'web.ip'); + const webPort = selector(state, 'web.port'); return { - interfaceIp, - interfacePort, + webIp, + webPort, }; })(Submit); diff --git a/client/src/install/Setup/index.js b/client/src/install/Setup/index.js index 0d5e4c80..b1501536 100644 --- a/client/src/install/Setup/index.js +++ b/client/src/install/Setup/index.js @@ -29,8 +29,8 @@ class Setup extends Component { this.props.setAllSettings(values); }; - openDashboard = () => { - console.log('Open dashboard'); + openDashboard = (address) => { + window.location.replace(address); } nextStep = () => { @@ -64,9 +64,9 @@ class Setup extends Component { ); case 4: - return ; + return ; case 5: - return ; + return ; default: return false; }