diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index 0656de71..7d658ba4 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -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 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", diff --git a/client/src/__tests__/helpers.test.js b/client/src/__tests__/helpers.test.js index a5ed121b..45b5fa90 100644 --- a/client/src/__tests__/helpers.test.js +++ b/client/src/__tests__/helpers.test.js @@ -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); + }); +}); diff --git a/client/src/components/Settings/Dhcp/StaticLeases/Form.js b/client/src/components/Settings/Dhcp/StaticLeases/Form.js index 57db976d..e857144d 100644 --- a/client/src/components/Settings/Dhcp/StaticLeases/Form.js +++ b/client/src/components/Settings/Dhcp/StaticLeases/Form.js @@ -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]} /> @@ -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]} />
@@ -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); diff --git a/client/src/components/Settings/Dhcp/StaticLeases/Modal.js b/client/src/components/Settings/Dhcp/StaticLeases/Modal.js index 1d5f4e8a..b65c298e 100644 --- a/client/src/components/Settings/Dhcp/StaticLeases/Modal.js +++ b/client/src/components/Settings/Dhcp/StaticLeases/Modal.js @@ -10,6 +10,7 @@ const Modal = ({ isModalOpen, handleSubmit, processingAdding, + cidr, }) => { const dispatch = useDispatch(); @@ -32,8 +33,15 @@ const Modal = ({
@@ -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); diff --git a/client/src/components/Settings/Dhcp/StaticLeases/index.js b/client/src/components/Settings/Dhcp/StaticLeases/index.js index 8df4c324..6e12f30e 100644 --- a/client/src/components/Settings/Dhcp/StaticLeases/index.js +++ b/client/src/components/Settings/Dhcp/StaticLeases/index.js @@ -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 = { diff --git a/client/src/components/Settings/Dhcp/index.js b/client/src/components/Settings/Dhcp/index.js index 167afc7f..8af73188 100644 --- a/client/src/components/Settings/Dhcp/index.js +++ b/client/src/components/Settings/Dhcp/index.js @@ -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 <> {toggleDhcpButton} @@ -256,6 +267,7 @@ const Dhcp = () => { isModalOpen={isModalOpen} processingAdding={processingAdding} processingDeleting={processingDeleting} + cidr={cidr} />
@@ -263,6 +275,7 @@ const Dhcp = () => { type="button" className="btn btn-success btn-standard mt-3" onClick={toggleModal} + disabled={disabledLeasesButton} > dhcp_add_static_lease diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index 83e84b4b..4a81d580 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -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]))$/; diff --git a/client/src/helpers/form.js b/client/src/helpers/form.js index 349ca2c9..e1e6aaa0 100644 --- a/client/src/helpers/form.js +++ b/client/src/helpers/form.js @@ -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; +}; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 8be106ab..f7e20fcc 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -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 diff --git a/client/src/helpers/validators.js b/client/src/helpers/validators.js index c26bbb8e..25a7168d 100644 --- a/client/src/helpers/validators.js +++ b/client/src/helpers/validators.js @@ -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; +};