daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ client: handle DNS config

Browse Source
This commit is contained in:
Artem Baskal
2019-12-04 21:52:38 +03:00
committed by Ildar Kamalov
parent 87bb773d3e
commit 197d07f32b
11 changed files with 294 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
client/src/components/Settings/DnsConfig/Form.js Normal file
View File

@@ -0,0 +1,120 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import { renderField, renderRadioField, required, ipv4, ipv6, isPositive, toNumber } from '../../../helpers/form';
import { BLOCKING_MODES } from '../../../helpers/constants';
const getFields = (processing, t) => Object.values(BLOCKING_MODES).map(mode => (
<Field
key={mode}
name="blocking_mode"
type="radio"
component={renderRadioField}
value={mode}
placeholder={t(mode)}
disabled={processing}
/>
));
let Form = ({
handleSubmit, submitting, invalid, processing, blockingMode, t,
}) => (
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-12 col-sm-6">
<div className="form__group form__group--settings">
<label htmlFor="ratelimit">
<Trans>rate_limit</Trans>
</label>
<Field
name="ratelimit"
type="number"
component={renderField}
className="form-control"
placeholder={t('form_enter_rate_limit')}
normalize={toNumber}
validate={[required, isPositive]}
/>
</div>
</div>
<div className="col-12">
<div className="form__group form__group--settings mb-3">
<label className="form__label">
<Trans>blocking_mode</Trans>
</label>
<div className="custom-controls-stacked">
{getFields(processing, t)}
</div>
</div>
</div>
{blockingMode === BLOCKING_MODES.custom_ip && (
<Fragment>
<div className="col-12 col-sm-6">
<div className="form__group form__group--settings">
<label htmlFor="blocking_ipv4">
<Trans>blocking_ipv4</Trans>
</label>
<Field
name="blocking_ipv4"
component={renderField}
className="form-control"
placeholder={t('form_enter_ip')}
validate={[ipv4, required]}
/>
</div>
</div>
<div className="col-12 col-sm-6">
<div className="form__group form__group--settings">
<label htmlFor="ip_address">
<Trans>blocking_ipv6</Trans>
</label>
<Field
name="blocking_ipv6"
component={renderField}
className="form-control"
placeholder={t('form_enter_ip')}
validate={[ipv6, required]}
/>
</div>
</div>
</Fragment>
)}
</div>
<button
type="submit"
className="btn btn-success btn-standard btn-large"
disabled={submitting || invalid || processing}
>
<Trans>save_btn</Trans>
</button>
</form>
);
Form.propTypes = {
blockingMode: PropTypes.string.isRequired,
handleSubmit: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired,
invalid: PropTypes.bool.isRequired,
processing: PropTypes.bool.isRequired,
t: PropTypes.func.isRequired,
};
const selector = formValueSelector('blockingModeForm');
Form = connect((state) => {
const blockingMode = selector(state, 'blocking_mode');
return {
blockingMode,
};
})(Form);
export default flow([
withNamespaces(),
reduxForm({
form: 'blockingModeForm',
}),
])(Form);

49
client/src/components/Settings/DnsConfig/index.js Normal file
View File

@@ -0,0 +1,49 @@
import React from 'react';
import PropTypes from 'prop-types';
import { withNamespaces } from 'react-i18next';
import Card from '../../ui/Card';
import Form from './Form';
const DnsConfig = ({ t, dnsConfig, setDnsConfig }) => {
const handleFormSubmit = (values) => {
setDnsConfig(values);
};
const {
blocking_mode,
ratelimit,
blocking_ipv4,
blocking_ipv6,
processingSetConfig,
} = dnsConfig;
return (
<Card
title={t('dns_config')}
bodyType="card-body box-body--settings"
id="dns-config"
>
<div className="form">
<Form
initialValues={{
ratelimit,
blocking_mode,
blocking_ipv4,
blocking_ipv6,
}}
onSubmit={handleFormSubmit}
processing={processingSetConfig}
/>
</div>
</Card>
);
};
DnsConfig.propTypes = {
dnsConfig: PropTypes.object.isRequired,
setDnsConfig: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};
export default withNamespaces()(DnsConfig);

12
client/src/components/Settings/index.js
View File

@@ -6,6 +6,8 @@ import Services from './Services';
import StatsConfig from './StatsConfig';
import LogsConfig from './LogsConfig';
import FiltersConfig from './FiltersConfig';
import DnsConfig from './DnsConfig';
import Checkbox from '../ui/Checkbox';
import Loading from '../ui/Loading';
import PageTitle from '../ui/PageTitle';
@@ -38,6 +40,7 @@ class Settings extends Component {
this.props.getStatsConfig();
this.props.getLogsConfig();
this.props.getFilteringStatus();
this.props.getDnsConfig();
}
renderSettings = (settings) => {
@@ -68,10 +71,12 @@ class Settings extends Component {
resetStats,
stats,
queryLogs,
dnsConfig,
setLogsConfig,
clearLogs,
filtering,
setFiltersConfig,
setDnsConfig,
t,
} = this.props;
@@ -101,6 +106,12 @@ class Settings extends Component {
</div>
</Card>
</div>
<div className="col-md-12">
<DnsConfig
dnsConfig={dnsConfig}
setDnsConfig={setDnsConfig}
/>
</div>
<div className="col-md-12">
<LogsConfig
enabled={queryLogs.enabled}
@@ -143,6 +154,7 @@ Settings.propTypes = {
resetStats: PropTypes.func.isRequired,
setFiltersConfig: PropTypes.func.isRequired,
getFilteringStatus: PropTypes.func.isRequired,
getDnsConfig: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};