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