Pull request: all: client id support

Merge in DNS/adguard-home from 1383-client-id to master Updates #1383. Squashed commit of the following: commit ebe2678bfa9bf651a2cb1e64499b38edcf19a7ad Author: Ildar Kamalov <ik@adguard.com> Date: Wed Jan 27 17:51:59 2021 +0300 - client: check if IP is valid commit 0c330585a170ea149ee75e43dfa65211e057299c Author: Ildar Kamalov <ik@adguard.com> Date: Wed Jan 27 17:07:50 2021 +0300 - client: find clients by client_id commit 71c9593ee35d996846f061e114b7867c3aa3c978 Merge: 9104f161 3e9edd9e Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Wed Jan 27 16:09:45 2021 +0300 Merge branch 'master' into 1383-client-id commit 9104f1615d2d462606c52017df25a422df872cea Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Wed Jan 27 13:28:50 2021 +0300 dnsforward: imp tests commit ed47f26e611ade625a2cc2c2f71a291b796bbf8f Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Wed Jan 27 12:39:52 2021 +0300 dnsforward: fix address commit 98b222ba69a5d265f620c180c960d01c84a1fb3b Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Tue Jan 26 19:50:31 2021 +0300 home: imp code commit 4f3966548a2d8437d0b68207dd108dd1a6cb7d20 Merge: 199fdc05 c215b820 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Tue Jan 26 19:45:13 2021 +0300 Merge branch 'master' into 1383-client-id commit 199fdc056f8a8be5500584f3aaee32865188aedc Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Tue Jan 26 19:20:37 2021 +0300 all: imp tests, logging, etc commit 35ff14f4d534251aecb2ea60baba225f3eed8a3e Author: Ildar Kamalov <ik@adguard.com> Date: Tue Jan 26 18:55:19 2021 +0300 + client: remove block button from clients with client_id commit 32991a0b4c56583a02fb5e00bba95d96000bce20 Author: Ildar Kamalov <ik@adguard.com> Date: Tue Jan 26 18:54:25 2021 +0300 + client: add requests count for client_id commit 2d68df4d2eac4a296d7469923e601dad4575c1a1 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Tue Jan 26 15:49:50 2021 +0300 stats: handle client ids commit 4e14ab3590328f93a8cd6e9cbe1665baf74f220b Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Tue Jan 26 13:45:25 2021 +0300 openapi: fix example commit ca9cf3f744fe197cace2c28ddc5bc68f71dad1f3 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Tue Jan 26 13:37:10 2021 +0300 openapi: improve clients find api docs commit f79876e550c424558b704bc316a4cd04f25db011 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Tue Jan 26 13:18:52 2021 +0300 home: accept ids in clients find commit 5b72595122aa0bd64debadfd753ed8a0e0840629 Merge: 607e241f abf8f65f Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Mon Jan 25 18:34:56 2021 +0300 Merge branch 'master' into 1383-client-id commit 607e241f1c339dd6397218f70b8301e3de6a1ee0 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Mon Jan 25 18:30:39 2021 +0300 dnsforward: fix quic commit f046352fef93e46234c2bbe8ae316d21034260e5 Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Mon Jan 25 16:53:09 2021 +0300 all: remove wildcard requirement commit 3b679489bae82c54177372be453fe184d8f0bab6 Author: Andrey Meshkov <am@adguard.com> Date: Mon Jan 25 16:02:28 2021 +0300 workDir now supports symlinks commit 0647ab4f113de2223f6949df001f42ecab05c995 Author: Ildar Kamalov <ik@adguard.com> Date: Mon Jan 25 14:59:46 2021 +0300 - client: remove wildcard from domain validation commit b1aec04a4ecadc9d65648ed6d284188fecce01c3 Author: Ildar Kamalov <ik@adguard.com> Date: Mon Jan 25 14:55:39 2021 +0300 + client: add form to download mobileconfig ... and 12 more commits
2021-01-27 18:32:13 +03:00
parent 3e9edd9eac
commit fc9ddcf941
56 changed files with 1735 additions and 623 deletions
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -32,6 +32,7 @@
    "form_error_ip_format": "Invalid IP format",
    "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_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",
@@ -250,8 +251,12 @@
    "dns_over_https": "DNS-over-HTTPS",
    "dns_over_tls": "DNS-over-TLS",
    "dns_over_quic": "DNS-over-QUIC",
+    "client_id": "Client ID",
+    "client_id_placeholder": "Enter client ID",
+    "client_id_desc": "Different clients can be identified by a special client ID. <a>Here</a> you can learn more about how to identify clients.",
    "download_mobileconfig_doh": "Download .mobileconfig for DNS-over-HTTPS",
    "download_mobileconfig_dot": "Download .mobileconfig for DNS-over-TLS",
