mirror of
https://github.com/AdguardTeam/AdGuardHome.git
synced 2024-09-11 10:45:42 +03:00
Pull request: 2842 DHCP validation ui
Closes #2842. Squashed commit of the following: commit 8580db9d3fd6bdd906bf53ca3696fc497f7573b8 Merge: a5d7187bab85ad5a
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: 46adf2c048d702f7
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: 48b50ce965553a29
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:
parent
ab85ad5a55
commit
327e76cd65
@ -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",
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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 = {
|
||||
|
@ -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>
|
||||
|
@ -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]))$/;
|
||||
|
||||
|
@ -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;
|
||||
};
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user