+ client: Move the client access check to the server-side

Squashed commit of the following:

commit 1aab0f62e94ce665a1b996552fac41dc4e769b4d
Merge: cdf5eb6e c1f5fdae
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 24 15:36:05 2020 +0300

    Merge branch '1920-client-find' into feature/1925

commit cdf5eb6ea67a665d21a3155d8cf89bba9a5a9948
Merge: b6c20b1c 10f67bd3
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 23 20:28:51 2020 +0300

    Merge branch 'master' into feature/1925

commit b6c20b1c7359a0e5902405b0551712f936848a80
Merge: 97d388ef 96512433
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 15 10:44:25 2020 +0300

    Merge branch 'master' into feature/1925

commit 97d388ef6571d590f21da00f86d889e881ca0c3d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 15 10:30:50 2020 +0300

    Extract buttons

commit ca45fde11fc2b2812ff2b84dbd67aff0b5341be1
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 10 12:46:09 2020 +0300

    Handle errors in updateLogs

commit f15e03c2e5a7115db984f70f72b0ddd870ece73d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Sep 10 12:39:34 2020 +0300

    Update mobile block status on click

commit 033b28db3b324f6d529ac1a0ef657886cdbe02bd
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 9 20:53:42 2020 +0300

    Fix mobile block buttons, auto open page on web serve start

commit 2730937b23309167a066b9154728ac53ffe81a49
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 9 13:58:37 2020 +0300

    Disable allow this client button when isNotInAllowedList is true

commit 818cf869d63654c184762ad2701c4429a3e3011e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Sep 9 13:06:01 2020 +0300

    Update client block state on option click

commit a072b8983757f419645c0207ea78e6e867c440cb
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 8 20:17:16 2020 +0300

    Adapt to api changes

commit 28ab2bd8b3f14f60bc822b5a69fa1801db67d816
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 8 14:12:20 2020 +0300

    Change query log block confirm messages

commit 9b0b6f6f9b1ec168fa71dbedd036152da59006e3
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Sep 8 12:00:46 2020 +0300

    Refactor inner work with disallowed

commit 05f76154b8f489738d032fdaa835edb371ce70c7
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 7 16:11:37 2020 +0300

    + client: Move the client access check to the server-side
This commit is contained in:
Artem Baskal
2020-09-24 15:48:37 +03:00
parent c1f5fdaee4
commit c72cd58f69
13 changed files with 175 additions and 380 deletions

View File

@@ -8,10 +8,11 @@ import classNames from 'classnames';
import Card from '../ui/Card';
import Cell from '../ui/Cell';
import { getPercent, getIpMatchListStatus, sortIp } from '../../helpers/helpers';
import { BLOCK_ACTIONS, IP_MATCH_LIST_STATUS, STATUS_COLORS } from '../../helpers/constants';
import { getPercent, sortIp } from '../../helpers/helpers';
import { BLOCK_ACTIONS, STATUS_COLORS } from '../../helpers/constants';
import { toggleClientBlock } from '../../actions/access';
import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
import { getStats } from '../../actions/stats';
const getClientsPercentColor = (percent) => {
if (percent > 50) {
@@ -33,59 +34,51 @@ const CountCell = (row) => {
return <Cell value={value} percent={percent} color={percentColor} search={ip} />;
};
const renderBlockingButton = (ip) => {
const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
const dispatch = useDispatch();
const { t } = useTranslation();
const processingSet = useSelector((state) => state.access.processingSet);
const disallowed_clients = useSelector(
(state) => state.access.disallowed_clients, shallowEqual,
);
const ipMatchListStatus = getIpMatchListStatus(ip, disallowed_clients);
if (ipMatchListStatus === IP_MATCH_LIST_STATUS.CIDR) {
return null;
}
const isNotFound = ipMatchListStatus === IP_MATCH_LIST_STATUS.NOT_FOUND;
const type = isNotFound ? BLOCK_ACTIONS.BLOCK : BLOCK_ACTIONS.UNBLOCK;
const text = type;
const buttonClass = classNames('button-action button-action--main', {
'button-action--unblock': !isNotFound,
'button-action--unblock': disallowed,
});
const toggleClientStatus = (type, ip) => {
const confirmMessage = type === BLOCK_ACTIONS.BLOCK
? `${t('adg_will_drop_dns_queries')} ${t('client_confirm_block', { ip })}`
: t('client_confirm_unblock', { ip });
const toggleClientStatus = async (ip, disallowed, disallowed_rule) => {
const confirmMessage = disallowed
? t('client_confirm_unblock', { ip: disallowed_rule })
: `${t('adg_will_drop_dns_queries')} ${t('client_confirm_block', { ip })}`;
if (window.confirm(confirmMessage)) {
dispatch(toggleClientBlock(type, ip));
await dispatch(toggleClientBlock(ip, disallowed, disallowed_rule));
await dispatch(getStats());
}
};
const onClick = () => toggleClientStatus(type, ip);
const onClick = () => toggleClientStatus(ip, disallowed, disallowed_rule);
const text = disallowed ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
const isNotInAllowedList = disallowed && disallowed_rule === '';
return <div className="table__action pl-4">
<button
type="button"
className={buttonClass}
onClick={onClick}
disabled={processingSet}
>
<Trans>{text}</Trans>
</button>
</div>;
<button
type="button"
className={buttonClass}
onClick={isNotInAllowedList ? undefined : onClick}
disabled={isNotInAllowedList || processingSet}
title={t(isNotInAllowedList ? 'client_not_in_allowed_clients' : text)}
>
<Trans>{text}</Trans>
</button>
</div>;
};
const ClientCell = (row) => {
const { value, original: { info } } = row;
const { value, original: { info, info: { disallowed, disallowed_rule } } } = row;
return <>
<div className="logs__row logs__row--overflow logs__row--column d-flex align-items-center">
{renderFormattedClientCell(value, info, true)}
{renderBlockingButton(value)}
{renderBlockingButton(value, disallowed, disallowed_rule)}
</div>
</>;
};
@@ -96,7 +89,6 @@ const Clients = ({
}) => {
const { t } = useTranslation();
const topClients = useSelector((state) => state.stats.topClients, shallowEqual);
const disallowedClients = useSelector((state) => state.access.disallowed_clients, shallowEqual);
return <Card
title={t('top_clients')}
@@ -138,9 +130,9 @@ const Clients = ({
return {};
}
const { ip } = rowInfo.original;
const { info: { disallowed } } = rowInfo.original;
return getIpMatchListStatus(ip, disallowedClients) === IP_MATCH_LIST_STATUS.NOT_FOUND ? {} : { className: 'logs__row--red' };
return disallowed ? { className: 'logs__row--red' } : {};
}}
/>
</Card>;