- client: Match client IP strictly: Merge pull request #620 in DNS/adguard-home from fix/1687 to master

Close #1687

Squashed commit of the following:

commit 5287da0b98d154d4243abdb4b9021006499c225f
Merge: c6b50c70 83b9b701
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri May 29 12:47:23 2020 +0300

    Merge branch 'master' into fix/1687

commit c6b50c70a5089fcadfd2606b07b3b84769db2760
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri May 29 12:42:12 2020 +0300

    minor

commit dab9fa9ee0502838b4e10aef93d037c2fb5bf41b
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu May 28 16:56:08 2020 +0300

    Add support for exact matching of long and short ipv6 notations, add tests

commit e72e86cda81af2c5e54f93abb2890438fd3648b0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu May 28 13:57:22 2020 +0300

    Update helper, write tests

commit 92f4c34224ab7927b02edde829f2d9653a00a854
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 27 18:35:05 2020 +0300

    Make variable names more expressive

commit 3d38f21281237e9cccbba26afc1ab641947c5dc0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 27 17:09:08 2020 +0300

    Add ipv6 cidr support

commit 7db0a2fb18ccd96d8d1def73f12138e4f4e37f71
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 26 12:48:57 2020 +0300

    Minor

commit 65e87f3899aab3417cac57bab0a8fa371cafd4ec
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue May 26 12:46:30 2020 +0300

    Add breaks between helpers

commit 3f38bdfe7bc17e019bf048c79c9e8f1336b6f3d3
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu May 21 20:17:27 2020 +0300

    - client: Match client IP strictly

client/src/components/Dashboard/Clients.js

@@ -6,14 +6,15 @@ import { Trans, withTranslation } from 'react-i18next';
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 
-import { getPercent } from '../../helpers/helpers';
-import { STATUS_COLORS } from '../../helpers/constants';
+import { getPercent, getIpMatchListStatus } from '../../helpers/helpers';
+import { IP_MATCH_LIST_STATUS, STATUS_COLORS } from '../../helpers/constants';
 import { formatClientCell } from '../../helpers/formatClientCell';
 
 const getClientsPercentColor = (percent) => {
     if (percent > 50) {
         return STATUS_COLORS.green;
-    } if (percent > 10) {
+    }
+    if (percent > 10) {
         return STATUS_COLORS.yellow;
     }
     return STATUS_COLORS.red;
@@ -27,20 +28,18 @@ const countCell = (dnsQueries) => function cell(row) {
     return <Cell value={value} percent={percent} color={percentColor} />;
 };
 
-const renderBlockingButton = (blocked, ip, handleClick, processing) => {
-    let buttonProps = {
-        className: 'btn-outline-danger',
-        text: 'block_btn',
-        type: 'block',
-    };
-
-    if (blocked) {
-        buttonProps = {
+const renderBlockingButton = (ipMatchListStatus, ip, handleClick, processing) => {
+    const buttonProps = ipMatchListStatus === IP_MATCH_LIST_STATUS.NOT_FOUND
+        ? {
+            className: 'btn-outline-danger',
+            text: 'block_btn',
+            type: 'block',
+        }
+        : {
             className: 'btn-outline-secondary',
             text: 'unblock_btn',
             type: 'unblock',
         };
-    }
 
     return (
         <div className="table__action">
@@ -56,19 +55,18 @@ const renderBlockingButton = (blocked, ip, handleClick, processing) => {
     );
 };
 
-const isBlockedClient = (clients, ip) => !!(clients && clients.includes(ip));
-
 const clientCell = (t, toggleClientStatus, processing, disallowedClients) => function cell(row) {
     const { value } = row;
-    const blocked = isBlockedClient(disallowedClients, value);
+    const ipMatchListStatus = getIpMatchListStatus(value, disallowedClients);
 
     return (
-            <Fragment>
-                <div className="logs__row logs__row--overflow logs__row--column">
-                    {formatClientCell(row, t)}
-                </div>
-                {renderBlockingButton(blocked, value, toggleClientStatus, processing)}
-            </Fragment>
+        <Fragment>
+            <div className="logs__row logs__row--overflow logs__row--column">
+                {formatClientCell(row, t)}
+            </div>
+            {ipMatchListStatus !== IP_MATCH_LIST_STATUS.CIDR
+            && renderBlockingButton(ipMatchListStatus, value, toggleClientStatus, processing)}
+        </Fragment>
     );
 };
 
@@ -124,15 +122,8 @@ const Clients = ({
 
                 const { ip } = rowInfo.original;
 
-                if (isBlockedClient(disallowedClients, ip)) {
-                    return {
-                        className: 'red',
-                    };
-                }
-
-                return {
-                    className: '',
-                };
+                return getIpMatchListStatus(ip, disallowedClients)
+                === IP_MATCH_LIST_STATUS.NOT_FOUND ? {} : { className: 'red' };
             }}
         />
     </Card>

client/src/components/Settings/Dns/Access/Form.js

@@ -4,6 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import { renderTextareaField } from '../../../../helpers/form';
+import { normalizeMultiline } from '../../../../helpers/helpers';
 
 const fields = [
     {
@@ -44,6 +45,7 @@ const Form = (props) => {
             type="text"
             className="form-control form-control--textarea font-monospace"
             disabled={disabled}
+            normalizeOnBlur={normalizeMultiline}
         />
     </div>;