AdguardTeam/AdGuardHome
1
1
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-09-11 10:45:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Pull request: 2842 DHCP validation ui

Browse Source 
Closes #2842.

Squashed commit of the following:

commit 8580db9d3fd6bdd906bf53ca3696fc497f7573b8
Merge: a5d7187b ab85ad5a
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Tue Apr 13 15:29:06 2021 +0300

    Merge branch 'master' into 2842-dhcp-validation-ui

commit a5d7187bba1ae3595bbc26a362ff27aae81a7048
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 13 15:08:28 2021 +0300

    fix: revert deleted translation

commit 50169266111032f6de3bc159ba562ee9580532fb
Merge: 46adf2c0 48d702f7
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 13 14:39:40 2021 +0300

    Merge branch 'master' into 2842-dhcp-validation-ui

commit 46adf2c05b6bedd55e60475eac060347db6572b7
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 13 14:13:12 2021 +0300

    fix: no-bitwise

commit 1afc4030a5ea885545e51748976724959f87fb26
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 13 13:57:43 2021 +0300

    fix: IPv4 in CIDR validation

commit 2035a3f6a2d7026b9055bab64a265ac1b56abd74
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 13 11:58:03 2021 +0300

    fix: translations

commit 6dd455f7dbf92987663b433b7cb8e21c9d0e5b82
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 13 11:57:27 2021 +0300

    fix: MAC validation

commit 281e49a2e2b974e0c7eb89547661aed8238a5d0c
Merge: 48b50ce9 65553a29
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Apr 6 18:12:06 2021 +0300

    Merge branch 'master' into 2842-dhcp-validation-ui

commit 48b50ce9ce84479c43c3d6fc824853dc0b17ac1e
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Apr 5 19:04:35 2021 +0300

    Add leases ip validation

commit 8630f3bf5f03451c3a49c4ce4ebee3a86d16b6a1
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Apr 5 13:59:16 2021 +0300

    Add helper for subnet to bitmap mask conversion, write test

commit 80dc7a8d19b27cecc50e2c610619574374f363d3
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Fri Apr 2 17:46:27 2021 +0300

    2842 Update DHCP range validation in UI
This commit is contained in:
Ainar Garipov 2021-04-13 15:29:28 +03:00
parent ab85ad5a55
commit 327e76cd65
10 changed files with 152 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,7 @@
"form_error_mac_format": "Invalid MAC format",
"form_error_client_id_format": "Invalid client ID format",
"form_error_server_name": "Invalid server name",
"form_error_subnet": "Subnet \"{{cidr}}\" does not contain the IP address \"{{ip}}\"",
"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",
@ -400,6 +401,7 @@
"ip_address": "IP address",
"client_identifier_desc": "Clients can be identified by the IP address, CIDR, MAC address or a special client ID (can be used for DoT/DoH/DoQ). <0>Here</0> you can learn more about how to identify clients.",
"form_enter_ip": "Enter IP",
"form_enter_subnet_ip": "Enter an IP address in the subnet \"{{cidr}}\"",
"form_enter_mac": "Enter MAC",
"form_enter_id": "Enter identifier",
"form_add_id": "Add identifier",

54
client/src/__tests__/helpers.test.js
View File

