diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index 0148b7ea..0ffe12f7 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -139,5 +139,15 @@ "dhcp_not_found": "No active DHCP servers found on the network. It is safe to enable the built-in DHCP server.", "dhcp_leases": "DHCP leases", "dhcp_leases_not_found": "No DHCP leases found", - "dhcp_config_saved": "Saved DHCP server config" + "dhcp_config_saved": "Saved DHCP server config", + "form_error_required": "Required field", + "form_error_ip_format": "Invalid IPv4 format", + "form_error_positive": "Must be greater than 0", + "dhcp_form_gateway_input": "Gateway IP", + "dhcp_form_subnet_input": "Subnet mask", + "dhcp_form_range_title": "Range of IP addresses", + "dhcp_form_range_start": "Range start", + "dhcp_form_range_end": "Range end", + "dhcp_form_lease_title": "DHCP lease time (in seconds)", + "dhcp_form_lease_input": "Lease duration" } diff --git a/client/src/components/Settings/Dhcp/Form.js b/client/src/components/Settings/Dhcp/Form.js index e65ab04a..da761892 100644 --- a/client/src/components/Settings/Dhcp/Form.js +++ b/client/src/components/Settings/Dhcp/Form.js @@ -1,25 +1,28 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Field, reduxForm } from 'redux-form'; +import { withNamespaces, Trans } from 'react-i18next'; +import flow from 'lodash/flow'; + import { R_IPV4 } from '../../../helpers/constants'; const required = (value) => { if (value || value === 0) { return false; } - return 'Required field'; + return form_error_required; }; const ipv4 = (value) => { if (value && !new RegExp(R_IPV4).test(value)) { - return 'Invalid IPv4 format'; + return form_error_ip_format; } return false; }; const isPositive = (value) => { if ((value || value === 0) && (value <= 0)) { - return 'Must be greater than 0'; + return form_error_positive; } return false; }; @@ -43,7 +46,7 @@ const renderField = ({ const Form = (props) => { const { - handleSubmit, pristine, submitting, enabled, + handleSubmit, pristine, submitting, enabled, t, } = props; return ( @@ -51,25 +54,25 @@ const Form = (props) => {
- +
- + @@ -79,7 +82,7 @@ const Form = (props) => {
- +
{ component={renderField} type="text" className="form-control" - placeholder="Range start" + placeholder={t('dhcp_form_range_start')} validate={[ipv4, required]} disabled={!enabled} /> @@ -98,7 +101,7 @@ const Form = (props) => { component={renderField} type="text" className="form-control" - placeholder="Range end" + placeholder={t('dhcp_form_range_end')} validate={[ipv4, required]} disabled={!enabled} /> @@ -106,13 +109,13 @@ const Form = (props) => {
- + { className="btn btn-success btn-standart" disabled={pristine || submitting || !enabled} > - Save config + {t('save_config')} ); @@ -137,8 +140,10 @@ Form.propTypes = { pristine: PropTypes.bool, submitting: PropTypes.bool, enabled: PropTypes.bool, + t: PropTypes.func, }; -export default reduxForm({ - form: 'dhcpForm', -})(Form); +export default flow([ + withNamespaces(), + reduxForm({ form: 'dhcpForm' }), +])(Form);