a
/
badguardhome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' into fix/2152

This commit is contained in:
ArtemBaskal 2020-10-06 20:22:51 +03:00
parent c98f18747c fb7ca94243
commit f3118c5e2a
8 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/Filters/Form.js
View File

@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
import flow from 'lodash/flow'; import flow from 'lodash/flow';
import classNames from 'classnames'; import classNames from 'classnames';
import { validatePath, validateRequiredValue } from '../../helpers/validators'; import { validatePath, validateRequiredValue } from '../../helpers/validators';
import { renderCheckboxField, renderInputField } from '../../helpers/form'; import { CheckboxField, renderInputField } from '../../helpers/form';
import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants'; import { MODAL_OPEN_TIMEOUT, MODAL_TYPE, FORM_NAME } from '../../helpers/constants';
const filtersCatalog = require('../../helpers/filters/filters.json'); const filtersCatalog = require('../../helpers/filters/filters.json');
@ -34,6 +34,22 @@ const renderIcons = (iconsData) => iconsData.map(({
</svg> </svg>
</a>); </a>);
const renderCheckboxField = (
props,
) => <CheckboxField
{...props}
input={{
...props.input,
checked: props.disabled || props.input.checked,
}}
/>;
renderCheckboxField.propTypes = {
// https://redux-form.com/8.3.0/docs/api/field.md/#props
input: PropTypes.object.isRequired,
disabled: PropTypes.bool.isRequired,
};
const renderFilters = ({ categories, filters }, selectedSources, t) => Object.keys(categories) const renderFilters = ({ categories, filters }, selectedSources, t) => Object.keys(categories)
.map((categoryId) => { .map((categoryId) => {
const category = categories[categoryId]; const category = categories[categoryId];
@ -60,12 +76,11 @@ const renderFilters = ({ categories, filters }, selectedSources, t) => Object.ke
return <div key={name} className="d-flex align-items-center pb-1"> return <div key={name} className="d-flex align-items-center pb-1">
<Field <Field
name={`${filter.id}`} name={filter.id}
type="checkbox" type="checkbox"
component={renderCheckboxField} component={renderCheckboxField}
placeholder={t(name)} placeholder={t(name)}
disabled={isSelected} disabled={isSelected}
checked={isSelected}
/> />
{renderIcons(iconsData)} {renderIcons(iconsData)}
</div>; </div>;

4
client/src/components/Settings/Clients/Form.js
View File

@ -15,7 +15,7 @@ import { toggleAllServices } from '../../../helpers/helpers';
import { import {
renderInputField, renderInputField,
renderGroupField, renderGroupField,
renderCheckboxField, CheckboxField,
renderServiceField, renderServiceField,
} from '../../../helpers/form'; } from '../../../helpers/form';
import { validateClientId, validateRequiredValue } from '../../../helpers/validators'; import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
@ -151,7 +151,7 @@ let Form = (props) => {
<Field <Field
name={setting.name} name={setting.name}
type="checkbox" type="checkbox"
component={renderCheckboxField} component={CheckboxField}
placeholder={t(setting.placeholder)} placeholder={t(setting.placeholder)}
disabled={ disabled={
setting.name !== 'use_global_settings' setting.name !== 'use_global_settings'

4
client/src/components/Settings/Dns/Config/Form.js
View File

@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
import { import {
renderInputField, renderInputField,
renderRadioField, renderRadioField,
renderCheckboxField, CheckboxField,
toNumber, toNumber,
} from '../../../../helpers/form'; } from '../../../../helpers/form';
import { import {
@ -97,7 +97,7 @@ const Form = ({
<Field <Field
name={name} name={name}
type="checkbox" type="checkbox"
component={renderCheckboxField} component={CheckboxField}
placeholder={t(placeholder)} placeholder={t(placeholder)}
disabled={processing} disabled={processing}
subtitle={t(subtitle)} subtitle={t(subtitle)}

6
client/src/components/Settings/Encryption/Form.js
View File

@ -7,7 +7,7 @@ import flow from 'lodash/flow';
import { import {
renderInputField, renderInputField,
renderCheckboxField, CheckboxField,
renderRadioField, renderRadioField,
toNumber, toNumber,
} from '../../../helpers/form'; } from '../../../helpers/form';
@ -101,7 +101,7 @@ let Form = (props) => {
<Field <Field
name="enabled" name="enabled"
type="checkbox" type="checkbox"
component={renderCheckboxField} component={CheckboxField}
placeholder={t('encryption_enable')} placeholder={t('encryption_enable')}
onChange={handleChange} onChange={handleChange}
/> />
@ -138,7 +138,7 @@ let Form = (props) => {
<Field <Field
name="force_https" name="force_https"
type="checkbox" type="checkbox"
component={renderCheckboxField} component={CheckboxField}
placeholder={t('encryption_redirect')} placeholder={t('encryption_redirect')}
onChange={handleChange} onChange={handleChange}
disabled={!isEnabled} disabled={!isEnabled}

4
client/src/components/Settings/FiltersConfig/Form.js
View File

@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, withTranslation } from 'react-i18next'; import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow'; import flow from 'lodash/flow';
import { renderCheckboxField, toNumber } from '../../../helpers/form'; import { CheckboxField, toNumber } from '../../../helpers/form';
import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants'; import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
const getTitleForInterval = (interval, t) => { const getTitleForInterval = (interval, t) => {
@ -49,7 +49,7 @@ const Form = (props) => {
name="enabled" name="enabled"
type="checkbox" type="checkbox"
modifier="checkbox--settings" modifier="checkbox--settings"
component={renderCheckboxField} component={CheckboxField}
placeholder={t('block_domain_use_filters_and_hosts')} placeholder={t('block_domain_use_filters_and_hosts')}
subtitle={t('filters_block_toggle_hint')} subtitle={t('filters_block_toggle_hint')}
onChange={handleChange} onChange={handleChange}

6
client/src/components/Settings/LogsConfig/Form.js
View File

@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, withTranslation } from 'react-i18next'; import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow'; import flow from 'lodash/flow';
import { renderCheckboxField, renderRadioField, toNumber } from '../../../helpers/form'; import { CheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants'; import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
import '../FormButton.css'; import '../FormButton.css';
@ -36,7 +36,7 @@ const Form = (props) => {
<Field <Field
name="enabled" name="enabled"
type="checkbox" type="checkbox"
component={renderCheckboxField} component={CheckboxField}
placeholder={t('query_log_enable')} placeholder={t('query_log_enable')}
disabled={processing} disabled={processing}
/> />
@ -45,7 +45,7 @@ const Form = (props) => {
<Field <Field
name="anonymize_client_ip" name="anonymize_client_ip"
type="checkbox" type="checkbox"
component={renderCheckboxField} component={CheckboxField}
placeholder={t('anonymize_client_ip')} placeholder={t('anonymize_client_ip')}
subtitle={t('anonymize_client_ip_desc')} subtitle={t('anonymize_client_ip_desc')}
disabled={processing} disabled={processing}

2
client/src/components/ui/Line.js
View File

@ -8,7 +8,7 @@ const Line = ({ data, color }) => data
&& <ResponsiveLine && <ResponsiveLine
data={data} data={data}
margin={{ margin={{
top: 15, top: data[0].data.every(({ y }) => y === 0) ? 62 : 15,
right: 0, right: 0,
bottom: 1, bottom: 1,
left: 20, left: 20,

23
client/src/helpers/form.js
View File

@ -156,31 +156,24 @@ renderRadioField.propTypes = {
}).isRequired, }).isRequired,
}; };
export const renderCheckboxField = ({ export const CheckboxField = ({
input, input,
placeholder, placeholder,
subtitle, subtitle,
disabled, disabled,
onClick, onClick,
modifier = 'checkbox--form', modifier = 'checkbox--form',
checked,
meta: { touched, error }, meta: { touched, error },
}) => <> }) => <>
<label className={`checkbox ${modifier}`} onClick={onClick}> <label className={`checkbox ${modifier}`} onClick={onClick}>
<span className="checkbox__marker" /> <span className="checkbox__marker" />
<input {...input} type="checkbox" className="checkbox__input" disabled={disabled} <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} />
checked={input.checked || checked} />
<span className="checkbox__label"> <span className="checkbox__label">
<span className="checkbox__label-text checkbox__label-text--long"> <span className="checkbox__label-text checkbox__label-text--long">
<span className="checkbox__label-title">{placeholder}</span> <span className="checkbox__label-title">{placeholder}</span>
{subtitle {subtitle && <span className="checkbox__label-subtitle">{subtitle}</span>}
&& <span </span>
className="checkbox__label-subtitle" </span>
dangerouslySetInnerHTML={{ __html: subtitle }}
/>}
</span>
</span>
</label> </label>
{!disabled {!disabled
&& touched && touched
@ -188,7 +181,7 @@ export const renderCheckboxField = ({
&& <span className="form__message form__message--error"><Trans>{error}</Trans></span>} && <span className="form__message form__message--error"><Trans>{error}</Trans></span>}
</>; </>;
renderCheckboxField.propTypes = { CheckboxField.propTypes = {
input: PropTypes.object.isRequired, input: PropTypes.object.isRequired,
placeholder: PropTypes.string, placeholder: PropTypes.string,
subtitle: PropTypes.string, subtitle: PropTypes.string,