@ -1,4 +1,9 @@
import { sortIp, countClientsStatistics, findAddressType } from '../helpers/helpers';
import {
sortIp,
countClientsStatistics,
findAddressType,
subnetMaskToBitMask,
} from '../helpers/helpers';
import { ADDRESS_TYPES } from '../helpers/constants';
describe('sortIp', () => {
@ -406,3 +411,50 @@ describe('countClientsStatistics', () => {
})).toStrictEqual(0);
});
});
describe('subnetMaskToBitMask', () => {
const subnetMasks = [
'0.0.0.0',
'128.0.0.0',
'192.0.0.0',
'224.0.0.0',
'240.0.0.0',
'248.0.0.0',
'252.0.0.0',
'254.0.0.0',
'255.0.0.0',
'255.128.0.0',
'255.192.0.0',
'255.224.0.0',
'255.240.0.0',
'255.248.0.0',
'255.252.0.0',
'255.254.0.0',
'255.255.0.0',
'255.255.128.0',
'255.255.192.0',
'255.255.224.0',
'255.255.240.0',
'255.255.248.0',
'255.255.252.0',
'255.255.254.0',
'255.255.255.0',
'255.255.255.128',
'255.255.255.192',
'255.255.255.224',
'255.255.255.240',
'255.255.255.248',
'255.255.255.252',
'255.255.255.254',
'255.255.255.255',
];
test('correct for all subnetMasks', () => {
expect(
subnetMasks.map((subnetMask) => {
const bitmask = subnetMaskToBitMask(subnetMask);
return subnetMasks[bitmask] === subnetMask;
}).every((res) => res === true),
).toEqual(true);
});
});

23
client/src/components/Settings/Dhcp/StaticLeases/Form.js
View File

