Extract validation functions in the separate file

AdguardTeam · Jul 3, 2020 · 0c4905f · 0c4905f
1 parent c12309a
commit 0c4905f
Show file tree

Hide file tree

Showing 13 changed files with 275 additions and 207 deletions.
diff --git a/client/src/components/Filters/Form.js b/client/src/components/Filters/Form.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
-
-import { renderInputField, required, isValidPath } from '../../helpers/form';
+import { renderInputField } from '../../helpers/form';
+import { validatePath, validateRequiredValue } from '../../helpers/validators';
 import { FORM_NAME } from '../../helpers/constants';
 
 const Form = (props) => {
@@ -28,7 +28,7 @@ const Form = (props) => {
                         component={renderInputField}
                         className="form-control"
                         placeholder={t('enter_name_hint')}
-                        validate={[required]}
+                        validate={[validateRequiredValue]}
                         normalizeOnBlur={(data) => data.trim()}
                     />
                 </div>
@@ -40,7 +40,7 @@ const Form = (props) => {
                         component={renderInputField}
                         className="form-control"
                         placeholder={t('enter_url_or_path_hint')}
-                        validate={[required, isValidPath]}
+                        validate={[validateRequiredValue, validatePath]}
                         normalizeOnBlur={(data) => data.trim()}
                     />
                 </div>

diff --git a/client/src/components/Filters/Rewrites/Form.js b/client/src/components/Filters/Rewrites/Form.js
@@ -3,10 +3,8 @@ import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
-
-import {
-    renderInputField, required, domain, answer,
-} from '../../../helpers/form';
+import { renderInputField } from '../../../helpers/form';
+import { validateAnswer, validateDomain, validateRequiredValue } from '../../../helpers/validators';
 import { FORM_NAME } from '../../../helpers/constants';
 
 const Form = (props) => {
@@ -34,7 +32,7 @@ const Form = (props) => {
                         type="text"
                         className="form-control"
                         placeholder={t('form_domain')}
-                        validate={[required, domain]}
+                        validate={[validateRequiredValue, validateDomain]}
                     />
                 </div>
 
@@ -61,7 +59,7 @@ const Form = (props) => {
                         type="text"
                         className="form-control"
                         placeholder={t('form_answer')}
-                        validate={[required, answer]}
+                        validate={[validateRequiredValue, validateAnswer]}
                     />
                 </div>
             </div>

diff --git a/client/src/components/Settings/Clients/Form.js b/client/src/components/Settings/Clients/Form.js
@@ -13,13 +13,12 @@ import Tabs from '../../ui/Tabs';
 import Examples from '../Dns/Upstream/Examples';
 import { toggleAllServices } from '../../../helpers/helpers';
 import {
-    required,
-    clientId,
     renderInputField,
     renderGroupField,
     renderSelectField,
     renderServiceField,
 } from '../../../helpers/form';
+import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
 import { FORM_NAME, SERVICES } from '../../../helpers/constants';
 import './Service.css';
 
@@ -48,12 +47,12 @@ const settingsCheckboxes = [
 const validate = (values) => {
     const errors = {};
     const { name, ids } = values;
-    errors.name = required(name);
+    errors.name = validateRequiredValue(name);
 
     if (ids && ids.length) {
         const idArrayErrors = [];
         ids.forEach((id, idx) => {
-            idArrayErrors[idx] = required(id) || clientId(id);
+            idArrayErrors[idx] = validateRequiredValue(id) || validateClientId(id);
         });
 
         if (idArrayErrors.length) {

diff --git a/client/src/components/Settings/Dhcp/Form.js b/client/src/components/Settings/Dhcp/Form.js
@@ -4,11 +4,9 @@ import PropTypes from 'prop-types';
 import { Field, reduxForm, formValueSelector } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
-
-import {
-    renderInputField, required, ipv4, isPositive, toNumber,
-} from '../../../helpers/form';
+import { renderInputField, toNumber } from '../../../helpers/form';
 import { FORM_NAME } from '../../../helpers/constants';
+import { validateIpv4, validateIsPositiveValue, validateRequiredValue } from '../../../helpers/validators';
 
 const renderInterfaces = ((interfaces) => (
     Object.keys(interfaces).map((item) => {
@@ -96,7 +94,7 @@ let Form = (props) => {
                                 name="interface_name"
                                 component="select"
                                 className="form-control custom-select"
-                                validate={[required]}
+                                validate={[validateRequiredValue]}
                             >
                                 <option value="" disabled={enabled}>
                                     {t('dhcp_interface_select')}
@@ -125,7 +123,7 @@ let Form = (props) => {
                             type="text"
                             className="form-control"
                             placeholder={t('dhcp_form_gateway_input')}
-                            validate={[ipv4, required]}
+                            validate={[validateIpv4, validateRequiredValue]}
                         />
                     </div>
                     <div className="form__group form__group--settings">
@@ -137,7 +135,7 @@ let Form = (props) => {
                             type="text"
                             className="form-control"
                             placeholder={t('dhcp_form_subnet_input')}
-                            validate={[ipv4, required]}
+                            validate={[validateIpv4, validateRequiredValue]}
                         />
                     </div>
                 </div>
@@ -155,7 +153,7 @@ let Form = (props) => {
                                     type="text"
                                     className="form-control"
                                     placeholder={t('dhcp_form_range_start')}
-                                    validate={[ipv4, required]}
+                                    validate={[validateIpv4, validateRequiredValue]}
                                 />
                             </div>
                             <div className="col">
@@ -166,7 +164,7 @@ let Form = (props) => {
                                     type="text"
                                     className="form-control"
                                     placeholder={t('dhcp_form_range_end')}
-                                    validate={[ipv4, required]}
+                                    validate={[validateIpv4, validateRequiredValue]}
                                 />
                             </div>
                         </div>
@@ -179,7 +177,7 @@ let Form = (props) => {
                             type="number"
                             className="form-control"
                             placeholder={t('dhcp_form_lease_input')}
-                            validate={[required, isPositive]}
+                            validate={[validateRequiredValue, validateIsPositiveValue]}
                             normalize={toNumber}
                         />
                     </div>

diff --git a/client/src/components/Settings/Dhcp/StaticLeases/Form.js b/client/src/components/Settings/Dhcp/StaticLeases/Form.js
@@ -3,10 +3,8 @@ import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
-
-import {
-    renderInputField, ipv4, mac, required,
-} from '../../../../helpers/form';
+import { renderInputField } from '../../../../helpers/form';
+import { validateIpv4, validateMac, validateRequiredValue } from '../../../../helpers/validators';
 import { FORM_NAME } from '../../../../helpers/constants';
 
 const Form = (props) => {
@@ -31,7 +29,7 @@ const Form = (props) => {
                         type="text"
                         className="form-control"
                         placeholder={t('form_enter_mac')}
-                        validate={[required, mac]}
+                        validate={[validateRequiredValue, validateMac]}
                     />
                 </div>
                 <div className="form__group">
@@ -42,7 +40,7 @@ const Form = (props) => {
                         type="text"
                         className="form-control"
                         placeholder={t('form_enter_ip')}
-                        validate={[required, ipv4]}
+                        validate={[validateRequiredValue, validateIpv4]}
                     />
                 </div>
                 <div className="form__group">

diff --git a/client/src/components/Settings/Dns/Cache/Form.js b/client/src/components/Settings/Dns/Cache/Form.js
@@ -3,31 +3,26 @@ import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { shallowEqual, useSelector } from 'react-redux';
-import {
-    biggerOrEqualZero,
-    maxValue,
-    renderInputField,
-    required,
-    toNumber,
-} from '../../../../helpers/form';
-import { FORM_NAME } from '../../../../helpers/constants';
+import { renderInputField, toNumber } from '../../../../helpers/form';
+import { validateBiggerOrEqualZeroValue, getMaxValueValidator, validateRequiredValue } from '../../../../helpers/validators';
+import { FORM_NAME, SECONDS_IN_HOUR } from '../../../../helpers/constants';
 
-const maxValue3600 = maxValue(3600);
+const validateMaxValue3600 = getMaxValueValidator(SECONDS_IN_HOUR);
 
-const getInputFields = ({ required, maxValue3600 }) => [{
+const getInputFields = ({ validateRequiredValue, validateMaxValue3600 }) => [{
     name: 'cache_size',
     title: 'cache_size',
     description: 'cache_size_desc',
     placeholder: 'enter_cache_size',
-    validate: required,
+    validate: validateRequiredValue,
 },
 {
     name: 'cache_ttl_min',
     title: 'cache_ttl_min_override',
     description: 'cache_ttl_min_override_desc',
     placeholder: 'enter_cache_ttl_min_override',
-    max: 3600,
-    validate: maxValue3600,
+    max: SECONDS_IN_HOUR,
+    validate: validateMaxValue3600,
 },
 {
     name: 'cache_ttl_max',
@@ -49,8 +44,8 @@ const Form = ({
     const minExceedsMax = cache_ttl_min > cache_ttl_max;
 
     const INPUTS_FIELDS = getInputFields({
-        required,
-        maxValue3600,
+        validateRequiredValue,
+        validateMaxValue3600,
     });
 
     return <form onSubmit={handleSubmit}>
@@ -71,7 +66,7 @@ const Form = ({
                             disabled={processingSetConfig}
                             normalize={toNumber}
                             className="form-control"
-                            validate={[biggerOrEqualZero].concat(validate || [])}
+                            validate={[validateBiggerOrEqualZeroValue].concat(validate || [])}
                             min={0}
                             max={max}
                         />

diff --git a/client/src/components/Settings/Dns/Config/Form.js b/client/src/components/Settings/Dns/Config/Form.js
@@ -9,12 +9,11 @@ import {
     renderInputField,
     renderRadioField,
     renderSelectField,
-    required,
-    ipv4,
-    ipv6,
-    biggerOrEqualZero,
     toNumber,
 } from '../../../../helpers/form';
+import {
+    validateBiggerOrEqualZeroValue, validateIpv4, validateIpv6, validateRequiredValue,
+} from '../../../../helpers/validators';
 import { BLOCKING_MODES, FORM_NAME } from '../../../../helpers/constants';
 
 const checkboxes = [{
@@ -36,12 +35,12 @@ const checkboxes = [{
 const customIps = [{
     description: 'blocking_ipv4_desc',
     name: 'blocking_ipv4',
-    validateIp: ipv4,
+    validateIp: validateIpv4,
 },
 {
     description: 'blocking_ipv6_desc',
     name: 'blocking_ipv6',
-    validateIp: ipv6,
+    validateIp: validateIpv6,
 }];
 
 const getFields = (processing, t) => Object.values(BLOCKING_MODES)
@@ -77,7 +76,7 @@ let Form = ({
                     className="form-control"
                     placeholder={t('form_enter_rate_limit')}
                     normalize={toNumber}
-                    validate={[required, biggerOrEqualZero]}
+                    validate={[validateRequiredValue, validateBiggerOrEqualZeroValue]}
                 />
             </div>
         </div>
@@ -130,7 +129,7 @@ let Form = ({
                             component={renderInputField}
                             className="form-control"
                             placeholder={t('form_enter_ip')}
-                            validate={[validateIp, required]}
+                            validate={[validateIp, validateRequiredValue]}
                         />
                     </div>
                 </div>)}

diff --git a/client/src/components/Settings/Encryption/Form.js b/client/src/components/Settings/Encryption/Form.js
@@ -10,10 +10,8 @@ import {
     renderSelectField,
     renderRadioField,
     toNumber,
-    port,
-    portTLS,
-    isSafePort,
 } from '../../../helpers/form';
+import { validateIsSafePort, validatePort, validatePortTLS } from '../../../helpers/validators';
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
 import CertificateStatus from './CertificateStatus';
@@ -46,7 +44,8 @@ const clearFields = (change, setTlsConfig, t) => {
     };
     // eslint-disable-next-line no-alert
     if (window.confirm(t('encryption_reset'))) {
-        Object.keys(fields).forEach((field) => change(field, fields[field]));
+        Object.keys(fields)
+            .forEach((field) => change(field, fields[field]));
         setTlsConfig(fields);
     }
 };
@@ -158,7 +157,7 @@ let Form = (props) => {
                             type="number"
                             className="form-control"
                             placeholder={t('encryption_https')}
-                            validate={[port, isSafePort]}
+                            validate={[validatePort, validateIsSafePort]}
                             normalize={toNumber}
                             onChange={handleChange}
                             disabled={!isEnabled}
@@ -180,7 +179,7 @@ let Form = (props) => {
                             type="number"
                             className="form-control"
                             placeholder={t('encryption_dot')}
-                            validate={[portTLS]}
+                            validate={[validatePortTLS]}
                             normalize={toNumber}
                             onChange={handleChange}
                             disabled={!isEnabled}

diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
@@ -505,3 +505,5 @@ export const FORM_NAME = {
 };
 
 export const smallScreenSize = 767;
+
+export const SECONDS_IN_HOUR = 60 * 60;