+    "download_mobileconfig": "Download configuration file",
    "plain_dns": "Plain DNS",
    "form_enter_rate_limit": "Enter rate limit",
    "rate_limit": "Rate limit",
@@ -331,7 +336,7 @@
    "encryption_config_saved": "Encryption config saved",
    "encryption_server": "Server name",
    "encryption_server_enter": "Enter your domain name",
-    "encryption_server_desc": "In order to use HTTPS, you need to enter the server name that matches your SSL certificate.",
+    "encryption_server_desc": "In order to use HTTPS, you need to enter the server name that matches your SSL certificate or wildcard certificate. If the field is not set, it will accept TLS connections for any domain.",
    "encryption_redirect": "Redirect to HTTPS automatically",
    "encryption_redirect_desc": "If checked, AdGuard Home will automatically redirect you from HTTP to HTTPS addresses.",
    "encryption_https": "HTTPS port",
@@ -387,7 +392,7 @@
    "client_edit": "Edit Client",
    "client_identifier": "Identifier",
    "ip_address": "IP address",
-    "client_identifier_desc": "Clients can be identified by the IP address, CIDR, MAC address. Please note that using MAC as identifier is possible only if AdGuard Home is also a <0>DHCP server</0>",
+    "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_mac": "Enter MAC",
    "form_enter_id": "Enter identifier",
@@ -431,6 +436,7 @@
    "setup_dns_privacy_other_3": "<0>dnscrypt-proxy</0> supports <1>DNS-over-HTTPS</1>.",
    "setup_dns_privacy_other_4": "<0>Mozilla Firefox</0> supports <1>DNS-over-HTTPS</1>.",
    "setup_dns_privacy_other_5": "You will find more implementations <0>here</0> and <1>here</1>.",
+    "setup_dns_privacy_ioc_mac": "iOS and macOS configuration",
    "setup_dns_notice": "In order to use <1>DNS-over-HTTPS</1> or <1>DNS-over-TLS</1>, you need to <0>configure Encryption</0> in AdGuard Home settings.",
    "rewrite_added": "DNS rewrite for \"{{key}}\" successfully added",
    "rewrite_deleted": "DNS rewrite for \"{{key}}\" successfully deleted",
