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

+ client: add clients forms validation and cache findClients function

Browse Source
This commit is contained in:
Artem Baskal
2019-12-12 21:48:17 +03:00
parent cddf3ca01e
commit 2e493e0226
16 changed files with 187 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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',

141
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,
id,
className,
placeholder,
type,
disabled,
autoComplete,
meta: { touched, error },
}) => (
<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>)}
</Fragment>
);
const element = React.createElement(elementType, {
...input,
id,
className,
placeholder,
autoComplete,
disabled,
type,
});
return (
<Fragment>
{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,
@@ -53,7 +65,7 @@ export const renderGroupField = ({
autoComplete={autoComplete}
/>
{isActionAvailable &&
<span className="input-group-append">
<span className="input-group-append">
<button
type="button"
className="btn btn-secondary btn-icon"
@@ -66,10 +78,9 @@ export const renderGroupField = ({
</span>
}
</div>
{!disabled &&
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
@@ -82,8 +93,8 @@ export const renderRadioField = ({
<span className="custom-control-label">{placeholder}</span>
</label>
{!disabled &&
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
@@ -112,8 +123,8 @@ export const renderSelectField = ({
</span>
</label>
{!disabled &&
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
@@ -141,52 +152,67 @@ export const renderServiceField = ({
</svg>
</label>
{!disabled &&
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
touched &&
(error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
// 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);