+ client: handle EDNS Client Subnet setting
This commit is contained in:
Ildar Kamalov
153
client/src/components/Settings/Dns/Config/Form.js
Normal file
153
client/src/components/Settings/Dns/Config/Form.js
Normal file
@@ -0,0 +1,153 @@
|
||||
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,
|
||||
renderSelectField,
|
||||
required,
|
||||
ipv4,
|
||||
ipv6,
|
||||
biggerOrEqualZero,
|
||||
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" 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
|
||||
name="ratelimit"
|
||||
type="number"
|
||||
component={renderField}
|
||||
className="form-control"
|
||||
placeholder={t('form_enter_rate_limit')}
|
||||
normalize={toNumber}
|
||||
validate={[required, biggerOrEqualZero]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
name="edns_cs_enabled"
|
||||
type="checkbox"
|
||||
component={renderSelectField}
|
||||
placeholder={t('edns_enable')}
|
||||
disabled={processing}
|
||||
subtitle={t('edns_cs_desc')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans components={[<div key="0">text</div>]}>blocking_mode_desc</Trans>
|
||||
</div>
|
||||
<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" className="form__label form__label--with-desc">
|
||||
<Trans>blocking_ipv4</Trans>
|
||||
</label>
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>blocking_ipv4_desc</Trans>
|
||||
</div>
|
||||
<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" className="form__label form__label--with-desc">
|
||||
<Trans>blocking_ipv6</Trans>
|
||||
</label>
|
||||
<div className="form__desc form__desc--top">
|
||||
<Trans>blocking_ipv6_desc</Trans>
|
||||
</div>
|
||||
<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);
|
||||
51
client/src/components/Settings/Dns/Config/index.js
Normal file
51
client/src/components/Settings/Dns/Config/index.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withNamespaces } from 'react-i18next';
|
||||
|
||||
import Card from '../../../ui/Card';
|
||||
import Form from './Form';
|
||||
|
||||
const Config = ({ t, dnsConfig, setDnsConfig }) => {
|
||||
const handleFormSubmit = (values) => {
|
||||
setDnsConfig(values);
|
||||
};
|
||||
|
||||
const {
|
||||
blocking_mode,
|
||||
ratelimit,
|
||||
blocking_ipv4,
|
||||
blocking_ipv6,
|
||||
edns_cs_enabled,
|
||||
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,
|
||||
edns_cs_enabled,
|
||||
}}
|
||||
onSubmit={handleFormSubmit}
|
||||
processing={processingSetConfig}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
Config.propTypes = {
|
||||
dnsConfig: PropTypes.object.isRequired,
|
||||
setDnsConfig: PropTypes.func.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default withNamespaces()(Config);
|
||||
@@ -5,6 +5,7 @@ import { withNamespaces } from 'react-i18next';
|
||||
import Upstream from './Upstream';
|
||||
import Access from './Access';
|
||||
import Rewrites from './Rewrites';
|
||||
import Config from './Config';
|
||||
import PageTitle from '../../ui/PageTitle';
|
||||
import Loading from '../../ui/Loading';
|
||||
|
||||
@@ -13,6 +14,7 @@ class Dns extends Component {
|
||||
this.props.getDnsSettings();
|
||||
this.props.getAccessList();
|
||||
this.props.getRewritesList();
|
||||
this.props.getDnsConfig();
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -29,12 +31,18 @@ class Dns extends Component {
|
||||
addRewrite,
|
||||
deleteRewrite,
|
||||
toggleRewritesModal,
|
||||
dnsConfig,
|
||||
setDnsConfig,
|
||||
} = this.props;
|
||||
|
||||
const isDataLoading =
|
||||
dashboard.processingDnsSettings || access.processing || rewrites.processing;
|
||||
const isDataReady =
|
||||
!dashboard.processingDnsSettings && !access.processing && !rewrites.processing;
|
||||
const isDataLoading = dashboard.processingDnsSettings
|
||||
|| access.processing
|
||||
|| rewrites.processing
|
||||
|| dnsConfig.processingGetConfig;
|
||||
const isDataReady = !dashboard.processingDnsSettings
|
||||
&& !access.processing
|
||||
&& !rewrites.processing
|
||||
&& !dnsConfig.processingGetConfig;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
@@ -42,6 +50,10 @@ class Dns extends Component {
|
||||
{isDataLoading && <Loading />}
|
||||
{isDataReady && (
|
||||
<Fragment>
|
||||
<Config
|
||||
dnsConfig={dnsConfig}
|
||||
setDnsConfig={setDnsConfig}
|
||||
/>
|
||||
<Upstream
|
||||
upstreamDns={dashboard.upstreamDns}
|
||||
bootstrapDns={dashboard.bootstrapDns}
|
||||
@@ -80,6 +92,9 @@ Dns.propTypes = {
|
||||
deleteRewrite: PropTypes.func.isRequired,
|
||||
toggleRewritesModal: PropTypes.func.isRequired,
|
||||
getDnsSettings: PropTypes.func.isRequired,
|
||||
dnsConfig: PropTypes.object.isRequired,
|
||||
setDnsConfig: PropTypes.func.isRequired,
|
||||
getDnsConfig: PropTypes.func.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user