Pull request: 2842 DHCP validation ui

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

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</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",

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);
+    });
+});

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]}
                     />
                 </div>
@@ -44,8 +52,8 @@ const Form = ({
                         component={renderInputField}
                         type="text"
                         className="form-control"
-                        placeholder={t('form_enter_ip')}
+                        placeholder={t('form_enter_subnet_ip', { cidr })}
-                        validate={[validateRequiredValue, validateIpv4]}
+                        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);

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 = ({
                     </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);

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 = {

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 <>
         <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>

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]))$/;
 

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;
+};

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

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;
+};