From 28cd8a41d27a0892372683738fe1b11d05c30287 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Tue, 21 Jan 2025 13:47:40 +0300
Subject: [PATCH] add clients forms

---
 .../src/components/Filters/Services/Form.tsx  |  19 +-
 .../src/components/Settings/Clients/Form.tsx  | 514 ------------------
 .../Form/components/BlockedServices.tsx       |  81 +++
 .../Clients/Form/components/ClientIds.tsx     |  71 +++
 .../Clients/Form/components/MainSettings.tsx  | 113 ++++
 .../Form/components/ScheduleServices.tsx      |  25 +
 .../Clients/Form/components/UpstreamDns.tsx   |  82 +++
 .../Settings/Clients/Form/components/index.ts |   5 +
 .../Settings/Clients/Form/index.tsx           | 212 ++++++++
 .../components/Settings/Clients/Form/types.ts |  23 +
 .../src/components/Settings/Clients/Modal.tsx |  19 +-
 client/src/components/ui/Controls/Input.tsx   |   2 +-
 client/src/helpers/validators.ts              |   2 +-
 client/src/initialState.ts                    |  42 +-
 client/src/reducers/index.ts                  |   2 -
 client/src/reducers/install.ts                |   3 -
 client/src/reducers/login.ts                  |   3 -
 17 files changed, 660 insertions(+), 558 deletions(-)
 delete mode 100644 client/src/components/Settings/Clients/Form.tsx
 create mode 100644 client/src/components/Settings/Clients/Form/components/BlockedServices.tsx
 create mode 100644 client/src/components/Settings/Clients/Form/components/ClientIds.tsx
 create mode 100644 client/src/components/Settings/Clients/Form/components/MainSettings.tsx
 create mode 100644 client/src/components/Settings/Clients/Form/components/ScheduleServices.tsx
 create mode 100644 client/src/components/Settings/Clients/Form/components/UpstreamDns.tsx
 create mode 100644 client/src/components/Settings/Clients/Form/components/index.ts
 create mode 100644 client/src/components/Settings/Clients/Form/index.tsx
 create mode 100644 client/src/components/Settings/Clients/Form/types.ts

diff --git a/client/src/components/Filters/Services/Form.tsx b/client/src/components/Filters/Services/Form.tsx
index 7df0cb18..e37b8953 100644
--- a/client/src/components/Filters/Services/Form.tsx
+++ b/client/src/components/Filters/Services/Form.tsx
@@ -6,15 +6,15 @@ import { Controller, useForm } from 'react-hook-form';
 
 import { ServiceField } from './ServiceField';
 
