add clients forms
This commit is contained in:
Ildar Kamalov
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
export { BlockedServices } from './BlockedServices';
|
||||
export { ClientIds } from './ClientIds';
|
||||
export { ScheduleServices } from './ScheduleServices';
|
||||
export { MainSettings } from './MainSettings';
|
||||
export { UpstreamDns } from './UpstreamDns';
|
||||
212
client/src/components/Settings/Clients/Form/index.tsx
Normal file
212
client/src/components/Settings/Clients/Form/index.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
23
client/src/components/Settings/Clients/Form/types.ts
Normal file
23
client/src/components/Settings/Clients/Form/types.ts
Normal file
@@ -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;
|
||||
};
|
||||
Reference in New Issue
Block a user