Add ability data validations

package.json

@@ -22,7 +22,9 @@
   "files": [
     "/dist"
   ],
-  "dependencies": {},
+  "dependencies": {
+    "validator": "^10.11.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.2.2",

src/data-layer/helpers.js

@@ -1,5 +1,7 @@
 import moment from "moment";
 
+export const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/;
+
 export const formatDate = dateString => {
   return moment(dateString).format("YY-MM-DD, hh:mm:ss");
 };

src/data-layer/services/ability/validators.js

@@ -1,3 +1,7 @@
+import validator from "validator";
+
+import { EMAIL_REGEX } from "../../helpers";
+
 export const validateAbilityData = (ability, value) => {
   const errors = [];
   if (ability.type === "number") {
@@ -16,13 +20,32 @@ export const validateAbilityData = (ability, value) => {
       }
     }
   } else if (ability.type === "string") {
-    if (
-      ability.format === "date-time" &&
-      !/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\+\d{2}:\d{2}$/.test(value)
-    ) {
+    value = value.toString();
+    if (ability.format === "date-time" && !validator.isISO8601(value)) {
       errors.push("Not valid ISO8601 date-time");
+    } else if (ability.format === "email" && !EMAIL_REGEX.test(value)) {
+      errors.push("Not valid email");
+    } else if (
+      ability.format === "hostname" &&
+      !/^[a-z0-9]+([-.][a-z0-9]+)*\.[a-z]{2,}$/.test(value)
+    ) {
+      errors.push("Not valid hostname");
+    } else if (ability.format === "ipv4" && !validator.isIP(value, 4)) {
+      errors.push("Not valid ipv4");
+    } else if (ability.format === "ipv6" && !validator.isIP(value, 6)) {
+      errors.push("Not valid ipv6");
+    } else if (ability.format === "uri" && !validator.isURL(value)) {
+      errors.push("Not valid uri");
+    }
+    if (ability.maxLength && value.length > ability.maxLength) {
+      errors.push(`Must have a max length of ${ability.maxLength}`);
+    }
+    if (ability.minLength && value.length < ability.minLength) {
+      errors.push(`Must have a min length of ${ability.minLength}`);
+    }
+    if (ability.pattern && !validator.matches(value, ability.pattern)) {
+      errors.push(`Must match with pattern ${ability.pattern}`);
     }
   }
-  console.log(errors);
   return errors.length ? errors.join(". ") : null;
 };

src/data-layer/users/users/validators.js

@@ -1,8 +1,8 @@
 import { usersCollectionExactFiltered } from "./selectors";
 
-const NAME_REGEX = /^[a-z0-9_.-]*$/;
+import { EMAIL_REGEX } from "../../helpers";
 
-const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/;
+const NAME_REGEX = /^[a-z0-9_.-]*$/;
 
 export const isValidUserName = name => name.length > 4 && NAME_REGEX.test(name);
 

src/modules/ability-card/components/ability-card/AbilityAction.js

@@ -10,6 +10,7 @@ export class AbilityActionValidated extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      value: "",
       error: null,
       showError: false,
       isValid: false
@@ -22,16 +23,17 @@ export class AbilityActionValidated extends Component {
   handleChange(event, data) {
     const error = this.props.validateAbilityData(this.props.ability, data.value);
     this.setState(state => ({
+      value: data.value,
       error,
-      showError: state.showError ? !!error : false,
-      isValid: data.value.length && !error
+      showError: data.value.length > 0 && (state.showError ? !!error : false),
+      isValid: data.value.length > 0 && !error
     }));
   }
 
   handleBlur() {
     this.setState(state => ({
       ...state,
-      showError: !!state.error
+      showError: state.value.length > 0 && !!state.error
     }));
   }
 }
@@ -81,14 +83,23 @@ export class StringAction extends AbilityActionValidated {
     if (this.props.ability.enum) {
       return <SelectAction options={this.props.ability.enum} />;
     }
+    const type =
+      this.props.ability.format === "email"
+        ? "email"
+        : this.props.ability.format === "uri"
+        ? "url"
+        : "text";
     return (
       <Input
-        type="text"
+        type={type}
         placeholder="Insert value..."
         action
         fluid
         onChange={this.handleChange}
         onBlur={this.handleBlur}
+        error={this.state.showError}
+        maxLength={this.props.ability.maxLength}
+        minLength={this.props.ability.minLength}
       >
         <input />
         <Button type="submit" color="green" disabled={!this.state.isValid}>