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

Merge: + client: add clients forms validation and cache findClients function 

* commit '2e493e0226d3f22941fd09eed44ebb67a4d2874a':
  + client: add clients forms validation and cache findClients function
This commit is contained in:
Andrey Meshkov 2019-12-20 16:15:04 +03:00
parent cddf3ca01e 2e493e0226
commit 28096d6966
16 changed files with 187 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/__locales/en.json
View File

@ -23,6 +23,7 @@
"form_error_ip6_format": "Invalid IPv6 format",
"form_error_ip_format": "Invalid IP format",
"form_error_mac_format": "Invalid MAC format",
"form_error_client_id_format": "Invalid client ID format",
"form_error_positive": "Must be greater than 0",
"form_error_negative": "Must be equal to 0 or greater",
"dhcp_form_gateway_input": "Gateway IP",

12
client/src/actions/queryLogs.js
View File

@ -5,19 +5,27 @@ import { addErrorToast, addSuccessToast } from './index';
import { normalizeLogs, getParamsForClientsSearch, addClientInfo } from '../helpers/helpers';
import { TABLE_DEFAULT_PAGE_SIZE } from '../helpers/constants';
const getLogsWithParams = async (config) => {
// Cache clients in closure
const getLogsWithParamsWrapper = () => {
let clients = {};
return async (config) => {
const { older_than, filter, ...values } = config;
const rawLogs = await apiClient.getQueryLog({ ...filter, older_than });
const { data, oldest } = rawLogs;
const logs = normalizeLogs(data);
const clientsParams = getParamsForClientsSearch(logs, 'client');
const clients = await apiClient.findClients(clientsParams);
if (!Object.values(clientsParams).every(client => client in clients)) {
clients = await apiClient.findClients(clientsParams);
}
const logsWithClientInfo = addClientInfo(logs, clients, 'client');
return {
logs: logsWithClientInfo, oldest, older_than, filter, ...values,
};
};
};
const getLogsWithParams = getLogsWithParamsWrapper();
export const getAdditionalLogsRequest = createAction('GET_ADDITIONAL_LOGS_REQUEST');
export const getAdditionalLogsFailure = createAction('GET_ADDITIONAL_LOGS_FAILURE');

12
client/src/actions/stats.js
View File

@ -39,13 +39,18 @@ export const getStatsRequest = createAction('GET_STATS_REQUEST');
export const getStatsFailure = createAction('GET_STATS_FAILURE');
export const getStatsSuccess = createAction('GET_STATS_SUCCESS');
export const getStats = () => async (dispatch) => {
// Cache clients in closure
const getStatsWrapper = () => {
let clients = {};
return () => async (dispatch) => {
dispatch(getStatsRequest());
try {
const stats = await apiClient.getStats();
const normalizedTopClients = normalizeTopStats(stats.top_clients);
const clientsParams = getParamsForClientsSearch(normalizedTopClients, 'name');
const clients = await apiClient.findClients(clientsParams);
if (!Object.values(clientsParams).every(client => client in clients)) {
clients = await apiClient.findClients(clientsParams);
}
const topClientsWithInfo = addClientInfo(normalizedTopClients, clients, 'name');
const normalizedStats = {
@ -62,6 +67,9 @@ export const getStats = () => async (dispatch) => {
dispatch(getStatsFailure());
}
};
};
export const getStats = getStatsWrapper();
export const resetStatsRequest = createAction('RESET_STATS_REQUEST');
export const resetStatsFailure = createAction('RESET_STATS_FAILURE');

4
client/src/components/Logs/Filters/Form.js
View File

@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
import { withNamespaces, Trans } from 'react-i18next';
import flow from 'lodash/flow';
import { renderField } from '../../../helpers/form';
import { renderInputField } from '../../../helpers/form';
import { RESPONSE_FILTER } from '../../../helpers/constants';
import Tooltip from '../../ui/Tooltip';
@ -65,7 +65,7 @@ const Form = (props) => {
<Field
id="filter_question_type"
name="filter_question_type"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('type_table_header')}

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

@ -10,7 +10,9 @@ import Tabs from '../../ui/Tabs';
import Examples from '../Dns/Upstream/Examples';
import { toggleAllServices } from '../../../helpers/helpers';
import {
renderField,
required,
clientId,
renderInputField,
renderGroupField,
renderSelectField,
renderServiceField,
@ -40,38 +42,30 @@ const settingsCheckboxes = [
placeholder: 'enforce_safe_search',
},
];
const validate = (values) => {
const errors = {};
const { name, ids } = values;
if (!name || !name.length) {
errors.name = i18n.t('form_error_required');
}
errors.name = required(name);
if (ids && ids.length) {
const idArrayErrors = [];
ids.forEach((id, idx) => {
if (!id || !id.length) {
idArrayErrors[idx] = i18n.t('form_error_required');
}
idArrayErrors[idx] = required(id) || clientId(id);
});
if (idArrayErrors.length) {
errors.ids = idArrayErrors;
}
}
return errors;
};
const renderFields = (placeholder, buttonTitle) =>
const renderFieldsWrapper = (placeholder, buttonTitle) =>
function cell(row) {
const {
fields,
meta: { error },
} = row;
return (
<div className="form__group">
{fields.map((ip, index) => (
@ -84,6 +78,7 @@ const renderFields = (placeholder, buttonTitle) =>
placeholder={placeholder}
isActionAvailable={index !== 0}
removeField={() => fields.remove(index)}
normalize={data => data && data.trim()}
/>
</div>
))}
@ -97,11 +92,13 @@ const renderFields = (placeholder, buttonTitle) =>
<use xlinkHref="#plus" />
</svg>
</button>
{error && <div className="error">{error}</div>}
</div>
);
};
// Should create function outside of component to prevent component re-renders
const renderFields = renderFieldsWrapper(i18n.t('form_enter_id'), i18n.t('form_add_id'));
let Form = (props) => {
const {
t,
@ -126,10 +123,11 @@ let Form = (props) => {
<Field
id="name"
name="name"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('form_client_name')}
normalize={data => data && data.trim()}
/>
</div>
@ -155,7 +153,7 @@ let Form = (props) => {
<div className="form__group">
<FieldArray
name="ids"
component={renderFields(t('form_enter_id'), t('form_add_id'))}
component={renderFields}
/>
</div>
</div>

16
client/src/components/Settings/Dhcp/Form.js
View File

@ -5,7 +5,7 @@ import { Field, reduxForm, formValueSelector } from 'redux-form';
import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import { renderField, required, ipv4, isPositive, toNumber } from '../../../helpers/form';
import { renderInputField, required, ipv4, isPositive, toNumber } from '../../../helpers/form';
const renderInterfaces = (interfaces => (
Object.keys(interfaces).map((item) => {
@ -116,8 +116,9 @@ let Form = (props) => {
<div className="form__group form__group--settings">
<label>{t('dhcp_form_gateway_input')}</label>
<Field
id="gateway_ip"
name="gateway_ip"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('dhcp_form_gateway_input')}
@ -127,8 +128,9 @@ let Form = (props) => {
<div className="form__group form__group--settings">
<label>{t('dhcp_form_subnet_input')}</label>
<Field
id="subnet_mask"
name="subnet_mask"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('dhcp_form_subnet_input')}
@ -144,8 +146,9 @@ let Form = (props) => {
</div>
<div className="col">
<Field
id="range_start"
name="range_start"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('dhcp_form_range_start')}
@ -154,8 +157,9 @@ let Form = (props) => {
</div>
<div className="col">
<Field
id="range_end"
name="range_end"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('dhcp_form_range_end')}
@ -168,7 +172,7 @@ let Form = (props) => {
<label>{t('dhcp_form_lease_title')}</label>
<Field
name="lease_duration"
component={renderField}
component={renderInputField}
type="number"
className="form-control"
placeholder={t('dhcp_form_lease_input')}

8
client/src/components/Settings/Dhcp/StaticLeases/Form.js
View File

@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import { renderField, ipv4, mac, required } from '../../../../helpers/form';
import { renderInputField, ipv4, mac, required } from '../../../../helpers/form';
const Form = (props) => {
const {
@ -24,7 +24,7 @@ const Form = (props) => {
<Field
id="mac"
name="mac"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('form_enter_mac')}
@ -35,7 +35,7 @@ const Form = (props) => {
<Field
id="ip"
name="ip"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('form_enter_ip')}
@ -46,7 +46,7 @@ const Form = (props) => {
<Field
id="hostname"
name="hostname"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('form_enter_hostname')}

8
client/src/components/Settings/Dns/Access/Form.js
View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import { renderTextareaField } from '../../../../helpers/form';
const Form = (props) => {
const {
@ -21,7 +22,7 @@ const Form = (props) => {
<Field
id="allowed_clients"
name="allowed_clients"
component="textarea"
component={renderTextareaField}
type="text"
className="form-control form-control--textarea"
disabled={processingSet}
@ -37,7 +38,7 @@ const Form = (props) => {
<Field
id="disallowed_clients"
name="disallowed_clients"
component="textarea"
component={renderTextareaField}
type="text"
className="form-control form-control--textarea"
disabled={processingSet}
@ -53,7 +54,7 @@ const Form = (props) => {
<Field
id="blocked_hosts"
name="blocked_hosts"
component="textarea"
component={renderTextareaField}
type="text"
className="form-control form-control--textarea"
disabled={processingSet}
@ -81,6 +82,7 @@ Form.propTypes = {
initialValues: PropTypes.object.isRequired,
processingSet: PropTypes.bool.isRequired,
t: PropTypes.func.isRequired,
textarea: PropTypes.bool,
};
export default flow([withNamespaces(), reduxForm({ form: 'accessForm' })])(Form);

6
client/src/components/Settings/Dns/Rewrites/Form.js
View File

@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import { renderField, required, domain, answer } from '../../../../helpers/form';
import { renderInputField, required, domain, answer } from '../../../../helpers/form';
const Form = (props) => {
const {
@ -24,7 +24,7 @@ const Form = (props) => {
<Field
id="domain"
name="domain"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('form_domain')}
@ -35,7 +35,7 @@ const Form = (props) => {
<Field
id="answer"
name="answer"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('form_answer')}

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

@ -6,7 +6,7 @@ import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import {
renderField,
renderInputField,
renderSelectField,
renderRadioField,
toNumber,
@ -117,7 +117,7 @@ let Form = (props) => {
<Field
id="server_name"
name="server_name"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('encryption_server_enter')}
@ -154,7 +154,7 @@ let Form = (props) => {
<Field
id="port_https"
name="port_https"
component={renderField}
component={renderInputField}
type="number"
className="form-control"
placeholder={t('encryption_https')}
@ -176,7 +176,7 @@ let Form = (props) => {
<Field
id="port_dns_over_tls"
name="port_dns_over_tls"
component={renderField}
component={renderInputField}
type="number"
className="form-control"
placeholder={t('encryption_dot')}
@ -252,7 +252,7 @@ let Form = (props) => {
<Field
id="certificate_path"
name="certificate_path"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('encryption_certificate_path')}
@ -321,7 +321,7 @@ let Form = (props) => {
<Field
id="private_key_path"
name="private_key_path"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={t('encryption_private_key_path')}

7
client/src/helpers/constants.js
View File

@ -1,8 +1,9 @@
export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/[^/\s]+(\/.*)?$/;
export const R_HOST = /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$/;
export const R_IPV4 = /^(?:(?:^|\.)(?:2(?:5[0-5]|[0-4]\d)|1?\d?\d)){4}$/g;
export const R_IPV6 = /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/g;
export const R_MAC = /^((([a-fA-F0-9][a-fA-F0-9]+[-]){5}|([a-fA-F0-9][a-fA-F0-9]+[:]){5})([a-fA-F0-9][a-fA-F0-9])$)|(^([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]+[.]){2}([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]))$/g;
export const R_IPV4 = /^(?:(?:^|\.)(?:2(?:5[0-5]|[0-4]\d)|1?\d?\d)){4}$/;
export const R_IPV6 = /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
export const R_CIDR = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/([0-9]|[1-2][0-9]|3[0-2]))$/;
export const R_MAC = /^((([a-fA-F0-9][a-fA-F0-9]+[-]){5}|([a-fA-F0-9][a-fA-F0-9]+[:]){5})([a-fA-F0-9][a-fA-F0-9])$)|(^([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]+[.]){2}([a-fA-F0-9][a-fA-F0-9][a-fA-F0-9][a-fA-F0-9]))$/;
export const STATS_NAMES = {
avg_processing_time: 'average_processing_time',

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

@ -1,33 +1,45 @@
import React, { Fragment } from 'react';
import { Trans } from 'react-i18next';
import PropTypes from 'prop-types';
import { R_IPV4, R_MAC, R_HOST, R_IPV6, R_CIDR, UNSAFE_PORTS } from '../helpers/constants';
import { R_IPV4, R_MAC, R_HOST, R_IPV6, UNSAFE_PORTS } from '../helpers/constants';
export const renderField = (props, elementType) => {
const {
input, id, className, placeholder, type, disabled,
autoComplete, meta: { touched, error },
} = props;
export const renderField = ({
input,
const element = React.createElement(elementType, {
...input,
id,
className,
placeholder,
type,
disabled,
autoComplete,
meta: { touched, error },
}) => (
disabled,
type,
});
return (
<Fragment>
<input
{...input}
id={id}
placeholder={placeholder}
type={type}
className={className}
disabled={disabled}
autoComplete={autoComplete}
/>
{!disabled &&
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
{element}
{!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
};
renderField.propTypes = {
id: PropTypes.string.isRequired,
input: PropTypes.object.isRequired,
meta: PropTypes.object.isRequired,
className: PropTypes.string,
placeholder: PropTypes.string,
type: PropTypes.string,
disabled: PropTypes.bool,
autoComplete: PropTypes.bool,
};
export const renderTextareaField = props => renderField(props, 'textarea');
export const renderInputField = props => renderField(props, 'input');
export const renderGroupField = ({
input,
@ -66,7 +78,6 @@ export const renderGroupField = ({
</span>
}
</div>
{!disabled &&
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
@ -147,46 +158,61 @@ export const renderServiceField = ({
);
// Validation functions
// If the value is valid, the validation function should return undefined.
// https://redux-form.com/6.6.3/examples/fieldlevelvalidation/
export const required = (value) => {
if (value || value === 0) {
return false;
const formattedValue = typeof value === 'string' ? value.trim() : value;
if (formattedValue || formattedValue === 0 || (formattedValue && formattedValue.length !== 0)) {
return undefined;
}
return <Trans>form_error_required</Trans>;
};
export const ipv4 = (value) => {
if (value && !new RegExp(R_IPV4).test(value)) {
if (value && !R_IPV4.test(value)) {
return <Trans>form_error_ip4_format</Trans>;
}
return false;
return undefined;
};
export const clientId = (value) => {
if (!value) {
return undefined;
}
const formattedValue = value ? value.trim() : value;
if (formattedValue && !(R_IPV4.test(formattedValue) || R_IPV6.test(formattedValue)
|| R_MAC.test(formattedValue) || R_CIDR.test(formattedValue))) {
return <Trans>form_error_client_id_format</Trans>;
}
return undefined;
};
export const ipv6 = (value) => {
if (value && !new RegExp(R_IPV6).test(value)) {
if (value && !R_IPV6.test(value)) {
return <Trans>form_error_ip6_format</Trans>;
}
return false;
return undefined;
};
export const ip = (value) => {
if (value && !new RegExp(R_IPV4).test(value) && !new RegExp(R_IPV6).test(value)) {
if (value && !R_IPV4.test(value) && !R_IPV6.test(value)) {
return <Trans>form_error_ip_format</Trans>;
}
return false;
return undefined;
};
export const mac = (value) => {
if (value && !new RegExp(R_MAC).test(value)) {
if (value && !R_MAC.test(value)) {
return <Trans>form_error_mac_format</Trans>;
}
return false;
return undefined;
};
export const isPositive = (value) => {
if ((value || value === 0) && value <= 0) {
return <Trans>form_error_positive</Trans>;
}
return false;
return undefined;
};
export const biggerOrEqualZero = (value) => {
@ -200,42 +226,37 @@ export const port = (value) => {
if ((value || value === 0) && (value < 80 || value > 65535)) {
return <Trans>form_error_port_range</Trans>;
}
return false;
return undefined;
};
export const portTLS = (value) => {
if (value === 0) {
return false;
return undefined;
} else if (value && (value < 80 || value > 65535)) {
return <Trans>form_error_port_range</Trans>;
}
return false;
return undefined;
};
export const isSafePort = (value) => {
if (UNSAFE_PORTS.includes(value)) {
return <Trans>form_error_port_unsafe</Trans>;
}
return false;
return undefined;
};
export const domain = (value) => {
if (value && !new RegExp(R_HOST).test(value)) {
if (value && !R_HOST.test(value)) {
return <Trans>form_error_domain_format</Trans>;
}
return false;
return undefined;
};
export const answer = (value) => {
if (
value &&
(!new RegExp(R_IPV4).test(value) &&
!new RegExp(R_IPV6).test(value) &&
!new RegExp(R_HOST).test(value))
) {
if (value && (!R_IPV4.test(value) && !R_IPV6.test(value) && !R_HOST.test(value))) {
return <Trans>form_error_answer_format</Trans>;
}
return false;
return undefined;
};
export const toNumber = value => value && parseInt(value, 10);

8
client/src/install/Setup/Auth.js
View File

@ -6,7 +6,7 @@ import flow from 'lodash/flow';
import i18n from '../../i18n';
import Controls from './Controls';
import renderField from './renderField';
import { renderInputField } from '../../helpers/form';
const required = (value) => {
if (value || value === 0) {
@ -48,7 +48,7 @@ const Auth = (props) => {
</label>
<Field
name="username"
component={renderField}
component={renderInputField}
type="text"
className="form-control"
placeholder={ t('install_auth_username_enter') }
@ -62,7 +62,7 @@ const Auth = (props) => {
</label>
<Field
name="password"
component={renderField}
component={renderInputField}
type="password"
className="form-control"
placeholder={ t('install_auth_password_enter') }
@ -76,7 +76,7 @@ const Auth = (props) => {
</label>
<Field
name="confirm_password"
component={renderField}
component={renderInputField}
type="password"
className="form-control"
placeholder={ t('install_auth_confirm') }

6
client/src/install/Setup/Settings.js
View File

@ -7,9 +7,9 @@ import flow from 'lodash/flow';
import Controls from './Controls';
import AddressList from './AddressList';
import renderField from './renderField';
import { getInterfaceIp } from '../../helpers/helpers';
import { ALL_INTERFACES_IP } from '../../helpers/constants';
import { renderInputField } from '../../helpers/form';
const required = (value) => {
if (value || value === 0) {
@ -133,7 +133,7 @@ class Settings extends Component {
</label>
<Field
name="web.port"
component={renderField}
component={renderInputField}
type="number"
className="form-control"
placeholder="80"
@ -201,7 +201,7 @@ class Settings extends Component {
</label>
<Field
name="dns.port"
component={renderField}
component={renderInputField}
type="number"
className="form-control"
placeholder="80"

19
client/src/install/Setup/renderField.js
View File

@ -1,19 +0,0 @@
import React, { Fragment } from 'react';
const renderField = ({
input, className, placeholder, type, disabled, autoComplete, meta: { touched, error },
}) => (
<Fragment>
<input
{...input}
placeholder={placeholder}
type={type}
className={className}
disabled={disabled}
autoComplete={autoComplete}
/>
{!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
export default renderField;

7
client/src/login/Login/Form.js
View File

@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
import { renderField, required } from '../../helpers/form';
import { renderInputField, required } from '../../helpers/form';
const Form = (props) => {
const {
@ -19,10 +19,11 @@ const Form = (props) => {
<Trans>username_label</Trans>
</label>
<Field
id="username1"
name="username"
type="text"
className="form-control"
component={renderField}
component={renderInputField}
placeholder={t('username_placeholder')}
autoComplete="username"
disabled={processing}
@ -38,7 +39,7 @@ const Form = (props) => {
name="password"
type="password"
className="form-control"
component={renderField}
component={renderInputField}
placeholder={t('password_placeholder')}
autoComplete="current-password"
disabled={processing}