Pull request 2322: ADG-9415
Merge in DNS/adguard-home from ADG-9415 to master Squashed commit of the following: commit76bf99499aMerge:29529970a0389515eeAuthor: Ildar Kamalov <ik@adguard.com> Date: Wed Feb 26 18:31:41 2025 +0300 Merge branch 'master' into ADG-9415 commit29529970a3Merge:b49790daf782a1a982Author: Ainar Garipov <A.Garipov@AdGuard.COM> Date: Mon Feb 24 15:44:38 2025 +0300 Merge branch 'master' into ADG-9415 commitb49790daf8Author: Ildar Kamalov <ik@adguard.com> Date: Mon Feb 24 15:30:18 2025 +0300 fix default lease duration value commitcb307472ecAuthor: Ildar Kamalov <ik@adguard.com> Date: Mon Feb 24 10:35:26 2025 +0300 fix default response status commit115e743e1aAuthor: Ildar Kamalov <ik@adguard.com> Date: Mon Feb 24 10:32:46 2025 +0300 fix upstream description commit26b0eddacaAuthor: Ildar Kamalov <ik@adguard.com> Date: Tue Feb 18 17:40:41 2025 +0300 use const for test config file commit58faa7c537Author: Ildar Kamalov <ik@adguard.com> Date: Tue Feb 18 17:31:04 2025 +0300 fix install config commit0a3346d911Author: Ildar Kamalov <ik@adguard.com> Date: Mon Feb 17 15:25:23 2025 +0300 fix install check config commit17c4c26ea8Author: Ildar Kamalov <ik@adguard.com> Date: Fri Feb 14 17:18:20 2025 +0300 fix query log commit14a2685ae3Author: Ildar Kamalov <ik@adguard.com> Date: Fri Feb 14 15:52:36 2025 +0300 fix dhcp initial values commite7a8db7afdAuthor: Ildar Kamalov <ik@adguard.com> Date: Fri Feb 14 14:37:24 2025 +0300 fix encryption form values commit1c8917f7acAuthor: Ildar Kamalov <ik@adguard.com> Date: Fri Feb 14 14:07:29 2025 +0300 fix blocked services submit commit4dfa536ceaAuthor: Ildar Kamalov <ik@adguard.com> Date: Fri Feb 14 13:50:47 2025 +0300 dns config ip validation commit4fee83fe13Author: Ildar Kamalov <ik@adguard.com> Date: Wed Feb 12 17:49:54 2025 +0300 add playwright warning commit8c2f36e7a6Author: Ildar Kamalov <ik@adguard.com> Date: Tue Feb 11 18:36:18 2025 +0300 fix config file name commit83db5f33dcAuthor: Ildar Kamalov <ik@adguard.com> Date: Tue Feb 11 16:16:43 2025 +0300 temp config file commit9080c1620fAuthor: Ildar Kamalov <ik@adguard.com> Date: Tue Feb 11 15:01:46 2025 +0300 update readme commitee1520307fMerge:fd12e33c02fe2d254bAuthor: Ildar Kamalov <ik@adguard.com> Date: Tue Feb 11 14:44:06 2025 +0300 Merge branch 'master' into ADG-9415 commitfd12e33c06Author: Igor Lobanov <bniwredyc@gmail.com> Date: Mon Feb 10 10:29:43 2025 +0100 added typecheck on build, fixed eslint commitb3849eebc4Merge:225167a8b9bf3ee128Author: Igor Lobanov <bniwredyc@gmail.com> Date: Mon Feb 10 09:43:32 2025 +0100 Merge branch 'ADG-9415' of https://bit.int.agrd.dev/scm/dns/adguard-home into ADG-9415 ... and 94 more commits
This commit is contained in:
Ildar Kamalov
@@ -111,6 +111,12 @@ const ClientsTable = ({
|
||||
config.tags = [];
|
||||
}
|
||||
|
||||
if (values.ids) {
|
||||
config.ids = values.ids.map((id) => id.name);
|
||||
} else {
|
||||
config.ids = [];
|
||||
}
|
||||
|
||||
if (typeof values.upstreams_cache_size === 'string') {
|
||||
config.upstreams_cache_size = 0;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
@@ -0,0 +1,84 @@
|
||||
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}
|
||||
data-testid="clients_use_global_blocked_services"
|
||||
placeholder={t('blocked_services_global')}
|
||||
className="service--global"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="row mb-4">
|
||||
<div className="col-6">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="clients_block_all"
|
||||
className="btn btn-secondary btn-block"
|
||||
disabled={useGlobalServices}
|
||||
onClick={() => handleToggleAllServices(true)}>
|
||||
<Trans>block_all</Trans>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="col-6">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="clients_unblock_all"
|
||||
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}
|
||||
data-testid={`clients_service_${service.id}`}
|
||||
placeholder={service.name}
|
||||
disabled={useGlobalServices}
|
||||
icon={service.icon_svg}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
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"
|
||||
data-testid={`clients_id_${index}`}
|
||||
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"
|
||||
data-testid={`clients_id_remove_${index}`}
|
||||
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"
|
||||
data-testid="clients_id_add"
|
||||
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,126 @@
|
||||
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}
|
||||
data-testid={`clients_${setting.name}`}
|
||||
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
|
||||
data-testid="clients_safe_search"
|
||||
{...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}
|
||||
data-testid={`clients_safe_search_${searchKey}`}
|
||||
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} data-testid={`clients_${setting.name}`} 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,83 @@
|
||||
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 { toNumber } from '../../../../../helpers/form';
|
||||
|
||||
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" />]}>upstream_dns_client_desc</Trans>
|
||||
</div>
|
||||
|
||||
<Controller
|
||||
name="upstreams"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
data-testid="clients_upstreams"
|
||||
className="form-control form-control--textarea mb-5"
|
||||
placeholder={t('upstream_dns')}
|
||||
trimOnBlur
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<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}
|
||||
data-testid="clients_upstreams_cache_enabled"
|
||||
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"
|
||||
data-testid="clients_upstreams_cache_size"
|
||||
placeholder={t('enter_cache_size')}
|
||||
error={fieldState.error?.message}
|
||||
min={0}
|
||||
max={UINT32_RANGE.MAX}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</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';
|
||||
223
client/src/components/Settings/Clients/Form/index.tsx
Normal file
223
client/src/components/Settings/Clients/Form/index.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
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, LOCAL_TIMEZONE_VALUE } 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';
|
||||
|
||||
const defaultFormValues: ClientForm = {
|
||||
ids: [{ name: '' }],
|
||||
name: '',
|
||||
tags: [],
|
||||
use_global_settings: false,
|
||||
filtering_enabled: false,
|
||||
safebrowsing_enabled: false,
|
||||
parental_enabled: false,
|
||||
ignore_querylog: false,
|
||||
ignore_statistics: false,
|
||||
blocked_services: {},
|
||||
safe_search: { enabled: false },
|
||||
upstreams: '',
|
||||
upstreams_cache_enabled: false,
|
||||
upstreams_cache_size: 0,
|
||||
use_global_blocked_services: false,
|
||||
blocked_services_schedule: {
|
||||
time_zone: LOCAL_TIMEZONE_VALUE,
|
||||
},
|
||||
};
|
||||
|
||||
type Props = {
|
||||
onSubmit: (values: ClientForm) => void;
|
||||
onClose: () => void;
|
||||
useGlobalSettings?: boolean;
|
||||
useGlobalServices?: boolean;
|
||||
blockedServicesSchedule?: {
|
||||
time_zone: string;
|
||||
};
|
||||
processingAdding: boolean;
|
||||
processingUpdating: boolean;
|
||||
tagsOptions: { label: string; value: string }[];
|
||||
initialValues?: ClientForm;
|
||||
};
|
||||
|
||||
export const Form = ({
|
||||
onSubmit,
|
||||
onClose,
|
||||
processingAdding,
|
||||
processingUpdating,
|
||||
tagsOptions,
|
||||
initialValues,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const methods = useForm<ClientForm>({
|
||||
defaultValues: {
|
||||
...defaultFormValues,
|
||||
...initialValues,
|
||||
},
|
||||
mode: 'onBlur',
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
reset,
|
||||
control,
|
||||
formState: { isSubmitting, isValid },
|
||||
} = methods;
|
||||
|
||||
const services = useSelector((store: RootState) => store?.services);
|
||||
const { safe_search } = initialValues;
|
||||
const safeSearchServices = { ...safe_search };
|
||||
delete safeSearchServices.enabled;
|
||||
|
||||
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(onSubmit)}>
|
||||
<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"
|
||||
data-testid="clients_name"
|
||||
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}
|
||||
data-testid="clients_tags"
|
||||
options={tagsOptions}
|
||||
className="basic-multi-select"
|
||||
classNamePrefix="select"
|
||||
isMulti
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</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" />,
|
||||
]}>
|
||||
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>
|
||||
);
|
||||
};
|
||||
28
client/src/components/Settings/Clients/Form/types.ts
Normal file
28
client/src/components/Settings/Clients/Form/types.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
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;
|
||||
};
|
||||
|
||||
export type SubmitClientForm = Omit<ClientForm, 'ids' | 'tags'> & {
|
||||
ids: string[];
|
||||
tags: string[];
|
||||
};
|
||||
@@ -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 {
|
||||
@@ -41,7 +52,7 @@ interface ModalProps {
|
||||
handleClose: (...args: unknown[]) => unknown;
|
||||
processingAdding: boolean;
|
||||
processingUpdating: boolean;
|
||||
tagsOptions: unknown[];
|
||||
tagsOptions: { label: string; value: string }[];
|
||||
t: (...args: unknown[]) => string;
|
||||
clientId?: string;
|
||||
}
|
||||
@@ -85,7 +96,7 @@ const Modal = ({
|
||||
<Form
|
||||
initialValues={{ ...initialData }}
|
||||
onSubmit={handleSubmit}
|
||||
handleClose={handleClose}
|
||||
onClose={handleClose}
|
||||
processingAdding={processingAdding}
|
||||
processingUpdating={processingUpdating}
|
||||
tagsOptions={tagsOptions}
|
||||
|
||||
@@ -1,28 +1,22 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import React, { useMemo } from 'react';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { renderInputField, toNumber } from '../../../helpers/form';
|
||||
import { FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
|
||||
import { UINT32_RANGE } from '../../../helpers/constants';
|
||||
import {
|
||||
validateIpv4,
|
||||
validateRequiredValue,
|
||||
validateIpv4RangeEnd,
|
||||
validateGatewaySubnetMask,
|
||||
validateIpForGatewaySubnetMask,
|
||||
validateIpv4,
|
||||
validateIpv4RangeEnd,
|
||||
validateNotInRange,
|
||||
validateRequiredValue,
|
||||
} from '../../../helpers/validators';
|
||||
import { RootState } from '../../../initialState';
|
||||
import { DhcpFormValues } from '.';
|
||||
import { Input } from '../../ui/Controls/Input';
|
||||
import { toNumber } from '../../../helpers/form';
|
||||
|
||||
interface FormDHCPv4Props {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
submitting: boolean;
|
||||
initialValues: { v4?: any };
|
||||
type FormDHCPv4Props = {
|
||||
processingConfig?: boolean;
|
||||
change: (field: string, value: any) => void;
|
||||
reset: () => void;
|
||||
ipv4placeholders?: {
|
||||
gateway_ip: string;
|
||||
subnet_mask: string;
|
||||
@@ -30,127 +24,179 @@ interface FormDHCPv4Props {
|
||||
range_end: string;
|
||||
lease_duration: string;
|
||||
};
|
||||
}
|
||||
interfaces: any;
|
||||
onSubmit?: (data: DhcpFormValues) => void;
|
||||
};
|
||||
|
||||
const FormDHCPv4 = ({ handleSubmit, submitting, processingConfig, ipv4placeholders }: FormDHCPv4Props) => {
|
||||
const FormDHCPv4 = ({ processingConfig, ipv4placeholders, interfaces, onSubmit }: FormDHCPv4Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const dhcp = useSelector((state: RootState) => state.form[FORM_NAME.DHCPv4], shallowEqual);
|
||||
const {
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
control,
|
||||
watch,
|
||||
} = useFormContext<DhcpFormValues>();
|
||||
|
||||
const interfaces = useSelector((state: RootState) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
|
||||
const interface_name = interfaces?.values?.interface_name;
|
||||
const interfaceName = watch('interface_name');
|
||||
const isInterfaceIncludesIpv4 = interfaces?.[interfaceName]?.ipv4_addresses;
|
||||
|
||||
const isInterfaceIncludesIpv4 = useSelector(
|
||||
(state: RootState) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
|
||||
);
|
||||
const formValues = watch('v4');
|
||||
const isEmptyConfig = !Object.values(formValues || {}).some(Boolean);
|
||||
const hasV4Errors = errors.v4 && Object.keys(errors.v4).length > 0;
|
||||
|
||||
const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {}).some(Boolean);
|
||||
|
||||
const invalid =
|
||||
dhcp?.syncErrors ||
|
||||
interfaces?.syncErrors ||
|
||||
!isInterfaceIncludesIpv4 ||
|
||||
isEmptyConfig ||
|
||||
submitting ||
|
||||
processingConfig;
|
||||
|
||||
const validateRequired = useCallback(
|
||||
(value) => {
|
||||
if (isEmptyConfig) {
|
||||
return undefined;
|
||||
}
|
||||
return validateRequiredValue(value);
|
||||
},
|
||||
[isEmptyConfig],
|
||||
);
|
||||
const isDisabled = useMemo(() => {
|
||||
return isSubmitting || hasV4Errors || processingConfig || !isInterfaceIncludesIpv4 || isEmptyConfig;
|
||||
}, [isSubmitting, hasV4Errors, processingConfig, isInterfaceIncludesIpv4, isEmptyConfig]);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_gateway_input')}</label>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="v4.gateway_ip"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.gateway_ip)}
|
||||
validate={[validateIpv4, validateRequired, validateNotInRange]}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: {
|
||||
ipv4: validateIpv4,
|
||||
required: (value) => (isEmptyConfig ? undefined : validateRequiredValue(value)),
|
||||
notInRange: validateNotInRange,
|
||||
},
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="v4_gateway_ip"
|
||||
label={t('dhcp_form_gateway_input')}
|
||||
placeholder={t(ipv4placeholders.gateway_ip)}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_subnet_input')}</label>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="v4.subnet_mask"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.subnet_mask)}
|
||||
validate={[validateRequired, validateGatewaySubnetMask]}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: {
|
||||
required: (value) => (isEmptyConfig ? undefined : validateRequiredValue(value)),
|
||||
subnet: validateGatewaySubnetMask,
|
||||
},
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="v4_subnet_mask"
|
||||
label={t('dhcp_form_subnet_input')}
|
||||
placeholder={t(ipv4placeholders.subnet_mask)}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<div className="form__group mb-0">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<label>{t('dhcp_form_range_title')}</label>
|
||||
</div>
|
||||
|
||||
<div className="col">
|
||||
<Field
|
||||
<Controller
|
||||
name="v4.range_start"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.range_start)}
|
||||
validate={[validateIpv4, validateIpForGatewaySubnetMask]}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: {
|
||||
ipv4: validateIpv4,
|
||||
gateway: validateIpForGatewaySubnetMask,
|
||||
},
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="v4_range_start"
|
||||
placeholder={t(ipv4placeholders.range_start)}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col">
|
||||
<Field
|
||||
<Controller
|
||||
name="v4.range_end"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.range_end)}
|
||||
validate={[validateIpv4, validateIpv4RangeEnd, validateIpForGatewaySubnetMask]}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: {
|
||||
ipv4: validateIpv4,
|
||||
rangeEnd: validateIpv4RangeEnd,
|
||||
gateway: validateIpForGatewaySubnetMask,
|
||||
},
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="v4_range_end"
|
||||
placeholder={t(ipv4placeholders.range_end)}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_lease_title')}</label>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="v4.lease_duration"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.lease_duration)}
|
||||
validate={validateRequired}
|
||||
normalize={toNumber}
|
||||
min={1}
|
||||
max={UINT32_RANGE.MAX}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: {
|
||||
required: (value) => (isEmptyConfig ? undefined : validateRequiredValue(value)),
|
||||
},
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="number"
|
||||
data-testid="v4_lease_duration"
|
||||
label={t('dhcp_form_lease_title')}
|
||||
placeholder={t(ipv4placeholders.lease_duration)}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
min={1}
|
||||
max={UINT32_RANGE.MAX}
|
||||
value={field.value ?? ''}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="btn-list">
|
||||
<button type="submit" className="btn btn-success btn-standard" disabled={invalid}>
|
||||
<button
|
||||
data-testid="v4_save"
|
||||
type="submit"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={isDisabled}>
|
||||
{t('save_config')}
|
||||
</button>
|
||||
</div>
|
||||
@@ -158,9 +204,4 @@ const FormDHCPv4 = ({ handleSubmit, submitting, processingConfig, ipv4placeholde
|
||||
);
|
||||
};
|
||||
|
||||
export default reduxForm<
|
||||
Record<string, any>,
|
||||
Omit<FormDHCPv4Props, 'submitting' | 'handleSubmit' | 'reset' | 'change'>
|
||||
>({
|
||||
form: FORM_NAME.DHCPv4,
|
||||
})(FormDHCPv4);
|
||||
export default FormDHCPv4;
|
||||
|
||||
@@ -1,93 +1,92 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import React, { useMemo } from 'react';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { renderInputField, toNumber } from '../../../helpers/form';
|
||||
import { FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
|
||||
import { UINT32_RANGE } from '../../../helpers/constants';
|
||||
import { validateIpv6, validateRequiredValue } from '../../../helpers/validators';
|
||||
import { RootState } from '../../../initialState';
|
||||
import { DhcpFormValues } from '.';
|
||||
import { Input } from '../../ui/Controls/Input';
|
||||
import { toNumber } from '../../../helpers/form';
|
||||
|
||||
interface FormDHCPv6Props {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
submitting: boolean;
|
||||
initialValues: {
|
||||
v6?: any;
|
||||
};
|
||||
change: (field: string, value: any) => void;
|
||||
reset: () => void;
|
||||
type FormDHCPv6Props = {
|
||||
processingConfig?: boolean;
|
||||
ipv6placeholders?: {
|
||||
range_start: string;
|
||||
range_end: string;
|
||||
lease_duration: string;
|
||||
};
|
||||
}
|
||||
interfaces: any;
|
||||
onSubmit?: (data: DhcpFormValues) => Promise<void> | void;
|
||||
};
|
||||
|
||||
const FormDHCPv6 = ({ handleSubmit, submitting, processingConfig, ipv6placeholders }: FormDHCPv6Props) => {
|
||||
const FormDHCPv6 = ({ processingConfig, ipv6placeholders, interfaces, onSubmit }: FormDHCPv6Props) => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
handleSubmit,
|
||||
formState: { isSubmitting, isValid },
|
||||
control,
|
||||
watch,
|
||||
} = useFormContext<DhcpFormValues>();
|
||||
|
||||
const dhcp = useSelector((state: RootState) => state.form[FORM_NAME.DHCPv6], shallowEqual);
|
||||
const interfaceName = watch('interface_name');
|
||||
const isInterfaceIncludesIpv6 = interfaces?.[interfaceName]?.ipv6_addresses;
|
||||
|
||||
const interfaces = useSelector((state: RootState) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
|
||||
const interface_name = interfaces?.values?.interface_name;
|
||||
const formValues = watch('v6');
|
||||
const isEmptyConfig = !Object.values(formValues || {}).some(Boolean);
|
||||
|
||||
const isInterfaceIncludesIpv6 = useSelector(
|
||||
(state: RootState) => !!state.dhcp?.interfaces?.[interface_name]?.ipv6_addresses,
|
||||
);
|
||||
|
||||
const isEmptyConfig = !Object.values(dhcp?.values?.v6 ?? {}).some(Boolean);
|
||||
|
||||
const invalid =
|
||||
dhcp?.syncErrors ||
|
||||
interfaces?.syncErrors ||
|
||||
!isInterfaceIncludesIpv6 ||
|
||||
isEmptyConfig ||
|
||||
submitting ||
|
||||
processingConfig;
|
||||
|
||||
const validateRequired = useCallback(
|
||||
(value) => {
|
||||
if (isEmptyConfig) {
|
||||
return undefined;
|
||||
}
|
||||
return validateRequiredValue(value);
|
||||
},
|
||||
[isEmptyConfig],
|
||||
);
|
||||
const isDisabled = useMemo(() => {
|
||||
return isSubmitting || !isValid || processingConfig || !isInterfaceIncludesIpv6 || isEmptyConfig;
|
||||
}, [isSubmitting, isValid, processingConfig, isInterfaceIncludesIpv6, isEmptyConfig]);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<div className="form__group mb-0">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<label>{t('dhcp_form_range_title')}</label>
|
||||
</div>
|
||||
|
||||
<div className="col">
|
||||
<Field
|
||||
<Controller
|
||||
name="v6.range_start"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv6placeholders.range_start)}
|
||||
validate={[validateIpv6, validateRequired]}
|
||||
disabled={!isInterfaceIncludesIpv6}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: isInterfaceIncludesIpv6
|
||||
? {
|
||||
ipv6: validateIpv6,
|
||||
required: validateRequiredValue,
|
||||
}
|
||||
: undefined,
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="v6_range_start"
|
||||
placeholder={t(ipv6placeholders.range_start)}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isInterfaceIncludesIpv6}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col">
|
||||
<Field
|
||||
<Controller
|
||||
name="v6.range_end"
|
||||
component="input"
|
||||
type="text"
|
||||
className="form-control disabled cursor--not-allowed"
|
||||
placeholder={t(ipv6placeholders.range_end)}
|
||||
value={t(ipv6placeholders.range_end)}
|
||||
disabled
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="v6_range_end"
|
||||
placeholder={t(ipv6placeholders.range_end)}
|
||||
error={fieldState.error?.message}
|
||||
disabled
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,25 +96,43 @@ const FormDHCPv6 = ({ handleSubmit, submitting, processingConfig, ipv6placeholde
|
||||
|
||||
<div className="row">
|
||||
<div className="col-lg-6 form__group form__group--settings">
|
||||
<label>{t('dhcp_form_lease_title')}</label>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="v6.lease_duration"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={t(ipv6placeholders.lease_duration)}
|
||||
validate={validateRequired}
|
||||
normalizeOnBlur={toNumber}
|
||||
min={1}
|
||||
max={UINT32_RANGE.MAX}
|
||||
disabled={!isInterfaceIncludesIpv6}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: isInterfaceIncludesIpv6
|
||||
? {
|
||||
required: validateRequiredValue,
|
||||
}
|
||||
: undefined,
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="number"
|
||||
data-testid="v6_lease_duration"
|
||||
label={t('dhcp_form_lease_title')}
|
||||
placeholder={t(ipv6placeholders.lease_duration)}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isInterfaceIncludesIpv6}
|
||||
min={1}
|
||||
max={UINT32_RANGE.MAX}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="btn-list">
|
||||
<button type="submit" className="btn btn-success btn-standard" disabled={invalid}>
|
||||
<button
|
||||
data-testid="v6_save"
|
||||
type="submit"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={isDisabled}>
|
||||
{t('save_config')}
|
||||
</button>
|
||||
</div>
|
||||
@@ -123,9 +140,4 @@ const FormDHCPv6 = ({ handleSubmit, submitting, processingConfig, ipv6placeholde
|
||||
);
|
||||
};
|
||||
|
||||
export default reduxForm<
|
||||
Record<string, any>,
|
||||
Omit<FormDHCPv6Props, 'handleSubmit' | 'change' | 'submitting' | 'reset'>
|
||||
>({
|
||||
form: FORM_NAME.DHCPv6,
|
||||
})(FormDHCPv6);
|
||||
export default FormDHCPv6;
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import React from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
|
||||
import { renderSelectField } from '../../../helpers/form';
|
||||
import { validateRequiredValue } from '../../../helpers/validators';
|
||||
import { FORM_NAME } from '../../../helpers/constants';
|
||||
import { RootState } from '../../../initialState';
|
||||
import { DhcpFormValues } from '.';
|
||||
|
||||
const renderInterfaces = (interfaces: any) =>
|
||||
Object.keys(interfaces).map((item) => {
|
||||
@@ -47,13 +45,13 @@ const getInterfaceValues = ({ gateway_ip, hardware_address, ip_addresses }: any)
|
||||
},
|
||||
];
|
||||
|
||||
interface renderInterfaceValuesProps {
|
||||
interface RenderInterfaceValuesProps {
|
||||
gateway_ip: string;
|
||||
hardware_address: string;
|
||||
ip_addresses: string[];
|
||||
}
|
||||
|
||||
const renderInterfaceValues = ({ gateway_ip, hardware_address, ip_addresses }: renderInterfaceValuesProps) => (
|
||||
const renderInterfaceValues = ({ gateway_ip, hardware_address, ip_addresses }: RenderInterfaceValuesProps) => (
|
||||
<div className="d-flex align-items-end dhcp__interfaces-info">
|
||||
<ul className="list-unstyled m-0">
|
||||
{getInterfaceValues({
|
||||
@@ -77,11 +75,15 @@ const renderInterfaceValues = ({ gateway_ip, hardware_address, ip_addresses }: r
|
||||
|
||||
const Interfaces = () => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
register,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useFormContext<DhcpFormValues>();
|
||||
|
||||
const { processingInterfaces, interfaces, enabled } = useSelector((store: RootState) => store.dhcp, shallowEqual);
|
||||
const { processingInterfaces, interfaces, enabled } = useSelector((store: RootState) => store.dhcp);
|
||||
|
||||
const interface_name =
|
||||
useSelector((store: RootState) => store.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name);
|
||||
const interface_name = watch('interface_name');
|
||||
|
||||
if (processingInterfaces || !interfaces) {
|
||||
return null;
|
||||
@@ -92,27 +94,34 @@ const Interfaces = () => {
|
||||
return (
|
||||
<div className="row dhcp__interfaces">
|
||||
<div className="col col__dhcp">
|
||||
<Field
|
||||
name="interface_name"
|
||||
component={renderSelectField}
|
||||
<label htmlFor="interface_name" className="form__label">
|
||||
{t('dhcp_interface_select')}
|
||||
</label>
|
||||
<select
|
||||
id="interface_name"
|
||||
data-testid="interface_name"
|
||||
className="form-control custom-select pl-4 col-md"
|
||||
validate={[validateRequiredValue]}
|
||||
label="dhcp_interface_select">
|
||||
disabled={enabled}
|
||||
{...register('interface_name', {
|
||||
validate: validateRequiredValue,
|
||||
})}>
|
||||
<option value="" disabled={enabled}>
|
||||
{t('dhcp_interface_select')}
|
||||
</option>
|
||||
{renderInterfaces(interfaces)}
|
||||
</Field>
|
||||
</select>
|
||||
{errors.interface_name && (
|
||||
<div className="form__message form__message--error">{t(errors.interface_name.message)}</div>
|
||||
)}
|
||||
</div>
|
||||
{interfaceValue && renderInterfaceValues({
|
||||
gateway_ip: interfaceValue.gateway_ip,
|
||||
hardware_address: interfaceValue.hardware_address,
|
||||
ip_addresses: interfaceValue.ip_addresses
|
||||
})}
|
||||
{interfaceValue &&
|
||||
renderInterfaceValues({
|
||||
gateway_ip: interfaceValue.gateway_ip,
|
||||
hardware_address: interfaceValue.hardware_address,
|
||||
ip_addresses: interfaceValue.ip_addresses,
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default reduxForm({
|
||||
form: FORM_NAME.DHCP_INTERFACES,
|
||||
})(Interfaces);
|
||||
export default Interfaces;
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
|
||||
|
||||
import { renderInputField, normalizeMac } from '../../../../helpers/form';
|
||||
import { normalizeMac } from '../../../../helpers/form';
|
||||
import {
|
||||
validateIpv4,
|
||||
validateMac,
|
||||
@@ -12,12 +11,12 @@ import {
|
||||
validateIpv4InCidr,
|
||||
validateIpGateway,
|
||||
} from '../../../../helpers/validators';
|
||||
import { FORM_NAME } from '../../../../helpers/constants';
|
||||
|
||||
import { toggleLeaseModal } from '../../../../actions';
|
||||
import { RootState } from '../../../../initialState';
|
||||
import { Input } from '../../../ui/Controls/Input';
|
||||
|
||||
interface FormStaticLeaseProps {
|
||||
type Props = {
|
||||
initialValues?: {
|
||||
mac?: string;
|
||||
ip?: string;
|
||||
@@ -25,63 +24,91 @@ interface FormStaticLeaseProps {
|
||||
cidr?: string;
|
||||
gatewayIp?: string;
|
||||
};
|
||||
pristine: boolean;
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
reset: () => void;
|
||||
submitting: boolean;
|
||||
processingAdding?: boolean;
|
||||
cidr?: string;
|
||||
isEdit?: boolean;
|
||||
}
|
||||
onSubmit: (data: any) => void;
|
||||
};
|
||||
|
||||
const Form = ({ handleSubmit, reset, pristine, submitting, processingAdding, cidr, isEdit }: FormStaticLeaseProps) => {
|
||||
export const Form = ({ initialValues, processingAdding, cidr, isEdit, onSubmit }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const dynamicLease = useSelector((store: RootState) => store.dhcp.leaseModalConfig, shallowEqual);
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
formState: { isSubmitting, isDirty },
|
||||
} = useForm({
|
||||
defaultValues: initialValues,
|
||||
mode: 'onBlur',
|
||||
});
|
||||
|
||||
const onClick = () => {
|
||||
reset();
|
||||
dispatch(toggleLeaseModal());
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="modal-body">
|
||||
<div className="form__group">
|
||||
<Field
|
||||
id="mac"
|
||||
<Controller
|
||||
name="mac"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_mac')}
|
||||
normalize={normalizeMac}
|
||||
validate={[validateRequiredValue, validateMac]}
|
||||
disabled={isEdit}
|
||||
control={control}
|
||||
rules={{ validate: { required: validateRequiredValue, mac: validateMac } }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="static_lease_mac"
|
||||
placeholder={t('form_enter_mac')}
|
||||
disabled={isEdit}
|
||||
error={fieldState.error?.message}
|
||||
onChange={(e) => field.onChange(normalizeMac(e.target.value))}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form__group">
|
||||
<Field
|
||||
id="ip"
|
||||
<Controller
|
||||
name="ip"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_subnet_ip', { cidr })}
|
||||
validate={[validateRequiredValue, validateIpv4, validateIpv4InCidr, validateIpGateway]}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: {
|
||||
required: validateRequiredValue,
|
||||
ipv4: validateIpv4,
|
||||
inCidr: validateIpv4InCidr,
|
||||
gateway: validateIpGateway,
|
||||
},
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="static_lease_ip"
|
||||
error={fieldState.error?.message}
|
||||
placeholder={t('form_enter_subnet_ip', { cidr })}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form__group">
|
||||
<Field
|
||||
id="hostname"
|
||||
<Controller
|
||||
name="hostname"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_hostname')}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
data-testid="static_lease_hostname"
|
||||
error={fieldState.error?.message}
|
||||
placeholder={t('form_enter_hostname')}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,16 +117,18 @@ const Form = ({ handleSubmit, reset, pristine, submitting, processingAdding, cid
|
||||
<div className="btn-list">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="static_lease_cancel"
|
||||
className="btn btn-secondary btn-standard"
|
||||
disabled={submitting}
|
||||
disabled={isSubmitting}
|
||||
onClick={onClick}>
|
||||
<Trans>cancel_btn</Trans>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="static_lease_save"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={submitting || processingAdding || (pristine && !dynamicLease)}>
|
||||
disabled={isSubmitting || processingAdding || (!isDirty && !dynamicLease)}>
|
||||
<Trans>save_btn</Trans>
|
||||
</button>
|
||||
</div>
|
||||
@@ -107,8 +136,3 @@ const Form = ({ handleSubmit, reset, pristine, submitting, processingAdding, cid
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default reduxForm<
|
||||
Record<string, any>,
|
||||
Omit<FormStaticLeaseProps, 'submitting' | 'handleSubmit' | 'reset' | 'pristine'>
|
||||
>({ form: FORM_NAME.LEASE })(Form);
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Trans, withTranslation } from 'react-i18next';
|
||||
import ReactModal from 'react-modal';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import Form from './Form';
|
||||
import { Form } from './Form';
|
||||
|
||||
import { toggleLeaseModal } from '../../../../actions';
|
||||
import { MODAL_TYPE } from '../../../../helpers/constants';
|
||||
|
||||
@@ -4,8 +4,8 @@ import { Trans, useTranslation } from 'react-i18next';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { destroy } from 'redux-form';
|
||||
import { DHCP_DESCRIPTION_PLACEHOLDERS, DHCP_FORM_NAMES, STATUS_RESPONSE, FORM_NAME } from '../../../helpers/constants';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { DHCP_DESCRIPTION_PLACEHOLDERS, STATUS_RESPONSE } from '../../../helpers/constants';
|
||||
|
||||
import Leases from './Leases';
|
||||
|
||||
@@ -40,6 +40,55 @@ import {
|
||||
import './index.css';
|
||||
import { RootState } from '../../../initialState';
|
||||
|
||||
type IPv4FormValues = {
|
||||
gateway_ip?: string;
|
||||
subnet_mask?: string;
|
||||
range_start?: string;
|
||||
range_end?: string;
|
||||
lease_duration?: number;
|
||||
}
|
||||
|
||||
type IPv6FormValues = {
|
||||
range_start?: string;
|
||||
range_end?: string;
|
||||
lease_duration?: number;
|
||||
}
|
||||
|
||||
const getDefaultV4Values = (v4: IPv4FormValues) => {
|
||||
const emptyForm = Object.entries(v4).every(
|
||||
([key, value]) => key === 'lease_duration' || value === ''
|
||||
);
|
||||
|
||||
if (emptyForm) {
|
||||
return {
|
||||
...v4,
|
||||
lease_duration: undefined,
|
||||
}
|
||||
}
|
||||
|
||||
return v4;
|
||||
}
|
||||
|
||||
export type DhcpFormValues = {
|
||||
v4?: IPv4FormValues;
|
||||
v6?: IPv6FormValues;
|
||||
interface_name?: string;
|
||||
};
|
||||
|
||||
const DEFAULT_V4_VALUES = {
|
||||
gateway_ip: '',
|
||||
subnet_mask: '',
|
||||
range_start: '',
|
||||
range_end: '',
|
||||
lease_duration: undefined,
|
||||
};
|
||||
|
||||
const DEFAULT_V6_VALUES = {
|
||||
range_start: '',
|
||||
range_end: '',
|
||||
lease_duration: undefined,
|
||||
};
|
||||
|
||||
const Dhcp = () => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
@@ -65,12 +114,21 @@ const Dhcp = () => {
|
||||
modalType,
|
||||
} = useSelector((state: RootState) => state.dhcp, shallowEqual);
|
||||
|
||||
const interface_name =
|
||||
useSelector((state: RootState) => state.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name);
|
||||
const isInterfaceIncludesIpv4 =
|
||||
useSelector((state: RootState) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses);
|
||||
const methods = useForm<DhcpFormValues>({
|
||||
mode: 'onBlur',
|
||||
defaultValues: {
|
||||
v4: getDefaultV4Values(v4),
|
||||
v6,
|
||||
interface_name: interfaceName || '',
|
||||
},
|
||||
});
|
||||
const { watch, reset } = methods;
|
||||
|
||||
const dhcp = useSelector((state: RootState) => state.form[FORM_NAME.DHCPv4], shallowEqual);
|
||||
const interface_name = watch('interface_name');
|
||||
const isInterfaceIncludesIpv4 = useSelector(
|
||||
(state: RootState) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
|
||||
);
|
||||
const ipv4Config = watch('v4');
|
||||
|
||||
const [ipv4placeholders, setIpv4Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv4);
|
||||
const [ipv6placeholders, setIpv6Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv6);
|
||||
@@ -85,6 +143,22 @@ const Dhcp = () => {
|
||||
}
|
||||
}, [dhcp_available]);
|
||||
|
||||
useEffect(() => {
|
||||
if (v4 || v6 || interfaceName) {
|
||||
reset({
|
||||
v4: {
|
||||
...DEFAULT_V4_VALUES,
|
||||
...getDefaultV4Values(v4),
|
||||
},
|
||||
v6: {
|
||||
...DEFAULT_V6_VALUES,
|
||||
...v6,
|
||||
},
|
||||
interface_name: interfaceName || '',
|
||||
});
|
||||
}
|
||||
}, [v4, v6, interfaceName, reset]);
|
||||
|
||||
useEffect(() => {
|
||||
const [ipv4] = interfaces?.[interface_name]?.ipv4_addresses ?? [];
|
||||
const [ipv6] = interfaces?.[interface_name]?.ipv6_addresses ?? [];
|
||||
@@ -103,13 +177,17 @@ const Dhcp = () => {
|
||||
const clear = () => {
|
||||
// eslint-disable-next-line no-alert
|
||||
if (window.confirm(t('dhcp_reset'))) {
|
||||
Object.values(DHCP_FORM_NAMES).forEach((formName: any) => dispatch(destroy(formName)));
|
||||
reset({
|
||||
v4: DEFAULT_V4_VALUES,
|
||||
v6: DEFAULT_V6_VALUES,
|
||||
interface_name: '',
|
||||
});
|
||||
dispatch(resetDhcp());
|
||||
dispatch(getDhcpStatus());
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (values: any) => {
|
||||
const handleSubmit = (values: DhcpFormValues) => {
|
||||
dispatch(
|
||||
setDhcpConfig({
|
||||
interface_name,
|
||||
@@ -130,12 +208,7 @@ const Dhcp = () => {
|
||||
const enteredSomeValue = enteredSomeV4Value || enteredSomeV6Value || interfaceName;
|
||||
|
||||
const getToggleDhcpButton = () => {
|
||||
const filledConfig =
|
||||
interface_name &&
|
||||
(Object.values(v4)
|
||||
|
||||
.every(Boolean) ||
|
||||
Object.values(v6).every(Boolean));
|
||||
const filledConfig = interface_name && (Object.values(v4).every(Boolean) || Object.values(v6).every(Boolean));
|
||||
|
||||
const className = classNames('btn btn-sm', {
|
||||
'btn-gray': enabled,
|
||||
@@ -173,9 +246,6 @@ const Dhcp = () => {
|
||||
|
||||
const toggleModal = () => dispatch(toggleLeaseModal());
|
||||
|
||||
const initialV4 = enteredSomeV4Value ? v4 : {};
|
||||
const initialV6 = enteredSomeV6Value ? v6 : {};
|
||||
|
||||
if (processing || processingInterfaces) {
|
||||
return <Loading />;
|
||||
}
|
||||
@@ -196,19 +266,13 @@ const Dhcp = () => {
|
||||
|
||||
const toggleDhcpButton = getToggleDhcpButton();
|
||||
|
||||
const inputtedIPv4values = dhcp?.values?.v4?.gateway_ip && dhcp?.values?.v4?.subnet_mask;
|
||||
const inputtedIPv4values = ipv4Config.gateway_ip && ipv4Config.subnet_mask;
|
||||
|
||||
const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {}).some(Boolean);
|
||||
const isEmptyConfig = !Object.values(ipv4Config).some(Boolean);
|
||||
const disabledLeasesButton = Boolean(
|
||||
dhcp?.syncErrors ||
|
||||
!isInterfaceIncludesIpv4 ||
|
||||
isEmptyConfig ||
|
||||
processingConfig ||
|
||||
!inputtedIPv4values,
|
||||
!isInterfaceIncludesIpv4 || isEmptyConfig || processingConfig || !inputtedIPv4values,
|
||||
);
|
||||
const cidr = inputtedIPv4values
|
||||
? `${dhcp?.values?.v4?.gateway_ip}/${subnetMaskToBitMask(dhcp?.values?.v4?.subnet_mask)}`
|
||||
: '';
|
||||
const cidr = inputtedIPv4values ? `${ipv4Config.gateway_ip}/${subnetMaskToBitMask(ipv4Config.subnet_mask)}` : '';
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -246,29 +310,30 @@ const Dhcp = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Interfaces initialValues={{ interface_name: interfaceName }} />
|
||||
<FormProvider {...methods}>
|
||||
<Interfaces />
|
||||
<Card title={t('dhcp_ipv4_settings')} bodyType="card-body box-body--settings">
|
||||
<div>
|
||||
<FormDHCPv4
|
||||
onSubmit={handleSubmit}
|
||||
processingConfig={processingConfig}
|
||||
ipv4placeholders={ipv4placeholders}
|
||||
interfaces={interfaces}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title={t('dhcp_ipv6_settings')} bodyType="card-body box-body--settings">
|
||||
<div>
|
||||
<FormDHCPv6
|
||||
onSubmit={handleSubmit}
|
||||
processingConfig={processingConfig}
|
||||
ipv6placeholders={ipv6placeholders}
|
||||
interfaces={interfaces}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</FormProvider>
|
||||
|
||||
<Card title={t('dhcp_ipv4_settings')} bodyType="card-body box-body--settings">
|
||||
<div>
|
||||
<FormDHCPv4
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={{ v4: initialV4 }}
|
||||
processingConfig={processingConfig}
|
||||
ipv4placeholders={ipv4placeholders}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card title={t('dhcp_ipv6_settings')} bodyType="card-body box-body--settings">
|
||||
<div>
|
||||
<FormDHCPv6
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={{ v6: initialV6 }}
|
||||
processingConfig={processingConfig}
|
||||
ipv6placeholders={ipv6placeholders}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
{enabled && (
|
||||
<Card title={t('dhcp_leases')} bodyType="card-body box-body--settings">
|
||||
<div className="row">
|
||||
@@ -290,7 +355,7 @@ const Dhcp = () => {
|
||||
processingDeleting={processingDeleting}
|
||||
processingUpdating={processingUpdating}
|
||||
cidr={cidr}
|
||||
gatewayIp={dhcp?.values?.v4?.gateway_ip}
|
||||
gatewayIp={ipv4Config.gateway_ip}
|
||||
/>
|
||||
|
||||
<div className="btn-list mt-2">
|
||||
|
||||
@@ -1,118 +1,140 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
|
||||
import { Field, reduxForm, formValueSelector } from 'redux-form';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
import i18next from 'i18next';
|
||||
import { CLIENT_ID_LINK } from '../../../../helpers/constants';
|
||||
import { removeEmptyLines, trimMultilineString } from '../../../../helpers/helpers';
|
||||
import { Textarea } from '../../../ui/Controls/Textarea';
|
||||
|
||||
import { renderTextareaField } from '../../../../helpers/form';
|
||||
import { trimMultilineString, removeEmptyLines } from '../../../../helpers/helpers';
|
||||
import { CLIENT_ID_LINK, FORM_NAME } from '../../../../helpers/constants';
|
||||
type FormData = {
|
||||
allowed_clients: string;
|
||||
disallowed_clients: string;
|
||||
blocked_hosts: string;
|
||||
};
|
||||
|
||||
const fields = [
|
||||
const fields: {
|
||||
id: keyof FormData;
|
||||
title: string;
|
||||
subtitle: ReactNode;
|
||||
normalizeOnBlur: (value: string) => string;
|
||||
}[] = [
|
||||
{
|
||||
id: 'allowed_clients',
|
||||
title: 'access_allowed_title',
|
||||
subtitle: 'access_allowed_desc',
|
||||
title: i18next.t('access_allowed_title'),
|
||||
subtitle: (
|
||||
<Trans
|
||||
components={{
|
||||
a: <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer" />,
|
||||
}}>
|
||||
access_allowed_desc
|
||||
</Trans>
|
||||
),
|
||||
normalizeOnBlur: removeEmptyLines,
|
||||
},
|
||||
{
|
||||
id: 'disallowed_clients',
|
||||
title: 'access_disallowed_title',
|
||||
subtitle: 'access_disallowed_desc',
|
||||
title: i18next.t('access_disallowed_title'),
|
||||
subtitle: (
|
||||
<Trans
|
||||
components={{
|
||||
a: <a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer" />,
|
||||
}}>
|
||||
access_disallowed_desc
|
||||
</Trans>
|
||||
),
|
||||
normalizeOnBlur: trimMultilineString,
|
||||
},
|
||||
{
|
||||
id: 'blocked_hosts',
|
||||
title: 'access_blocked_title',
|
||||
subtitle: 'access_blocked_desc',
|
||||
title: i18next.t('access_blocked_title'),
|
||||
subtitle: i18next.t('access_blocked_desc'),
|
||||
normalizeOnBlur: removeEmptyLines,
|
||||
},
|
||||
];
|
||||
|
||||
interface FormProps {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
submitting: boolean;
|
||||
invalid: boolean;
|
||||
initialValues: object;
|
||||
type FormProps = {
|
||||
initialValues?: {
|
||||
allowed_clients?: string;
|
||||
disallowed_clients?: string;
|
||||
blocked_hosts?: string;
|
||||
};
|
||||
onSubmit: (data: FormData) => void;
|
||||
processingSet: boolean;
|
||||
t: (...args: unknown[]) => string;
|
||||
textarea?: boolean;
|
||||
allowedClients?: string;
|
||||
}
|
||||
};
|
||||
|
||||
interface renderFieldProps {
|
||||
id?: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
disabled?: boolean;
|
||||
processingSet?: boolean;
|
||||
normalizeOnBlur?: (...args: unknown[]) => unknown;
|
||||
}
|
||||
const Form = ({ initialValues, onSubmit, processingSet }: FormProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
let Form = (props: FormProps) => {
|
||||
const { allowedClients, handleSubmit, submitting, invalid, processingSet } = props;
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { isSubmitting, isDirty },
|
||||
} = useForm<FormData>({
|
||||
mode: 'onBlur',
|
||||
defaultValues: {
|
||||
allowed_clients: initialValues?.allowed_clients || '',
|
||||
disallowed_clients: initialValues?.disallowed_clients || '',
|
||||
blocked_hosts: initialValues?.blocked_hosts || '',
|
||||
},
|
||||
});
|
||||
|
||||
const allowedClients = watch('allowed_clients');
|
||||
|
||||
const renderField = ({
|
||||
id,
|
||||
title,
|
||||
subtitle,
|
||||
disabled = false,
|
||||
processingSet,
|
||||
normalizeOnBlur,
|
||||
}: renderFieldProps) => (
|
||||
<div key={id} className="form__group mb-5">
|
||||
<label className="form__label form__label--with-desc" htmlFor={id}>
|
||||
<Trans>{title}</Trans>
|
||||
}: {
|
||||
id: keyof FormData;
|
||||
title: string;
|
||||
subtitle: ReactNode;
|
||||
normalizeOnBlur: (value: string) => string;
|
||||
}) => {
|
||||
const disabled = allowedClients && id === 'disallowed_clients';
|
||||
|
||||
{disabled && (
|
||||
<>
|
||||
<span> </span>(<Trans>disabled</Trans>)
|
||||
</>
|
||||
)}
|
||||
</label>
|
||||
return (
|
||||
<div key={id} className="form__group mb-5">
|
||||
<label className="form__label form__label--with-desc" htmlFor={id}>
|
||||
{title}
|
||||
{disabled && <> ({t('disabled')})</>}
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans
|
||||
components={{
|
||||
a: (
|
||||
<a href={CLIENT_ID_LINK} target="_blank" rel="noopener noreferrer">
|
||||
text
|
||||
</a>
|
||||
),
|
||||
}}>
|
||||
{subtitle}
|
||||
</Trans>
|
||||
<div className="form__desc form__desc--top">{subtitle}</div>
|
||||
|
||||
<Controller
|
||||
name={id}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
id={id}
|
||||
data-testid={id}
|
||||
disabled={disabled || processingSet}
|
||||
onBlur={(e) => {
|
||||
field.onChange(normalizeOnBlur(e.target.value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
id={id}
|
||||
name={id}
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea font-monospace"
|
||||
disabled={disabled || processingSet}
|
||||
normalizeOnBlur={normalizeOnBlur}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
{fields.map((f) => {
|
||||
return renderField({
|
||||
...f,
|
||||
disabled: allowedClients && f.id === 'disallowed_clients' || false
|
||||
});
|
||||
})}
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
{fields.map((f) => renderField(f))}
|
||||
|
||||
<div className="card-actions">
|
||||
<div className="btn-list">
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="access_save"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={submitting || invalid || processingSet}>
|
||||
<Trans>save_config</Trans>
|
||||
disabled={isSubmitting || !isDirty || processingSet}>
|
||||
{t('save_config')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,18 +142,4 @@ let Form = (props: FormProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
const selector = formValueSelector(FORM_NAME.ACCESS);
|
||||
|
||||
Form = connect((state) => {
|
||||
const allowedClients = selector(state, 'allowed_clients');
|
||||
return {
|
||||
allowedClients,
|
||||
};
|
||||
})(Form);
|
||||
|
||||
export default flow([
|
||||
withTranslation(),
|
||||
reduxForm({
|
||||
form: FORM_NAME.ACCESS,
|
||||
}),
|
||||
])(Form);
|
||||
export default Form;
|
||||
|
||||
@@ -1,52 +1,72 @@
|
||||
import React from 'react';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { renderInputField, toNumber, CheckboxField } from '../../../../helpers/form';
|
||||
import { CACHE_CONFIG_FIELDS, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
|
||||
|
||||
import { replaceZeroWithEmptyString } from '../../../../helpers/helpers';
|
||||
import i18next from 'i18next';
|
||||
import { clearDnsCache } from '../../../../actions/dnsConfig';
|
||||
import { CACHE_CONFIG_FIELDS, UINT32_RANGE } from '../../../../helpers/constants';
|
||||
import { replaceZeroWithEmptyString } from '../../../../helpers/helpers';
|
||||
import { RootState } from '../../../../initialState';
|
||||
import { Checkbox } from '../../../ui/Controls/Checkbox';
|
||||
|
||||
const INPUTS_FIELDS = [
|
||||
{
|
||||
name: CACHE_CONFIG_FIELDS.cache_size,
|
||||
title: 'cache_size',
|
||||
description: 'cache_size_desc',
|
||||
placeholder: 'enter_cache_size',
|
||||
title: i18next.t('cache_size'),
|
||||
description: i18next.t('cache_size_desc'),
|
||||
placeholder: i18next.t('enter_cache_size'),
|
||||
},
|
||||
{
|
||||
name: CACHE_CONFIG_FIELDS.cache_ttl_min,
|
||||
title: 'cache_ttl_min_override',
|
||||
description: 'cache_ttl_min_override_desc',
|
||||
placeholder: 'enter_cache_ttl_min_override',
|
||||
title: i18next.t('cache_ttl_min_override'),
|
||||
description: i18next.t('cache_ttl_min_override_desc'),
|
||||
placeholder: i18next.t('enter_cache_ttl_min_override'),
|
||||
},
|
||||
{
|
||||
name: CACHE_CONFIG_FIELDS.cache_ttl_max,
|
||||
title: 'cache_ttl_max_override',
|
||||
description: 'cache_ttl_max_override_desc',
|
||||
placeholder: 'enter_cache_ttl_max_override',
|
||||
title: i18next.t('cache_ttl_max_override'),
|
||||
description: i18next.t('cache_ttl_max_override_desc'),
|
||||
placeholder: i18next.t('enter_cache_ttl_max_override'),
|
||||
},
|
||||
];
|
||||
|
||||
interface CacheFormProps {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
submitting: boolean;
|
||||
invalid: boolean;
|
||||
}
|
||||
type FormData = {
|
||||
cache_size: number;
|
||||
cache_ttl_min: number;
|
||||
cache_ttl_max: number;
|
||||
cache_optimistic: boolean;
|
||||
};
|
||||
|
||||
const Form = ({ handleSubmit, submitting, invalid }: CacheFormProps) => {
|
||||
type CacheFormProps = {
|
||||
initialValues?: Partial<FormData>;
|
||||
onSubmit: (data: FormData) => void;
|
||||
};
|
||||
|
||||
const Form = ({ initialValues, onSubmit }: CacheFormProps) => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { processingSetConfig } = useSelector((state: RootState) => state.dnsConfig, shallowEqual);
|
||||
const { cache_ttl_max, cache_ttl_min } = useSelector(
|
||||
(state: RootState) => state.form[FORM_NAME.CACHE].values,
|
||||
shallowEqual,
|
||||
);
|
||||
const { processingSetConfig } = useSelector((state: RootState) => state.dnsConfig);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
control,
|
||||
formState: { isSubmitting, isDirty },
|
||||
} = useForm<FormData>({
|
||||
mode: 'onBlur',
|
||||
defaultValues: {
|
||||
cache_size: initialValues?.cache_size || 0,
|
||||
cache_ttl_min: initialValues?.cache_ttl_min || 0,
|
||||
cache_ttl_max: initialValues?.cache_ttl_max || 0,
|
||||
cache_optimistic: initialValues?.cache_optimistic || false,
|
||||
},
|
||||
});
|
||||
|
||||
const cache_ttl_min = watch('cache_ttl_min');
|
||||
const cache_ttl_max = watch('cache_ttl_max');
|
||||
|
||||
const minExceedsMax = cache_ttl_min > 0 && cache_ttl_max > 0 && cache_ttl_min > cache_ttl_max;
|
||||
|
||||
@@ -57,29 +77,30 @@ const Form = ({ handleSubmit, submitting, invalid }: CacheFormProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
{INPUTS_FIELDS.map(({ name, title, description, placeholder }) => (
|
||||
<div className="col-12" key={name}>
|
||||
<div className="col-12 col-md-7 p-0">
|
||||
<div className="form__group form__group--settings">
|
||||
<label htmlFor={name} className="form__label form__label--with-desc">
|
||||
{t(title)}
|
||||
{title}
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">{t(description)}</div>
|
||||
<div className="form__desc form__desc--top">{description}</div>
|
||||
|
||||
<Field
|
||||
name={name}
|
||||
<input
|
||||
type="number"
|
||||
component={renderInputField}
|
||||
placeholder={t(placeholder)}
|
||||
disabled={processingSetConfig}
|
||||
data-testid={`dns_${name}`}
|
||||
className="form-control"
|
||||
normalizeOnBlur={replaceZeroWithEmptyString}
|
||||
normalize={toNumber}
|
||||
placeholder={placeholder}
|
||||
disabled={processingSetConfig}
|
||||
min={0}
|
||||
max={UINT32_RANGE.MAX}
|
||||
{...register(name as keyof FormData, {
|
||||
valueAsNumber: true,
|
||||
setValueAs: (value) => replaceZeroWithEmptyString(value),
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,13 +112,18 @@ const Form = ({ handleSubmit, submitting, invalid }: CacheFormProps) => {
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-7">
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name="cache_optimistic"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('cache_optimistic')}
|
||||
disabled={processingSetConfig}
|
||||
subtitle={t('cache_optimistic_desc')}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="dns_cache_optimistic"
|
||||
title={t('cache_optimistic')}
|
||||
subtitle={t('cache_optimistic_desc')}
|
||||
disabled={processingSetConfig}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,19 +131,21 @@ const Form = ({ handleSubmit, submitting, invalid }: CacheFormProps) => {
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="dns_save"
|
||||
className="btn btn-success btn-standard btn-large"
|
||||
disabled={submitting || invalid || processingSetConfig || minExceedsMax}>
|
||||
<Trans>save_btn</Trans>
|
||||
disabled={isSubmitting || !isDirty || processingSetConfig || minExceedsMax}>
|
||||
{t('save_btn')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-testid="dns_clear"
|
||||
className="btn btn-outline-secondary btn-standard form__button"
|
||||
onClick={handleClearCache}>
|
||||
<Trans>clear_cache</Trans>
|
||||
{t('clear_cache')}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default reduxForm({ form: FORM_NAME.CACHE })(Form);
|
||||
export default Form;
|
||||
|
||||
@@ -1,211 +1,279 @@
|
||||
import React from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import {
|
||||
renderInputField,
|
||||
renderRadioField,
|
||||
renderTextareaField,
|
||||
CheckboxField,
|
||||
toNumber,
|
||||
} from '../../../../helpers/form';
|
||||
import {
|
||||
validateIpv4,
|
||||
validateIpv6,
|
||||
validateRequiredValue,
|
||||
validateIp,
|
||||
validateIPv4Subnet,
|
||||
validateIPv6Subnet,
|
||||
} from '../../../../helpers/validators';
|
||||
import i18next from 'i18next';
|
||||
import { validateIp, validateIpv4, validateIpv6, validateRequiredValue } from '../../../../helpers/validators';
|
||||
|
||||
import { removeEmptyLines } from '../../../../helpers/helpers';
|
||||
import { BLOCKING_MODES, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
|
||||
import { RootState } from '../../../../initialState';
|
||||
import { BLOCKING_MODES, UINT32_RANGE } from '../../../../helpers/constants';
|
||||
import { Checkbox } from '../../../ui/Controls/Checkbox';
|
||||
import { Input } from '../../../ui/Controls/Input';
|
||||
import { toNumber } from '../../../../helpers/form';
|
||||
import { Textarea } from '../../../ui/Controls/Textarea';
|
||||
import { Radio } from '../../../ui/Controls/Radio';
|
||||
|
||||
const checkboxes = [
|
||||
const checkboxes: {
|
||||
name: 'dnssec_enabled' | 'disable_ipv6';
|
||||
placeholder: string;
|
||||
subtitle: string;
|
||||
}[] = [
|
||||
{
|
||||
name: 'dnssec_enabled',
|
||||
placeholder: 'dnssec_enable',
|
||||
subtitle: 'dnssec_enable_desc',
|
||||
placeholder: i18next.t('dnssec_enable'),
|
||||
subtitle: i18next.t('dnssec_enable_desc'),
|
||||
},
|
||||
{
|
||||
name: 'disable_ipv6',
|
||||
placeholder: 'disable_ipv6',
|
||||
subtitle: 'disable_ipv6_desc',
|
||||
placeholder: i18next.t('disable_ipv6'),
|
||||
subtitle: i18next.t('disable_ipv6_desc'),
|
||||
},
|
||||
];
|
||||
|
||||
const customIps = [
|
||||
const customIps: {
|
||||
name: 'blocking_ipv4' | 'blocking_ipv6';
|
||||
label: string;
|
||||
description: string;
|
||||
validateIp: (value: string) => string;
|
||||
}[] = [
|
||||
{
|
||||
description: 'blocking_ipv4_desc',
|
||||
name: 'blocking_ipv4',
|
||||
label: i18next.t('blocking_ipv4'),
|
||||
description: i18next.t('blocking_ipv4_desc'),
|
||||
validateIp: validateIpv4,
|
||||
},
|
||||
{
|
||||
description: 'blocking_ipv6_desc',
|
||||
name: 'blocking_ipv6',
|
||||
label: i18next.t('blocking_ipv6'),
|
||||
description: i18next.t('blocking_ipv6_desc'),
|
||||
validateIp: validateIpv6,
|
||||
},
|
||||
];
|
||||
|
||||
const getFields = (processing: any, t: any) =>
|
||||
Object.values(BLOCKING_MODES)
|
||||
const blockingModeOptions = [
|
||||
{
|
||||
value: BLOCKING_MODES.default,
|
||||
label: i18next.t('default'),
|
||||
},
|
||||
{
|
||||
value: BLOCKING_MODES.refused,
|
||||
label: i18next.t('refused'),
|
||||
},
|
||||
{
|
||||
value: BLOCKING_MODES.nxdomain,
|
||||
label: i18next.t('nxdomain'),
|
||||
},
|
||||
{
|
||||
value: BLOCKING_MODES.null_ip,
|
||||
label: i18next.t('null_ip'),
|
||||
},
|
||||
{
|
||||
value: BLOCKING_MODES.custom_ip,
|
||||
label: i18next.t('custom_ip'),
|
||||
},
|
||||
];
|
||||
|
||||
.map((mode: any) => (
|
||||
<Field
|
||||
key={mode}
|
||||
name="blocking_mode"
|
||||
type="radio"
|
||||
component={renderRadioField}
|
||||
value={mode}
|
||||
placeholder={t(mode)}
|
||||
disabled={processing}
|
||||
/>
|
||||
));
|
||||
const blockingModeDescriptions = [
|
||||
i18next.t(`blocking_mode_default`),
|
||||
i18next.t(`blocking_mode_refused`),
|
||||
i18next.t(`blocking_mode_nxdomain`),
|
||||
i18next.t(`blocking_mode_null_ip`),
|
||||
i18next.t(`blocking_mode_custom_ip`),
|
||||
];
|
||||
|
||||
interface ConfigFormProps {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
submitting: boolean;
|
||||
invalid: boolean;
|
||||
type FormData = {
|
||||
ratelimit: number;
|
||||
ratelimit_subnet_len_ipv4: number;
|
||||
ratelimit_subnet_len_ipv6: number;
|
||||
ratelimit_whitelist: string;
|
||||
edns_cs_enabled: boolean;
|
||||
edns_cs_use_custom: boolean;
|
||||
edns_cs_custom_ip?: string;
|
||||
dnssec_enabled: boolean;
|
||||
disable_ipv6: boolean;
|
||||
blocking_mode: string;
|
||||
blocking_ipv4?: string;
|
||||
blocking_ipv6?: string;
|
||||
blocked_response_ttl: number;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
processing?: boolean;
|
||||
}
|
||||
initialValues?: Partial<FormData>;
|
||||
onSubmit: (data: FormData) => void;
|
||||
};
|
||||
|
||||
const Form = ({ handleSubmit, submitting, invalid, processing }: ConfigFormProps) => {
|
||||
const Form = ({ processing, initialValues, onSubmit }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const { blocking_mode, edns_cs_enabled, edns_cs_use_custom } = useSelector(
|
||||
(state: RootState) => state.form[FORM_NAME.BLOCKING_MODE].values ?? {},
|
||||
shallowEqual,
|
||||
);
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
watch,
|
||||
control,
|
||||
formState: { isSubmitting, isDirty },
|
||||
} = useForm<FormData>({
|
||||
mode: 'onBlur',
|
||||
defaultValues: initialValues,
|
||||
});
|
||||
|
||||
const blocking_mode = watch('blocking_mode');
|
||||
const edns_cs_enabled = watch('edns_cs_enabled');
|
||||
const edns_cs_use_custom = watch('edns_cs_use_custom');
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-7">
|
||||
<div className="form__group form__group--settings">
|
||||
<label htmlFor="ratelimit" className="form__label form__label--with-desc">
|
||||
<Trans>rate_limit</Trans>
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>rate_limit_desc</Trans>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="ratelimit"
|
||||
type="number"
|
||||
component={renderInputField}
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_rate_limit')}
|
||||
normalize={toNumber}
|
||||
validate={validateRequiredValue}
|
||||
min={UINT32_RANGE.MIN}
|
||||
max={UINT32_RANGE.MAX}
|
||||
control={control}
|
||||
rules={{ validate: validateRequiredValue }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
data-testid="dns_config_ratelimit"
|
||||
type="number"
|
||||
label={t('rate_limit')}
|
||||
desc={t('rate_limit_desc')}
|
||||
error={fieldState.error?.message}
|
||||
min={UINT32_RANGE.MIN}
|
||||
max={UINT32_RANGE.MAX}
|
||||
disabled={processing}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-7">
|
||||
<div className="form__group form__group--settings">
|
||||
<label htmlFor="ratelimit_subnet_len_ipv4" className="form__label form__label--with-desc">
|
||||
<Trans>rate_limit_subnet_len_ipv4</Trans>
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>rate_limit_subnet_len_ipv4_desc</Trans>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="ratelimit_subnet_len_ipv4"
|
||||
type="number"
|
||||
component={renderInputField}
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_rate_limit_subnet_len')}
|
||||
normalize={toNumber}
|
||||
validate={[validateRequiredValue, validateIPv4Subnet]}
|
||||
min={0}
|
||||
max={32}
|
||||
control={control}
|
||||
rules={{ validate: validateRequiredValue }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
data-testid="dns_config_subnet_ipv4"
|
||||
type="number"
|
||||
label={t('rate_limit_subnet_len_ipv4')}
|
||||
desc={t('rate_limit_subnet_len_ipv4_desc')}
|
||||
error={fieldState.error?.message}
|
||||
min={0}
|
||||
max={32}
|
||||
disabled={processing}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-7">
|
||||
<div className="form__group form__group--settings">
|
||||
<label htmlFor="ratelimit_subnet_len_ipv6" className="form__label form__label--with-desc">
|
||||
<Trans>rate_limit_subnet_len_ipv6</Trans>
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>rate_limit_subnet_len_ipv6_desc</Trans>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="ratelimit_subnet_len_ipv6"
|
||||
type="number"
|
||||
component={renderInputField}
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_rate_limit_subnet_len')}
|
||||
normalize={toNumber}
|
||||
validate={[validateRequiredValue, validateIPv6Subnet]}
|
||||
min={0}
|
||||
max={128}
|
||||
control={control}
|
||||
rules={{ validate: validateRequiredValue }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
data-testid="dns_config_subnet_ipv6"
|
||||
type="number"
|
||||
label={t('rate_limit_subnet_len_ipv6')}
|
||||
desc={t('rate_limit_subnet_len_ipv6_desc')}
|
||||
error={fieldState.error?.message}
|
||||
min={0}
|
||||
max={128}
|
||||
disabled={processing}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-7">
|
||||
<div className="form__group form__group--settings">
|
||||
<label htmlFor="ratelimit_whitelist" className="form__label form__label--with-desc">
|
||||
<Trans>rate_limit_whitelist</Trans>
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>rate_limit_whitelist_desc</Trans>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="ratelimit_whitelist"
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('rate_limit_whitelist_placeholder')}
|
||||
normalizeOnBlur={removeEmptyLines}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
data-testid="dns_config_subnet_ipv6"
|
||||
label={t('rate_limit_whitelist')}
|
||||
desc={t('rate_limit_whitelist_desc')}
|
||||
error={fieldState.error?.message}
|
||||
disabled={processing}
|
||||
trimOnBlur
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name="edns_cs_enabled"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('edns_enable')}
|
||||
disabled={processing}
|
||||
subtitle={t('edns_cs_desc')}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="dns_config_edns_cs_enabled"
|
||||
title={t('edns_enable')}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 form__group form__group--inner">
|
||||
<div className="form__group ">
|
||||
<Field
|
||||
<div className="form__group">
|
||||
<Controller
|
||||
name="edns_cs_use_custom"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('edns_use_custom_ip')}
|
||||
disabled={processing || !edns_cs_enabled}
|
||||
subtitle={t('edns_use_custom_ip_desc')}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="dns_config_edns_use_custom_ip"
|
||||
title={t('edns_use_custom_ip')}
|
||||
disabled={processing || !edns_cs_enabled}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{edns_cs_use_custom && (
|
||||
<Field
|
||||
<Controller
|
||||
name="edns_cs_custom_ip"
|
||||
component={renderInputField}
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_ip')}
|
||||
validate={[validateIp, validateRequiredValue]}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: {
|
||||
required: validateRequiredValue,
|
||||
id: validateIp,
|
||||
},
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
data-testid="dns_config_edns_cs_custom_ip"
|
||||
error={fieldState.error?.message}
|
||||
disabled={processing || !edns_cs_enabled}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -213,13 +281,18 @@ const Form = ({ handleSubmit, submitting, invalid, processing }: ConfigFormProps
|
||||
{checkboxes.map(({ name, placeholder, subtitle }) => (
|
||||
<div className="col-12" key={name}>
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name={name}
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t(placeholder)}
|
||||
disabled={processing}
|
||||
subtitle={t(subtitle)}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid={`dns_config_${name}`}
|
||||
title={placeholder}
|
||||
subtitle={subtitle}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -227,42 +300,50 @@ const Form = ({ handleSubmit, submitting, invalid, processing }: ConfigFormProps
|
||||
|
||||
<div className="col-12">
|
||||
<div className="form__group form__group--settings mb-4">
|
||||
<label className="form__label form__label--with-desc">
|
||||
<Trans>blocking_mode</Trans>
|
||||
</label>
|
||||
<label className="form__label form__label--with-desc">{t('blocking_mode')}</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
{Object.values(BLOCKING_MODES)
|
||||
|
||||
.map((mode: any) => (
|
||||
<li key={mode}>
|
||||
<Trans>{`blocking_mode_${mode}`}</Trans>
|
||||
</li>
|
||||
))}
|
||||
{blockingModeDescriptions.map((desc: string) => (
|
||||
<li key={desc}>{desc}</li>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="custom-controls-stacked">{getFields(processing, t)}</div>
|
||||
<div className="custom-controls-stacked">
|
||||
<Controller
|
||||
name="blocking_mode"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Radio {...field} options={blockingModeOptions} disabled={processing} />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{blocking_mode === BLOCKING_MODES.custom_ip && (
|
||||
<>
|
||||
{customIps.map(({ description, name, validateIp }) => (
|
||||
{customIps.map(({ label, description, name, validateIp }) => (
|
||||
<div className="col-12 col-sm-6" key={name}>
|
||||
<div className="form__group form__group--settings">
|
||||
<label className="form__label form__label--with-desc" htmlFor={name}>
|
||||
<Trans>{name}</Trans>
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>{description}</Trans>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name={name}
|
||||
component={renderInputField}
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_ip')}
|
||||
validate={[validateIp, validateRequiredValue]}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: {
|
||||
required: validateRequiredValue,
|
||||
ip: validateIp,
|
||||
},
|
||||
}}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
data-testid="dns_config_blocked_response_ttl"
|
||||
type="text"
|
||||
label={label}
|
||||
desc={description}
|
||||
error={fieldState.error?.message}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -272,24 +353,27 @@ const Form = ({ handleSubmit, submitting, invalid, processing }: ConfigFormProps
|
||||
|
||||
<div className="col-12 col-md-7">
|
||||
<div className="form__group form__group--settings">
|
||||
<label htmlFor="blocked_response_ttl" className="form__label form__label--with-desc">
|
||||
<Trans>blocked_response_ttl</Trans>
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>blocked_response_ttl_desc</Trans>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="blocked_response_ttl"
|
||||
type="number"
|
||||
component={renderInputField}
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_blocked_response_ttl')}
|
||||
normalize={toNumber}
|
||||
validate={validateRequiredValue}
|
||||
min={UINT32_RANGE.MIN}
|
||||
max={UINT32_RANGE.MAX}
|
||||
control={control}
|
||||
rules={{ validate: validateRequiredValue }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
data-testid="dns_config_blocked_response_ttl"
|
||||
type="number"
|
||||
label={t('blocked_response_ttl')}
|
||||
desc={t('blocked_response_ttl_desc')}
|
||||
error={fieldState.error?.message}
|
||||
min={UINT32_RANGE.MIN}
|
||||
max={UINT32_RANGE.MAX}
|
||||
disabled={processing}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -297,14 +381,13 @@ const Form = ({ handleSubmit, submitting, invalid, processing }: ConfigFormProps
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="dns_config_save"
|
||||
className="btn btn-success btn-standard btn-large"
|
||||
disabled={submitting || invalid || processing}>
|
||||
<Trans>save_btn</Trans>
|
||||
disabled={isSubmitting || !isDirty || processing}>
|
||||
{t('save_btn')}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default reduxForm<Record<string, any>, Omit<ConfigFormProps, 'invalid' | 'submitting' | 'handleSubmit'>>({
|
||||
form: FORM_NAME.BLOCKING_MODE,
|
||||
})(Form);
|
||||
export default Form;
|
||||
|
||||
@@ -1,185 +1,110 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import Examples from './Examples';
|
||||
|
||||
import {
|
||||
renderRadioField,
|
||||
renderTextareaField,
|
||||
CheckboxField,
|
||||
renderInputField,
|
||||
toNumber,
|
||||
} from '../../../../helpers/form';
|
||||
import {
|
||||
DNS_REQUEST_OPTIONS,
|
||||
FORM_NAME,
|
||||
UINT32_RANGE,
|
||||
UPSTREAM_CONFIGURATION_WIKI_LINK,
|
||||
} from '../../../../helpers/constants';
|
||||
|
||||
import i18next from 'i18next';
|
||||
import clsx from 'clsx';
|
||||
import { testUpstreamWithFormValues } from '../../../../actions';
|
||||
|
||||
import { removeEmptyLines, trimLinesAndRemoveEmpty } from '../../../../helpers/helpers';
|
||||
|
||||
import { DNS_REQUEST_OPTIONS, UINT32_RANGE, UPSTREAM_CONFIGURATION_WIKI_LINK } from '../../../../helpers/constants';
|
||||
import { removeEmptyLines } from '../../../../helpers/helpers';
|
||||
import { getTextareaCommentsHighlight, syncScroll } from '../../../../helpers/highlightTextareaComments';
|
||||
import '../../../ui/texareaCommentsHighlight.css';
|
||||
import { RootState } from '../../../../initialState';
|
||||
import '../../../ui/texareaCommentsHighlight.css';
|
||||
import Examples from './Examples';
|
||||
import { Checkbox } from '../../../ui/Controls/Checkbox';
|
||||
import { Textarea } from '../../../ui/Controls/Textarea';
|
||||
import { Radio } from '../../../ui/Controls/Radio';
|
||||
import { Input } from '../../../ui/Controls/Input';
|
||||
import { validateRequiredValue } from '../../../../helpers/validators';
|
||||
import { toNumber } from '../../../../helpers/form';
|
||||
|
||||
const UPSTREAM_DNS_NAME = 'upstream_dns';
|
||||
const UPSTREAM_MODE_NAME = 'upstream_mode';
|
||||
|
||||
interface renderFieldProps {
|
||||
name: string;
|
||||
component: any;
|
||||
type: string;
|
||||
className?: string;
|
||||
placeholder: string;
|
||||
subtitle?: string;
|
||||
value?: string;
|
||||
normalizeOnBlur?: (...args: unknown[]) => unknown;
|
||||
containerClass?: string;
|
||||
onScroll?: (...args: unknown[]) => unknown;
|
||||
}
|
||||
|
||||
const renderField = ({
|
||||
name,
|
||||
component,
|
||||
type,
|
||||
className,
|
||||
placeholder,
|
||||
subtitle,
|
||||
value,
|
||||
normalizeOnBlur,
|
||||
containerClass,
|
||||
onScroll,
|
||||
}: renderFieldProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const processingTestUpstream = useSelector((state: RootState) => state.settings.processingTestUpstream);
|
||||
|
||||
const processingSetConfig = useSelector((state: RootState) => state.dnsConfig.processingSetConfig);
|
||||
|
||||
return (
|
||||
<div key={placeholder} className={classnames('col-12 mb-4', containerClass)}>
|
||||
<Field
|
||||
id={name}
|
||||
value={value}
|
||||
name={name}
|
||||
component={component}
|
||||
type={type}
|
||||
className={className}
|
||||
placeholder={t(placeholder)}
|
||||
subtitle={t(subtitle)}
|
||||
disabled={processingSetConfig || processingTestUpstream}
|
||||
normalizeOnBlur={normalizeOnBlur}
|
||||
onScroll={onScroll}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
type FormData = {
|
||||
upstream_dns: string;
|
||||
upstream_mode: string;
|
||||
fallback_dns: string;
|
||||
bootstrap_dns: string;
|
||||
local_ptr_upstreams: string;
|
||||
use_private_ptr_resolvers: boolean;
|
||||
resolve_clients: boolean;
|
||||
upstream_timeout: number;
|
||||
};
|
||||
|
||||
interface renderTextareaWithHighlightFieldProps {
|
||||
className: string;
|
||||
disabled?: boolean;
|
||||
id: string;
|
||||
input?: object;
|
||||
meta?: object;
|
||||
normalizeOnBlur?: (...args: unknown[]) => unknown;
|
||||
onScroll?: (...args: unknown[]) => unknown;
|
||||
placeholder: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
const renderTextareaWithHighlightField = (props: renderTextareaWithHighlightFieldProps) => {
|
||||
const upstream_dns = useSelector((store: RootState) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
|
||||
|
||||
const upstream_dns_file = useSelector((state: RootState) => state.dnsConfig.upstream_dns_file);
|
||||
const ref = useRef(null);
|
||||
|
||||
const onScroll = (e: any) => syncScroll(e, ref);
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderTextareaField({
|
||||
...props,
|
||||
disabled: !!upstream_dns_file,
|
||||
onScroll,
|
||||
normalizeOnBlur: trimLinesAndRemoveEmpty,
|
||||
})}
|
||||
|
||||
{getTextareaCommentsHighlight(ref, upstream_dns)}
|
||||
</>
|
||||
);
|
||||
type FormProps = {
|
||||
initialValues?: Partial<FormData>;
|
||||
onSubmit: (data: FormData) => void;
|
||||
};
|
||||
|
||||
const INPUT_FIELDS = [
|
||||
const upstreamModeOptions = [
|
||||
{
|
||||
name: UPSTREAM_MODE_NAME,
|
||||
type: 'radio',
|
||||
label: i18next.t('load_balancing'),
|
||||
desc: <Trans components={{ br: <br />, b: <b /> }}>load_balancing_desc</Trans>,
|
||||
value: DNS_REQUEST_OPTIONS.LOAD_BALANCING,
|
||||
component: renderRadioField,
|
||||
subtitle: 'load_balancing_desc',
|
||||
placeholder: 'load_balancing',
|
||||
},
|
||||
{
|
||||
name: UPSTREAM_MODE_NAME,
|
||||
type: 'radio',
|
||||
label: i18next.t('parallel_requests'),
|
||||
desc: <Trans components={{ br: <br />, b: <b /> }}>upstream_parallel</Trans>,
|
||||
value: DNS_REQUEST_OPTIONS.PARALLEL,
|
||||
component: renderRadioField,
|
||||
subtitle: 'upstream_parallel',
|
||||
placeholder: 'parallel_requests',
|
||||
},
|
||||
{
|
||||
name: UPSTREAM_MODE_NAME,
|
||||
type: 'radio',
|
||||
label: i18next.t('fastest_addr'),
|
||||
desc: <Trans components={{ br: <br />, b: <b /> }}>fastest_addr_desc</Trans>,
|
||||
value: DNS_REQUEST_OPTIONS.FASTEST_ADDR,
|
||||
component: renderRadioField,
|
||||
subtitle: 'fastest_addr_desc',
|
||||
placeholder: 'fastest_addr',
|
||||
},
|
||||
];
|
||||
|
||||
interface FormProps {
|
||||
handleSubmit?: (...args: unknown[]) => string;
|
||||
submitting?: boolean;
|
||||
invalid?: boolean;
|
||||
initialValues?: object;
|
||||
upstream_dns?: string;
|
||||
fallback_dns?: string;
|
||||
bootstrap_dns?: string;
|
||||
}
|
||||
|
||||
const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
|
||||
const dispatch = useDispatch();
|
||||
const Form = ({ initialValues, onSubmit }: FormProps) => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const upstream_dns = useSelector((store: RootState) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
|
||||
|
||||
const processingTestUpstream = useSelector((state: RootState) => state.settings.processingTestUpstream);
|
||||
|
||||
const processingSetConfig = useSelector((state: RootState) => state.dnsConfig.processingSetConfig);
|
||||
const defaultLocalPtrUpstreams = useSelector((state: RootState) => state.dnsConfig.default_local_ptr_upstreams);
|
||||
|
||||
const handleUpstreamTest = () => dispatch(testUpstreamWithFormValues());
|
||||
|
||||
const testButtonClass = classnames('btn btn-primary btn-standard mr-2', {
|
||||
'btn-loading': processingTestUpstream,
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { isSubmitting, isDirty },
|
||||
} = useForm<FormData>({
|
||||
mode: 'onBlur',
|
||||
defaultValues: {
|
||||
upstream_dns: initialValues?.upstream_dns || '',
|
||||
upstream_mode: initialValues?.upstream_mode || DNS_REQUEST_OPTIONS.LOAD_BALANCING,
|
||||
fallback_dns: initialValues?.fallback_dns || '',
|
||||
bootstrap_dns: initialValues?.bootstrap_dns || '',
|
||||
local_ptr_upstreams: initialValues?.local_ptr_upstreams || '',
|
||||
use_private_ptr_resolvers: initialValues?.use_private_ptr_resolvers || false,
|
||||
resolve_clients: initialValues?.resolve_clients || false,
|
||||
upstream_timeout: initialValues?.upstream_timeout || 0,
|
||||
},
|
||||
});
|
||||
|
||||
const components = {
|
||||
a: <a href={UPSTREAM_CONFIGURATION_WIKI_LINK} target="_blank" rel="noopener noreferrer" />,
|
||||
const upstream_dns = watch('upstream_dns');
|
||||
const processingTestUpstream = useSelector((state: RootState) => state.settings.processingTestUpstream);
|
||||
const processingSetConfig = useSelector((state: RootState) => state.dnsConfig.processingSetConfig);
|
||||
const defaultLocalPtrUpstreams = useSelector((state: RootState) => state.dnsConfig.default_local_ptr_upstreams);
|
||||
const upstream_dns_file = useSelector((state: RootState) => state.dnsConfig.upstream_dns_file);
|
||||
|
||||
const handleUpstreamTest = () => {
|
||||
const formValues = {
|
||||
bootstrap_dns: watch('bootstrap_dns'),
|
||||
upstream_dns: watch('upstream_dns'),
|
||||
local_ptr_upstreams: watch('local_ptr_upstreams'),
|
||||
fallback_dns: watch('fallback_dns'),
|
||||
};
|
||||
dispatch(testUpstreamWithFormValues(formValues));
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="form--upstream">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="form--upstream">
|
||||
<div className="row">
|
||||
<label className="col form__label" htmlFor={UPSTREAM_DNS_NAME}>
|
||||
<Trans components={components}>upstream_dns_help</Trans>{' '}
|
||||
<label className="col form__label" htmlFor="upstream_dns">
|
||||
<Trans
|
||||
components={{
|
||||
a: <a href={UPSTREAM_CONFIGURATION_WIKI_LINK} target="_blank" rel="noopener noreferrer" />,
|
||||
}}>
|
||||
upstream_dns_help
|
||||
</Trans>{' '}
|
||||
<Trans
|
||||
components={[
|
||||
<a
|
||||
@@ -196,44 +121,69 @@ const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
|
||||
|
||||
<div className="col-12 mb-4">
|
||||
<div className="text-edit-container">
|
||||
<Field
|
||||
id={UPSTREAM_DNS_NAME}
|
||||
name={UPSTREAM_DNS_NAME}
|
||||
component={renderTextareaWithHighlightField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea font-monospace text-input"
|
||||
placeholder={t('upstream_dns')}
|
||||
disabled={processingSetConfig || processingTestUpstream}
|
||||
normalizeOnBlur={removeEmptyLines}
|
||||
<Controller
|
||||
name="upstream_dns"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<>
|
||||
<Textarea
|
||||
{...field}
|
||||
id={UPSTREAM_DNS_NAME}
|
||||
data-testid="upstream_dns"
|
||||
className="form-control--textarea-large text-input"
|
||||
wrapperClassName="mb-0"
|
||||
placeholder={t('upstream_dns')}
|
||||
disabled={!!upstream_dns_file || processingSetConfig || processingTestUpstream}
|
||||
onScroll={(e) => syncScroll(e, textareaRef)}
|
||||
trimOnBlur
|
||||
/>
|
||||
{getTextareaCommentsHighlight(textareaRef, upstream_dns)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{INPUT_FIELDS.map(renderField)}
|
||||
|
||||
<div className="col-12">
|
||||
<Examples />
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-4">
|
||||
<Controller
|
||||
name="upstream_mode"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Radio
|
||||
{...field}
|
||||
options={upstreamModeOptions}
|
||||
disabled={processingSetConfig || processingTestUpstream}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form__label form__label--with-desc" htmlFor="fallback_dns">
|
||||
<Trans>fallback_dns_title</Trans>
|
||||
{t('fallback_dns_title')}
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>fallback_dns_desc</Trans>
|
||||
</div>
|
||||
<div className="form__desc form__desc--top">{t('fallback_dns_desc')}</div>
|
||||
|
||||
<Field
|
||||
id="fallback_dns"
|
||||
<Controller
|
||||
name="fallback_dns"
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea form-control--textarea-small font-monospace"
|
||||
placeholder={t('fallback_dns_placeholder')}
|
||||
disabled={processingSetConfig}
|
||||
normalizeOnBlur={removeEmptyLines}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
id="fallback_dns"
|
||||
data-testid="fallback_dns"
|
||||
wrapperClassName="mb-0"
|
||||
placeholder={t('fallback_dns_placeholder')}
|
||||
disabled={processingSetConfig}
|
||||
trimOnBlur
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -241,24 +191,30 @@ const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-2">
|
||||
<div className="col-12">
|
||||
<label className="form__label form__label--with-desc" htmlFor="bootstrap_dns">
|
||||
<Trans>bootstrap_dns</Trans>
|
||||
{t('bootstrap_dns')}
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>bootstrap_dns_desc</Trans>
|
||||
</div>
|
||||
<div className="form__desc form__desc--top">{t('bootstrap_dns_desc')}</div>
|
||||
|
||||
<Field
|
||||
id="bootstrap_dns"
|
||||
<Controller
|
||||
name="bootstrap_dns"
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea form-control--textarea-small font-monospace"
|
||||
placeholder={t('bootstrap_dns')}
|
||||
disabled={processingSetConfig}
|
||||
normalizeOnBlur={removeEmptyLines}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
id="bootstrap_dns"
|
||||
data-testid="bootstrap_dns"
|
||||
placeholder={t('bootstrap_dns')}
|
||||
wrapperClassName="mb-0"
|
||||
disabled={processingSetConfig}
|
||||
onBlur={(e) => {
|
||||
const value = removeEmptyLines(e.target.value);
|
||||
field.onChange(value);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -268,43 +224,47 @@ const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
|
||||
|
||||
<div className="col-12">
|
||||
<label className="form__label form__label--with-desc" htmlFor="local_ptr">
|
||||
<Trans>local_ptr_title</Trans>
|
||||
{t('local_ptr_title')}
|
||||
</label>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>local_ptr_desc</Trans>
|
||||
</div>
|
||||
<div className="form__desc form__desc--top">{t('local_ptr_desc')}</div>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
{/** TODO: Add internazionalization for "" */}
|
||||
{defaultLocalPtrUpstreams?.length > 0 ? (
|
||||
<Trans values={{ ip: defaultLocalPtrUpstreams.map((s: any) => `"${s}"`).join(', ') }}>
|
||||
local_ptr_default_resolver
|
||||
</Trans>
|
||||
) : (
|
||||
<Trans>local_ptr_no_default_resolver</Trans>
|
||||
)}
|
||||
{defaultLocalPtrUpstreams?.length > 0
|
||||
? t('local_ptr_default_resolver', {
|
||||
ip: defaultLocalPtrUpstreams.map((s: any) => `"${s}"`).join(', '),
|
||||
})
|
||||
: t('local_ptr_no_default_resolver')}
|
||||
</div>
|
||||
|
||||
<Field
|
||||
id="local_ptr_upstreams"
|
||||
<Controller
|
||||
name="local_ptr_upstreams"
|
||||
component={renderTextareaField}
|
||||
type="text"
|
||||
className="form-control form-control--textarea form-control--textarea-small font-monospace"
|
||||
placeholder={t('local_ptr_placeholder')}
|
||||
disabled={processingSetConfig}
|
||||
normalizeOnBlur={removeEmptyLines}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
id="local_ptr_upstreams"
|
||||
data-testid="local_ptr_upstreams"
|
||||
placeholder={t('local_ptr_placeholder')}
|
||||
disabled={processingSetConfig}
|
||||
trimOnBlur
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="mt-4">
|
||||
<Field
|
||||
<Controller
|
||||
name="use_private_ptr_resolvers"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('use_private_ptr_resolvers_title')}
|
||||
subtitle={t('use_private_ptr_resolvers_desc')}
|
||||
disabled={processingSetConfig}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="dns_use_private_ptr_resolvers"
|
||||
title={t('use_private_ptr_resolvers_title')}
|
||||
subtitle={t('use_private_ptr_resolvers_desc')}
|
||||
disabled={processingSetConfig}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -313,14 +273,19 @@ const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Field
|
||||
<div className="col-12 mb-4">
|
||||
<Controller
|
||||
name="resolve_clients"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('resolve_clients_title')}
|
||||
subtitle={t('resolve_clients_desc')}
|
||||
disabled={processingSetConfig}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="dns_resolve_clients"
|
||||
title={t('resolve_clients_title')}
|
||||
subtitle={t('resolve_clients_desc')}
|
||||
disabled={processingSetConfig}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -338,16 +303,26 @@ const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
|
||||
<Trans>upstream_timeout_desc</Trans>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
<Controller
|
||||
name="upstream_timeout"
|
||||
type="number"
|
||||
component={renderInputField}
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_upstream_timeout')}
|
||||
normalize={toNumber}
|
||||
validate={validateRequiredValue}
|
||||
min={1}
|
||||
max={UINT32_RANGE.MAX}
|
||||
control={control}
|
||||
rules={{ validate: validateRequiredValue }}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="number"
|
||||
id="upstream_timeout"
|
||||
data-testid="upstream_timeout"
|
||||
placeholder={t('form_enter_upstream_timeout')}
|
||||
disabled={processingSetConfig}
|
||||
min={1}
|
||||
max={UINT32_RANGE.MAX}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -357,17 +332,21 @@ const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
|
||||
<div className="btn-list">
|
||||
<button
|
||||
type="button"
|
||||
className={testButtonClass}
|
||||
data-testid="dns_upstream_test"
|
||||
className={clsx('btn btn-primary btn-standard mr-2', {
|
||||
'btn-loading': processingTestUpstream,
|
||||
})}
|
||||
onClick={handleUpstreamTest}
|
||||
disabled={!upstream_dns || processingTestUpstream}>
|
||||
<Trans>test_upstream_btn</Trans>
|
||||
{t('test_upstream_btn')}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="dns_upstream_save"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={submitting || invalid || processingSetConfig || processingTestUpstream}>
|
||||
<Trans>apply_btn</Trans>
|
||||
disabled={isSubmitting || !isDirty || processingSetConfig || processingTestUpstream}>
|
||||
{t('apply_btn')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -375,4 +354,4 @@ const Form = ({ submitting, invalid, handleSubmit }: FormProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default reduxForm({ form: FORM_NAME.UPSTREAM })(Form);
|
||||
export default Form;
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Field, reduxForm, formValueSelector } from 'redux-form';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
|
||||
import { renderInputField, CheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import i18next from 'i18next';
|
||||
import {
|
||||
validateServerName,
|
||||
validateIsSafePort,
|
||||
@@ -14,7 +12,6 @@ import {
|
||||
validatePortTLS,
|
||||
validatePlainDns,
|
||||
} from '../../../helpers/validators';
|
||||
import i18n from '../../../i18n';
|
||||
|
||||
import KeyStatus from './KeyStatus';
|
||||
|
||||
@@ -22,51 +19,39 @@ import CertificateStatus from './CertificateStatus';
|
||||
import {
|
||||
DNS_OVER_QUIC_PORT,
|
||||
DNS_OVER_TLS_PORT,
|
||||
FORM_NAME,
|
||||
STANDARD_HTTPS_PORT,
|
||||
ENCRYPTION_SOURCE,
|
||||
} from '../../../helpers/constants';
|
||||
import { Checkbox } from '../../ui/Controls/Checkbox';
|
||||
import { Radio } from '../../ui/Controls/Radio';
|
||||
import { Input } from '../../ui/Controls/Input';
|
||||
import { Textarea } from '../../ui/Controls/Textarea';
|
||||
import { EncryptionData } from '../../../initialState';
|
||||
import { toNumber } from '../../../helpers/form';
|
||||
|
||||
const validate = (values: any) => {
|
||||
const errors: { port_dns_over_tls?: string; port_https?: string } = {};
|
||||
const certificateSourceOptions = [
|
||||
{
|
||||
label: i18next.t('encryption_certificates_source_path'),
|
||||
value: ENCRYPTION_SOURCE.PATH,
|
||||
},
|
||||
{
|
||||
label: i18next.t('encryption_certificates_source_content'),
|
||||
value: ENCRYPTION_SOURCE.CONTENT,
|
||||
},
|
||||
];
|
||||
|
||||
if (values.port_dns_over_tls && values.port_https) {
|
||||
if (values.port_dns_over_tls === values.port_https) {
|
||||
errors.port_dns_over_tls = i18n.t('form_error_equal');
|
||||
const keySourceOptions = [
|
||||
{
|
||||
label: i18next.t('encryption_key_source_path'),
|
||||
value: ENCRYPTION_SOURCE.PATH,
|
||||
},
|
||||
{
|
||||
label: i18next.t('encryption_key_source_content'),
|
||||
value: ENCRYPTION_SOURCE.CONTENT,
|
||||
},
|
||||
];
|
||||
|
||||
errors.port_https = i18n.t('form_error_equal');
|
||||
}
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
const clearFields = (change: any, setTlsConfig: any, validateTlsConfig: any, t: any) => {
|
||||
const fields = {
|
||||
private_key: '',
|
||||
certificate_chain: '',
|
||||
private_key_path: '',
|
||||
certificate_path: '',
|
||||
port_https: STANDARD_HTTPS_PORT,
|
||||
port_dns_over_tls: DNS_OVER_TLS_PORT,
|
||||
port_dns_over_quic: DNS_OVER_QUIC_PORT,
|
||||
server_name: '',
|
||||
force_https: false,
|
||||
enabled: false,
|
||||
private_key_saved: false,
|
||||
serve_plain_dns: true,
|
||||
};
|
||||
// eslint-disable-next-line no-alert
|
||||
if (window.confirm(t('encryption_reset'))) {
|
||||
Object.keys(fields)
|
||||
|
||||
.forEach((field) => change(field, fields[field]));
|
||||
setTlsConfig(fields);
|
||||
validateTlsConfig(fields);
|
||||
}
|
||||
};
|
||||
|
||||
const validationMessage = (warningValidation: any, isWarning: any) => {
|
||||
const validationMessage = (warningValidation: string, isWarning: boolean) => {
|
||||
if (!warningValidation) {
|
||||
return null;
|
||||
}
|
||||
@@ -88,56 +73,60 @@ const validationMessage = (warningValidation: any, isWarning: any) => {
|
||||
);
|
||||
};
|
||||
|
||||
interface FormProps {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
handleChange?: (...args: unknown[]) => unknown;
|
||||
isEnabled: boolean;
|
||||
servePlainDns: boolean;
|
||||
certificateChain: string;
|
||||
privateKey: string;
|
||||
certificatePath: string;
|
||||
privateKeyPath: string;
|
||||
change: (...args: unknown[]) => unknown;
|
||||
submitting: boolean;
|
||||
invalid: boolean;
|
||||
initialValues: object;
|
||||
processingConfig: boolean;
|
||||
processingValidate: boolean;
|
||||
status_key?: string;
|
||||
not_after?: string;
|
||||
warning_validation?: string;
|
||||
valid_chain?: boolean;
|
||||
valid_key?: boolean;
|
||||
valid_cert?: boolean;
|
||||
valid_pair?: boolean;
|
||||
dns_names?: string[];
|
||||
key_type?: string;
|
||||
issuer?: string;
|
||||
subject?: string;
|
||||
t: (...args: unknown[]) => string;
|
||||
setTlsConfig: (...args: unknown[]) => unknown;
|
||||
validateTlsConfig: (...args: unknown[]) => unknown;
|
||||
certificateSource?: string;
|
||||
privateKeySource?: string;
|
||||
privateKeySaved?: boolean;
|
||||
}
|
||||
export type EncryptionFormValues = {
|
||||
enabled?: boolean;
|
||||
serve_plain_dns?: boolean;
|
||||
server_name?: string;
|
||||
force_https?: boolean;
|
||||
port_https?: number;
|
||||
port_dns_over_tls?: number;
|
||||
port_dns_over_quic?: number;
|
||||
certificate_chain?: string;
|
||||
private_key?: string;
|
||||
certificate_path?: string;
|
||||
private_key_path?: string;
|
||||
certificate_source?: string;
|
||||
key_source?: string;
|
||||
private_key_saved?: boolean;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
initialValues: EncryptionFormValues;
|
||||
encryption: EncryptionData;
|
||||
onSubmit: (values: EncryptionFormValues) => void;
|
||||
debouncedConfigValidation: (values: EncryptionFormValues) => void;
|
||||
setTlsConfig: (values: Partial<EncryptionData>) => void;
|
||||
validateTlsConfig: (values: Partial<EncryptionData>) => void;
|
||||
};
|
||||
|
||||
const defaultValues = {
|
||||
enabled: false,
|
||||
serve_plain_dns: true,
|
||||
server_name: '',
|
||||
force_https: false,
|
||||
port_https: STANDARD_HTTPS_PORT,
|
||||
port_dns_over_tls: DNS_OVER_TLS_PORT,
|
||||
port_dns_over_quic: DNS_OVER_QUIC_PORT,
|
||||
certificate_chain: '',
|
||||
private_key: '',
|
||||
certificate_path: '',
|
||||
private_key_path: '',
|
||||
certificate_source: ENCRYPTION_SOURCE.PATH,
|
||||
key_source: ENCRYPTION_SOURCE.PATH,
|
||||
private_key_saved: false,
|
||||
};
|
||||
|
||||
export const Form = ({
|
||||
initialValues,
|
||||
encryption,
|
||||
onSubmit,
|
||||
setTlsConfig,
|
||||
debouncedConfigValidation,
|
||||
validateTlsConfig,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
let Form = (props: FormProps) => {
|
||||
const {
|
||||
t,
|
||||
handleSubmit,
|
||||
handleChange,
|
||||
isEnabled,
|
||||
servePlainDns,
|
||||
certificateChain,
|
||||
privateKey,
|
||||
certificatePath,
|
||||
privateKeyPath,
|
||||
change,
|
||||
invalid,
|
||||
submitting,
|
||||
processingConfig,
|
||||
processingValidate,
|
||||
not_after,
|
||||
valid_chain,
|
||||
valid_key,
|
||||
@@ -148,37 +137,100 @@ let Form = (props: FormProps) => {
|
||||
issuer,
|
||||
subject,
|
||||
warning_validation,
|
||||
setTlsConfig,
|
||||
validateTlsConfig,
|
||||
certificateSource,
|
||||
privateKeySource,
|
||||
privateKeySaved,
|
||||
} = props;
|
||||
processingConfig,
|
||||
processingValidate,
|
||||
} = encryption;
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
watch,
|
||||
reset,
|
||||
setValue,
|
||||
setError,
|
||||
getValues,
|
||||
formState: { isSubmitting, isValid },
|
||||
} = useForm<EncryptionFormValues>({
|
||||
defaultValues: {
|
||||
...defaultValues,
|
||||
...initialValues,
|
||||
},
|
||||
mode: 'onBlur',
|
||||
});
|
||||
|
||||
const {
|
||||
enabled: isEnabled,
|
||||
serve_plain_dns: servePlainDns,
|
||||
certificate_chain: certificateChain,
|
||||
private_key: privateKey,
|
||||
private_key_path: privateKeyPath,
|
||||
key_source: privateKeySource,
|
||||
private_key_saved: privateKeySaved,
|
||||
certificate_path: certificatePath,
|
||||
certificate_source: certificateSource,
|
||||
} = watch();
|
||||
|
||||
const handleBlur = () => {
|
||||
debouncedConfigValidation(getValues());
|
||||
};
|
||||
|
||||
const isSavingDisabled = () => {
|
||||
const processing = submitting || processingConfig || processingValidate;
|
||||
const processing = isSubmitting || processingConfig || processingValidate;
|
||||
|
||||
if (servePlainDns && !isEnabled) {
|
||||
return invalid || processing;
|
||||
return !isValid || processing;
|
||||
}
|
||||
|
||||
return invalid || processing || !valid_key || !valid_cert || !valid_pair;
|
||||
return !isValid || processing || !valid_key || !valid_cert || !valid_pair;
|
||||
};
|
||||
|
||||
const clearFields = () => {
|
||||
if (window.confirm(t('encryption_reset'))) {
|
||||
reset();
|
||||
setTlsConfig(defaultValues);
|
||||
validateTlsConfig(defaultValues);
|
||||
}
|
||||
};
|
||||
|
||||
const validatePorts = (values: EncryptionFormValues) => {
|
||||
const errors: { port_dns_over_tls?: string; port_https?: string } = {};
|
||||
|
||||
if (values.port_dns_over_tls && values.port_https) {
|
||||
if (values.port_dns_over_tls === values.port_https) {
|
||||
errors.port_dns_over_tls = i18next.t('form_error_equal');
|
||||
errors.port_https = i18next.t('form_error_equal');
|
||||
}
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
const onFormSubmit = (data: EncryptionFormValues) => {
|
||||
const validationErrors = validatePorts(data);
|
||||
|
||||
if (Object.keys(validationErrors).length > 0) {
|
||||
Object.entries(validationErrors).forEach(([field, message]) => {
|
||||
setError(field as keyof EncryptionFormValues, { type: 'manual', message });
|
||||
});
|
||||
} else {
|
||||
onSubmit(data);
|
||||
}
|
||||
};
|
||||
|
||||
const isDisabled = isSavingDisabled();
|
||||
const isWarning = valid_key && valid_cert && valid_pair;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form__group form__group--settings mb-3">
|
||||
<Field
|
||||
<Controller
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('encryption_enable')}
|
||||
onChange={handleChange}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox {...field} title={t('encryption_enable')} onBlur={handleBlur} />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -187,13 +239,13 @@ let Form = (props: FormProps) => {
|
||||
</div>
|
||||
|
||||
<div className="form__group mb-3 mt-5">
|
||||
<Field
|
||||
<Controller
|
||||
name="serve_plain_dns"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('encryption_plain_dns_enable')}
|
||||
onChange={handleChange}
|
||||
validate={validatePlainDns}
|
||||
control={control}
|
||||
rules={{
|
||||
validate: (value) => validatePlainDns(value, getValues()),
|
||||
}}
|
||||
render={({ field }) => <Checkbox {...field} title={t('encryption_plain_dns_enable')} />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -212,16 +264,20 @@ let Form = (props: FormProps) => {
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
id="server_name"
|
||||
<Controller
|
||||
name="server_name"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('encryption_server_enter')}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
validate={validateServerName}
|
||||
control={control}
|
||||
rules={{ validate: validateServerName }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
placeholder={t('encryption_server_enter')}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isEnabled}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="form__desc">
|
||||
@@ -232,13 +288,12 @@ let Form = (props: FormProps) => {
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name="force_https"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('encryption_redirect')}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox {...field} title={t('encryption_redirect')} disabled={!isEnabled} />
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="form__desc">
|
||||
@@ -255,17 +310,24 @@ let Form = (props: FormProps) => {
|
||||
<Trans>encryption_https</Trans>
|
||||
</label>
|
||||
|
||||
<Field
|
||||
id="port_https"
|
||||
<Controller
|
||||
name="port_https"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={t('encryption_https')}
|
||||
validate={[validatePort, validateIsSafePort]}
|
||||
normalize={toNumber}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
rules={{ validate: { validatePort, validateIsSafePort } }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="number"
|
||||
placeholder={t('encryption_https')}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isEnabled}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="form__desc">
|
||||
@@ -280,17 +342,24 @@ let Form = (props: FormProps) => {
|
||||
<Trans>encryption_dot</Trans>
|
||||
</label>
|
||||
|
||||
<Field
|
||||
id="port_dns_over_tls"
|
||||
<Controller
|
||||
name="port_dns_over_tls"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={t('encryption_dot')}
|
||||
validate={[validatePortTLS]}
|
||||
normalize={toNumber}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
rules={{ validate: validatePortTLS }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="number"
|
||||
placeholder={t('encryption_dot')}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isEnabled}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="form__desc">
|
||||
@@ -305,17 +374,24 @@ let Form = (props: FormProps) => {
|
||||
<Trans>encryption_doq</Trans>
|
||||
</label>
|
||||
|
||||
<Field
|
||||
id="port_dns_over_quic"
|
||||
<Controller
|
||||
name="port_dns_over_quic"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={t('encryption_doq')}
|
||||
validate={[validatePortQuic]}
|
||||
normalize={toNumber}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
rules={{ validate: validatePortQuic }}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="number"
|
||||
placeholder={t('encryption_doq')}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isEnabled}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="form__desc">
|
||||
@@ -352,50 +428,44 @@ let Form = (props: FormProps) => {
|
||||
|
||||
<div className="form__inline mb-2">
|
||||
<div className="custom-controls-stacked">
|
||||
<Field
|
||||
<Controller
|
||||
name="certificate_source"
|
||||
component={renderRadioField}
|
||||
type="radio"
|
||||
className="form-control mr-2"
|
||||
value="path"
|
||||
placeholder={t('encryption_certificates_source_path')}
|
||||
disabled={!isEnabled}
|
||||
/>
|
||||
|
||||
<Field
|
||||
name="certificate_source"
|
||||
component={renderRadioField}
|
||||
type="radio"
|
||||
className="form-control mr-2"
|
||||
value="content"
|
||||
placeholder={t('encryption_certificates_source_content')}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Radio {...field} options={certificateSourceOptions} disabled={!isEnabled} />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{certificateSource === ENCRYPTION_SOURCE.CONTENT && (
|
||||
<Field
|
||||
id="certificate_chain"
|
||||
{certificateSource === ENCRYPTION_SOURCE.CONTENT ? (
|
||||
<Controller
|
||||
name="certificate_chain"
|
||||
component="textarea"
|
||||
type="text"
|
||||
className="form-control form-control--textarea"
|
||||
placeholder={t('encryption_certificates_input')}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder={t('encryption_certificates_input')}
|
||||
disabled={!isEnabled}
|
||||
error={fieldState.error?.message}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{certificateSource === ENCRYPTION_SOURCE.PATH && (
|
||||
<Field
|
||||
id="certificate_path"
|
||||
) : (
|
||||
<Controller
|
||||
name="certificate_path"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('encryption_certificate_path')}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
placeholder={t('encryption_certificate_path')}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isEnabled}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -424,70 +494,67 @@ let Form = (props: FormProps) => {
|
||||
|
||||
<div className="form__inline mb-2">
|
||||
<div className="custom-controls-stacked">
|
||||
<Field
|
||||
<Controller
|
||||
name="key_source"
|
||||
component={renderRadioField}
|
||||
type="radio"
|
||||
className="form-control mr-2"
|
||||
value={ENCRYPTION_SOURCE.PATH}
|
||||
placeholder={t('encryption_key_source_path')}
|
||||
disabled={!isEnabled}
|
||||
/>
|
||||
|
||||
<Field
|
||||
name="key_source"
|
||||
component={renderRadioField}
|
||||
type="radio"
|
||||
className="form-control mr-2"
|
||||
value={ENCRYPTION_SOURCE.CONTENT}
|
||||
placeholder={t('encryption_key_source_content')}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Radio {...field} options={keySourceOptions} disabled={!isEnabled} />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{privateKeySource === ENCRYPTION_SOURCE.PATH && (
|
||||
<Field
|
||||
{privateKeySource === ENCRYPTION_SOURCE.CONTENT ? (
|
||||
<>
|
||||
<Controller
|
||||
name="private_key_saved"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
title={t('use_saved_key')}
|
||||
disabled={!isEnabled}
|
||||
onChange={(checked: boolean) => {
|
||||
if (checked) {
|
||||
setValue('private_key', '');
|
||||
}
|
||||
field.onChange(checked);
|
||||
}}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="private_key"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder={t('encryption_key_input')}
|
||||
disabled={!isEnabled || privateKeySaved}
|
||||
error={fieldState.error?.message}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Controller
|
||||
name="private_key_path"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('encryption_private_key_path')}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
type="text"
|
||||
placeholder={t('encryption_private_key_path')}
|
||||
error={fieldState.error?.message}
|
||||
disabled={!isEnabled}
|
||||
onBlur={handleBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{privateKeySource === ENCRYPTION_SOURCE.CONTENT && [
|
||||
<Field
|
||||
key="private_key_saved"
|
||||
name="private_key_saved"
|
||||
type="checkbox"
|
||||
className="form__group form__group--settings mb-2"
|
||||
component={CheckboxField}
|
||||
disabled={!isEnabled}
|
||||
placeholder={t('use_saved_key')}
|
||||
onChange={(event: any) => {
|
||||
if (event.target.checked) {
|
||||
change('private_key', '');
|
||||
}
|
||||
if (handleChange) {
|
||||
handleChange(event);
|
||||
}
|
||||
}}
|
||||
/>,
|
||||
|
||||
<Field
|
||||
id="private_key"
|
||||
key="private_key"
|
||||
name="private_key"
|
||||
component="textarea"
|
||||
type="text"
|
||||
className="form-control form-control--textarea"
|
||||
placeholder={t('encryption_key_input')}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled || privateKeySaved}
|
||||
/>,
|
||||
]}
|
||||
</div>
|
||||
|
||||
<div className="form__status">
|
||||
@@ -505,44 +572,11 @@ let Form = (props: FormProps) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-standart"
|
||||
disabled={submitting || processingConfig}
|
||||
onClick={() => clearFields(change, setTlsConfig, validateTlsConfig, t)}>
|
||||
disabled={isSubmitting || processingConfig}
|
||||
onClick={clearFields}>
|
||||
<Trans>reset_settings</Trans>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
const selector = formValueSelector(FORM_NAME.ENCRYPTION);
|
||||
|
||||
Form = connect((state) => {
|
||||
const isEnabled = selector(state, 'enabled');
|
||||
const servePlainDns = selector(state, 'serve_plain_dns');
|
||||
const certificateChain = selector(state, 'certificate_chain');
|
||||
const privateKey = selector(state, 'private_key');
|
||||
const certificatePath = selector(state, 'certificate_path');
|
||||
const privateKeyPath = selector(state, 'private_key_path');
|
||||
const certificateSource = selector(state, 'certificate_source');
|
||||
const privateKeySource = selector(state, 'key_source');
|
||||
const privateKeySaved = selector(state, 'private_key_saved');
|
||||
return {
|
||||
isEnabled,
|
||||
servePlainDns,
|
||||
certificateChain,
|
||||
privateKey,
|
||||
certificatePath,
|
||||
privateKeyPath,
|
||||
certificateSource,
|
||||
privateKeySource,
|
||||
privateKeySaved,
|
||||
};
|
||||
})(Form);
|
||||
|
||||
export default flow([
|
||||
withTranslation(),
|
||||
reduxForm({
|
||||
form: FORM_NAME.ENCRYPTION,
|
||||
validate,
|
||||
}),
|
||||
])(Form);
|
||||
|
||||
@@ -1,61 +1,60 @@
|
||||
import React, { Component } from 'react';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { debounce } from 'lodash';
|
||||
import { DEBOUNCE_TIMEOUT, ENCRYPTION_SOURCE } from '../../../helpers/constants';
|
||||
|
||||
import Form from './Form';
|
||||
|
||||
import { EncryptionFormValues, Form } from './Form';
|
||||
import Card from '../../ui/Card';
|
||||
|
||||
import PageTitle from '../../ui/PageTitle';
|
||||
|
||||
import Loading from '../../ui/Loading';
|
||||
import { EncryptionData } from '../../../initialState';
|
||||
|
||||
interface EncryptionProps {
|
||||
setTlsConfig: (...args: unknown[]) => unknown;
|
||||
validateTlsConfig: (...args: unknown[]) => unknown;
|
||||
type Props = {
|
||||
encryption: EncryptionData;
|
||||
t: (...args: unknown[]) => string;
|
||||
}
|
||||
setTlsConfig: (values: Partial<EncryptionData>) => void;
|
||||
validateTlsConfig: (values: Partial<EncryptionData>) => void;
|
||||
};
|
||||
|
||||
class Encryption extends Component<EncryptionProps> {
|
||||
componentDidMount() {
|
||||
const { validateTlsConfig, encryption } = this.props;
|
||||
export const Encryption = ({ encryption, setTlsConfig, validateTlsConfig }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (encryption.enabled) {
|
||||
validateTlsConfig(encryption);
|
||||
}
|
||||
}
|
||||
|
||||
handleFormSubmit = (values: any) => {
|
||||
const submitValues = this.getSubmitValues(values);
|
||||
|
||||
this.props.setTlsConfig(submitValues);
|
||||
};
|
||||
|
||||
handleFormChange = debounce((values) => {
|
||||
const submitValues = this.getSubmitValues(values);
|
||||
|
||||
if (submitValues.enabled) {
|
||||
this.props.validateTlsConfig(submitValues);
|
||||
}
|
||||
}, DEBOUNCE_TIMEOUT);
|
||||
|
||||
getInitialValues = (data: any) => {
|
||||
const { certificate_chain, private_key, private_key_saved } = data;
|
||||
const initialValues = useMemo((): EncryptionFormValues => {
|
||||
const {
|
||||
enabled,
|
||||
serve_plain_dns,
|
||||
server_name,
|
||||
force_https,
|
||||
port_https,
|
||||
port_dns_over_tls,
|
||||
port_dns_over_quic,
|
||||
certificate_chain,
|
||||
private_key,
|
||||
certificate_path,
|
||||
private_key_path,
|
||||
private_key_saved,
|
||||
} = encryption;
|
||||
const certificate_source = certificate_chain ? ENCRYPTION_SOURCE.CONTENT : ENCRYPTION_SOURCE.PATH;
|
||||
const key_source = private_key || private_key_saved ? ENCRYPTION_SOURCE.CONTENT : ENCRYPTION_SOURCE.PATH;
|
||||
|
||||
return {
|
||||
...data,
|
||||
enabled,
|
||||
serve_plain_dns,
|
||||
server_name,
|
||||
force_https,
|
||||
port_https,
|
||||
port_dns_over_tls,
|
||||
port_dns_over_quic,
|
||||
certificate_chain,
|
||||
private_key,
|
||||
certificate_path,
|
||||
private_key_path,
|
||||
private_key_saved,
|
||||
certificate_source,
|
||||
key_source,
|
||||
};
|
||||
};
|
||||
}, [encryption]);
|
||||
|
||||
getSubmitValues = (values: any) => {
|
||||
const getSubmitValues = useCallback((values: any) => {
|
||||
const { certificate_source, key_source, private_key_saved, ...config } = values;
|
||||
|
||||
if (certificate_source === ENCRYPTION_SOURCE.PATH) {
|
||||
@@ -76,63 +75,47 @@ class Encryption extends Component<EncryptionProps> {
|
||||
}
|
||||
|
||||
return config;
|
||||
};
|
||||
}, []);
|
||||
|
||||
render() {
|
||||
const { encryption, t } = this.props;
|
||||
const {
|
||||
enabled,
|
||||
server_name,
|
||||
force_https,
|
||||
port_https,
|
||||
port_dns_over_tls,
|
||||
port_dns_over_quic,
|
||||
certificate_chain,
|
||||
private_key,
|
||||
certificate_path,
|
||||
private_key_path,
|
||||
private_key_saved,
|
||||
serve_plain_dns,
|
||||
} = encryption;
|
||||
const handleFormSubmit = useCallback(
|
||||
(values: any) => {
|
||||
const submitValues = getSubmitValues(values);
|
||||
setTlsConfig(submitValues);
|
||||
},
|
||||
[getSubmitValues, setTlsConfig],
|
||||
);
|
||||
|
||||
const initialValues = this.getInitialValues({
|
||||
enabled,
|
||||
server_name,
|
||||
force_https,
|
||||
port_https,
|
||||
port_dns_over_tls,
|
||||
port_dns_over_quic,
|
||||
certificate_chain,
|
||||
private_key,
|
||||
certificate_path,
|
||||
private_key_path,
|
||||
private_key_saved,
|
||||
serve_plain_dns,
|
||||
});
|
||||
const validateConfig = useCallback((values) => {
|
||||
const submitValues = getSubmitValues(values);
|
||||
|
||||
return (
|
||||
<div className="encryption">
|
||||
<PageTitle title={t('encryption_settings')} />
|
||||
if (submitValues.enabled) {
|
||||
validateTlsConfig(submitValues);
|
||||
}
|
||||
}, []);
|
||||
|
||||
{encryption.processing && <Loading />}
|
||||
{!encryption.processing && (
|
||||
<Card
|
||||
title={t('encryption_title')}
|
||||
subtitle={t('encryption_desc')}
|
||||
bodyType="card-body box-body--settings">
|
||||
<Form
|
||||
initialValues={initialValues}
|
||||
onSubmit={this.handleFormSubmit}
|
||||
onChange={this.handleFormChange}
|
||||
setTlsConfig={this.props.setTlsConfig}
|
||||
validateTlsConfig={this.props.validateTlsConfig}
|
||||
{...this.props.encryption}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
const debouncedConfigValidation = useMemo(() => debounce(validateConfig, DEBOUNCE_TIMEOUT), [validateConfig]);
|
||||
|
||||
export default withTranslation()(Encryption);
|
||||
return (
|
||||
<div className="encryption">
|
||||
<PageTitle title={t('encryption_settings')} />
|
||||
|
||||
{encryption.processing ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<Card
|
||||
title={t('encryption_title')}
|
||||
subtitle={t('encryption_desc')}
|
||||
bodyType="card-body box-body--settings">
|
||||
<Form
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
debouncedConfigValidation={debouncedConfigValidation}
|
||||
setTlsConfig={setTlsConfig}
|
||||
validateTlsConfig={validateTlsConfig}
|
||||
encryption={encryption}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
|
||||
import { CheckboxField, toNumber } from '../../../helpers/form';
|
||||
import { FILTERS_INTERVALS_HOURS, FILTERS_RELATIVE_LINK, FORM_NAME } from '../../../helpers/constants';
|
||||
|
||||
const getTitleForInterval = (interval: any, t: any) => {
|
||||
if (interval === 0) {
|
||||
return t('disabled');
|
||||
}
|
||||
if (interval === 72 || interval === 168) {
|
||||
return t('interval_days', { count: interval / 24 });
|
||||
}
|
||||
|
||||
return t('interval_hours', { count: interval });
|
||||
};
|
||||
|
||||
const getIntervalSelect = (processing: any, t: any, handleChange: any, toNumber: any) => (
|
||||
<Field
|
||||
name="interval"
|
||||
className="custom-select"
|
||||
component="select"
|
||||
onChange={handleChange}
|
||||
normalize={toNumber}
|
||||
disabled={processing}>
|
||||
{FILTERS_INTERVALS_HOURS.map((interval) => (
|
||||
<option value={interval} key={interval}>
|
||||
{getTitleForInterval(interval, t)}
|
||||
</option>
|
||||
))}
|
||||
</Field>
|
||||
);
|
||||
|
||||
interface FormProps {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
handleChange?: (...args: unknown[]) => unknown;
|
||||
change: (...args: unknown[]) => unknown;
|
||||
submitting: boolean;
|
||||
invalid: boolean;
|
||||
processing: boolean;
|
||||
t: (...args: unknown[]) => string;
|
||||
}
|
||||
|
||||
const Form = (props: FormProps) => {
|
||||
const { handleSubmit, handleChange, processing, t } = props;
|
||||
|
||||
const components = {
|
||||
a: <a href={FILTERS_RELATIVE_LINK} rel="noopener noreferrer" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
modifier="checkbox--settings"
|
||||
component={CheckboxField}
|
||||
placeholder={t('block_domain_use_filters_and_hosts')}
|
||||
subtitle={<Trans components={components}>filters_block_toggle_hint</Trans>}
|
||||
onChange={handleChange}
|
||||
disabled={processing}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-5">
|
||||
<div className="form__group form__group--inner mb-5">
|
||||
<label className="form__label">
|
||||
<Trans>filters_interval</Trans>
|
||||
</label>
|
||||
{getIntervalSelect(processing, t, handleChange, toNumber)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default flow([withTranslation(), reduxForm({ form: FORM_NAME.FILTER_CONFIG })])(Form);
|
||||
@@ -1,39 +1,115 @@
|
||||
import React from 'react';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
|
||||
import { DEBOUNCE_TIMEOUT } from '../../../helpers/constants';
|
||||
import i18next from 'i18next';
|
||||
import { toNumber } from '../../../helpers/form';
|
||||
import { DAY, FILTERS_INTERVALS_HOURS, FILTERS_RELATIVE_LINK } from '../../../helpers/constants';
|
||||
import { Checkbox } from '../../ui/Controls/Checkbox';
|
||||
import { Select } from '../../ui/Controls/Select';
|
||||
|
||||
import Form from './Form';
|
||||
const THREE_DAYS_INTERVAL = DAY * 3;
|
||||
const SEVEN_DAYS_INTERVAL = DAY * 7;
|
||||
|
||||
import { getObjDiff } from '../../../helpers/helpers';
|
||||
const getTitleForInterval = (interval: number) => {
|
||||
if (interval === 0) {
|
||||
return i18next.t('disabled');
|
||||
}
|
||||
|
||||
interface FiltersConfigProps {
|
||||
initialValues: object;
|
||||
processing: boolean;
|
||||
setFiltersConfig: (...args: unknown[]) => unknown;
|
||||
t: (...args: unknown[]) => string;
|
||||
}
|
||||
if (interval === THREE_DAYS_INTERVAL || interval === SEVEN_DAYS_INTERVAL) {
|
||||
return i18next.t('interval_days', { count: interval / DAY });
|
||||
}
|
||||
|
||||
const FiltersConfig = (props: FiltersConfigProps) => {
|
||||
const { initialValues, processing } = props;
|
||||
|
||||
const handleFormChange = debounce((values) => {
|
||||
const diff = getObjDiff(initialValues, values);
|
||||
|
||||
if (Object.values(diff).length > 0) {
|
||||
props.setFiltersConfig(values);
|
||||
}
|
||||
}, DEBOUNCE_TIMEOUT);
|
||||
|
||||
return (
|
||||
<Form
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormChange}
|
||||
onChange={handleFormChange}
|
||||
processing={processing}
|
||||
/>
|
||||
);
|
||||
return i18next.t('interval_hours', { count: interval });
|
||||
};
|
||||
|
||||
export default withTranslation()(FiltersConfig);
|
||||
export type FormValues = {
|
||||
enabled: boolean;
|
||||
interval: number;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
initialValues: FormValues;
|
||||
setFiltersConfig: (values: FormValues) => void;
|
||||
processing: boolean;
|
||||
};
|
||||
|
||||
export const FiltersConfig = ({ initialValues, setFiltersConfig, processing }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const prevFormValuesRef = useRef<FormValues>(initialValues);
|
||||
|
||||
const { watch, control } = useForm({
|
||||
mode: 'onBlur',
|
||||
defaultValues: initialValues,
|
||||
});
|
||||
|
||||
const formValues = watch();
|
||||
|
||||
useEffect(() => {
|
||||
const prevFormValues = prevFormValuesRef.current;
|
||||
|
||||
if (JSON.stringify(prevFormValues) !== JSON.stringify(formValues)) {
|
||||
setFiltersConfig(formValues);
|
||||
prevFormValuesRef.current = formValues;
|
||||
}
|
||||
}, [formValues]);
|
||||
|
||||
const components = {
|
||||
a: <a href={FILTERS_RELATIVE_LINK} rel="noopener noreferrer" />,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<div className="form__group form__group--settings">
|
||||
<Controller
|
||||
name="enabled"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="filters_enabled"
|
||||
title={t('block_domain_use_filters_and_hosts')}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<p>
|
||||
<Trans components={components}>filters_block_toggle_hint</Trans>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-5">
|
||||
<div className="form__group form__group--inner mb-5">
|
||||
<label className="form__label">
|
||||
<Trans>filters_interval</Trans>
|
||||
</label>
|
||||
<Controller
|
||||
name="interval"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
{...field}
|
||||
data-testid="filters_interval"
|
||||
disabled={processing}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}>
|
||||
{FILTERS_INTERVALS_HOURS.map((interval) => (
|
||||
<option value={interval} key={interval}>
|
||||
{getTitleForInterval(interval)}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,147 +1,182 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { change, Field, formValueSelector, reduxForm } from 'redux-form';
|
||||
import { connect } from 'react-redux';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
|
||||
import {
|
||||
CheckboxField,
|
||||
toFloatNumber,
|
||||
renderTextareaField,
|
||||
renderInputField,
|
||||
renderRadioField,
|
||||
} from '../../../helpers/form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import i18next from 'i18next';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
|
||||
import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
|
||||
import {
|
||||
FORM_NAME,
|
||||
QUERY_LOG_INTERVALS_DAYS,
|
||||
HOUR,
|
||||
DAY,
|
||||
RETENTION_CUSTOM,
|
||||
RETENTION_CUSTOM_INPUT,
|
||||
RETENTION_RANGE,
|
||||
CUSTOM_INTERVAL,
|
||||
} from '../../../helpers/constants';
|
||||
import { QUERY_LOG_INTERVALS_DAYS, HOUR, DAY, RETENTION_CUSTOM, RETENTION_RANGE } from '../../../helpers/constants';
|
||||
import '../FormButton.css';
|
||||
import { Checkbox } from '../../ui/Controls/Checkbox';
|
||||
import { Input } from '../../ui/Controls/Input';
|
||||
import { toNumber } from '../../../helpers/form';
|
||||
import { Textarea } from '../../ui/Controls/Textarea';
|
||||
|
||||
const getIntervalTitle = (interval: any, t: any) => {
|
||||
const getIntervalTitle = (interval: number) => {
|
||||
switch (interval) {
|
||||
case RETENTION_CUSTOM:
|
||||
return t('settings_custom');
|
||||
return i18next.t('settings_custom');
|
||||
case 6 * HOUR:
|
||||
return t('interval_6_hour');
|
||||
return i18next.t('interval_6_hour');
|
||||
case DAY:
|
||||
return t('interval_24_hour');
|
||||
return i18next.t('interval_24_hour');
|
||||
default:
|
||||
return t('interval_days', { count: interval / DAY });
|
||||
return i18next.t('interval_days', { count: interval / DAY });
|
||||
}
|
||||
};
|
||||
|
||||
const getIntervalFields = (processing: any, t: any, toNumber: any) =>
|
||||
QUERY_LOG_INTERVALS_DAYS.map((interval) => (
|
||||
<Field
|
||||
key={interval}
|
||||
name="interval"
|
||||
type="radio"
|
||||
component={renderRadioField}
|
||||
value={interval}
|
||||
placeholder={getIntervalTitle(interval, t)}
|
||||
normalize={toNumber}
|
||||
disabled={processing}
|
||||
/>
|
||||
));
|
||||
export type FormValues = {
|
||||
enabled: boolean;
|
||||
anonymize_client_ip: boolean;
|
||||
interval: number;
|
||||
customInterval?: number | null;
|
||||
ignored: string;
|
||||
};
|
||||
|
||||
interface FormProps {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
handleClear: (...args: unknown[]) => unknown;
|
||||
submitting: boolean;
|
||||
invalid: boolean;
|
||||
type Props = {
|
||||
initialValues: Partial<FormValues>;
|
||||
processing: boolean;
|
||||
processingClear: boolean;
|
||||
t: (...args: unknown[]) => string;
|
||||
interval?: number;
|
||||
customInterval?: number;
|
||||
dispatch: (...args: unknown[]) => unknown;
|
||||
}
|
||||
processingReset: boolean;
|
||||
onSubmit: (values: FormValues) => void;
|
||||
onReset: () => void;
|
||||
};
|
||||
|
||||
export const Form = ({ initialValues, processing, processingReset, onSubmit, onReset }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
let Form = (props: FormProps) => {
|
||||
const {
|
||||
handleSubmit,
|
||||
submitting,
|
||||
invalid,
|
||||
processing,
|
||||
processingClear,
|
||||
handleClear,
|
||||
t,
|
||||
interval,
|
||||
customInterval,
|
||||
dispatch,
|
||||
} = props;
|
||||
watch,
|
||||
setValue,
|
||||
control,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onBlur',
|
||||
defaultValues: {
|
||||
enabled: initialValues.enabled || false,
|
||||
anonymize_client_ip: initialValues.anonymize_client_ip || false,
|
||||
interval: initialValues.interval || DAY,
|
||||
customInterval: initialValues.customInterval || null,
|
||||
ignored: initialValues.ignored || '',
|
||||
},
|
||||
});
|
||||
|
||||
const intervalValue = watch('interval');
|
||||
const customIntervalValue = watch('customInterval');
|
||||
|
||||
useEffect(() => {
|
||||
if (QUERY_LOG_INTERVALS_DAYS.includes(interval)) {
|
||||
dispatch(change(FORM_NAME.LOG_CONFIG, CUSTOM_INTERVAL, null));
|
||||
if (QUERY_LOG_INTERVALS_DAYS.includes(intervalValue)) {
|
||||
setValue('customInterval', null);
|
||||
}
|
||||
}, [interval]);
|
||||
}, [intervalValue]);
|
||||
|
||||
const onSubmitForm = (data: FormValues) => {
|
||||
onSubmit(data);
|
||||
};
|
||||
|
||||
const handleIgnoredBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
|
||||
const trimmed = trimLinesAndRemoveEmpty(e.target.value);
|
||||
setValue('ignored', trimmed);
|
||||
};
|
||||
|
||||
const disableSubmit = isSubmitting || processing || (intervalValue === RETENTION_CUSTOM && !customIntervalValue);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('query_log_enable')}
|
||||
disabled={processing}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="logs_enabled"
|
||||
title={t('query_log_enable')}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name="anonymize_client_ip"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('anonymize_client_ip')}
|
||||
subtitle={t('anonymize_client_ip_desc')}
|
||||
disabled={processing}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="logs_anonymize_client_ip"
|
||||
title={t('anonymize_client_ip')}
|
||||
subtitle={t('anonymize_client_ip_desc')}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label className="form__label">
|
||||
<div className="form__label">
|
||||
<Trans>query_log_retention</Trans>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<div className="custom-controls-stacked">
|
||||
<Field
|
||||
key={RETENTION_CUSTOM}
|
||||
name="interval"
|
||||
type="radio"
|
||||
component={renderRadioField}
|
||||
value={QUERY_LOG_INTERVALS_DAYS.includes(interval) ? RETENTION_CUSTOM : interval}
|
||||
placeholder={getIntervalTitle(RETENTION_CUSTOM, t)}
|
||||
normalize={toFloatNumber}
|
||||
disabled={processing}
|
||||
/>
|
||||
{!QUERY_LOG_INTERVALS_DAYS.includes(interval) && (
|
||||
<label className="custom-control custom-radio">
|
||||
<input
|
||||
type="radio"
|
||||
data-testid="logs_config_interval"
|
||||
className="custom-control-input"
|
||||
disabled={processing}
|
||||
checked={!QUERY_LOG_INTERVALS_DAYS.includes(intervalValue)}
|
||||
value={RETENTION_CUSTOM}
|
||||
onChange={(e) => {
|
||||
setValue('interval', parseInt(e.target.value, 10));
|
||||
}}
|
||||
/>
|
||||
|
||||
<span className="custom-control-label">{getIntervalTitle(RETENTION_CUSTOM)}</span>
|
||||
</label>
|
||||
|
||||
{!QUERY_LOG_INTERVALS_DAYS.includes(intervalValue) && (
|
||||
<div className="form__group--input">
|
||||
<div className="form__desc form__desc--top">{t('custom_rotation_input')}</div>
|
||||
|
||||
<Field
|
||||
key={RETENTION_CUSTOM_INPUT}
|
||||
name={CUSTOM_INTERVAL}
|
||||
type="number"
|
||||
className="form-control"
|
||||
component={renderInputField}
|
||||
disabled={processing}
|
||||
normalize={toFloatNumber}
|
||||
min={RETENTION_RANGE.MIN}
|
||||
max={RETENTION_RANGE.MAX}
|
||||
<Controller
|
||||
name="customInterval"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
data-testid="logs_config_custom_interval"
|
||||
disabled={processing}
|
||||
error={fieldState.error?.message}
|
||||
min={RETENTION_RANGE.MIN}
|
||||
max={RETENTION_RANGE.MAX}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{getIntervalFields(processing, t, toFloatNumber)}
|
||||
|
||||
{QUERY_LOG_INTERVALS_DAYS.map((interval) => (
|
||||
<label key={interval} className="custom-control custom-radio">
|
||||
<input
|
||||
type="radio"
|
||||
className="custom-control-input"
|
||||
data-testid={`logs_config_${interval}`}
|
||||
disabled={processing}
|
||||
value={interval}
|
||||
checked={intervalValue === interval}
|
||||
onChange={(e) => {
|
||||
setValue('interval', parseInt(e.target.value, 10));
|
||||
}}
|
||||
/>
|
||||
|
||||
<span className="custom-control-label">{getIntervalTitle(interval)}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -154,51 +189,41 @@ let Form = (props: FormProps) => {
|
||||
</div>
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name="ignored"
|
||||
type="textarea"
|
||||
className="form-control form-control--textarea font-monospace text-input"
|
||||
component={renderTextareaField}
|
||||
placeholder={t('ignore_domains')}
|
||||
disabled={processing}
|
||||
normalizeOnBlur={trimLinesAndRemoveEmpty}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
data-testid="logs_config_ingored"
|
||||
placeholder={t('ignore_domains')}
|
||||
className="text-input"
|
||||
disabled={processing}
|
||||
error={fieldState.error?.message}
|
||||
onBlur={handleIgnoredBlur}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="logs_config_save"
|
||||
className="btn btn-success btn-standard btn-large"
|
||||
disabled={
|
||||
submitting ||
|
||||
invalid ||
|
||||
processing ||
|
||||
(!QUERY_LOG_INTERVALS_DAYS.includes(interval) && !customInterval)
|
||||
}>
|
||||
disabled={disableSubmit}>
|
||||
<Trans>save_btn</Trans>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-testid="logs_config_clear"
|
||||
className="btn btn-outline-secondary btn-standard form__button"
|
||||
onClick={() => handleClear()}
|
||||
disabled={processingClear}>
|
||||
onClick={onReset}
|
||||
disabled={processingReset}>
|
||||
<Trans>query_log_clear</Trans>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
const selector = formValueSelector(FORM_NAME.LOG_CONFIG);
|
||||
|
||||
Form = connect((state) => {
|
||||
const interval = selector(state, 'interval');
|
||||
const customInterval = selector(state, CUSTOM_INTERVAL);
|
||||
return {
|
||||
interval,
|
||||
customInterval,
|
||||
};
|
||||
})(Form);
|
||||
|
||||
export default flow([withTranslation(), reduxForm({ form: FORM_NAME.LOG_CONFIG })])(Form);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
|
||||
|
||||
import Card from '../../ui/Card';
|
||||
|
||||
import Form from './Form';
|
||||
import { Form, FormValues } from './Form';
|
||||
import { HOUR } from '../../../helpers/constants';
|
||||
|
||||
interface LogsConfigProps {
|
||||
@@ -20,7 +20,7 @@ interface LogsConfigProps {
|
||||
}
|
||||
|
||||
class LogsConfig extends Component<LogsConfigProps> {
|
||||
handleFormSubmit = (values: any) => {
|
||||
handleFormSubmit = (values: FormValues) => {
|
||||
const { t, interval: prevInterval } = this.props;
|
||||
const { interval, customInterval, ...rest } = values;
|
||||
|
||||
@@ -53,19 +53,12 @@ class LogsConfig extends Component<LogsConfigProps> {
|
||||
render() {
|
||||
const {
|
||||
t,
|
||||
|
||||
enabled,
|
||||
|
||||
interval,
|
||||
|
||||
processing,
|
||||
|
||||
processingClear,
|
||||
|
||||
anonymize_client_ip,
|
||||
|
||||
ignored,
|
||||
|
||||
customInterval,
|
||||
} = this.props;
|
||||
|
||||
@@ -80,10 +73,10 @@ class LogsConfig extends Component<LogsConfigProps> {
|
||||
anonymize_client_ip,
|
||||
ignored: ignored?.join('\n'),
|
||||
}}
|
||||
onSubmit={this.handleFormSubmit}
|
||||
processing={processing}
|
||||
processingClear={processingClear}
|
||||
handleClear={this.handleClear}
|
||||
processingReset={processingClear}
|
||||
onSubmit={this.handleFormSubmit}
|
||||
onReset={this.handleClear}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -63,6 +63,7 @@
|
||||
}
|
||||
|
||||
.form__message {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
@@ -97,6 +98,10 @@
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.form__label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form__label--bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1,90 +1,101 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { change, Field, formValueSelector, reduxForm } from 'redux-form';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
import { connect } from 'react-redux';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import i18next from 'i18next';
|
||||
|
||||
import {
|
||||
renderRadioField,
|
||||
toNumber,
|
||||
CheckboxField,
|
||||
renderTextareaField,
|
||||
toFloatNumber,
|
||||
renderInputField,
|
||||
} from '../../../helpers/form';
|
||||
import {
|
||||
FORM_NAME,
|
||||
STATS_INTERVALS_DAYS,
|
||||
DAY,
|
||||
RETENTION_CUSTOM,
|
||||
RETENTION_CUSTOM_INPUT,
|
||||
CUSTOM_INTERVAL,
|
||||
RETENTION_RANGE,
|
||||
} from '../../../helpers/constants';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { STATS_INTERVALS_DAYS, DAY, RETENTION_CUSTOM, RETENTION_RANGE } from '../../../helpers/constants';
|
||||
|
||||
import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
|
||||
import '../FormButton.css';
|
||||
import { Checkbox } from '../../ui/Controls/Checkbox';
|
||||
import { Input } from '../../ui/Controls/Input';
|
||||
import { toNumber } from '../../../helpers/form';
|
||||
import { Textarea } from '../../ui/Controls/Textarea';
|
||||
|
||||
const getIntervalTitle = (intervalMs: any, t: any) => {
|
||||
switch (intervalMs) {
|
||||
const getIntervalTitle = (interval: any) => {
|
||||
switch (interval) {
|
||||
case RETENTION_CUSTOM:
|
||||
return t('settings_custom');
|
||||
return i18next.t('settings_custom');
|
||||
case DAY:
|
||||
return t('interval_24_hour');
|
||||
return i18next.t('interval_24_hour');
|
||||
default:
|
||||
return t('interval_days', { count: intervalMs / DAY });
|
||||
return i18next.t('interval_days', { count: interval / DAY });
|
||||
}
|
||||
};
|
||||
|
||||
interface FormProps {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
handleReset: (...args: unknown[]) => string;
|
||||
change: (...args: unknown[]) => unknown;
|
||||
submitting: boolean;
|
||||
invalid: boolean;
|
||||
export type FormValues = {
|
||||
enabled: boolean;
|
||||
interval: number;
|
||||
customInterval?: number | null;
|
||||
ignored: string;
|
||||
};
|
||||
|
||||
const defaultFormValues = {
|
||||
enabled: false,
|
||||
interval: DAY,
|
||||
customInterval: null,
|
||||
ignored: '',
|
||||
};
|
||||
|
||||
type Props = {
|
||||
initialValues: FormValues;
|
||||
processing: boolean;
|
||||
processingReset: boolean;
|
||||
t: (...args: unknown[]) => string;
|
||||
interval?: number;
|
||||
customInterval?: number;
|
||||
dispatch: (...args: unknown[]) => unknown;
|
||||
}
|
||||
onSubmit: (values: FormValues) => void;
|
||||
onReset: () => void;
|
||||
};
|
||||
|
||||
export const Form = ({ initialValues, processing, processingReset, onSubmit, onReset }: Props) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
let Form = (props: FormProps) => {
|
||||
const {
|
||||
handleSubmit,
|
||||
processing,
|
||||
submitting,
|
||||
invalid,
|
||||
handleReset,
|
||||
processingReset,
|
||||
t,
|
||||
interval,
|
||||
customInterval,
|
||||
dispatch,
|
||||
} = props;
|
||||
watch,
|
||||
setValue,
|
||||
control,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onBlur',
|
||||
defaultValues: {
|
||||
...defaultFormValues,
|
||||
...initialValues,
|
||||
},
|
||||
});
|
||||
|
||||
const intervalValue = watch('interval');
|
||||
const customIntervalValue = watch('customInterval');
|
||||
|
||||
useEffect(() => {
|
||||
if (STATS_INTERVALS_DAYS.includes(interval)) {
|
||||
dispatch(change(FORM_NAME.STATS_CONFIG, CUSTOM_INTERVAL, null));
|
||||
if (STATS_INTERVALS_DAYS.includes(intervalValue)) {
|
||||
setValue('customInterval', null);
|
||||
}
|
||||
}, [interval]);
|
||||
}, [intervalValue]);
|
||||
|
||||
const onSubmitForm = (data: FormValues) => {
|
||||
onSubmit(data);
|
||||
};
|
||||
|
||||
const disableSubmit = isSubmitting || processing || (intervalValue === RETENTION_CUSTOM && !customIntervalValue);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('statistics_enable')}
|
||||
disabled={processing}
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
{...field}
|
||||
data-testid="stats_config_enabled"
|
||||
title={t('statistics_enable')}
|
||||
disabled={processing}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label className="form__label form__label--with-desc">
|
||||
<div className="form__label form__label--with-desc">
|
||||
<Trans>statistics_retention</Trans>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>statistics_retention_desc</Trans>
|
||||
@@ -92,85 +103,105 @@ let Form = (props: FormProps) => {
|
||||
|
||||
<div className="form__group form__group--settings mt-2">
|
||||
<div className="custom-controls-stacked">
|
||||
<Field
|
||||
key={RETENTION_CUSTOM}
|
||||
name="interval"
|
||||
type="radio"
|
||||
component={renderRadioField}
|
||||
value={STATS_INTERVALS_DAYS.includes(interval) ? RETENTION_CUSTOM : interval}
|
||||
placeholder={getIntervalTitle(RETENTION_CUSTOM, t)}
|
||||
normalize={toFloatNumber}
|
||||
disabled={processing}
|
||||
/>
|
||||
{!STATS_INTERVALS_DAYS.includes(interval) && (
|
||||
<div className="form__group--input">
|
||||
<div className="form__desc form__desc--top">{t('custom_retention_input')}</div>
|
||||
<label className="custom-control custom-radio">
|
||||
<input
|
||||
type="radio"
|
||||
data-testid="stats_config_interval"
|
||||
className="custom-control-input"
|
||||
disabled={processing}
|
||||
checked={!STATS_INTERVALS_DAYS.includes(intervalValue)}
|
||||
value={RETENTION_CUSTOM}
|
||||
onChange={(e) => {
|
||||
setValue('interval', parseInt(e.target.value, 10));
|
||||
}}
|
||||
/>
|
||||
|
||||
<Field
|
||||
key={RETENTION_CUSTOM_INPUT}
|
||||
name={CUSTOM_INTERVAL}
|
||||
type="number"
|
||||
className="form-control"
|
||||
component={renderInputField}
|
||||
disabled={processing}
|
||||
normalize={toFloatNumber}
|
||||
min={RETENTION_RANGE.MIN}
|
||||
max={RETENTION_RANGE.MAX}
|
||||
<span className="custom-control-label">{getIntervalTitle(RETENTION_CUSTOM)}</span>
|
||||
</label>
|
||||
|
||||
{!STATS_INTERVALS_DAYS.includes(intervalValue) && (
|
||||
<div className="form__group--input">
|
||||
<div className="form__desc form__desc--top">{i18next.t('custom_retention_input')}</div>
|
||||
|
||||
<Controller
|
||||
name="customInterval"
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Input
|
||||
{...field}
|
||||
data-testid="stats_config_custom_interval"
|
||||
disabled={processing}
|
||||
error={fieldState.error?.message}
|
||||
min={RETENTION_RANGE.MIN}
|
||||
max={RETENTION_RANGE.MAX}
|
||||
onChange={(e) => {
|
||||
const { value } = e.target;
|
||||
field.onChange(toNumber(value));
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{STATS_INTERVALS_DAYS.map((interval) => (
|
||||
<Field
|
||||
key={interval}
|
||||
name="interval"
|
||||
type="radio"
|
||||
component={renderRadioField}
|
||||
value={interval}
|
||||
placeholder={getIntervalTitle(interval, t)}
|
||||
normalize={toNumber}
|
||||
disabled={processing}
|
||||
/>
|
||||
<label key={interval} className="custom-control custom-radio">
|
||||
<input
|
||||
type="radio"
|
||||
className="custom-control-input"
|
||||
disabled={processing}
|
||||
value={interval}
|
||||
checked={intervalValue === interval}
|
||||
onChange={(e) => {
|
||||
setValue('interval', parseInt(e.target.value, 10));
|
||||
}}
|
||||
/>
|
||||
|
||||
<span className="custom-control-label">{getIntervalTitle(interval)}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="form__label form__label--with-desc">
|
||||
<div className="form__label form__label--with-desc">
|
||||
<Trans>ignore_domains_title</Trans>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>ignore_domains_desc_stats</Trans>
|
||||
</div>
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
<Controller
|
||||
name="ignored"
|
||||
type="textarea"
|
||||
className="form-control form-control--textarea font-monospace text-input"
|
||||
component={renderTextareaField}
|
||||
placeholder={t('ignore_domains')}
|
||||
disabled={processing}
|
||||
normalizeOnBlur={trimLinesAndRemoveEmpty}
|
||||
control={control}
|
||||
render={({ field, fieldState }) => (
|
||||
<Textarea
|
||||
{...field}
|
||||
data-testid="stats_config_ignored"
|
||||
placeholder={t('ignore_domains')}
|
||||
className="text-input"
|
||||
disabled={processing}
|
||||
error={fieldState.error?.message}
|
||||
trimOnBlur
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="stats_config_save"
|
||||
className="btn btn-success btn-standard btn-large"
|
||||
disabled={
|
||||
submitting ||
|
||||
invalid ||
|
||||
processing ||
|
||||
(!STATS_INTERVALS_DAYS.includes(interval) && !customInterval)
|
||||
}>
|
||||
disabled={disableSubmit}>
|
||||
<Trans>save_btn</Trans>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-testid="stats_config_clear"
|
||||
className="btn btn-outline-secondary btn-standard form__button"
|
||||
onClick={() => handleReset()}
|
||||
onClick={onReset}
|
||||
disabled={processingReset}>
|
||||
<Trans>statistics_clear</Trans>
|
||||
</button>
|
||||
@@ -178,16 +209,3 @@ let Form = (props: FormProps) => {
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
const selector = formValueSelector(FORM_NAME.STATS_CONFIG);
|
||||
|
||||
Form = connect((state) => {
|
||||
const interval = selector(state, 'interval');
|
||||
const customInterval = selector(state, CUSTOM_INTERVAL);
|
||||
return {
|
||||
interval,
|
||||
customInterval,
|
||||
};
|
||||
})(Form);
|
||||
|
||||
export default flow([withTranslation(), reduxForm({ form: FORM_NAME.STATS_CONFIG })])(Form);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
|
||||
|
||||
import Card from '../../ui/Card';
|
||||
|
||||
import Form from './Form';
|
||||
import { Form, FormValues } from './Form';
|
||||
import { HOUR } from '../../../helpers/constants';
|
||||
|
||||
interface StatsConfigProps {
|
||||
@@ -19,7 +19,7 @@ interface StatsConfigProps {
|
||||
}
|
||||
|
||||
class StatsConfig extends Component<StatsConfigProps> {
|
||||
handleFormSubmit = ({ enabled, interval, ignored, customInterval }: any) => {
|
||||
handleFormSubmit = ({ enabled, interval, ignored, customInterval }: FormValues) => {
|
||||
const { t, interval: prevInterval } = this.props;
|
||||
const newInterval = customInterval ? customInterval * HOUR : interval;
|
||||
|
||||
@@ -49,17 +49,11 @@ class StatsConfig extends Component<StatsConfigProps> {
|
||||
render() {
|
||||
const {
|
||||
t,
|
||||
|
||||
interval,
|
||||
|
||||
customInterval,
|
||||
|
||||
processing,
|
||||
|
||||
processingReset,
|
||||
|
||||
ignored,
|
||||
|
||||
enabled,
|
||||
} = this.props;
|
||||
|
||||
@@ -73,10 +67,10 @@ class StatsConfig extends Component<StatsConfigProps> {
|
||||
enabled,
|
||||
ignored: ignored.join('\n'),
|
||||
}}
|
||||
onSubmit={this.handleFormSubmit}
|
||||
processing={processing}
|
||||
processingReset={processingReset}
|
||||
handleReset={this.handleReset}
|
||||
onSubmit={this.handleFormSubmit}
|
||||
onReset={this.handleReset}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
import i18next from 'i18next';
|
||||
import StatsConfig from './StatsConfig';
|
||||
|
||||
import LogsConfig from './LogsConfig';
|
||||
|
||||
import FiltersConfig from './FiltersConfig';
|
||||
import { FiltersConfig } from './FiltersConfig';
|
||||
|
||||
import Checkbox from '../ui/Checkbox';
|
||||
import { Checkbox } from '../ui/Controls/Checkbox';
|
||||
|
||||
import Loading from '../ui/Loading';
|
||||
|
||||
@@ -24,14 +25,14 @@ const ORDER_KEY = 'order';
|
||||
const SETTINGS = {
|
||||
safebrowsing: {
|
||||
enabled: false,
|
||||
title: 'use_adguard_browsing_sec',
|
||||
subtitle: 'use_adguard_browsing_sec_hint',
|
||||
title: i18next.t('use_adguard_browsing_sec'),
|
||||
subtitle: i18next.t('use_adguard_browsing_sec_hint'),
|
||||
[ORDER_KEY]: 0,
|
||||
},
|
||||
parental: {
|
||||
enabled: false,
|
||||
title: 'use_adguard_parental',
|
||||
subtitle: 'use_adguard_parental_hint',
|
||||
title: i18next.t('use_adguard_parental'),
|
||||
subtitle: i18next.t('use_adguard_parental_hint'),
|
||||
[ORDER_KEY]: 1,
|
||||
},
|
||||
};
|
||||
@@ -89,9 +90,18 @@ class Settings extends Component<SettingsProps> {
|
||||
renderSettings = (settings: any) =>
|
||||
getObjectKeysSorted(SETTINGS, ORDER_KEY).map((key: any) => {
|
||||
const setting = settings[key];
|
||||
const { enabled } = setting;
|
||||
const { enabled, title, subtitle } = setting;
|
||||
|
||||
return <Checkbox {...setting} key={key} handleChange={() => this.props.toggleSetting(key, enabled)} />;
|
||||
return (
|
||||
<div key={key} className="form__group form__group--checkbox">
|
||||
<Checkbox
|
||||
value={enabled}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
onChange={(checked) => this.props.toggleSetting(key, !checked)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
renderSafeSearch = () => {
|
||||
@@ -106,27 +116,29 @@ class Settings extends Component<SettingsProps> {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Checkbox
|
||||
enabled={enabled}
|
||||
title="enforce_safe_search"
|
||||
subtitle="enforce_save_search_hint"
|
||||
handleChange={({ target: { checked: enabled } }) =>
|
||||
this.props.toggleSetting('safesearch', { ...safesearch, enabled })
|
||||
}
|
||||
/>
|
||||
<div className="form__group form__group--checkbox">
|
||||
<Checkbox
|
||||
value={enabled}
|
||||
title={i18next.t('enforce_safe_search')}
|
||||
subtitle={i18next.t('enforce_save_search_hint')}
|
||||
onChange={(checked) =>
|
||||
this.props.toggleSetting('safesearch', { ...safesearch, enabled: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form__group--inner">
|
||||
{Object.keys(searches).map((searchKey) => (
|
||||
<Checkbox
|
||||
key={searchKey}
|
||||
enabled={searches[searchKey]}
|
||||
title={captitalizeWords(searchKey)}
|
||||
subtitle=""
|
||||
disabled={!safesearch.enabled}
|
||||
handleChange={({ target: { checked } }: any) =>
|
||||
this.props.toggleSetting('safesearch', { ...safesearch, [searchKey]: checked })
|
||||
}
|
||||
/>
|
||||
<div key={searchKey} className="form__group form__group--checkbox">
|
||||
<Checkbox
|
||||
value={searches[searchKey]}
|
||||
title={captitalizeWords(searchKey)}
|
||||
disabled={!safesearch.enabled}
|
||||
onChange={(checked) =>
|
||||
this.props.toggleSetting('safesearch', { ...safesearch, [searchKey]: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
@@ -136,23 +148,14 @@ class Settings extends Component<SettingsProps> {
|
||||
render() {
|
||||
const {
|
||||
settings,
|
||||
|
||||
setStatsConfig,
|
||||
|
||||
resetStats,
|
||||
|
||||
stats,
|
||||
|
||||
queryLogs,
|
||||
|
||||
setLogsConfig,
|
||||
|
||||
clearLogs,
|
||||
|
||||
filtering,
|
||||
|
||||
setFiltersConfig,
|
||||
|
||||
t,
|
||||
} = this.props;
|
||||
|
||||
@@ -163,6 +166,7 @@ class Settings extends Component<SettingsProps> {
|
||||
<PageTitle title={t('general_settings')} />
|
||||
|
||||
{!isDataReady && <Loading />}
|
||||
|
||||
{isDataReady && (
|
||||
<div className="content">
|
||||
<div className="row">
|
||||
|
||||
Reference in New Issue
Block a user