@ -3,8 +3,14 @@ import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Trans, useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { renderInputField } from '../../../../helpers/form';
import { validateIpv4, validateMac, validateRequiredValue } from '../../../../helpers/validators';
import { renderInputField, normalizeMac } from '../../../../helpers/form';
import {
validateIpv4,
validateMac,
validateRequiredValue,
validateIpv4InCidr,
} from '../../../../helpers/validators';
import { FORM_NAME } from '../../../../helpers/constants';
import { toggleLeaseModal } from '../../../../actions';
@ -14,6 +20,7 @@ const Form = ({
pristine,
submitting,
processingAdding,
cidr,
}) => {
const { t } = useTranslation();
const dispatch = useDispatch();
@ -34,6 +41,7 @@ const Form = ({
type="text"
className="form-control"
placeholder={t('form_enter_mac')}
normalize={normalizeMac}
validate={[validateRequiredValue, validateMac]}
/>
</div>
@ -44,8 +52,8 @@ const Form = ({
component={renderInputField}
type="text"
className="form-control"
placeholder={t('form_enter_ip')}
validate={[validateRequiredValue, validateIpv4]}
placeholder={t('form_enter_subnet_ip', { cidr })}
validate={[validateRequiredValue, validateIpv4, validateIpv4InCidr]}
/>
</div>
<div className="form__group">
@ -84,11 +92,18 @@ const Form = ({
};
Form.propTypes = {
initialValues: PropTypes.shape({
mac: PropTypes.string.isRequired,
ip: PropTypes.string.isRequired,
hostname: PropTypes.string.isRequired,
cidr: PropTypes.string.isRequired,
}),
pristine: PropTypes.bool.isRequired,
handleSubmit: PropTypes.func.isRequired,
reset: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired,
processingAdding: PropTypes.bool.isRequired,
cidr: PropTypes.string.isRequired,
};
export default reduxForm({ form: FORM_NAME.LEASE })(Form);

9
client/src/components/Settings/Dhcp/StaticLeases/Modal.js
View File

@ -10,6 +10,7 @@ const Modal = ({
isModalOpen,
handleSubmit,
processingAdding,
cidr,
}) => {
const dispatch = useDispatch();
@ -32,8 +33,15 @@ const Modal = ({
</button>
</div>
<Form
initialValues={{
mac: '',
ip: '',
hostname: '',
cidr,
}}
onSubmit={handleSubmit}
processingAdding={processingAdding}
cidr={cidr}
/>
</div>
</ReactModal>
@ -44,6 +52,7 @@ Modal.propTypes = {
isModalOpen: PropTypes.bool.isRequired,
handleSubmit: PropTypes.func.isRequired,
processingAdding: PropTypes.bool.isRequired,
cidr: PropTypes.string.isRequired,
};
export default withTranslation()(Modal);

6
client/src/components/Settings/Dhcp/StaticLeases/index.js
View File

@ -21,12 +21,14 @@ const StaticLeases = ({
processingAdding,
processingDeleting,
staticLeases,
cidr,
}) => {
const [t] = useTranslation();
const dispatch = useDispatch();
const handleSubmit = (data) => {
dispatch(addStaticLease(data));
const { mac, ip, hostname } = data;
dispatch(addStaticLease({ mac, ip, hostname }));
};
const handleDelete = (ip, mac, hostname = '') => {
@ -97,6 +99,7 @@ const StaticLeases = ({
isModalOpen={isModalOpen}
handleSubmit={handleSubmit}
processingAdding={processingAdding}
cidr={cidr}
/>
</>
);
@ -107,6 +110,7 @@ StaticLeases.propTypes = {
isModalOpen: PropTypes.bool.isRequired,
processingAdding: PropTypes.bool.isRequired,
processingDeleting: PropTypes.bool.isRequired,
cidr: PropTypes.string.isRequired,
};
cellWrap.propTypes = {

13
client/src/components/Settings/Dhcp/index.js
View File

@ -30,6 +30,7 @@ import Interfaces from './Interfaces';
import {
calculateDhcpPlaceholdersIpv4,
calculateDhcpPlaceholdersIpv6,
subnetMaskToBitMask,
} from '../../../helpers/helpers';
import './index.css';
@ -59,6 +60,10 @@ const Dhcp = () => {
const interface_name = useSelector(
(state) => state.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
);
const isInterfaceIncludesIpv4 = useSelector(
(state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
);
const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv4], shallowEqual);
const [ipv4placeholders, setIpv4Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv4);
const [ipv6placeholders, setIpv6Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv6);
@ -173,6 +178,12 @@ const Dhcp = () => {
const toggleDhcpButton = getToggleDhcpButton();
const inputtedIPv4values = dhcp?.values?.v4?.gateway_ip && dhcp?.values?.v4?.subnet_mask;
const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {}).some(Boolean);
const disabledLeasesButton = dhcp?.syncErrors || interfaces?.syncErrors
|| !isInterfaceIncludesIpv4 || isEmptyConfig || processingConfig || !inputtedIPv4values;
const cidr = inputtedIPv4values ? `${dhcp?.values?.v4?.gateway_ip}/${subnetMaskToBitMask(dhcp?.values?.v4?.subnet_mask)}` : '';
return <>
<PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')} containerClass="page-title--dhcp">
{toggleDhcpButton}
@ -256,6 +267,7 @@ const Dhcp = () => {
isModalOpen={isModalOpen}
processingAdding={processingAdding}
processingDeleting={processingDeleting}
cidr={cidr}
/>
</div>
<div className="col-12">
@ -263,6 +275,7 @@ const Dhcp = () => {
type="button"
className="btn btn-success btn-standard mt-3"
onClick={toggleModal}
disabled={disabledLeasesButton}
>
<Trans>dhcp_add_static_lease</Trans>
</button>

3
client/src/helpers/constants.js
View File

@ -9,7 +9,8 @@ export const R_IPV6 = /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1
export const R_CIDR = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/([0-9]|[1-2][0-9]|3[0-2]))$/;
export const R_MAC = /^((([a-fA-F0-9][a-fA-F0-9]+[-]){5}|([a-fA-F0-9][a-fA-F0-9]+[:]){5})([a-fA-F0-9][a-fA-F0-9])$)|(^([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]+[.]){2}([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]))$/;
export const R_MAC = /^((([a-fA-F0-9][a-fA-F0-9]+[-:]){5})([a-fA-F0-9]{2})$)|^((([a-fA-F0-9][a-fA-F0-9]+[-:]){7})([a-fA-F0-9]{2})$)|^([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]+[.]){2}([a-fA-F0-9]{4})$|^([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]+[.]){3}([a-fA-F0-9]{4})$/;
export const R_MAC_WITHOUT_COLON = /^([a-fA-F0-9]{2}){5}([a-fA-F0-9]{2})$|^([a-fA-F0-9]{2}){7}([a-fA-F0-9]{2})$/;
export const R_CIDR_IPV6 = /^s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]d|1dd|[1-9]?d)(.(25[0-5]|2[0-4]d|1dd|[1-9]?d)){3}))|:)))(%.+)?s*(\/(12[0-8]|1[0-1][0-9]|[1-9][0-9]|[0-9]))$/;

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

@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Trans } from 'react-i18next';
import { createOnBlurHandler } from './helpers';
import { R_UNIX_ABSOLUTE_PATH, R_WIN_ABSOLUTE_PATH } from './constants';
import { R_MAC_WITHOUT_COLON, R_UNIX_ABSOLUTE_PATH, R_WIN_ABSOLUTE_PATH } from './constants';
export const renderField = (props, elementType) => {
const {
@ -260,7 +260,15 @@ renderServiceField.propTypes = {
}).isRequired,
};
export const getLastIpv4Octet = (ipv4) => parseInt(ipv4.slice(ipv4.lastIndexOf('.') + 1), 10);
/**
*
* @param {string} ip
* @returns {*}
*/
export const ip4ToInt = (ip) => {
const intIp = ip.split('.').reduce((int, oct) => (int * 256) + parseInt(oct, 10), 0);
return Number.isNaN(intIp) ? 0 : intIp;
};
/**
* @param value {string}
@ -274,3 +282,15 @@ export const toNumber = (value) => value && parseInt(value, 10);
*/
export const isValidAbsolutePath = (value) => R_WIN_ABSOLUTE_PATH.test(value)
|| R_UNIX_ABSOLUTE_PATH.test(value);
/**
* @param value {string}
* @returns {*|string}
*/
export const normalizeMac = (value) => {
if (value && R_MAC_WITHOUT_COLON.test(value)) {
return value.match(/.{2}/g).join(':');
}
return value;
};

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

@ -551,6 +551,15 @@ export const isIpInCidr = (ip, cidr) => {
}
};
/**
*
* @param {string} subnetMask
* @returns {*}
*/
export const subnetMaskToBitMask = (subnetMask) => subnetMask
.split('.')
.reduce((acc, cur) => acc - Math.log2(256 - Number(cur)), 32);
/**
*
* @param ipOrCidr

21
client/src/helpers/validators.js
View File

@ -1,3 +1,4 @@
import i18next from 'i18next';
import {
MAX_PORT,
R_CIDR,
@ -12,7 +13,8 @@ import {
R_CLIENT_ID,
R_DOMAIN,
} from './constants';
import { getLastIpv4Octet, isValidAbsolutePath } from './form';
import { ip4ToInt, isValidAbsolutePath } from './form';
import { isIpInCidr } from './helpers';
// Validation functions
// https://redux-form.com/8.3.0/examples/fieldlevelvalidation/
@ -30,8 +32,9 @@ export const validateRequiredValue = (value) => {
};
/**
* @param value {string}
* @returns {undefined|string}
* @param _
* @param allValues
*/
export const validateIpv4RangeEnd = (_, allValues) => {
if (!allValues || !allValues.v4 || !allValues.v4.range_end || !allValues.v4.range_start) {
@ -40,7 +43,7 @@ export const validateIpv4RangeEnd = (_, allValues) => {
const { range_end, range_start } = allValues.v4;
if (getLastIpv4Octet(range_end) <= getLastIpv4Octet(range_start)) {
if (ip4ToInt(range_end) <= ip4ToInt(range_start)) {
return 'range_end_error';
}
@ -224,3 +227,15 @@ export const validatePath = (value) => {
}
return undefined;
};
/**
* @param cidr {string}
* @returns {Function}
*/
export const validateIpv4InCidr = (valueIp, allValues) => {
if (!isIpInCidr(valueIp, allValues.cidr)) {
return i18next.t('form_error_subnet', { ip: valueIp, cidr: allValues.cidr });
}
return undefined;
};