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/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';