--- a/client/src/actions/queryLogs.js
+++ b/client/src/actions/queryLogs.js
@@ -8,7 +8,7 @@ import {
 import { addErrorToast, addSuccessToast } from './toasts';

 const enrichWithClientInfo = async (logs) => {
-    const clientsParams = getParamsForClientsSearch(logs, 'client');
+    const clientsParams = getParamsForClientsSearch(logs, 'client', 'client_id');

    if (Object.keys(clientsParams).length > 0) {
        const clients = await apiClient.findClients(clientsParams);
--- a/client/src/components/App/index.css
+++ b/client/src/components/App/index.css
@@ -81,3 +81,7 @@ body {
 .ReactModal__Body--open {
    overflow: hidden;
 }
+
+a.btn-success.disabled {
+    color: #fff;
+}
--- a/client/src/components/Dashboard/Clients.js
+++ b/client/src/components/Dashboard/Clients.js
@@ -9,7 +9,7 @@ import Card from '../ui/Card';
 import Cell from '../ui/Cell';

 import { getPercent, sortIp } from '../../helpers/helpers';
-import { BLOCK_ACTIONS, STATUS_COLORS } from '../../helpers/constants';
+import { BLOCK_ACTIONS, R_CLIENT_ID, STATUS_COLORS } from '../../helpers/constants';
 import { toggleClientBlock } from '../../actions/access';
 import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
 import { getStats } from '../../actions/stats';
@@ -35,6 +35,10 @@ const CountCell = (row) => {
 };

 const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
+    if (R_CLIENT_ID.test(ip)) {
+        return null;
+    }
+
    const dispatch = useDispatch();
    const { t } = useTranslation();
    const processingSet = useSelector((state) => state.access.processingSet);
@@ -59,17 +63,19 @@ const renderBlockingButton = (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
+    return (
+        <div className="table__action pl-4">
+            <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>;
+            >
+                <Trans>{text}</Trans>
+            </button>
+        </div>
+    );
 };

 const ClientCell = (row) => {
@@ -90,13 +96,14 @@ const Clients = ({
    const { t } = useTranslation();
    const topClients = useSelector((state) => state.stats.topClients, shallowEqual);

-    return <Card
+    return (
+        <Card
            title={t('top_clients')}
            subtitle={subtitle}
            bodyType="card-table"
            refresh={refreshButton}
-    >
-        <ReactTable
+        >
+            <ReactTable
                data={topClients.map(({
                    name: ip, count, info, blocked,
                }) => ({
@@ -107,7 +114,7 @@ const Clients = ({
                }))}
                columns={[
                    {
-                        Header: 'IP',
+                        Header: <Trans>client_table_header</Trans>,
                        accessor: 'ip',
                        sortMethod: sortIp,
                        Cell: ClientCell,
@@ -134,8 +141,9 @@ const Clients = ({

                    return disallowed ? { className: 'logs__row--red' } : {};
                }}
-        />
-    </Card>;
+            />
+        </Card>
+    );
 };

 Clients.propTypes = {
--- a/client/src/components/Logs/Cells/ClientCell.js
+++ b/client/src/components/Logs/Cells/ClientCell.js
@@ -16,6 +16,7 @@ import { updateLogs } from '../../../actions/queryLogs';

 const ClientCell = ({
    client,
+    client_id,
    domain,
    info,
    info: {
@@ -33,12 +34,14 @@ const ClientCell = ({
    const autoClient = autoClients.find((autoClient) => autoClient.name === client);
    const source = autoClient?.source;
    const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
+    const clientName = name || client_id;
+    const clientInfo = { ...info, name: clientName };

    const id = nanoid();

    const data = {
        address: client,
-        name,
+        name: clientName,
        country: whois_info?.country,
        city: whois_info?.city,
        network: whois_info?.orgname,
@@ -99,13 +102,20 @@ const ClientCell = ({
            if (options.length === 0) {
                return null;
            }
-            return <>{options.map(({ name, onClick, disabled }) => <button
-                    key={name}
-                    className="button-action--arrow-option px-4 py-2"
-                    onClick={onClick}
-                    disabled={disabled}
-            >{t(name)}
-            </button>)}</>;
+            return (
+                <>
+                    {options.map(({ name, onClick, disabled }) => (
+                        <button
+                            key={name}
+                            className="button-action--arrow-option px-4 py-2"
+                            onClick={onClick}
+                            disabled={disabled}
+                        >
+                            {t(name)}
+                        </button>
+                    ))}
+                </>
+            );
        };

        const content = getOptions(BUTTON_OPTIONS);
@@ -125,45 +135,70 @@ const ClientCell = ({
            'button-action__container--detailed': isDetailed,
        });

-        return <div className={containerClass}>
-            <button type="button"
+        return (
+            <div className={containerClass}>
+                <button
+                    type="button"
                    className={buttonClass}
                    onClick={onClick}
                    disabled={processingRules}
-            >
-                {t(buttonType)}
-            </button>
-            {content && <button className={buttonArrowClass} disabled={processingRules}>
-                <IconTooltip
-                        className='h-100'
-                        tooltipClass='button-action--arrow-option-container'
-                        xlinkHref='chevron-down'
-                        triggerClass='button-action--icon'
-                        content={content} placement="bottom-end" trigger="click"
-                        onVisibilityChange={setOptionsOpened}
-                />
-            </button>}
-        </div>;
+                >
+                    {t(buttonType)}
+                </button>
+                {content && (
+                    <button className={buttonArrowClass} disabled={processingRules}>
+                        <IconTooltip
+                            className="h-100"
+                            tooltipClass="button-action--arrow-option-container"
+                            xlinkHref="chevron-down"
+                            triggerClass="button-action--icon"
+                            content={content}
+                            placement="bottom-end"
+                            trigger="click"
+                            onVisibilityChange={setOptionsOpened}
+                        />
+                    </button>
+                )}
+            </div>
+        );
    };

-    return <div className="o-hidden h-100 logs__cell logs__cell--client" role="gridcell">
-        <IconTooltip className={hintClass} columnClass='grid grid--limited' tooltipClass='px-5 pb-5 pt-4 mw-75'
-                     xlinkHref='question' contentItemClass="contentItemClass" title="client_details"
-                     content={processedData} placement="bottom" />
-        <div className={nameClass}>
-            <div data-tip={true} data-for={id}>
-                {renderFormattedClientCell(client, info, isDetailed, true)}
+    return (
+        <div
+            className="o-hidden h-100 logs__cell logs__cell--client"
+            role="gridcell"
+        >
+            <IconTooltip
+                className={hintClass}
+                columnClass="grid grid--limited"
+                tooltipClass="px-5 pb-5 pt-4"
+                xlinkHref="question"
+                contentItemClass="text-truncate key-colon o-hidden"
+                title="client_details"
+                content={processedData}
+                placement="bottom"
+            />
+            <div className={nameClass}>
+                <div data-tip={true} data-for={id}>
+                    {renderFormattedClientCell(client, clientInfo, isDetailed, true)}
+                </div>
+                {isDetailed && clientName && !whoisAvailable && (
+                    <div
+                        className="detailed-info d-none d-sm-block logs__text"
+                        title={clientName}
+                    >
+                        {clientName}
+                    </div>
+                )}
            </div>
-            {isDetailed && name && !whoisAvailable
-            && <div className="detailed-info d-none d-sm-block logs__text"
-                    title={name}>{name}</div>}
+            {renderBlockingButton(isFiltered, domain)}
        </div>
-        {renderBlockingButton(isFiltered, domain)}
-    </div>;
+    );
 };

 ClientCell.propTypes = {
    client: propTypes.string.isRequired,
+    client_id: propTypes.string,
    domain: propTypes.string.isRequired,
    info: propTypes.oneOfType([
        propTypes.string,
--- a/client/src/components/Logs/Cells/index.js
+++ b/client/src/components/Logs/Cells/index.js
@@ -70,6 +70,7 @@ const Row = memo(({
            upstream,
            type,
            client_proto,
+            client_id,
            rules,
            originalResponse,
            status,
@@ -176,7 +177,7 @@ const Row = memo(({
            response_code: status,
            client_details: 'title',
            ip_address: client,
-            name: info?.name,
+            name: info?.name || client_id,
            country,
            city,
            network,
@@ -233,6 +234,7 @@ Row.propTypes = {
        upstream: propTypes.string.isRequired,
        type: propTypes.string.isRequired,
        client_proto: propTypes.string.isRequired,
+        client_id: propTypes.string,
        rules: propTypes.arrayOf(propTypes.shape({
            text: propTypes.string.isRequired,
            filter_list_id: propTypes.number.isRequired,
--- a/client/src/components/Settings/Clients/Form.js
+++ b/client/src/components/Settings/Clients/Form.js
@@ -282,7 +282,7 @@ let Form = (props) => {
                        <div className="form__desc mt-0">
                            <Trans
                                components={[
-                                    <a href="#dhcp" key="0">
+                                    <a href="https://github.com/AdguardTeam/AdGuardHome/wiki/Clients#idclient" key="0" target="_blank" rel="noopener noreferrer">
                                        link
                                    </a>,
                                ]}
--- a/client/src/components/Settings/Encryption/CertificateStatus.js
+++ b/client/src/components/Settings/Encryption/CertificateStatus.js
@@ -50,7 +50,7 @@ const CertificateStatus = ({
                    {dnsNames && (
                        <li>
                            <Trans>encryption_hostnames</Trans>:&nbsp;
-                            {dnsNames}
+                            {dnsNames.join(', ')}
                        </li>
                    )}
                </Fragment>
@@ -65,7 +65,7 @@ CertificateStatus.propTypes = {
    subject: PropTypes.string,
    issuer: PropTypes.string,
    notAfter: PropTypes.string,
-    dnsNames: PropTypes.string,
+    dnsNames: PropTypes.arrayOf(PropTypes.string),
 };

 export default withTranslation()(CertificateStatus);
--- a/client/src/components/Settings/Encryption/Form.js
+++ b/client/src/components/Settings/Encryption/Form.js
@@ -12,7 +12,7 @@ import {
    toNumber,
 } from '../../../helpers/form';
 import {
-    validateIsSafePort, validatePort, validatePortQuic, validatePortTLS,
+    validateServerName, validateIsSafePort, validatePort, validatePortQuic, validatePortTLS,
 } from '../../../helpers/validators';
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
@@ -127,6 +127,7 @@ let Form = (props) => {
                            placeholder={t('encryption_server_enter')}
                            onChange={handleChange}
                            disabled={!isEnabled}
+                            validate={validateServerName}
                        />
                        <div className="form__desc">
                            <Trans>encryption_server_desc</Trans>
@@ -413,7 +414,7 @@ Form.propTypes = {
    valid_key: PropTypes.bool,
    valid_cert: PropTypes.bool,
    valid_pair: PropTypes.bool,
-    dns_names: PropTypes.string,
+    dns_names: PropTypes.arrayOf(PropTypes.string),
    key_type: PropTypes.string,
    issuer: PropTypes.string,
    subject: PropTypes.string,
--- a/client/src/components/ui/Guide/Guide.js
+++ b/client/src/components/ui/Guide/Guide.js
@@ -3,27 +3,12 @@ import PropTypes from 'prop-types';
 import { Trans, useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import { useSelector } from 'react-redux';
-import Tabs from './Tabs';
-import Icons from './Icons';
-import { getPathWithQueryString } from '../../helpers/helpers';

-const MOBILE_CONFIG_LINKS = {
-    DOT: '/apple/dot.mobileconfig',
-    DOH: '/apple/doh.mobileconfig',
-};
-const renderMobileconfigInfo = ({ label, components, server_name }) => <li key={label}>
-    <Trans components={components}>{label}</Trans>
-    <ul>
-        <li>
-            <a href={getPathWithQueryString(MOBILE_CONFIG_LINKS.DOT, { host: server_name })}
-               download>{i18next.t('download_mobileconfig_dot')}</a>
-        </li>
-        <li>
-            <a href={getPathWithQueryString(MOBILE_CONFIG_LINKS.DOH, { host: server_name })}
-               download>{i18next.t('download_mobileconfig_doh')}</a>
-        </li>
-    </ul>
-</li>;
+import { MOBILE_CONFIG_LINKS } from '../../../helpers/constants';
+
+import Tabs from '../Tabs';
+import Icons from '../Icons';
+import MobileConfigForm from './MobileConfigForm';

 const renderLi = ({ label, components }) => <li key={label}>
    <Trans components={components?.map((props) => {
@@ -41,49 +26,8 @@ const renderLi = ({ label, components }) => <li key={label}>
    </Trans>
 </li>;

-const getDnsPrivacyList = (server_name) => {
-    const iosList = [
-        {
-            label: 'setup_dns_privacy_ios_2',
-            components: [
-                {
-                    key: 0,
-                    href: 'https://adguard.com/adguard-ios/overview.html',
-                },
-                <code key="1">text</code>,
-            ],
-        },
-        {
-            label: 'setup_dns_privacy_ios_1',
-            components: [
-                {
-                    key: 0,
-                    href: 'https://itunes.apple.com/app/id1452162351',
-                },
-                <code key="1">text</code>,
-                {
-                    key: 2,
-                    href: 'https://dnscrypt.info/stamps',
-                },
-
-            ],
-        }];
-    /* Insert second element if can generate .mobileconfig links */
-    if (server_name) {
-        iosList.splice(1, 0, {
-            label: 'setup_dns_privacy_4',
-            components: {
-                highlight: <code />,
-            },
-            renderComponent: ({ label, components }) => renderMobileconfigInfo({
-                label,
-                components,
-                server_name,
-            }),
-        });
-    }
-
-    return [{
+const getDnsPrivacyList = () => [
+    {
        title: 'Android',
        list: [
            {
@@ -113,7 +57,32 @@ const getDnsPrivacyList = (server_name) => {
    },
    {
        title: 'iOS',
-        list: iosList,
+        list: [
+            {
+                label: 'setup_dns_privacy_ios_2',
+                components: [
+                    {
+                        key: 0,
+                        href: 'https://adguard.com/adguard-ios/overview.html',
+                    },
+                    <code key="1">text</code>,
+                ],
+            },
+            {
+                label: 'setup_dns_privacy_ios_1',
+                components: [
+                    {
+                        key: 0,
+                        href: 'https://itunes.apple.com/app/id1452162351',
+                    },
+                    <code key="1">text</code>,
+                    {
+                        key: 2,
+                        href: 'https://dnscrypt.info/stamps',
+                    },
+                ],
+            },
+        ],
    },
    {
        title: 'setup_dns_privacy_other_title',
@@ -166,20 +135,20 @@ const getDnsPrivacyList = (server_name) => {
            },
        ],
    },
-    ];
-};
+];

-const renderDnsPrivacyList = ({ title, list }) => <div className="tab__paragraph" key={title}>
-    <strong><Trans>{title}</Trans></strong>
-    <ul>{list.map(
-        ({
-            label,
-            components,
-            renderComponent = renderLi,
-        }) => renderComponent({ label, components }),
-    )}
-    </ul>
-</div>;
+const renderDnsPrivacyList = ({ title, list }) => (
+    <div className="tab__paragraph" key={title}>
+        <strong>
+            <Trans>{title}</Trans>
+        </strong>
+        <ul>
+            {list.map(({ label, components, renderComponent = renderLi }) => (
+                renderComponent({ label, components })
+            ))}
+        </ul>
+    </div>
+);

 const getTabs = ({
    tlsAddress,
@@ -267,8 +236,8 @@ const getTabs = ({
                        </Trans>
                    </div>
                )}
-                {showDnsPrivacyNotice
-                    ? <div className="tab__paragraph">
+                {showDnsPrivacyNotice ? (
+                    <div className="tab__paragraph">
                        <Trans
                            components={[
                                <a
@@ -285,35 +254,64 @@ const getTabs = ({
                            setup_dns_notice
                        </Trans>
                    </div>
-                    : <>
+                ) : (
+                    <>
                        <div className="tab__paragraph">
                            <Trans components={[<p key="0">text</p>]}>
                                setup_dns_privacy_3
                            </Trans>
                        </div>
-                        {getDnsPrivacyList(server_name).map(renderDnsPrivacyList)}
-                    </>}
+                        {getDnsPrivacyList().map(renderDnsPrivacyList)}
+                        <div>
+                            <strong>
+                                <Trans>
+                                    setup_dns_privacy_ioc_mac
+                                </Trans>
+                            </strong>
+                        </div>
+                        <div className="mb-3">
+                            <Trans components={{ highlight: <code /> }}>
+                                setup_dns_privacy_4
+                            </Trans>
+                        </div>
+                        <MobileConfigForm
+                            initialValues={{
+                                host: server_name,
+                                clientId: '',
+                                protocol: MOBILE_CONFIG_LINKS.DOH,
+                            }}
+                        />
+                    </>
+                )}
            </div>
        </div>;
        },
    },
 });

-const renderContent = ({ title, list, getTitle }) => <div key={title} label={i18next.t(title)}>
-    <div className="tab__title">{i18next.t(title)}</div>
-    <div className="tab__text">
-        {getTitle?.()}
-        {list
-        && <ol>{list.map((item) => <li key={item}>
-            <Trans>{item}</Trans>
-        </li>)}
-        </ol>}
+const renderContent = ({ title, list, getTitle }) => (
+    <div key={title} label={i18next.t(title)}>
+        <div className="tab__title">
+            {i18next.t(title)}
+        </div>
+        <div className="tab__text">
+            {getTitle?.()}
+            {list && (
+                <ol>
+                    {list.map((item) => (
+                        <li key={item}>
+                            <Trans>{item}</Trans>
+                        </li>
+                    ))}
+                </ol>
+            )}
+        </div>
    </div>
-</div>;
+);

 const Guide = ({ dnsAddresses }) => {
    const { t } = useTranslation();
-    const server_name = useSelector((state) => state.encryption.server_name);
+    const server_name = useSelector((state) => state.encryption?.server_name);
    const tlsAddress = dnsAddresses?.filter((item) => item.includes('tls://')) ?? '';
    const httpsAddress = dnsAddresses?.filter((item) => item.includes('https://')) ?? '';
    const showDnsPrivacyNotice = httpsAddress.length < 1 && tlsAddress.length < 1;
@@ -332,9 +330,14 @@ const Guide = ({ dnsAddresses }) => {

    return (
        <div>
+            <Tabs
+                tabs={tabs}
+                activeTabLabel={activeTabLabel}
+                setActiveTabLabel={setActiveTabLabel}
+            >
+                {activeTab}
+            </Tabs>
            <Icons />
-            <Tabs tabs={tabs} activeTabLabel={activeTabLabel}
-                  setActiveTabLabel={setActiveTabLabel}>{activeTab}</Tabs>
        </div>
    );
 };
@@ -364,6 +367,4 @@ renderLi.propTypes = {
    components: PropTypes.string,
 };

-renderMobileconfigInfo.propTypes = renderLi.propTypes;
-
 export default Guide;
--- a/client/src/components/ui/Guide/MobileConfigForm.js
+++ b/client/src/components/ui/Guide/MobileConfigForm.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Trans } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { Field, reduxForm } from 'redux-form';
+import i18next from 'i18next';
+import cn from 'classnames';
+
+import { getPathWithQueryString } from '../../../helpers/helpers';
+import { FORM_NAME, MOBILE_CONFIG_LINKS } from '../../../helpers/constants';
+import {
+    renderInputField,
+    renderSelectField,
+} from '../../../helpers/form';
+import {
+    validateClientId,
+    validateServerName,
+} from '../../../helpers/validators';
+
+const getDownloadLink = (host, clientId, protocol, invalid) => {
+    if (!host || invalid) {
+        return (
+            <button
+                type="button"
+                className="btn btn-success btn-standard btn-large disabled"
+            >
+                <Trans>download_mobileconfig</Trans>
+            </button>
+        );
+    }
+
+    const linkParams = { host };
+
+    if (clientId) {
+        linkParams.client_id = clientId;
+    }
+
+    return (
+        <a
+            href={getPathWithQueryString(protocol, linkParams)}
+            className={cn('btn btn-success btn-standard btn-large')}
+            download
+        >
+            <Trans>download_mobileconfig</Trans>
+        </a>
+    );
+};
+
+const MobileConfigForm = ({ invalid }) => {
+    const formValues = useSelector((state) => state.form[FORM_NAME.MOBILE_CONFIG]?.values);
+
+    if (!formValues) {
+        return null;
+    }
+
+    const { host, clientId, protocol } = formValues;
+
+    const githubLink = (
+        <a
+            href="https://github.com/AdguardTeam/AdGuardHome/wiki/Clients#idclient"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            text
+        </a>
+    );
+
+    return (
+        <form onSubmit={(e) => e.preventDefault()}>
+            <div>
+                <div className="form__group form__group--settings">
+                    <label htmlFor="host" className="form__label">
+                        {i18next.t('dhcp_table_hostname')}
+                    </label>
+                     <Field
+                        name="host"
+                        type="text"
+                        component={renderInputField}
+                        className="form-control"
+                        placeholder={i18next.t('form_enter_hostname')}
+                        validate={validateServerName}
+                    />
+                </div>
+                <div className="form__group form__group--settings">
+                    <label htmlFor="clientId" className="form__label form__label--with-desc">
+                        {i18next.t('client_id')}
+                    </label>
+                    <div className="form__desc form__desc--top">
+                        <Trans components={{ a: githubLink }}>
+                            client_id_desc
+                        </Trans>
+                    </div>
+                    <Field
+                        name="clientId"
+                        type="text"
+                        component={renderInputField}
+                        className="form-control"
+                        placeholder={i18next.t('client_id_placeholder')}
+                        validate={validateClientId}
+                    />
+                </div>
+                <div className="form__group form__group--settings">
+                    <label htmlFor="protocol" className="form__label">
+                        {i18next.t('protocol')}
+                    </label>
+                    <Field
+                        name="protocol"
+                        type="text"
+                        component={renderSelectField}
+                        className="form-control"
+                    >
+                        <option value={MOBILE_CONFIG_LINKS.DOT}>
+                            {i18next.t('dns_over_tls')}
+                        </option>
+                        <option value={MOBILE_CONFIG_LINKS.DOH}>
+                            {i18next.t('dns_over_https')}
+                        </option>
+                    </Field>
+                </div>
+            </div>
+
+            {getDownloadLink(host, clientId, protocol, invalid)}
+        </form>
+    );
+};
+
+MobileConfigForm.propTypes = {
+    invalid: PropTypes.bool.isRequired,
+};
+
+export default reduxForm({ form: FORM_NAME.MOBILE_CONFIG })(MobileConfigForm);
--- a/client/src/components/ui/Guide/index.js
+++ b/client/src/components/ui/Guide/index.js
@@ -0,0 +1 @@
+export { default } from './Guide';
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -13,6 +13,8 @@ export const R_MAC = /^((([a-fA-F0-9][a-fA-F0-9]+[-]){5}|([a-fA-F0-9][a-fA-F0-9]

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

+export const R_DOMAIN = /^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$/;
+
 export const R_PATH_LAST_PART = /\/[^/]*$/;

 // eslint-disable-next-line no-control-regex
@@ -21,6 +23,8 @@ export const R_UNIX_ABSOLUTE_PATH = /^(\/[^/\x00]+)+$/;
 // eslint-disable-next-line no-control-regex
 export const R_WIN_ABSOLUTE_PATH = /^([a-zA-Z]:)?(\\|\/)(?:[^\\/:*?"<>|\x00]+\\)*[^\\/:*?"<>|\x00]*$/;

+export const R_CLIENT_ID = /^[a-z0-9-]{1,64}$/;
+
 export const HTML_PAGES = {
    INSTALL: '/install.html',
    LOGIN: '/login.html',
@@ -514,6 +518,7 @@ export const FORM_NAME = {
    INSTALL: 'install',
    LOGIN: 'login',
    CACHE: 'cache',
+    MOBILE_CONFIG: 'mobileConfig',
    ...DHCP_FORM_NAMES,
 };

@@ -574,6 +579,7 @@ export const TOAST_TIMEOUTS = {
 export const ADDRESS_TYPES = {
    IP: 'IP',
    CIDR: 'CIDR',
+    CLIENT_ID: 'CLIENT_ID',
    UNKNOWN: 'UNKNOWN',
 };

@@ -585,3 +591,8 @@ export const CACHE_CONFIG_FIELDS = {

 export const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
 export const COMMENT_LINE_DEFAULT_TOKEN = '#';
+
+export const MOBILE_CONFIG_LINKS = {
+    DOT: '/apple/dot.mobileconfig',
+    DOH: '/apple/doh.mobileconfig',
+};
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -4,7 +4,6 @@ import dateFormat from 'date-fns/format';
 import round from 'lodash/round';
 import axios from 'axios';
 import i18n from 'i18next';
-import uniqBy from 'lodash/uniqBy';
 import ipaddr from 'ipaddr.js';
 import queryString from 'query-string';
 import React from 'react';
@@ -22,6 +21,7 @@ import {
    DHCP_VALUES_PLACEHOLDERS,
    FILTERED,
    FILTERED_STATUS,
+    R_CLIENT_ID,
    SERVICES_ID_NAME_MAP,
    STANDARD_DNS_PORT,
    STANDARD_HTTPS_PORT,
@@ -62,6 +62,7 @@ export const normalizeLogs = (logs) => logs.map((log) => {
        answer_dnssec,
        client,
        client_proto,
+        client_id,
        elapsedMs,
        question,
        reason,
@@ -99,6 +100,7 @@ export const normalizeLogs = (logs) => logs.map((log) => {
        reason,
        client,
        client_proto,
+        client_id,
        /* TODO 'filterId' and 'rule' are deprecated, will be removed in 0.106 */
        filterId,
        rule,
@@ -414,14 +416,21 @@ export const getPathWithQueryString = (path, params) => {
    return `${path}?${searchParams.toString()}`;
 };

-export const getParamsForClientsSearch = (data, param) => {
-    const uniqueClients = uniqBy(data, param);
-    return uniqueClients
-        .reduce((acc, item, idx) => {
-            const key = `ip${idx}`;
-            acc[key] = item[param];
-            return acc;
-        }, {});
+export const getParamsForClientsSearch = (data, param, additionalParam) => {
+    const clients = new Set();
+    data.forEach((e) => {
+        clients.add(e[param]);
+        if (e[additionalParam]) {
+            clients.add(e[additionalParam]);
+        }
+    });
+    const params = {};
+    const ids = Array.from(clients.values());
+    ids.forEach((id, i) => {
+        params[`ip${i}`] = id;
+    });
+
+    return params;
 };

 /**
@@ -534,7 +543,7 @@ export const isIpInCidr = (ip, cidr) => {
 /**
 *
 * @param ipOrCidr
- * @returns {'IP' | 'CIDR' | 'UNKNOWN'}
+ * @returns {'IP' | 'CIDR' | 'CLIENT_ID' | 'UNKNOWN'}
 *
 */
 export const findAddressType = (address) => {
@@ -547,6 +556,9 @@ export const findAddressType = (address) => {
        if (cidrMaybe && ipaddr.parseCIDR(address)) {
            return ADDRESS_TYPES.CIDR;
        }
+        if (R_CLIENT_ID.test(address)) {
+            return ADDRESS_TYPES.CLIENT_ID;
+        }

        return ADDRESS_TYPES.UNKNOWN;
    } catch (e) {
@@ -567,20 +579,31 @@ export const separateIpsAndCidrs = (ids) => ids.reduce((acc, curr) => {
    if (addressType === ADDRESS_TYPES.CIDR) {
        acc.cidrs.push(curr);
    }
+    if (addressType === ADDRESS_TYPES.CLIENT_ID) {
+        acc.clientIds.push(curr);
+    }
    return acc;
-}, { ips: [], cidrs: [] });
+}, { ips: [], cidrs: [], clientIds: [] });

 export const countClientsStatistics = (ids, autoClients) => {
-    const { ips, cidrs } = separateIpsAndCidrs(ids);
+    const { ips, cidrs, clientIds } = separateIpsAndCidrs(ids);

    const ipsCount = ips.reduce((acc, curr) => {
        const count = autoClients[curr] || 0;
        return acc + count;
    }, 0);

+    const clientIdsCount = clientIds.reduce((acc, curr) => {
+        const count = autoClients[curr] || 0;
+        return acc + count;
+    }, 0);
+
    const cidrsCount = Object.entries(autoClients)
        .reduce((acc, curr) => {
            const [id, count] = curr;
+            if (!ipaddr.isValid(id)) {
+                return false;
+            }
            if (cidrs.some((cidr) => isIpInCidr(id, cidr))) {
            // eslint-disable-next-line no-param-reassign
                acc += count;
@@ -588,7 +611,7 @@ export const countClientsStatistics = (ids, autoClients) => {
            return acc;
        }, 0);

-    return ipsCount + cidrsCount;
+    return ipsCount + cidrsCount + clientIdsCount;
 };

 /**
--- a/client/src/helpers/validators.js
+++ b/client/src/helpers/validators.js
@@ -9,6 +9,8 @@ import {
    R_URL_REQUIRES_PROTOCOL,
    STANDARD_WEB_PORT,
    UNSAFE_PORTS,
+    R_CLIENT_ID,
+    R_DOMAIN,
 } from './constants';
 import { getLastIpv4Octet, isValidAbsolutePath } from './form';

@@ -71,12 +73,28 @@ export const validateClientId = (value) => {
            || R_MAC.test(formattedValue)
            || R_CIDR.test(formattedValue)
            || R_CIDR_IPV6.test(formattedValue)
+            || R_CLIENT_ID.test(formattedValue)
    )) {
        return 'form_error_client_id_format';
    }
    return undefined;
 };

+/**
+ * @param value {string}
+ * @returns {undefined|string}
+ */
+export const validateServerName = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    const formattedValue = value ? value.trim() : value;
+    if (formattedValue && !R_DOMAIN.test(formattedValue)) {
+        return 'form_error_server_name';
+    }
+    return undefined;
+};
+
 /**
 * @param value {string}
 * @returns {undefined|string}