258 lines
10 KiB
JavaScript
258 lines
10 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import PropTypes from 'prop-types';
|
|
import { Field, reduxForm, formValueSelector } from 'redux-form';
|
|
import { Trans, withNamespaces } from 'react-i18next';
|
|
import flow from 'lodash/flow';
|
|
|
|
import Tabs from '../../ui/Tabs';
|
|
import { toggleAllServices } from '../../../helpers/helpers';
|
|
import { renderField, renderRadioField, renderSelectField, renderServiceField, ipv4, mac, required } from '../../../helpers/form';
|
|
import { CLIENT_ID, SERVICES } from '../../../helpers/constants';
|
|
import './Service.css';
|
|
|
|
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',
|
|
},
|
|
{
|
|
name: 'safesearch_enabled',
|
|
placeholder: 'enforce_safe_search',
|
|
},
|
|
];
|
|
|
|
let Form = (props) => {
|
|
const {
|
|
t,
|
|
handleSubmit,
|
|
reset,
|
|
change,
|
|
pristine,
|
|
submitting,
|
|
clientIdentifier,
|
|
useGlobalSettings,
|
|
useGlobalServices,
|
|
toggleClientModal,
|
|
processingAdding,
|
|
processingUpdating,
|
|
} = props;
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="modal-body">
|
|
<div className="form__group">
|
|
<div className="form__inline mb-2">
|
|
<strong className="mr-3">
|
|
<Trans>client_identifier</Trans>
|
|
</strong>
|
|
<div className="custom-controls-stacked">
|
|
<Field
|
|
name="identifier"
|
|
component={renderRadioField}
|
|
type="radio"
|
|
className="form-control mr-2"
|
|
value="ip"
|
|
placeholder={t('ip_address')}
|
|
/>
|
|
<Field
|
|
name="identifier"
|
|
component={renderRadioField}
|
|
type="radio"
|
|
className="form-control mr-2"
|
|
value="mac"
|
|
placeholder="MAC"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col col-sm-6">
|
|
{clientIdentifier === CLIENT_ID.IP && (
|
|
<div className="form__group">
|
|
<Field
|
|
id="ip"
|
|
name="ip"
|
|
component={renderField}
|
|
type="text"
|
|
className="form-control"
|
|
placeholder={t('form_enter_ip')}
|
|
validate={[ipv4, required]}
|
|
/>
|
|
</div>
|
|
)}
|
|
{clientIdentifier === CLIENT_ID.MAC && (
|
|
<div className="form__group">
|
|
<Field
|
|
id="mac"
|
|
name="mac"
|
|
component={renderField}
|
|
type="text"
|
|
className="form-control"
|
|
placeholder={t('form_enter_mac')}
|
|
validate={[mac, required]}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="col col-sm-6">
|
|
<Field
|
|
id="name"
|
|
name="name"
|
|
component={renderField}
|
|
type="text"
|
|
className="form-control"
|
|
placeholder={t('form_client_name')}
|
|
validate={[required]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="form__desc">
|
|
<Trans
|
|
components={[
|
|
<a href="#dhcp" key="0">
|
|
link
|
|
</a>,
|
|
]}
|
|
>
|
|
client_identifier_desc
|
|
</Trans>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs controlClass="form">
|
|
<div label="settings" title={props.t('main_settings')}>
|
|
{settingsCheckboxes.map(setting => (
|
|
<div className="form__group" key={setting.name}>
|
|
<Field
|
|
name={setting.name}
|
|
type="checkbox"
|
|
component={renderSelectField}
|
|
placeholder={t(setting.placeholder)}
|
|
disabled={setting.name !== 'use_global_settings' ? useGlobalSettings : false}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div label="services" 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, 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, change, false)}
|
|
>
|
|
<Trans>unblock_all</Trans>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="services">
|
|
{SERVICES.map(service => (
|
|
<Field
|
|
key={service.id}
|
|
icon={`service_${service.id}`}
|
|
name={`blocked_services.${service.id}`}
|
|
type="checkbox"
|
|
component={renderServiceField}
|
|
placeholder={service.name}
|
|
disabled={useGlobalServices}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
|
|
<div className="modal-footer">
|
|
<div className="btn-list">
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary btn-standard"
|
|
disabled={submitting}
|
|
onClick={() => {
|
|
reset();
|
|
toggleClientModal();
|
|
}}
|
|
>
|
|
<Trans>cancel_btn</Trans>
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="btn btn-success btn-standard"
|
|
disabled={submitting || pristine || processingAdding || processingUpdating}
|
|
>
|
|
<Trans>save_btn</Trans>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
Form.propTypes = {
|
|
pristine: PropTypes.bool.isRequired,
|
|
handleSubmit: PropTypes.func.isRequired,
|
|
reset: PropTypes.func.isRequired,
|
|
change: PropTypes.func.isRequired,
|
|
submitting: PropTypes.bool.isRequired,
|
|
toggleClientModal: PropTypes.func.isRequired,
|
|
clientIdentifier: PropTypes.string,
|
|
useGlobalSettings: PropTypes.bool,
|
|
useGlobalServices: PropTypes.bool,
|
|
t: PropTypes.func.isRequired,
|
|
processingAdding: PropTypes.bool.isRequired,
|
|
processingUpdating: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
const selector = formValueSelector('clientForm');
|
|
|
|
Form = connect((state) => {
|
|
const clientIdentifier = selector(state, 'identifier');
|
|
const useGlobalSettings = selector(state, 'use_global_settings');
|
|
const useGlobalServices = selector(state, 'use_global_blocked_services');
|
|
return {
|
|
clientIdentifier,
|
|
useGlobalSettings,
|
|
useGlobalServices,
|
|
};
|
|
})(Form);
|
|
|
|
export default flow([
|
|
withNamespaces(),
|
|
reduxForm({
|
|
form: 'clientForm',
|
|
enableReinitialize: true,
|
|
}),
|
|
])(Form);
|