+ client: add clients forms validation and cache findClients function

client/src/helpers/form.js

@@ -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);