-type BlockedService = {
+export type BlockedService = {
     id: string;
     name: string;
     icon_svg: string;
-}
+};
 
 type FormValues = {
     blocked_services: Record<string, boolean>;
-}
+};
 
 interface FormProps {
     initialValues: Record<string, boolean>;
@@ -25,7 +25,12 @@ interface FormProps {
 }
 
 export const Form = ({ initialValues, blockedServices, processing, processingSet, onSubmit }: FormProps) => {
-    const { handleSubmit, control, setValue, formState: { isSubmitting, isDirty } } = useForm<FormValues>({
+    const {
+        handleSubmit,
+        control,
+        setValue,
+        formState: { isSubmitting, isDirty },
+    } = useForm<FormValues>({
         mode: 'onChange',
         defaultValues: initialValues,
     });
@@ -43,8 +48,7 @@ export const Form = ({ initialValues, blockedServices, processing, processingSet
                             type="button"
                             className="btn btn-secondary btn-block"
                             disabled={processing || processingSet}
-                            onClick={() => handleToggleAllServices(true)}
-                        >
+                            onClick={() => handleToggleAllServices(true)}>
                             <Trans>block_all</Trans>
                         </button>
                     </div>
@@ -54,8 +58,7 @@ export const Form = ({ initialValues, blockedServices, processing, processingSet
                             type="button"
                             className="btn btn-secondary btn-block"
                             disabled={processing || processingSet}
-                            onClick={() => handleToggleAllServices(false)}
-                        >
+                            onClick={() => handleToggleAllServices(false)}>
                             <Trans>unblock_all</Trans>
                         </button>
                     </div>
diff --git a/client/src/components/Settings/Clients/Form.tsx b/client/src/components/Settings/Clients/Form.tsx
deleted file mode 100644
index 1252bf16..00000000
--- a/client/src/components/Settings/Clients/Form.tsx
+++ /dev/null
@@ -1,514 +0,0 @@
-import React, { useState } from 'react';
-import { connect, useSelector } from 'react-redux';
-import { Field, FieldArray, reduxForm, formValueSelector, FormErrors } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
-
-import Select from 'react-select';
-
-import i18n from '../../../i18n';
-
-import Tabs from '../../ui/Tabs';
-
-import Examples from '../Dns/Upstream/Examples';
-
-import { ScheduleForm } from '../../Filters/Services/ScheduleForm';
-import { toggleAllServices, trimLinesAndRemoveEmpty, captitalizeWords } from '../../../helpers/helpers';
-import {
-    toNumber,
-    renderInputField,
-    renderGroupField,
-    CheckboxField,
-    renderServiceField,
-    renderTextareaField,
-} from '../../../helpers/form';
-import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
-import { CLIENT_ID_LINK, FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
-import './Service.css';
-import { RootState } from '../../../initialState';
-
-const settingsCheckboxes = [
-    {
-        name: 'use_global_settings',
-        placeholder: 'client_global_settings',
-    },
-    {
-        name: 'filtering_enabled',
-        placeholder: 'block_domain_use_filters_and_hosts',
-    },
-    {
-        name: 'safebrowsing_enabled',
-        placeholder: 'use_adguard_browsing_sec',
-    },
-    {
-        name: 'parental_enabled',
-        placeholder: 'use_adguard_parental',
-    },
-];
-
-const logAndStatsCheckboxes = [
-    {
-        name: 'ignore_querylog',
-        placeholder: 'ignore_query_log',
-    },
-    {
-        name: 'ignore_statistics',
-        placeholder: 'ignore_statistics',
-    },
-];
-const validate = (values: any): FormErrors<any, string> => {
-    const errors: {
-        name?: string;
-        ids?: string[];
-    } = {};
-    const { name, ids } = values;
-
-    errors.name = validateRequiredValue(name);
-
-    if (ids && ids.length) {
-        const idArrayErrors: any = [];
-        ids.forEach((id: any, idx: any) => {
-            idArrayErrors[idx] = validateRequiredValue(id) || validateClientId(id);
-        });
-
-        if (idArrayErrors.length) {
-            errors.ids = idArrayErrors;
-        }
-    }
-    // @ts-expect-error FIXME: ts migration
-    return errors;
-};
-
-const renderFieldsWrapper = (placeholder: any, buttonTitle: any) =>
-    function cell(row: any) {
-        const { fields } = row;
-        return (
-            <div className="form__group">
-                {fields.map((ip: any, index: any) => (
-                    <div key={index} className="mb-1">
-                        <Field
-                            name={ip}
-                            component={renderGroupField}
-                            type="text"
-                            className="form-control"
-                            placeholder={placeholder}
-                            isActionAvailable={index !== 0}
-                            removeField={() => fields.remove(index)}
-                            normalizeOnBlur={(data: any) => data.trim()}
-                        />
-                    </div>
-                ))}
-
-                <button
-                    type="button"
-                    className="btn btn-link btn-block btn-sm"
-                    onClick={() => fields.push()}
-                    title={buttonTitle}>
-                    <svg className="icon icon--24">
-                        <use xlinkHref="#plus" />
-                    </svg>
-                </button>
-            </div>
-        );
-    };
-
-// Should create function outside of component to prevent component re-renders
-const renderFields = renderFieldsWrapper(i18n.t('form_enter_id'), i18n.t('form_add_id'));
-
-interface renderMultiselectProps {
-    input: {
-        name: string;
-        value: string;
-        checked: boolean;
-        onChange: (...args: unknown[]) => unknown;
-        onBlur: (...args: unknown[]) => unknown;
-    };
-    placeholder?: string;
-    options?: unknown[];
-}
-
-const renderMultiselect = (props: renderMultiselectProps) => {
-    const { input, placeholder, options } = props;
-
-    return (
-        <Select
-            {...input}
-            options={options}
-            className="basic-multi-select"
-            classNamePrefix="select"
-            onChange={(value: any) => input.onChange(value)}
-            onBlur={() => input.onBlur(input.value)}
-            placeholder={placeholder}
-            blurInputOnSelect={false}
-            isMulti
-        />
-    );
-};
-
-interface FormProps {
-    pristine: boolean;
-    handleSubmit: (...args: unknown[]) => string;
-    reset: (...args: unknown[]) => string;
-    change: (...args: unknown[]) => unknown;
-    submitting: boolean;
-    handleClose: (...args: unknown[]) => unknown;
-    useGlobalSettings?: boolean;
-    useGlobalServices?: boolean;
-    blockedServicesSchedule?: {
-        time_zone: string;
-    };
-    t: (...args: unknown[]) => string;
-    processingAdding: boolean;
-    processingUpdating: boolean;
-    invalid: boolean;
-    tagsOptions: unknown[];
-    initialValues?: {
-        safe_search: any;
-    };
-}
-
-let Form = (props: FormProps) => {
-    const {
-        t,
-        handleSubmit,
-        reset,
-        change,
-        submitting,
-        useGlobalSettings,
-        useGlobalServices,
-        blockedServicesSchedule,
-        handleClose,
-        processingAdding,
-        processingUpdating,
-        invalid,
-        tagsOptions,
-        initialValues,
-    } = props;
-
-    const services = useSelector((store: RootState) => store?.services);
-    const { safe_search } = initialValues;
-    const safeSearchServices = { ...safe_search };
-    delete safeSearchServices.enabled;
-
-    const [activeTabLabel, setActiveTabLabel] = useState('settings');
-
-    const handleScheduleSubmit = (values: any) => {
-        change('blocked_services_schedule', { ...values });
-    };
-
-    const tabs = {
-        settings: {
-            title: 'settings',
-
-            component: (
-                <div title={props.t('main_settings')}>
-                    <div className="form__label--bot form__label--bold">{t('protection_section_label')}</div>
-                    {settingsCheckboxes.map((setting) => (
-                        <div className="form__group" key={setting.name}>
-                            <Field
-                                name={setting.name}
-                                type="checkbox"
-                                component={CheckboxField}
-                                placeholder={t(setting.placeholder)}
-                                disabled={setting.name !== 'use_global_settings' ? useGlobalSettings : false}
-                            />
-                        </div>
-                    ))}
-
-                    <div className="form__group">
-                        <Field
-                            name="safe_search.enabled"
-                            type="checkbox"
-                            component={CheckboxField}
-                            placeholder={t('enforce_safe_search')}
-                            disabled={useGlobalSettings}
-                        />
-                    </div>
-
-                    <div className="form__group--inner">
-                        {Object.keys(safeSearchServices).map((searchKey) => (
-                            <div key={searchKey}>
-                                <Field
-                                    name={`safe_search.${searchKey}`}
-                                    type="checkbox"
-                                    component={CheckboxField}
-                                    placeholder={captitalizeWords(searchKey)}
-                                    disabled={useGlobalSettings}
-                                />
-                            </div>
-                        ))}
-                    </div>
-
-                    <div className="form__label--bold form__label--top form__label--bot">
-                        {t('log_and_stats_section_label')}
-                    </div>
-                    {logAndStatsCheckboxes.map((setting) => (
-                        <div className="form__group" key={setting.name}>
-                            <Field
-                                name={setting.name}
-                                type="checkbox"
-                                component={CheckboxField}
-                                placeholder={t(setting.placeholder)}
-                            />
-                        </div>
-                    ))}
-                </div>
-            ),
-        },
-        block_services: {
-            title: 'block_services',
-
-            component: (
-                <div title={props.t('block_services')}>
-                    <div className="form__group">
-                        <Field
-                            name="use_global_blocked_services"
-                            type="checkbox"
-                            component={renderServiceField}
-                            placeholder={t('blocked_services_global')}
-                            modifier="service--global"
-                        />
-
-                        <div className="row mb-4">
-                            <div className="col-6">
-                                <button
-                                    type="button"
-                                    className="btn btn-secondary btn-block"
-                                    disabled={useGlobalServices}
-                                    onClick={() => toggleAllServices(services.allServices, change, true)}>
-                                    <Trans>block_all</Trans>
-                                </button>
-                            </div>
-
-                            <div className="col-6">
-                                <button
-                                    type="button"
-                                    className="btn btn-secondary btn-block"
-                                    disabled={useGlobalServices}
-                                    onClick={() => toggleAllServices(services.allServices, change, false)}>
-                                    <Trans>unblock_all</Trans>
-                                </button>
-                            </div>
-                        </div>
-                        {services.allServices.length > 0 && (
-                            <div className="services">
-                                {services.allServices.map((service: any) => (
-                                    <Field
-                                        key={service.id}
-                                        icon={service.icon_svg}
-                                        name={`blocked_services.${service.id}`}
-                                        type="checkbox"
-                                        component={renderServiceField}
-                                        placeholder={service.name}
-                                        disabled={useGlobalServices}
-                                    />
-                                ))}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            ),
-        },
-        schedule_services: {
-            title: 'schedule_services',
-            component: (
-                <>
-                    <div className="form__desc mb-4">
-                        <Trans>schedule_services_desc_client</Trans>
-                    </div>
-
-                    <ScheduleForm
-                        schedule={blockedServicesSchedule}
-                        onScheduleSubmit={handleScheduleSubmit}
-                        clientForm
-                    />
-                </>
-            ),
-        },
-        upstream_dns: {
-            title: 'upstream_dns',
-
-            component: (
-                <div title={props.t('upstream_dns')}>
-                    <div className="form__desc mb-3">
-                        <Trans
-                            components={[
-                                <a href="#dns" key="0">
-                                    link
-                                </a>,
-                            ]}>
-                            upstream_dns_client_desc
-                        </Trans>
-                    </div>
-
-                    <Field
-                        id="upstreams"
-                        name="upstreams"
-                        component={renderTextareaField}
-                        type="text"
-                        className="form-control form-control--textarea mb-5"
-                        placeholder={t('upstream_dns')}
-                        normalizeOnBlur={trimLinesAndRemoveEmpty}
-                    />
-
-                    <Examples />
-
-                    <div className="form__label--bold mt-5 mb-3">{t('upstream_dns_cache_configuration')}</div>
-
-                    <div className="form__group mb-2">
-                        <Field
-                            name="upstreams_cache_enabled"
-                            type="checkbox"
-                            component={CheckboxField}
-                            placeholder={t('enable_upstream_dns_cache')}
-                        />
-                    </div>
-
-                    <div className="form__group form__group--settings">
-                        <label htmlFor="upstreams_cache_size" className="form__label">
-                            {t('dns_cache_size')}
-                        </label>
-
-                        <Field
-                            name="upstreams_cache_size"
-                            type="number"
-                            component={renderInputField}
-                            placeholder={t('enter_cache_size')}
-                            className="form-control"
-                            normalize={toNumber}
-                            min={0}
-                            max={UINT32_RANGE.MAX}
-                        />
-                    </div>
-                </div>
-            ),
-        },
-    };
-
-    const activeTab = tabs[activeTabLabel].component;
-
-    return (
-        <form onSubmit={handleSubmit}>
-            <div className="modal-body">
-                <div className="form__group mb-0">
-                    <div className="form__group">
-                        <Field
-                            id="name"
-                            name="name"
-                            component={renderInputField}
-                            type="text"
-                            className="form-control"
-                            placeholder={t('form_client_name')}
-                            normalizeOnBlur={(data: any) => data.trim()}
-                        />
-                    </div>
-
-                    <div className="form__group mb-4">
-                        <div className="form__label">
-                            <strong className="mr-3">
-                                <Trans>tags_title</Trans>
-                            </strong>
-                        </div>
-
-                        <div className="form__desc mt-0 mb-2">
-                            <Trans
-                                components={[
-                                    <a
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        href="https://link.adtidy.org/forward.html?action=dns_kb_filtering_syntax_ctag&from=ui&app=home"
-                                        key="0">
-                                        link
-                                    </a>,
-                                ]}>
-                                tags_desc
-                            </Trans>
-                        </div>
-
-                        <Field
-                            name="tags"
-                            component={renderMultiselect}
-                            placeholder={t('form_select_tags')}
-                            options={tagsOptions}
-                        />
-                    </div>
-
-                    <div className="form__group">
-                        <div className="form__label">
-                            <strong className="mr-3">
-                                <Trans>client_identifier</Trans>
-                            </strong>
-                        </div>
-
-                        <div className="form__desc mt-0">
-                            <Trans
-                                components={[
-                                    <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer" key="0">
-                                        text
-                                    </a>,
-                                ]}>
-                                client_identifier_desc
-                            </Trans>
-                        </div>
-                    </div>
-
-                    <div className="form__group">
-                        <FieldArray name="ids" component={renderFields} />
-                    </div>
-                </div>
-
-                <Tabs
-                    controlClass="form"
-                    tabs={tabs}
-                    activeTabLabel={activeTabLabel}
-                    setActiveTabLabel={setActiveTabLabel}>
-                    {activeTab}
-                </Tabs>
-            </div>
-
-            <div className="modal-footer">
-                <div className="btn-list">
-                    <button
-                        type="button"
-                        className="btn btn-secondary btn-standard"
-                        disabled={submitting}
-                        onClick={() => {
-                            reset();
-                            handleClose();
-                        }}>
-                        <Trans>cancel_btn</Trans>
-                    </button>
-
-                    <button
-                        type="submit"
-                        className="btn btn-success btn-standard"
-                        disabled={submitting || invalid || processingAdding || processingUpdating}>
-                        <Trans>save_btn</Trans>
-                    </button>
-                </div>
-            </div>
-        </form>
-    );
-};
-
-const selector = formValueSelector(FORM_NAME.CLIENT);
-
-Form = connect((state) => {
-    const useGlobalSettings = selector(state, 'use_global_settings');
-    const useGlobalServices = selector(state, 'use_global_blocked_services');
-    const blockedServicesSchedule = selector(state, 'blocked_services_schedule');
-    return {
-        useGlobalSettings,
-        useGlobalServices,
-        blockedServicesSchedule,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({
-        form: FORM_NAME.CLIENT,
-        enableReinitialize: true,
-        validate,
-    }),
-])(Form);
diff --git a/client/src/components/Settings/Clients/Form/components/BlockedServices.tsx b/client/src/components/Settings/Clients/Form/components/BlockedServices.tsx
new file mode 100644
index 00000000..f88c04d9
--- /dev/null
+++ b/client/src/components/Settings/Clients/Form/components/BlockedServices.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Controller, useFormContext } from 'react-hook-form';
+import { ClientForm } from '../types';
+import { BlockedService } from '../../../../Filters/Services/Form';
+import { ServiceField } from '../../../../Filters/Services/ServiceField';
+
+type Props = {
+    services: BlockedService[];
+};
+
+export const BlockedServices = ({ services }: Props) => {
+    const { t } = useTranslation();
+    const { watch, setValue, control } = useFormContext<ClientForm>();
+
+    const useGlobalServices = watch('use_global_blocked_services');
+
+    const handleToggleAllServices = (isSelected: boolean) => {
+        services.forEach((service: BlockedService) => setValue(`blocked_services.${service.id}`, isSelected));
+    };
+
+    return (
+        <div title={t('block_services')}>
+            <div className="form__group">
+                <Controller
+                    name="use_global_blocked_services"
+                    control={control}
+                    render={({ field }) => (
+                        <ServiceField
+                            {...field}
+                            placeholder={t('blocked_services_global')}
+                            disabled={useGlobalServices}
+                            className="service--global"
+                        />
+                    )}
+                />
+
+                <div className="row mb-4">
+                    <div className="col-6">
+                        <button
+                            type="button"
+                            className="btn btn-secondary btn-block"
+                            disabled={useGlobalServices}
+                            onClick={() => handleToggleAllServices(true)}>
+                            <Trans>block_all</Trans>
+                        </button>
+                    </div>
+
+                    <div className="col-6">
+                        <button
+                            type="button"
+                            className="btn btn-secondary btn-block"
+                            disabled={useGlobalServices}
+                            onClick={() => handleToggleAllServices(false)}>
+                            <Trans>unblock_all</Trans>
+                        </button>
+                    </div>
+                </div>
+                {services.length > 0 && (
+                    <div className="services">
+                        {services.map((service: BlockedService) => (
+                            <Controller
+                                key={service.id}
+                                name={`blocked_services.${service.id}`}
+                                control={control}
+                                render={({ field }) => (
+                                    <ServiceField
+                                        {...field}
+                                        placeholder={service.name}
+                                        disabled={useGlobalServices}
+                                        icon={service.icon_svg}
+                                    />
+                                )}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
diff --git a/client/src/components/Settings/Clients/Form/components/ClientIds.tsx b/client/src/components/Settings/Clients/Form/components/ClientIds.tsx
new file mode 100644
index 00000000..c76910a3
--- /dev/null
+++ b/client/src/components/Settings/Clients/Form/components/ClientIds.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { ClientForm } from '../types';
+import { Input } from '../../../../ui/Controls/Input';
+import { validateClientId, validateRequiredValue } from '../../../../../helpers/validators';
+
+export const ClientIds = () => {
+    const { t } = useTranslation();
+    const { control } = useFormContext<ClientForm>();
+
+    const { fields, append, remove } = useFieldArray<ClientForm>({
+        control,
+        name: 'ids',
+    });
+
+    return (
+        <div className="form__group">
+            {fields.map((field, index) => (
+                <div key={field.id} className="mb-1">
+                    <Controller
+                        name={`ids.${index}.name`}
+                        control={control}
+                        rules={{
+                            validate: {
+                                required: (value) => validateRequiredValue(value),
+                                validId: (value) => validateClientId(value),
+                            },
+                        }}
+                        render={({ field, fieldState }) => (
+                            <Input
+                                {...field}
+                                type="text"
+                                placeholder={t('form_enter_id')}
+                                error={fieldState.error?.message}
+                                onBlur={(event) => {
+                                    const trimmedValue = event.target.value.trim();
+                                    field.onBlur();
+                                    field.onChange(trimmedValue);
+                                }}
+                                rightAddon={
+                                    index !== 0 && (
+                                        <span className="input-group-append">
+                                            <button
+                                                type="button"
+                                                className="btn btn-secondary btn-icon btn-icon--green"
+                                                onClick={() => remove(index)}>
+                                                <svg className="icon icon--24">
+                                                    <use xlinkHref="#cross" />
+                                                </svg>
+                                            </button>
+                                        </span>
+                                    )
+                                }
+                            />
+                        )}
+                    />
+                </div>
+            ))}
+            <button
+                type="button"
+                className="btn btn-link btn-block btn-sm"
+                onClick={() => append({ name: '' })}
+                title={t('form_add_id')}>
+                <svg className="icon icon--24">
+                    <use xlinkHref="#plus" />
+                </svg>
+            </button>
+        </div>
+    );
+};
diff --git a/client/src/components/Settings/Clients/Form/components/MainSettings.tsx b/client/src/components/Settings/Clients/Form/components/MainSettings.tsx
new file mode 100644
index 00000000..c8c03cf4
--- /dev/null
+++ b/client/src/components/Settings/Clients/Form/components/MainSettings.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Controller, useFormContext } from 'react-hook-form';
+import i18next from 'i18next';
+import { captitalizeWords } from '../../../../../helpers/helpers';
+import { ClientForm } from '../types';
+import { Checkbox } from '../../../../ui/Controls/Checkbox';
+
+type ProtectionSettings = 'use_global_settings' | 'filtering_enabled' | 'safebrowsing_enabled' | 'parental_enabled';
+
+const settingsCheckboxes: {
+    name: ProtectionSettings;
+    placeholder: string;
+}[] = [
+    {
+        name: 'use_global_settings',
+        placeholder: i18next.t('client_global_settings'),
+    },
+    {
+        name: 'filtering_enabled',
+        placeholder: i18next.t('block_domain_use_filters_and_hosts'),
+    },
+    {
+        name: 'safebrowsing_enabled',
+        placeholder: i18next.t('use_adguard_browsing_sec'),
+    },
+    {
+        name: 'parental_enabled',
+        placeholder: i18next.t('use_adguard_parental'),
+    },
+];
+
+type LogsStatsSettings = 'ignore_querylog' | 'ignore_statistics';
+
+const logAndStatsCheckboxes: { name: LogsStatsSettings; placeholder: string }[] = [
+    {
+        name: 'ignore_querylog',
+        placeholder: i18next.t('ignore_query_log'),
+    },
+    {
+        name: 'ignore_statistics',
+        placeholder: i18next.t('ignore_statistics'),
+    },
+];
+
+type Props = {
+    safeSearchServices: Record<string, boolean>;
+};
+
+export const MainSettings = ({ safeSearchServices }: Props) => {
+    const { t } = useTranslation();
+    const { watch, control } = useFormContext<ClientForm>();
+
+    const useGlobalSettings = watch('use_global_settings');
+
+    return (
+        <div title={t('main_settings')}>
+            <div className="form__label--bot form__label--bold">{t('protection_section_label')}</div>
+            {settingsCheckboxes.map((setting) => (
+                <div className="form__group" key={setting.name}>
+                    <Controller
+                        name={setting.name}
+                        control={control}
+                        render={({ field }) => (
+                            <Checkbox
+                                {...field}
+                                title={setting.placeholder}
+                                disabled={setting.name !== 'use_global_settings' ? useGlobalSettings : false}
+                            />
+                        )}
+                    />
+                </div>
+            ))}
+
+            <div className="form__group">
+                <Controller
+                    name="safe_search.enabled"
+                    control={control}
+                    render={({ field }) => (
+                        <Checkbox {...field} title={t('enforce_safe_search')} disabled={useGlobalSettings} />
+                    )}
+                />
+            </div>
+
+            <div className="form__group--inner">
+                {Object.keys(safeSearchServices).map((searchKey) => (
+                    <div key={searchKey}>
+                        <Controller
+                            name={`safe_search.${searchKey}`}
+                            control={control}
+                            render={({ field }) => (
+                                <Checkbox {...field} title={captitalizeWords(searchKey)} disabled={useGlobalSettings} />
+                            )}
+                        />
+                    </div>
+                ))}
+            </div>
+
+            <div className="form__label--bold form__label--top form__label--bot">
+                {t('log_and_stats_section_label')}
+            </div>
+            {logAndStatsCheckboxes.map((setting) => (
+                <div className="form__group" key={setting.name}>
+                    <Controller
+                        name={setting.name}
+                        control={control}
+                        render={({ field }) => <Checkbox {...field} title={setting.placeholder} />}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
diff --git a/client/src/components/Settings/Clients/Form/components/ScheduleServices.tsx b/client/src/components/Settings/Clients/Form/components/ScheduleServices.tsx
new file mode 100644
index 00000000..a00787bb
--- /dev/null
+++ b/client/src/components/Settings/Clients/Form/components/ScheduleServices.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import { useFormContext } from 'react-hook-form';
+import { ScheduleForm } from '../../../../Filters/Services/ScheduleForm';
+import { ClientForm } from '../types';
+
+export const ScheduleServices = () => {
+    const { watch, setValue } = useFormContext<ClientForm>();
+
+    const blockedServicesSchedule = watch('blocked_services_schedule');
+
+    const handleScheduleSubmit = (values: any) => {
+        setValue('blocked_services_schedule', values);
+    };
+
+    return (
+        <>
+            <div className="form__desc mb-4">
+                <Trans>schedule_services_desc_client</Trans>
+            </div>
+
+            <ScheduleForm schedule={blockedServicesSchedule} onScheduleSubmit={handleScheduleSubmit} clientForm />
+        </>
+    );
+};
diff --git a/client/src/components/Settings/Clients/Form/components/UpstreamDns.tsx b/client/src/components/Settings/Clients/Form/components/UpstreamDns.tsx
new file mode 100644
index 00000000..feb26bfc
--- /dev/null
+++ b/client/src/components/Settings/Clients/Form/components/UpstreamDns.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { Controller, useFormContext } from 'react-hook-form';
+import Examples from '../../../Dns/Upstream/Examples';
+import { UINT32_RANGE } from '../../../../../helpers/constants';
+import { Textarea } from '../../../../ui/Controls/Textarea';
+import { ClientForm } from '../types';
+import { Checkbox } from '../../../../ui/Controls/Checkbox';
+import { Input } from '../../../../ui/Controls/Input';
+import { trimLinesAndRemoveEmpty } from '../../../../../helpers/helpers';
+
+export const UpstreamDns = () => {
+    const { t } = useTranslation();
+
+    const { control } = useFormContext<ClientForm>();
+
+    return (
+        <div title={t('upstream_dns')}>
+            <div className="form__desc mb-3">
+                <Trans
+                    components={[
+                        <a href="#dns" key="0">
+                            link
+                        </a>,
+                    ]}>
+                    upstream_dns_client_desc
+                </Trans>
+            </div>
+
+            <Controller
+                name="upstreams"
+                control={control}
+                render={({ field }) => (
+                    <Textarea
+                        {...field}
+                        className="form-control form-control--textarea mb-5"
+                        placeholder={t('upstream_dns')}
+                        onBlur={(event) => {
+                            const normalizedValue = trimLinesAndRemoveEmpty(event.target.value);
+                            field.onBlur();
+                            field.onChange(normalizedValue);
+                        }}
+                    />
+                )}
+            />
+
+            <Examples />
+
+            <div className="form__label--bold mt-5 mb-3">{t('upstream_dns_cache_configuration')}</div>
+
+            <div className="form__group mb-2">
+                <Controller
+                    name="upstreams_cache_enabled"
+                    control={control}
+                    render={({ field }) => <Checkbox {...field} title={t('enable_upstream_dns_cache')} />}
+                />
+            </div>
+
+            <div className="form__group form__group--settings">
+                <label htmlFor="upstreams_cache_size" className="form__label">
+                    {t('dns_cache_size')}
+                </label>
+
+                <Controller
+                    name="upstreams_cache_size"
+                    control={control}
+                    render={({ field, fieldState }) => (
+                        <Input
+                            {...field}
+                            type="number"
+                            placeholder={t('enter_cache_size')}
+                            error={fieldState.error?.message}
+                            min={0}
+                            max={UINT32_RANGE.MAX}
+                        />
+                    )}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/client/src/components/Settings/Clients/Form/components/index.ts b/client/src/components/Settings/Clients/Form/components/index.ts
new file mode 100644
index 00000000..f949cf57
--- /dev/null
+++ b/client/src/components/Settings/Clients/Form/components/index.ts
@@ -0,0 +1,5 @@
+export { BlockedServices } from './BlockedServices';
+export { ClientIds } from './ClientIds';
+export { ScheduleServices } from './ScheduleServices';
+export { MainSettings } from './MainSettings';
+export { UpstreamDns } from './UpstreamDns';
diff --git a/client/src/components/Settings/Clients/Form/index.tsx b/client/src/components/Settings/Clients/Form/index.tsx
new file mode 100644
index 00000000..899043f7
--- /dev/null
+++ b/client/src/components/Settings/Clients/Form/index.tsx
@@ -0,0 +1,212 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Trans, useTranslation } from 'react-i18next';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import Select from 'react-select';
+
+import Tabs from '../../../ui/Tabs';
+import { CLIENT_ID_LINK } from '../../../../helpers/constants';
+import { RootState } from '../../../../initialState';
+import { Input } from '../../../ui/Controls/Input';
+import { validateRequiredValue } from '../../../../helpers/validators';
+import { ClientForm } from './types';
+import { BlockedServices, ClientIds, MainSettings, ScheduleServices, UpstreamDns } from './components';
+
+import '../Service.css';
+
+type Props = {
+    onSubmit: (...args: unknown[]) => void;
+    onClose: () => void;
+    useGlobalSettings?: boolean;
+    useGlobalServices?: boolean;
+    blockedServicesSchedule?: {
+        time_zone: string;
+    };
+    processingAdding: boolean;
+    processingUpdating: boolean;
+    tagsOptions: unknown[];
+    initialValues?: ClientForm;
+};
+
+export const Form = ({
+    onSubmit,
+    onClose,
+    processingAdding,
+    processingUpdating,
+    tagsOptions,
+    initialValues,
+}: Props) => {
+    const { t } = useTranslation();
+    const methods = useForm<ClientForm>({
+        defaultValues: initialValues,
+        mode: 'onChange',
+    });
+
+    const {
+        handleSubmit,
+        reset,
+        control,
+        setValue,
+        formState: { isSubmitting, isValid },
+    } = methods;
+
+    const services = useSelector((store: RootState) => store?.services);
+    const { safe_search } = initialValues;
+    const safeSearchServices = { ...safe_search };
+    delete safeSearchServices.enabled;
+
+    const onFormSubmit = (values: ClientForm) => {
+        const data = {
+            ...values,
+            ids: values.ids.map((idObj) => idObj.name),
+        };
+
+        onSubmit(data);
+    };
+
+    const [activeTabLabel, setActiveTabLabel] = useState('settings');
+
+    const tabs = {
+        settings: {
+            title: 'settings',
+            component: <MainSettings safeSearchServices={safeSearchServices} />,
+        },
+        block_services: {
+            title: 'block_services',
+            component: <BlockedServices services={services?.allServices} />,
+        },
+        schedule_services: {
+            title: 'schedule_services',
+            component: <ScheduleServices />,
+        },
+        upstream_dns: {
+            title: 'upstream_dns',
+            component: <UpstreamDns />,
+        },
+    };
+
+    const activeTab = tabs[activeTabLabel].component;
+
+    return (
+        <FormProvider {...methods}>
+            <form onSubmit={handleSubmit(onFormSubmit)}>
+                <div className="modal-body">
+                    <div className="form__group mb-0">
+                        <div className="form__group">
+                            <Controller
+                                name="name"
+                                control={control}
+                                rules={{ validate: validateRequiredValue }}
+                                render={({ field, fieldState }) => (
+                                    <Input
+                                        {...field}
+                                        type="text"
+                                        placeholder={t('form_client_name')}
+                                        error={fieldState.error?.message}
+                                        onBlur={(event) => {
+                                            const trimmedValue = event.target.value.trim();
+                                            field.onBlur();
+                                            field.onChange(trimmedValue);
+                                        }}
+                                    />
+                                )}
+                            />
+                        </div>
+
+                        <div className="form__group mb-4">
+                            <div className="form__label">
+                                <strong className="mr-3">
+                                    <Trans>tags_title</Trans>
+                                </strong>
+                            </div>
+
+                            <div className="form__desc mt-0 mb-2">
+                                <Trans
+                                    components={[
+                                        <a
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            href="https://link.adtidy.org/forward.html?action=dns_kb_filtering_syntax_ctag&from=ui&app=home"
+                                            key="0"
+                                        />,
+                                    ]}>
+                                    tags_desc
+                                </Trans>
+                            </div>
+
+                            <Controller
+                                name="tags"
+                                control={control}
+                                render={({ field }) => (
+                                    <Select
+                                        {...field}
+                                        options={tagsOptions}
+                                        className="basic-multi-select"
+                                        classNamePrefix="select"
+                                        isMulti
+                                        onChange={(selectedOptions) => {
+                                            setValue('tags', selectedOptions);
+                                        }}
+                                    />
+                                )}
+                            />
+                        </div>
+
+                        <div className="form__group">
+                            <div className="form__label">
+                                <strong className="mr-3">
+                                    <Trans>client_identifier</Trans>
+                                </strong>
+                            </div>
+
+                            <div className="form__desc mt-0">
+                                <Trans
+                                    components={[
+                                        <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer" key="0">
+                                            text
+                                        </a>,
+                                    ]}>
+                                    client_identifier_desc
+                                </Trans>
+                            </div>
+                        </div>
+
+                        <div className="form__group">
+                            <ClientIds />
+                        </div>
+                    </div>
+
+                    <Tabs
+                        controlClass="form"
+                        tabs={tabs}
+                        activeTabLabel={activeTabLabel}
+                        setActiveTabLabel={setActiveTabLabel}>
+                        {activeTab}
+                    </Tabs>
+                </div>
+
+                <div className="modal-footer">
+                    <div className="btn-list">
+                        <button
+                            type="button"
+                            className="btn btn-secondary btn-standard"
+                            disabled={isSubmitting}
+                            onClick={() => {
+                                reset();
+                                onClose();
+                            }}>
+                            <Trans>cancel_btn</Trans>
+                        </button>
+
+                        <button
+                            type="submit"
+                            className="btn btn-success btn-standard"
+                            disabled={isSubmitting || !isValid || processingAdding || processingUpdating}>
+                            <Trans>save_btn</Trans>
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </FormProvider>
+    );
+};
diff --git a/client/src/components/Settings/Clients/Form/types.ts b/client/src/components/Settings/Clients/Form/types.ts
new file mode 100644
index 00000000..8acc5d93
--- /dev/null
+++ b/client/src/components/Settings/Clients/Form/types.ts
@@ -0,0 +1,23 @@
+export type ClientForm = {
+    name: string;
+    tags: { value: string; label: string }[];
+    ids: { name: string }[];
+    use_global_settings: boolean;
+    use_global_blocked_services: boolean;
+    blocked_services_schedule: {
+        time_zone: string;
+    };
+    safe_search: {
+        enabled: boolean;
+        [key: string]: boolean;
+    };
+    upstreams: string;
+    upstreams_cache_enabled: boolean;
+    upstreams_cache_size: number;
+    blocked_services: Record<string, boolean>;
+    filtering_enabled: boolean;
+    safebrowsing_enabled: boolean;
+    parental_enabled: boolean;
+    ignore_querylog: boolean;
+    ignore_statistics: boolean;
+};
diff --git a/client/src/components/Settings/Clients/Modal.tsx b/client/src/components/Settings/Clients/Modal.tsx
index fca1a097..6a86ad75 100644
--- a/client/src/components/Settings/Clients/Modal.tsx
+++ b/client/src/components/Settings/Clients/Modal.tsx
@@ -4,8 +4,15 @@ import { Trans, withTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import { MODAL_TYPE } from '../../../helpers/constants';
+import { Form } from './Form';
 
-import Form from './Form';
+const normalizeIds = (initialIds?: string[]): { name: string }[] => {
+    if (!initialIds || initialIds.length === 0) {
+        return [{ name: '' }];
+    }
+
+    return initialIds.map((id: string) => ({ name: id }));
+};
 
 const getInitialData = ({ initial, modalType, clientId, clientName }: any) => {
     if (initial && initial.blocked_services) {
@@ -19,6 +26,7 @@ const getInitialData = ({ initial, modalType, clientId, clientName }: any) => {
         return {
             ...initial,
             blocked_services: blocked,
+            ids: normalizeIds(initial.ids),
         };
     }
 
@@ -26,11 +34,14 @@ const getInitialData = ({ initial, modalType, clientId, clientName }: any) => {
         return {
             ...initial,
             name: clientName,
-            ids: [clientId],
+            ids: [{ name: clientId }],
         };
     }
 
-    return initial;
+    return {
+        ...initial,
+        ids: normalizeIds(initial.ids),
+    };
 };
 
 interface ModalProps {
@@ -85,7 +96,7 @@ const Modal = ({
                 <Form
                     initialValues={{ ...initialData }}
                     onSubmit={handleSubmit}
-                    handleClose={handleClose}
+                    onClose={handleClose}
                     processingAdding={processingAdding}
                     processingUpdating={processingUpdating}
                     tagsOptions={tagsOptions}
diff --git a/client/src/components/ui/Controls/Input.tsx b/client/src/components/ui/Controls/Input.tsx
index 6abe532c..7e0407ee 100644
--- a/client/src/components/ui/Controls/Input.tsx
+++ b/client/src/components/ui/Controls/Input.tsx
@@ -16,7 +16,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
                     {label}
                 </label>
             )}
-            <div>
+            <div className="input-group">
                 {leftAddon && <div>{leftAddon}</div>}
                 <input className={clsx('form-control', className)} ref={ref} {...rest} />
                 {rightAddon && <div>{rightAddon}</div>}
diff --git a/client/src/helpers/validators.ts b/client/src/helpers/validators.ts
index f988c746..f3cc844c 100644
--- a/client/src/helpers/validators.ts
+++ b/client/src/helpers/validators.ts
@@ -148,7 +148,7 @@ export const validateIpForGatewaySubnetMask = (value: any, allValues: any) => {
  * @param value {string}
  * @returns {undefined|string}
  */
-export const validateClientId = (value: any) => {
+export const validateClientId = (value: string) => {
     if (!value) {
         return undefined;
     }
diff --git a/client/src/initialState.ts b/client/src/initialState.ts
index 94be25ff..9c1469e6 100644
--- a/client/src/initialState.ts
+++ b/client/src/initialState.ts
@@ -78,17 +78,17 @@ export type EncryptionData = {
 };
 
 export type Client = {
-    blocked_services: string[],
+    blocked_services: string[];
     blocked_services_schedule: {
-        sun?: { start: number, end: number },
-        mon?: { start: number, end: number },
-        tue?: { start: number, end: number },
-        wed?: { start: number, end: number },
-        thu?: { start: number, end: number },
-        fri?: { start: number, end: number },
-        sat?: { start: number, end: number },
+        sun?: { start: number; end: number };
+        mon?: { start: number; end: number };
+        tue?: { start: number; end: number };
+        wed?: { start: number; end: number };
+        thu?: { start: number; end: number };
+        fri?: { start: number; end: number };
+        sat?: { start: number; end: number };
         time_zone: string;
-    },
+    };
     filtering_enabled: boolean;
     ids: string[];
     ignore_querylog: boolean;
@@ -104,14 +104,14 @@ export type Client = {
     upstreams_cache_size: number;
     use_global_blocked_services: boolean;
     use_global_settings: boolean;
-}
+};
 
 export type AutoClient = {
     ip: string;
     name: string;
     source: string;
     whois_info: any;
-}
+};
 
 export type DashboardData = {
     processing: boolean;
@@ -151,13 +151,13 @@ export type SettingsData = {
             order: number;
             subtitle: string;
             title: string;
-        },
+        };
         safebrowsing: {
             enabled: boolean;
             order: number;
             subtitle: string;
             title: string;
-        },
+        };
         safesearch: Record<string, boolean>;
     };
 };
@@ -182,7 +182,7 @@ export type RewritesData = {
 export type NormalizedTopClients = {
     auto: Record<string, number>;
     configured: Record<string, number>;
-}
+};
 
 export type StatsData = {
     processingGetConfig: boolean;
@@ -256,13 +256,13 @@ export type DhcpData = {
     interface_name: string;
     check?: {
         v4?: {
-            other_server?: { found: string; error?: string },
-            static_ip?: {static: string, ip: string},
-        },
+            other_server?: { found: string; error?: string };
+            static_ip?: { static: string; ip: string };
+        };
         v6?: {
-            other_server?: { found: string; error?: string },
-            static_ip?: {static: string, ip: string},
-        },
+            other_server?: { found: string; error?: string };
+            static_ip?: { static: string; ip: string };
+        };
     };
     v4: {
         gateway_ip: string;
@@ -390,7 +390,6 @@ export type RootState = {
     install?: InstallData;
     toasts: { notices: any[] };
     loadingBar: any;
-    form: any;
 };
 
 export type InstallState = {
@@ -615,5 +614,4 @@ export const initialState: RootState = {
     },
     toasts: { notices: [] },
     loadingBar: {},
-    form: {},
 };
diff --git a/client/src/reducers/index.ts b/client/src/reducers/index.ts
index 79f0ae8a..cf5d3b94 100644
--- a/client/src/reducers/index.ts
+++ b/client/src/reducers/index.ts
@@ -1,7 +1,6 @@
 import { combineReducers } from 'redux';
 import { loadingBarReducer } from 'react-redux-loading-bar';
 
-import { reducer as formReducer } from 'redux-form';
 import toasts from './toasts';
 import encryption from './encryption';
 import clients from './clients';
@@ -31,5 +30,4 @@ export default combineReducers({
     stats,
     dnsConfig,
     loadingBar: loadingBarReducer,
-    form: formReducer,
 });
diff --git a/client/src/reducers/install.ts b/client/src/reducers/install.ts
index ccbbdb59..719aab0c 100644
--- a/client/src/reducers/install.ts
+++ b/client/src/reducers/install.ts
@@ -2,8 +2,6 @@ import { combineReducers } from 'redux';
 
 import { handleActions } from 'redux-actions';
 
-import { reducer as formReducer } from 'redux-form';
-
 import * as actions from '../actions/install';
 import toasts from './toasts';
 import { ALL_INTERFACES_IP, INSTALL_FIRST_STEP, STANDARD_DNS_PORT, STANDARD_WEB_PORT } from '../helpers/constants';
@@ -110,5 +108,4 @@ const install = handleActions(
 export default combineReducers({
     install,
     toasts,
-    form: formReducer,
 });
diff --git a/client/src/reducers/login.ts b/client/src/reducers/login.ts
index a0485326..2366d376 100644
--- a/client/src/reducers/login.ts
+++ b/client/src/reducers/login.ts
@@ -2,8 +2,6 @@ import { combineReducers } from 'redux';
 
 import { handleActions } from 'redux-actions';
 
-import { reducer as formReducer } from 'redux-form';
-
 import * as actions from '../actions/login';
 import toasts from './toasts';
 
@@ -33,5 +31,4 @@ const login = handleActions(
 export default combineReducers({
     login,
     toasts,
-    form: formReducer,
 });